Wiki Markup |
---|
{pagetree:root=@self|expandCollapseAll=true} 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 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=800900|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: } |