Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Comentário: Migration of unmigrated content due to installation of a new plugin

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);
    Page Tree
    root@self
  • 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

dts_pagetree

...

sdk_doc_footer