Aula 4.2- Mostrando dados dinâmicos em item renderer personalizado

Aula 4.2- Mostrando dados dinâmicos em item renderer personalizado

Requisitos

Introdução

Nesse exercício você criará um item renderer e usará ele para mostrar dados dos Estados brasileiros como mostrado na Figura 1.

Figura 1: Visualizando a aplicação pronta.

Nessa aula você aprenderá como:

I. Criando um item renderer inline.

Nesta seção você usara a linguagem MXML para criar um item renderer personalizado para um container DataGroup.

1. Baixe o arquivo ex4_02_inicial.zip se ainda não baixou e descompacte-o em seu computador.

2. Abra o Flash Builder.

3. Importe o arquivo ex4_02_inicial.fxp.

4. Abra o arquivo ex4_02_inicial.mxml.

5. Abaixo do comentário Declarations, localize o bloco <fx:Declarations>.

6. Dentro do bloco Declarations, observe a tag ArrayList e a tag aninhada Object. Ela representa os dados que estão sendo usados como provedor de dados.

Nota: Você está usando uma instância ArrayList ao invés de uma instância ArrayCollection para este exemplo, pois os dados não serão atualizados e, portanto, não precisam do overhead das ligações na classe ArrayCollection.

<s:ArrayList id="estadoList">
<fx:Object nomeDoEstado="Acre,"
nomeDaCapital="Rio Branco"
imagemDaBandeira="images/band_ac.jpg"/>
<fx:Object nomeDoEstado="Alagoas,"
nomeDaCapital="Maceió"
imagemDaBandeira="images/band_al.jpg"/>
<fx:Object nomeDoEstado="Amazonas,"
nomeDaCapital="Manaus"
imagemDaBandeira="images/band_am.jpg"/>
<fx:Object nomeDoEstado="Amapá,"
nomeDaCapital="Macapá"
imagemDaBandeira="images/band_ap.jpg"/>
<fx:Object nomeDoEstado="Bahia,"
nomeDaCapital="Salvador"
imagemDaBandeira="images/band_ba.jpg"/>
<fx:Object nomeDoEstado="Ceará,"
nomeDaCapital="Fortaleza"
imagemDaBandeira="images/band_ce.jpg"/>
</s:ArrayList>

7. Localize o componente DataGroup.

8. Dentro das tags do componente DataGroup, abaixo das tags da propriedade layout, crie um conjunto de tag para a propriedade itemRenderer

<s:DataGroup dataProvider="{estadoList}">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:itemRenderer>

</s:itemRenderer>
</s:DataGroup>

9. Entre as tags itemRendererm crie um conjunto de tag Component.

<s:itemRenderer>
<fx:Component>

</fx:Component>
</s:itemRenderer>

10. Entre o bloco Component, crie um bloco de classe itemRenderer

<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>

</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>

Lembrando que itemRenderer (i em letra minúscula) é uma propriedade da classe DataGroup enquanto que ItemRenderer (I maiúsculo) e uma classe que você está instanciando.

11. Entre as tags ItemRenderer crie um bloco de tags states.

<fx:Component>
<s:ItemRenderer>
<s:states>

</s:states>
</s:ItemRenderer>
</fx:Component>

12. Entre o bloco states, crie uma instância State e atribua normal como o nome.

<s:states>
<s:State name="normal"/>
</s:states>

13. Entre as tags ItemRenderer, abaixo das tags do bloco states, crie um bloco BorderContainer.

<s:ItemRenderer>
<s:states>
<s:State name="normal"/>
</s:states>
<s:BorderContainer>

</s:BorderContainer>
</s:ItemRenderer>

14. Para a tag de abertura BorderContainer, adicione a propriedade borderWeight com um valor de 2, a propriedade backgroundColor com um valor de #cccccc, a propriedade top com um valor de 5 e as propriedades height (altura) e width (largura) com valores de 100%.

<s:BorderContainer borderWeight="2"
backgroundColor="#cccccc"
top="5" height="100%" width="100%">
</s:BorderContainer>

15. Dentro do bloco BorderContainer, crie um bloco layout.

<s:BorderContainer borderWeight="2"
backgroundColor="#cccccc"
top="5" height="100%" width="100%">
<s:layout>

</s:layout>
</s:BorderContainer>

16. Dentro do bloco layout, adicione uma tag VerticalLayout.

<s:BorderContainer borderWeight="2"
backgroundColor="#cccccc"
top="5" height="100%" width="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:BorderContainer>

17. Dentro do bloco BorderContainer, abaixo do bloco de layout, crie um controle Label.

<s:BorderContainer borderWeight="2"
backgroundColor="#cccccc"
top="5" height="100%" width="100%">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Label />
</s:BorderContainer>

18. Para o controle Label, adicione a propriedade text e vincule data.nomeDoEstado e data.nomeDaCapital como o valor.

<s:Label text="{data.nomeDoEstado} {data.nomeDaCapital}"/>

Dados para o objeto atual que está sendo avaliado é referenciado na propriedade de dados do item renderer.

