User Interface Explorer

Páginas filhas
  • Portlet

Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 92 Próxima »

Quando usar

Portlet representa um pedaço da interface que exibe um conjunto de informações que precisam ser visualizadas de forma rápida e simples, contendo normalmente:

  • Tabelas sumarizadas;
  • Itens sumarizados com totalizadores;
  • Gráficos;
  • Mapas;
  • Símbolos (Mensagens ou imagens de alerta).

Normalmente são utilizados no contexto de agregar informações que venham de diversas fontes.

Um portlet pode conduzir o usuário para uma visualização mais detalhada dos dados ou para uma funcionalidade que irá permitir o usuário executar uma ação de negócio.

  • Para apresentar na entrada do desktop, resumos das informações impactantes pro negocio do usuário (papel corrente), passando para o sistema (e não para o usuário) a responsabilidade extrair e organizar informações do seu interesse;
  • Para alertar ao usuário sobre itens críticos que precisam da sua atenção  (O que mudou ou está fora do padrão);
  • Para permitir ao usuário analisar e decidir sobre o resumo exibido;
  • Para apresentar ações possíveis sobre o resumo exibido;
  • Para extrair informações da grande base do ERP aquilo que é impactante e deveria da atenção do papel corrente.

Estrutura

Quadro (Canvas) - Container principal do componente que engloba os seguintes itens:

Comportamentos

  • Opção de ocultar, ajustar (redimensionar e mover), maximizar e minimizar;
  • Cabeçalho com PIN - fixar ou não o cabeçalho aberto na interface. Não fixado é exibido sobre a interface e fixado move a interface para baixo;
  • No rodapé é possível apresentar ícones, títulos e descrições do portlet, pode ser datas, valores de registro, faixas de itens ou grupos de infomações pré-especificadas;
  • Redimensionamento drag - ajuste de altura e largura do portlet;
  • Drag de portlet - altera o posicionamento do portlet em relação a interface;
  • Troca de Portlet - clicando sobre a barra de títulos do portlet e arrastando sobre outro portlet, estes trocarão de posicionamento automático. Clicando e precionando a tecla "Ctrl" juntamente, há possibilidade de arrastar um portlet e posicioná-lo sobre outro portlet;
  • Maximizar - acionando o botão maximizar localizado na barra de títulos ou através do duplo clique sobre a barra de títulos;
  • Restaurar - quando o portlet encontra-se maximizado, aparecerá na barra de títulos o botão restaurar;
  • Modo configurar aplicar - através do ícone ferramentas localizado no rodapé pode-se aplicar as configurações para visualização dos contúdos do portlet.

Boas Práticas

  • É possível inserir botões de configuração, conforme necessidades terão infomações relativas ao portlet a serem configurados. Poderá conter ou não áreas demonstrando gráficos, exemplos de modo lista ou outros modos que contenham informações relativas aos gráficos;
  • Portlets não devem conter apenas atalhos, devem trazer resumos;
  • No modo portlet pequeno as legendas e dados nas séries devem ser evitados dando preferência ao mouse over/tooltips;
  • Defina os estados dos portlets (pequeno, médio e grande).

Exemplo

Trocar para exemplo com atalhos

Unknown macro: {flash}

Reescrever conforme orientações do Richard em Laranja

Código fonte

Trocar para exemplo com atalhos

<?xml version="1.0" encoding="utf-8"?>
<Portlet xmlns="com.datasul.framework.ui.templates.portlet.*"
	width="100%" height="100%"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:df="com.datasul.meiu.components.date.*"
	xmlns:shortcut="com.datasul.meiu.components.shortcut.*"
	xmlns:view="com.datasul.meiu.portlet.states.view.*"
	headerVisibility="alwaysShow"
	headerIcon="@Embed('/assets/meiu/icons/coinstack.png')"
	creationComplete="startUp()" >

	<mx:Script>
		<![CDATA[

			[Bindable]
			public var _model:ExemploPortletModel = new ExemploPortletModel();

			[Bindable]
			public var _controller:ExemploPortletController;


			private function startUp():void {
				_controller = new ExemploPortletController(this);
			}
		]]>
	</mx:Script>
	<headerContent>
		<mx:Canvas height="100%" width="100%" horizontalScrollPolicy="off"
			verticalScrollPolicy="off">
			<mx:Label x="0" y="12" text="Emissão"/>
			<mx:Label x="0" y="30" text="Vencimento"/>
			<mx:Label x="50" y="12" id="printDateHeader" text="20/08/2007"
			fontWeight="bold"/>
			<mx:Label x="70" y="30" id="dueDateHeader" text="20/08/2008"
			fontWeight="bold"/>
		</mx:Canvas>
	</headerContent>

	<mx:ViewStack id="viewStack" left="0" right="0" height="100%" width="100%"
		creationPolicy="all">
		<view:ExemploPortletData id="viewData"/>
		<view:ExemploPortletConfiguration id="viewConfiguration"/>
		<view:ExemploPortletChart id="viewChart"/>
	</mx:ViewStack>
</Portlet>

Referências

Ver Também  

  • Sem rótulos