Portlet

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:

Barra de Título (1 Gerar HTML separado - 2 explicar comportamentos duplo clique)
1. Título: deve conter o nome da Entidade ou Título da Informação sendo visualizada;
2. Ícone Maximizar;
3. Ícone Opções: Explicar - menu (Exc.Ajuda/sobre)
4. Ícone Fechar.

Cabeçalho do Portlet

[UIE:Portlet - Conteúdo]
1. Gráficos;
2. [Listas];
3. Resumos;
4. Configurar.

[UIE:Portlet - Rodapé]

Ícone de Redimensionamento

Comportamentos

Reescrever conforme orientações do Richard em Laranja

Opção de ocultar, ajustar (redimensionar e mover), maximizar e minimizar.

Utilização do PIN, no qual fixa ou não o cabeçalho aberto na interface. Não fixado é exibido sobre a interface e fixado move a interface para baixo.(Existe uma descrição similar no Portlet - Cabeçalho. Devemos tomar uma decisão de ter ou não estes sub-componentes que fazem parte de um componente maior. Na verdade não existe uma decisão suportada pelo "Quando Usar" porque sempre que tenho um portlet, tenho um portlet cabeçalho como parte dele. Então estar separado por poder ou não ser adotado pelo usabilista em sua interface não o justifica como componente a parte. O outro critério deve ser facilidade de compreensão: meu componente-composto de partes está ficando muito difícil de descrever porque tem texto demais; senão trago as descrições que estão nos componentes-partes para dentro dele. Nesse caso não existiria portlet-cabeçalho, apenas portlet. E, finalmente, o potencial de estruturação e reuso: portlet-cabeçalho é parte de outros objetos compostos e por isso é melhor ser um componente separado para ser referenciado por vários componentes dos quais faz parte. Estas considerações valem para todos componentes.)

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.

Faltam vários comportamentos

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
nao áreas demonstrando gráficos, exemplos de modo lista ou outros modos que contenham informações relativas aos graficos.

Portlets não devem conter apenas atalhos, devem trazer resumos

Exemplo

Trocar para exemplo com atalhos

Unknown macro: {flash}

Reescrever conforme orientações do Richard em Laranja

Botões que ativam visão texto/gráfico continuam ativos mesmo quando aquela visão já está sendo exibida (PRTZ)
Similar para botão de configuração do portlet, mas poderia usar o fato de estar ativo para funcionar como toggle entre configurar e a última visão (ACMI)
Aplicar não volta ao modo de exibição do portlet (PRTZ, FEIM)

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

http://designinginterfaces.com/

Páginas filhas