...
Quando usar
Pode ser utillizado para monitorar aspectos de entidades internas e externas que servem para tomada de decisão e que levam o usuário de um determinado papel a agir.
- Para apresentar na entrada do desktop, resumos das informações impactantes para o negócio do usuário (papel corrente), passando para o sistema (e não para o usuário) a responsabilidade de extrair e organizar informações do seu interesse;
- Para extrair informações da grande base do ERP aquilo que é impactante e deveria contar com a atenção do papel corrente.
- 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.
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 para agregar informações que venham de diversas fontes do ERP ou mesmo fontes externas.
Um portlet deve conduzir o usuário para uma visualização mais detalhada dos dados ou para uma funcionalidade que irá permitir ao usuário executar uma ação de negócio.
Estrutura
Navegue nas áreas vermelhas
Quadro (Canvas) - Container principal do componente que engloba os seguintes itens:
- Portlet - Cabeçalho
Exibe informações de contexto ajudando a identificar o conteúdo que está logo abaixo: - Ícone da Funcionalidade;
- Totalizadores;
- Resumos de filtros
- Resumos ou orientações sobre as informações sobre o assunto tratado no conteúdo.
- Título - Deve conter o nome do Caso de Uso, tarefa sendo suportada na Interface, nome da Entidade ou Título da Informação sendo visualizada (SEM AÇÕES OU VERBOS);
- PIN - Fixa o cabeçalho para visualização;
- Filtros Rápidos;
- Filtros livres por palavra chave;
- Portlet - Área de conteúdo
Esta área portanto apresenta as informações para análise, acompanhamento e configuração dos dados apresentados, os tipos de informações que apresenta na área de conteúdo são: - Portlet - Lista;
- Portlet - Resumos;
- Portlet - Gráficos;
- Portlet - Configurar.
- Portlet - Atalhos contextuais
Para apresentar ações relacionadas sem que o usuário tenha que localizar em outro ponto, através de um link direto. - Portlet - Painel de ações no Rodapé
O rodapé é composto por uma barra que agrupa um conjunto de ações disponíveis para aquele assunto como configurar, lista, resumo gráfico e detalhar.
Comportamentos
- Estados - Os portlets devem considerar o tamanho corrente para exibir informações. Quando por exemplo tamanho mínimo (235 x 200 px) as informações devem respeitar estas restrições. Assim como em tamanhos maiores o portlet deve explorar os espaços disponíveis apresentando mais informações ou ampliando as anteriores (vide exemplo).
- Icone de 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 pressionando a tecla "Ctrl" juntamente, há possibilidade de arrastar um portlet e posicioná-lo sobre outro portlet;
Boas Práticas
- 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);
- Para títulos é importante utilizar títulos curtos com o nome da entidade, evite destacar muitas ações no portlet explorando o recurso do menu de opções no cabeçalho quando for necessário, verbos e gerundios.
Exemplo
| Marcação Wiki |
|---|
{flash:file=^Portlet_Meiu.swf|width=800|height=600} |
Código fonte
O componente de "Refresh" está disponível apenas sua estrutura visual.
Veja Também
| sdk_doc_footer |
|---|
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.
h2. Estrutura
Quadro (Canvas) - Container principal do componente que engloba os seguintes itens:
* [Barra de Título|UIE:Portlet - Barra de Título]
* [Cabeçalho do Portlet|UIE:Portlet - Cabeçalho|Cabeçalho do Portlet]
* [UIE:Portlet - Conteúdo]
** [Gráficos|UIE:Portlet - Gráficos|Gráficos]
** [Listas|UIE:Portlet - Lista|Listas]
** [Resumos|UIE:Portlet - Resumos|Resumos]
** [Configurar|UIE:Portlet - Configurar|Configurar]
* [UIE:Portlet - Rodapé]
* Ícone de Redimensionamento
h2. 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.({color:#ff6600}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.){color}
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
\\
h2. 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).
h2. Exemplo
(!) *Trocar para exemplo com atalhos*
\\
{flash:file=^portlet.swf|width=640|height=480}
(!) *Reescrever conforme orientações do Richard em Laranja*
* {color:#ff6600}Botões que ativam visão texto/gráfico continuam ativos mesmo quando aquela visão já está sendo exibida (PRTZ){color}
* {color:#ff6600}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){color}
* {color:#ff6600}Aplicar não volta ao modo de exibição do portlet (PRTZ, FEIM){color}
h2. Código fonte
(!) *Trocar para exemplo com atalhos*
{code}
<?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>
{code}
h2. Referências
* [http://designinginterfaces.com/]
h2. Ver Também
{sdk_doc_footer: } |
|---|
|