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

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

dts_pagetree
\\ 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&nbsp; (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&nbsp;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 É&nbsp;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.&nbsp; 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] &nbsp; {sdk_doc_footer: }
sdk_doc_footer
Wiki Markup