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 |
---|
Wiki Markup |
\\
h1. 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.
h1. Estrutura
* Cabeçalho
* Conteúdos
## Gráficos;
## Listas;
## Resumos;
## Configurar.
* Rodapé
## Ações padrão;
## Atalhos de Portlet.
h1. Comportamentos
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. 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.
h1. 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.
h1. Exemplo
\\
{flash:file=^portlet.swf|width=640|height=480}
h1. Código fonte
\\
{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}
h1. Referências
h1. Ver Também
* [Portlet Shortcut|UIE:Portlet Shortcut]
{sdk_doc_footer: } |
---|
|