Quando usar
Área destinada a configurações e modos de visualização dos conteúdos do Portlet.
- Para representar ações nativas do portlet para disponibilizar configurações acesso a modo gráfico, lista e resumo permitindo com a possibilidade de detalhar o assunto explorado no portlet.
Estrutura
- Configurar;
- Modo lista;
- Modo gráfico;
- Detalhar;
- Redimensionar.
Comportamentos
Através de botões, possibilita configurar as informações demonstradas no conteúdo do Portlet, alterar modo de visualização entre gráficos e listas.
Boas Práticas
- É opcional a utilização de portlet grafico;
- Procure ter sempre uma ação focal (focalButton);
- Ao haver muitas ações, deixe as mais focais em destaque (botões) e agrupe as subfocais em controles como "combobox";
- Quando houver uma ação (botão, link, ícone) que abre ou expande um outro painel, utilize a seta de abre/fecha do framework;
- O padrão de botões para janelas/folders de confirmação é "Confirmar" e "Cancelar".
Exemplo
Código fonte
Bloco de código |
---|
<?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>
<shortcut:PortletShortcut id="shortCut" bottom="0" left="0" right="0">
<shortcut:options>
<mx:ArrayCollection>
<mx:LinkButton id="lbtNew" label="Títulos Vencidos"
textAlign="center" labelPlacement="bottom"
icon="@Embed('/assets/icons/computer_32_hot.png')"/>
<mx:LinkButton id="lbtNew2" label="Títulos A Vencer"
textAlign="center" labelPlacement="bottom"
icon="@Embed('/assets/icons/computer_32_hot.png')"/>
<mx:LinkButton id="lbtNew3" label="Consultas"
textAlign="center" labelPlacement="bottom"
icon="@Embed('/assets/icons/computer_32_hot.png')"/>
<mx:LinkButton id="lbtNew4" label="Adicionar"
textAlign="center" labelPlacement="bottom"
icon="@Embed('/assets/icons/computer_32_hot.png')"/>
</mx:ArrayCollection>
</shortcut:options>
</shortcut:PortletShortcut>
</Portlet>
|
Referências
Ver Também