19. Dentro do bloco BorderContainer, abaixo do controle Label crie um controle Image.

...
<s:Label text="{data.nomeDoEstado} {data.nomeDaCapital}"/>
<mx:Image />
</s:BorderContainer>

20. No controle Image adicione a propriedade source com valor de vinculação data.imagemDaBandeira.

<mx:Image source="{data.imagemDaBandeira}" />

21. Salve e rode a aplicação.

Você deve ver imagens das bandeiras e nome dos estados mostrados com uma borda e cor no fundo como mostrado na Figura 2. Observe contudo que as bandeiras não estão centralizadas dentro do item renderer.

Figura 2: Rodandoa a aplicação e vendo as bandeiras usando inline item renderer.

22. Retorne ao arquivo ex4_02_inicial.mxml.

23. Localize o bloco BorderContainer.

24. Dentro do bloco de layout, na tag VerticalLayout, adicione a propriedade horizontalAlign com valor de center.

<s:BorderContainer borderWeight="2" backgroundColor="#acacac"
top="5" height="100%" width="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<s:Label text="{data.nomeDoEstado} {data.nomeDaCapital}"/>
<mx:Image source="{data.imagemDaBandeira}" />
</s:BorderContainer>

25. Salve o arquivo e rode a aplicação.

Você deve ver os nomes do estados e das bandeiras agora centralizados horizontalmente em cada item renderer (veja Figura 3).

Figura 3: Nome de estados e bandeiras centralizados horizontalmente no item renderer.

26. Retorne ao exercicio ex4_02_inicial.mxml.

27. Dentro do bloco BorderContainer, no bloco de layout, para a tag VerticalLayout, adicione a propriedade verticalAlign com valor de middle.

<s:BorderContainer borderWeight="2" backgroundColor="#acacac"
top="5" height="100%" width="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:Label text="{data.nomeDoEstado} {data.nomeDaCapital}"/>
<mx:Image source="{data.imagemDaBandeira}" />
</s:BorderContainer>

28. Salve o arquivo e rode a aplicação.

Você deve ver os nomes dos estados e das bandeiras centralizados horizontal e verticalmente no item renderer (veja Figura 4).

Figura 4: Rodando a aplicação e vendo informações centralizadas dentro do item renderer.

II. Criando um arquivo de classe de componente item renderer.

Nesta seção você criará um componente personalizado para usá-lo como um item renderer.

1. Retorne ao Flash Builder.

2. Dentro do Package Explorer, clique com o botão direito sobre a pasta src e selecione New > MXML Component (veja Figura 5).

Figura 5: Criando um novo componente MXML.

3. Na caixa de diálogo New MXML Component, para Package digite componentes e para Name digite EstadoItemRenderer.

4. No campo "Based on" clique no botão Browse.

5. Dentro da caixa Based on, digite item e selecione a classe ItemRenderer como mostrado na Figura 6.

Figura 6: Selecionando a classe ItemRenderer.

6. Clique OK.

7. Dentro da caixa de diálogo New MXML COmponent, delete os valores das propriedades width e height.

Sua caixa de diálogo New Component deve se parecer com a da Figura 7.

Figura 7: Caixa de diálogo New Component

8. Clique Finish.

O arquivo EstadoItemRenderer.mxml sera aberto no editor.

9. Alterne para o arquivo ex4_02_inicial.mxml.

10. Localize o componenete DataGroup.

11. Dentro do componente DataGroup, recorte o código entre as tags ItemRenderer.

12. Retorne ao arquivo EstadoItemRenderer.

13. Abaixo da tag Declarations, cole o codigo copiado do passo 11.

Ainda no arquivo EstadoItemRenderer.mxml delete as tags: <s:itemRenderer> e </s:itemRenderer>, <fx:Component> e </fx:Component> e <s:ItemRenderer> e </s:ItemRenderer>. O conteúdo deve dicar idêntico ao abaixo:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="normal" />
</s:states>
<s:BorderContainer borderWeight="2" backgroundColor="#acacac"
top="5" height="100%" width="100%">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:Label text="{data.nomeDoEstado} {data.nomeDaCapital}"/>
<mx:Image source="{data.imagemDaBandeira}" />
</s:BorderContainer>
</s:ItemRenderer>

14. Salve o arquivo.

15. Retorne ao arquivo ex4_02_inicial.mxml.

16. Dentro do componente DataGroup, delete o bloco itemRenderer e seu conteúdo;

17. Para o componenete DataGroup adicione a propriedade itemRenderer com o valor de componentes.EstadoItemRenderer.

<s:DataGroup dataProvider="{estadoList}"
itemRenderer="componentes.EstadoItemRenderer">
<s:layout>
<s:VerticalLayout/>
</s:layout>

</s:DataGroup>

18. Salve o arquivo e rode a aplicação.

Você deve ver a aplicação aparecer como antes, como observado na Figura 8.

Figura 8: Rodando a aplicação e vendo que nada foi alterado.

Conhecimentos adquiridos

Nesse exercício você aprendeu como criar um componente item renderer para um grupo de dados.

Agora você está apto a responder as perguntas abaixo: