Painel Agrupador

Quando usar

Para definir áreas, separadas do conteúdo, atribuindo para cada um contextos distintos.

Quando existe uma grande quantidade de conteúdo na página para facilitar a compreensão das informações, agrupando conteúdo similares que fazem sentido para o usuário e melhorando a arquitetura da informação.

• Para agrupamento de informações, criando vários contextos de agrupamento facilitando a identificação dos usuários nos conjuntos de informações;
• Para separar informações em grupos na interface;
• Para apresentar hierarquia das informações;
• Para associar Datagrid com Gridtools e apresentar totais;
• Para associar conteúdos com ações do contexto (do grupo);
• Para permitir redimensionamento entre grupos de informações.

Estrutura

A configuração do layout pode haver um ou vários agrupadores.
O Painel Agrupador apresenta sua estrutura com os seguintes objetos:

• Canvas
• ApplicationControlBar
• Título
• ControlBar
• linkButtons
• datasulLinkButton

Comportamentos

Com sua que podem ser fixos ou redimensionáveis.
Quando for redimensionável deve haver um ícone na área de título alinhando à esquerda onde é possível maximizar ou restaurar sua área.

Boas Práticas

Quando existir a necessidade de um dos Painéis Agrupadores ter ações é necessário adicionar uma ControlBar com tamanho de 30px de altura e com apenas linkButtons ou datasulLinkButton.
As ações que forem do contexto externo devem estar no rodapé da TabFolder e não do painel agrupador.

Exemplo

      <panel:SuperPanel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" 
                  xmlns:popupbutton="com.datasul.framework.ui.popupbutton.*" 
                  xmlns:view="com.datasul.framework.ui.view.*"
                  xmlns:panel="nl.wv.extenders.panel.*"
                  xmlns:help="com.datasul.framework.ui.help.*"         
                  id="superPanel"
                  resizable="true"


                  headerColors="[#fbfcfd,#c3d6e7]"
                  headerHeight="30"


                  
                  width="260" height="250" minWidth="260" minHeight="250" 
                  titleStyleName="portletHeader" layout="absolute"
                  horizontalScrollPolicy="off" verticalScrollPolicy="off"
                  borderThicknessBottom="0" borderThicknessTop="0" 
                  borderThicknessRight="0" borderThicknessLeft="0"
                  horizontalAlign="center" verticalAlign="middle"
                  xmlns:portlet="com.datasul.framework.portlet.*">

Referências

• http://designinginterfaces.com/

Veja Também