Wiki Markup |
---|
{dts_pagetree}
h2. Quando usar
* Para apresentar totais, agrupadores, controles de navegação entre registros e outras ferramentas do contexto (UC);
* Para identificar filtros aplicados na área de conteúdo;
* Para identificar registro selecionado referente aos conteúdos abaixo do cabeçalho(ex.pai x filho).
h2. Estrutura
* [Agrupador de Cabeçalho|UIE:Agrupador de Cabeçalho|Agrupador de Cabeçalho] (ocultáveis ou não);
* [Filtros rápidos|UIE:Filtros Rápidos|Filtros rápidos];
* [Totalizadores|UIE:Totalizadores|Totalizadores] (filtráveis ou não);
* [Filtro Simples|UIE:Filtro Simples|Filtro Simples];
* Tamanho mínimo: 60px de altura e para largura, extensão 100% do container.
h2. Comportamentos
* Área de cabeçalho deve suportar totalizadores, filtros e labels que se ajustam ao redimensionamento na largura;
* Para tab folder, o cabeçalho pode ser ocultável através de uma seta que fica disponível ao centro do cabeçalho.
h2. Boas Práticas
* Disponibilizar sempre que possível, utilizando a altura padrão.
h2. Exemplo
\\
{flash:file=Tab Folder do Desktop^TabFolder_Meiu2.swf|width=900|height=750}
\\
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
* [Agrupador de Cabeçalho |UIE: Agrupador de Cabeçalho | Agrupador de Cabeçalho]
* [Filtros Rápidos|UIE:Filtros Rápidos|Filtros Rápidos]
* [Totalizadores|UIE: Totalizadores|Totalizadores]
* [Filtro Simples|UIE:Filtro Simples|Filtro Simples]
{sdk_doc_footer: } |