Visão Geral
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
...
Comportamentos
Boas Práticas
Exemplo
Código fonte
Bloco de código |
---|
<?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>
|
Referências
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
...