...
Quando
...
usar
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
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
| 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
| sdk_doc_footer |
|---|
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_Meiu1.swf|width=800|height=600}
\\
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: } |
|---|
|