Versões comparadas

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

...

  • 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...

Estrutura


A Tab apresenta uma estrutura que ocupa quase 80% da interface com os seguintes itens:

  • Área da tab Folder (cor de fundo e espaçamentos);
    Page Tree
    root@self
  • As tabs montam a trilha de interfaces abertas pelo usuário;
  • A primeira tab é a do papel;
  • 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
    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é
    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
    As animações são realizadas conforme o usuário abre ou fecha a janela, conforme descrito nos comportamentos.

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...

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...

Exemplo

Marcação Wiki
{flash:file=Pasta de interação (TabFolder)^TabFolder_Meiu2.swf|width=1000|height=750}

Código fonte


Bloco de código

< em desenvolvimento >

Referências

Veja Também

dts_pagetree
h1. Estrutura h1. Comportamentos h1. Boas Práticas h1. Exemplo \\ {flash:file=^TabFolder_Meiu.swf\|width=640\|height=480}\\ h1. 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} h1. Referências h1. Ver Também {sdk_doc_footer: }
sdk_doc_footer