Alterando o layout do componente Dashboard – Parte 1

Colocado por Pablo Souza na(s) categoria(s): 1, 2009, 4, 6, Adobe, AR, arte, blog, class, classe, código, código fonte, Componente, Componentes, components, custom, demo, Download, exemplo, Flex, Flex 4, fonte, IE, image, int, layout, library, mg, MXML, O, on, RIA, Ria’s Geral, RTW, screen, skins, spark, state, TAT, UI, Widget, window, XML, XP em 02 15th, 2011 | Sem comentários

No post de ontem liberei o código fonte de um componente Spark customizado para Dashboard. Hoje vou mostrar como podemos alterar facilmente seu layout utilizando para isso as técnicas de skinning do Flex 4.
Quem fez o download do código fonte do projeto pôde observar que nesse exemplo temos 2 componentes Spark customizados: O componente PodManager e o componente PodWindow.

Hoje vou focar no componente PodManager, que é responsável por gerenciar as janelas PodWindow, definir as áreas de conteúdo onde podemos instancia-las e também por implementar as funcionalidades do dashboard. Abaixo podemos ver o componente PodManager sendo instanciado, sua classe skin e também as instâncias do componente PodWindow divididos em suas 2 áreas de conteúdo firstElements e secondElements :

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
    components:firstElements>
?
    <components:secondElements>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:secondElements>
?
components:PodManager>

O resultado é aquele que você já viu:

E se você quiser que as 3 PodWindow fiquem dispostas lado a lado no sentido horizontal? Faça isso:

<components:PodManager id="podManager"
    skinClass="com.rectius.examples.pod.assets.skins.PodManagerVerticalSkin"
    left="10" right="10" top="40" bottom="15">
?
    <components:firstElements>
        <view:ChartExpenses
          width="100%" height="100%" title="Expenses" />
        <view:ChartProfit
          width="100%" height="100%" title="Profit"/>
        <view:ChartWidget
          width="100%" height="100%" title="Widget"/>
    components:firstElements>
?
components:PodManager>

Veja pelo código acima que não foi preciso nem mesmo alterar o skin, bastou definir todas as intâncias de PodWindow na mesma área de conteúdo firstElements. Mas por quê as janelas ficaram dispostas horizontalmente e não verticalmente? Para isso vamos analisar o skin do componente PodManager:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:VGroup width="100%" height="100%">
        <s:HGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:HGroup id="secondContainer"
            width="100%" height="100%"/>
    s:VGroup>
?
s:Skin>

As PodWindow ficaram dispostas horizontalmente pois o container firstContainer é um HGroup. Vamos criar agora um novo skin chamado PodManagerHorizontalSkin para inverter esse comportamento:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    -- host component -->
    <fx:Metadata>
        [HostComponent("com.rectius.examples.pod.components.PodManager")]
    fx:Metadata>
?
    -- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    s:states>
?
    <s:HGroup width="100%" height="100%">
        <s:VGroup id="firstContainer"
            width="100%" height="100%"/>
        <s:VGroup id="secondContainer"
            width="100%" height="100%"/>
    s:HGroup>
?
s:Skin>

E o resultado será:

Vamos agora instanciar novamente elementos na área de conteúdo secondElements:

<components:firstElements>
    <view:ChartProfit
        width="100%" height="100%"
        title="Profit"/>
components:firstElements>
?
<components:secondElements>
    <view:ChartExpenses
        width="100%" height="100%"
        title="Expenses" />
    <view:ChartWidget
        width="100%" height="100%"
        title="Widget"/>
components:secondElements>