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);
  • 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

Unknown macro: {flash}

Código fonte


< em desenvolvimento >

Referências

Veja Também

\\ h6.Navegação {pagetree:root=@home|startDepth=2|expandCollapseAll=true}