Histórico da Página

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


{imagemap:name=[^desktop-nav-tab.jpg]}
{map:link=[Pasta de interação (TabFolder)]|shape=rect|coords=125,49,461,69}
{map:link=[Pasta Principal (TabFolder Home do Papel)]|shape=rect|coords=12,49,124,69}
{imagemap}

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);
{pagetree:root=@self}
* As tabs montam a trilha de interfaces abertas pelo usuário;
* A primeira tab é a do papel;
* *[*Cabeçalho*|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*|Á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é*|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*|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. {imagemap:name=[Pasta de interação (TabFolder)^tab-folder-desktop-cont.jpg]}
{map:link=[Aba de Pasta (TabFolder)]|shape=rect|coords=122,63,236,81|title='Click nas áreas vermelhas para navegar'}
{map:link=[Cabeçalho]|shape=rect|coords=10,87,583,119|title='Click nas áreas vermelhas para navegar'}
{map:link=[Área de Conteúdo]|shape=rect|coords=11,131,586,374|title='Click nas áreas vermelhas para navegar'}
{map:link=[Painel de ações no Rodapé]|shape=rect|coords=9,381,586,402|title='Click nas áreas vermelhas para navegar'}{imagemap}

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=Pasta de interação (TabFolder)^TabFolder_Meiu2.swf|width=1000|height=750}
\\

h2. Código fonte

\\
{code}
< em desenvolvimento >
{code}

h2. Referências

* [http://designinginterfaces.com/]

h2. Veja Também

* [Aba de Pasta (TabFolder)]
* [Cabeçalho|Cabeçalho|Cabeçalho]
* [Área de Conteúdo|Área de Conteúdo|Área de Conteúdo]
* [Painel de ações no Rodapé|Painel de ações no Rodapé|Painel de ações no Rodapé]

{dts_pagetree}
{sdk_doc_footer: }