User Interface Explorer

Páginas filhas
  • Aba de Pasta (TabFolder)

Versões comparadas

Versão antiga 9

changes.mady.by.user Rafael Rese

Gravado em

comparado com

Nova versão Atual

changes.mady.by.user Usuário desconhecido (zenon.garcia)

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Comentário: Migration of unmigrated content due to installation of a new plugin

...

Quando usar

  • Aba pertence a tabfolder e não pode ser desvinculada da interface.

Estrutura

  • Título: Apresenta a tarefa, entidade ou caso de uso sendo coberto na interface;
  • Ícone: Representação ilustrada da funcionalidade;
  • Ajuda: Apresenta um ícone que direciona para o tutorial diretamente no contexto da situação atual.
  • Ferramentas Auxiliares:
    • Opções: Menu drop down com opções da Tabfolder não focais ou que podem ser acionadas sob demanda;
    • Maximizar/restaurar: expande o tamanho da tabfolder ocupando ao máximo os espaços diponíveis na interface, ocultando barras de ferramentas e áreas adicionais. O contrário acontece quando acionada a opção restaurar;
    • Fechar: Encerra ou descarrega da interface a funcionalidade em questão

Comportamentos

  • Além dos cliques normais nos ícones, o duplo clique maximiza e restaura a tabfolder ocultando área laterais
  • O título da primeira aba é o nome do papel corrente e é um menu drop down que permite alternar para outros papéis que o usuário acumula na empresa.
  • Ao acionar o ícone opções um menu drop down é apresentado.
  • Quando existe abertura de várias tabfolders as abas são agrupadas na interface até ocupe o limite da interface gerando scroll horizontal dinâmico.

Exemplo

Image Added

Referências

dts_pagetree
 usar

* Para disponibilizar conteúdos mais focais, sem a utilização de janelas.

h2. Estrutura

* Título
** Para representar o assunto contido na folder;
** Para diferenciar as diversas abas.

* Ícones

* Ferramentas Auxiliares

h2. Comportamentos


h2. Boas Práticas


h2. Exemplo

\\

{flash:file=^TabFolder_Meiu.swf\|width=800\|height=480}

h2. Código fonte

\\
{code}
<?xml version="1.0" encoding="utf-8"?>
<view:ViewPresentationModel width="100%" height="100%"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:view="com.datasul.framework.ui.templates.view.*"

	creationCompleteEffect="Fade"
	resizeEffect="Resize"
	moveEffect="Move"

	initController="com.datasul.meiu.tabfolder.ExemploTabFolderController"
	initModel="com.datasul.meiu.tabfolder.ExemploTabFolderModel"

	initialize="_controller.init()"
	layout="absolute"
	title="Teste"
	icon="@Embed('/assets/icons/hot/user_16.png')"
	headerIcon="@Embed('/assets/icons/hot/user_32.png')">
	<view:headerContent>
		<mx:ApplicationControlBar width="100%" height="60">
			<mx:HBox width="100%" height="100%" horizontalAlign="center"
			verticalAlign="middle" horizontalGap="20">
				<mx:HBox height="35" styleName="boxAgrupador"
			horizontalAlign="center" verticalAlign="middle">
					<mx:LinkButton label="Salvar"
icon="@Embed(source='/assets/icons/hot/close_a_16.png')" toolTip="Salva as configurações do Desktop"/>
					<mx:LinkButton label="Carregar"
icon="@Embed(source='/assets/icons/hot/close_a_16.png')" toolTip="Carrega as opções do Desktop"/>
					<mx:LinkButton label="Restaurar"
icon="@Embed(source='/assets/icons/hot/close_a_16.png')" toolTip="Restaura as configurações do Desktop"/>
					<mx:LinkButton label="Organizar"
icon="@Embed(source='/assets/icons/hot/close_a_16.png')" toolTip="Organiza os itens do Desktop"/>
				</mx:HBox>
				<mx:Spacer width="100%"/>
				<mx:HBox height="35" styleName="boxAgrupador"
horizontalAlign="center" verticalAlign="middle">
					<mx:LinkButton label="Visualizar"
icon="@Embed(source='/assets/icons/arrows/down.png')" toolTip="Define o zoom no Desktop"/>
				</mx:HBox>
				<mx:HBox height="35" styleName="boxAgrupador"
horizontalAlign="center" verticalAlign="middle" horizontalGap="0">
					<mx:LinkButton label="-"
textDecoration="none" toolTip="Diminuir zoom"/>
					<mx:HSlider width="70" tickInterval="2" toolTip="Zoom"/>
					<mx:LinkButton label="+" textDecoration="none"
toolTip="Aumentar zoom"/>
				</mx:HBox>
			</mx:HBox>
		</mx:ApplicationControlBar>
	</view:headerContent>

	<mx:Binding source="model" destination="_model" />
	<mx:Binding source="controller" destination="_controller" />

	<mx:Script>
		<![CDATA[

			[Bindable]
			private var _model:ExemploTabFolderModel;

			[Bindable]
			private var _controller:ExemploTabFolderController;

			[Bindable]
			public var PopUpMenuButtonDataProvider:Array = [
                {label: "Item A"},
                {label: "Item B"},
                {label: "Item C"}
            ];

		]]>
	</mx:Script>
	<mx:VBox width="100%" height="100%" styleName="boxAgrupador" verticalGap="0">
	<mx:Canvas width="100%" height="100%">
			<mx:DataGrid width="100%" height="100%"
dataProvider="{PopUpMenuButtonDataProvider}"/>
		</mx:Canvas>
		<mx:ControlBar width="100%" height="40">
			<mx:Button label="focal" styleName="focalButton"/>
			<mx:Button label="normal"/>
			<mx:PopUpMenuButton showRoot="true"
dataProvider="{PopUpMenuButtonDataProvider}"/>
		</mx:ControlBar>
</mx:VBox>
</view:ViewPresentationModel>
{code}

h2. Referências


h2. Ver Também

{sdk_doc_footer: }
sdk_doc_footer