User Interface Explorer

Páginas filhas
  • Portlet - Cabeçalho

Versões comparadas

Versão antiga 33

changes.mady.by.user Rafael Rese

Gravado em

comparado com

Nova versão 34

changes.mady.by.user Rafael Rese

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Page Tree
rootUIE:@self

Quando usar

  • Para identificar filtros aplicados na área de conteúdo;
  • Para identificar as Entidades...;
  • Para orientar usuário sobre o conteúdo e ações do portlet...

No cabeçalho é possível apresentar ícones, títulos e descrições do portlet, datas, totais, faixas ou grupos de infomações pré-especificadas;

Estrutura

  • Área do cabeçalho - fundo azul...
  • PIN - Que fixa o cabeçalho;
  • Icone - Para representar o portlet;
  • Texto - Pode conter uma descrição ou uma informação referente a configuração;
  • Ícone da Funcionalidade (opcional);
  • Título (opcional) - deve conter o nome da Entidade ou Título da Informação sendo visualizada;
  • Resumo dos critérios sendo filtrados (opcional porém recomendado).

Comportamentos

  • O cabeçalho é ocultável pelo link no topo extremo do mesmo
  • PIN de Cabeçalho - usado para fixar ou liberar o cabeçalho aberto na interface. Não fixado é exibido em camada sobre os dados; já fixado move os dados para posição abaixo do cabeçalho;

Boas Práticas

  • O texto apresentado no cabeçalho do portlet deve ser objetivo e breve devido ao seu espaço.
  • Lembre-se das restrições do tamanho mínimo 235 x 200 px para evitar scrollbars

Exemplo

  • HTML
    <A href="http://sdk.datasul.com.br/confluence/download/attachments/4947972/Portlet_Meiu.swf?version=2" target="_blank">Portlet</A>

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

A desenvolver 

sdk_doc_footer