Wiki Markup |
---|
{pagetree:root=@self|expandCollapseAll=true} h2. Quando usar * Para conduzir ações ou tarefas consideradas focais ou impactantes para o negócio; * Geralmente para interfaces que são metas de nível usuário (atores e metas); * Para ter interfaces paralelas (instâncias) sem ser modal (sem travar outras interfaces); * Para apresentar painéis de portlets e agrupadores; * Para a maioria das interfaces como consultas, comparações, cadastros... h2. Estrutura * Área da tab Folder (cor de fundo e espaçamentos); {pagetree:root=@self} * As tabs montam a trilha de interfaces abertas pelo usuário; * A primeira tab é a do papel; * *[*Cabeçalho*|UIE:Cabeçalho|Cabeçalho]* No cabeçalho estará disposto um ícone e titulo idêntico da barra. Também nessa área pode estar disposto mecanismos de busca, totalizadores e informações de cabeçalho referente ao assunto tratado no conteúdo. ** Ícone da Funcionalidade (opcional); ** Título - Deve conter o nome do Caso de Uso ou tarefa sendo suportada na Interface; ** Agrupador de Cabeçalho; ** Filtros Rápidos; ** Totalizadores; ** Filtro Simples. * *[*Área de Conteúdo*|UIE:Área de Conteúdo|Área de Conteúdo]* O conteúdo comporta um conjunto de informações referente ao contexto utilizado no momento corrente. ** Painel Agrupador com Data Grid; ** Formulários; ** DataGrid; ** Cadastros CRUD; ** Gráficos. * *[*Painel de ações no Rodapé*|UIE:Painel de ações no Rodapé|Painel de ações no Rodapé]* O rodapé é composto por uma barra que agrupa um conjunto de ações disponíveis para aquele assunto. Um dos botões deve ser o que tem a maior focalidade, seguindo a prioriodade da esquerda para a direita. ** Ação Focal; ** Ações Normais; ** Ações Subfocais. * [*Animações/Transições básicas*|UIE:Estados e Transições|Animações/Transições básicas] As animações são realizadas conforme o usuário abre ou fecha a janela, conforme descrito nos comportamentos. h2. Comportamentos * A primeira Tab não é fechável e traz os portlets iniciais... * Lembre-se de dar retorno ao usuário ao entrar em processamento ou carga... * Preferencialmente "trave" apenas a tab em processamento... h2. Boas Práticas * Evite utilizar tab folders para interfaces com poucas informações e ações pouco impactantes para o negócio; * Limite de tamanho de títulos...; * Lembre-se que será maximizado...; * Lembre-se de testar em 800x600...; * Cabeçalhos são opcionais... h2. Exemplo \\ {flash:file=^TabFolder_Meiu2.swf|width=800900|height=600700} \\ 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 * [http://designinginterfaces.com/] h2. Ver Também * [Aba|UIE:Aba|Aba] * [Cabeçalho|UIE:Cabeçalho|Cabeçalho] * [Área de Conteúdo|UIE:Área de Conteúdo|Área de Conteúdo] * [Painel de ações no Rodapé|UIE:Painel de ações no Rodapé|Painel de ações no Rodapé] {sdk_doc_footer: } |