Aula 4.1- Passando dados ao item renderers para exibição

 

Aula 4.1- Passando dados ao item renderers para exibição

 

Requisitos

 

Introdução

 

Nesse exercício você arranjará dados em um container DataGroup. Primeiro você trabalhará com simples cadeia de caracteres e em seguida com elementos de UI (User Interface). Depois você mostrará cadeia de caracteres e imagens em um item renderer (representante de item) que emprega uma função e uma avaliação condicional (Figura 1).

 

Figura 1: Visualizando a aplicação pronta.

 

Nessa aula você aprenderá:

 

I. Usar a classe DefaultItemRenderer

Nesta seção você usara a classe DefaultItemRenderer para arranjar um grupo de dados.

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

2. Abra o Flash Builder.

3. Importe o arquivo ex4_01_inicial.fxp.

4. Abra o arquivo ex4_01_inicial.mxml.

5. Localize o comentário Declarations

6. Entre o bloco de tags Declarations crie um conjunto de tags ArrayList

 

<fx:Declarations>
<s:ArrayList>

</s:ArrayList>
</fx:Declarations>

7. Para a coleção ArrayList, adicione a propriedade id com valor de estadosList.

<s:ArrayList id="estadosList">

</s:ArrayList>

9. Digite Brasília - DF para o valor da classe String.

<s:ArrayList id="estadosList">
<fx:String>Distrito Federal - DF</fx:String>
</s:ArrayList>

10. Copie as tags String e cole seis instâncias dentro da coleção ArrayList abaixo da primeira instância da classe String.

<s:ArrayList id="estadosList">
<fx:String>Distrito Federal - DF</fx:String>
<fx:String>Distrito Federal - DF</fx:String>
<fx:String>Distrito Federal - DF</fx:String>
<fx:String>Distrito Federal - DF</fx:String>
</s:ArrayList>

11. Rearranje as instâncias String coladas com os valores:

Distrito Federal, Goiás, Mato Grosso e Mato Grosso do Sul.

<s:ArrayList id="estadosList">
<fx:String>Distrito Federal - DF</fx:String>
<fx:String>Goiás - GO</fx:String>
<fx:String>Mato Grosso - MT</fx:String>
<fx:String>Mato Grosso do Sul - MS</fx:String>
</s:ArrayList>

12. Localize o controle Label abaixo do comentário de components UI.

13. Abaixo do controle Label, crie um componente DataGroup.

<s:Label text="Estados Brasileiros"
color="#00748D"
fontSize="24"/>
<s:DataGroup>
</s:DataGroup>

14. Para o componente Data Group adicione a propriedade  dataProvider e vincule-a ao valor da coleção ArrayList estadosList.

<s:DataGroup dataProvider="{estadosList}">
</s:DataGroup>

15. Salve o arquivo.

16. Rode a aplicação.

Você verá uma mensagem de erro. Não foi possível criar um item renderer para Amazonas - AM.

17. Retorne ao Flah Builder.

18. Para o componente DataGroup atribua  spark.skins.spark.DefaultItemRenderer como a classe  itemRenderer.

<s:DataGroup dataProvider="{estadosList}"
itemRenderer="spark.skins.spark.DefaultItemRenderer">
</s:DataGroup>

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

Observe que os nomes dos Estados na coleção ArrayList são mostrados no mesmo lugar (veja Figura 2). Todos os nomes de estados foram processados, mas como o layout utiliza componente DataGroup, cada nome de estado foi posicionado na propriedade x e y padrão, com valor zero. Isso causa o posicionamento dos nomes um sobre o outro.

Figura 2: Rodando a aplicação e vendo os dados usando a mesma propriedade x e y do componente DataGroup.

20. Retorne ao Flash Builder.

21. Entre as tags DataGroup, crie e configure a propriedade layout e atribua uma instância VerticalLayout.

<s:DataGroup dataProvider="{estadosList}"
itemRenderer="spark.skins.spark.DefaultItemRenderer">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:DataGroup>

22. Na tag VerticalLayout, adicione as propriedades paddingLeft e paddingTop ambas com valor de 25.

<s:layout>
<s:VerticalLayout paddingLeft="25" paddingTop="25" />
</s:layout>

23. Salve e rode a aplicação.

Você deve ver que os nomes dos estados são mostrados verticalmente abaixo do cabeçalho (veja Figura 3).

Figura 3: Rodando a aplicação e vendo os nomes dos Estados mostrados verticalmente um abaixo do outro.

 

II. Usando a classe DefaultComplexItemRenderer

 

Nesta seção você usará a classe DefaultComplexItemRenderer para representar imagens das bandeiras dos Estados brasileiros.

1. Retorne ao Flash Builder.

2. Localize a coleção ArrayList, aninhada dentro do bloco  de tags Declarations.

3. Abaixo da última instância String, crie um controle Image.

...
<s:ArrayList id="estadosList">
<fx:String>Distrito Federal - DF</fx:String>
<fx:String>Goiás - GO</fx:String>
<fx:String>Mato Grosso - MT</fx:String>
<fx:String>Mato Grosso do Sul - MS</fx:String>
</s:ArrayList>
<mx:Image />
</s:ArrayList>
...

 

4. No controle Image, adicione a propriedade source com valor de imagens/band-df.jpg.

...
<fx:String>Distrito Federal - DF</fx:String>
<mx:Image source="imagens/band-df.jpg"/>
</s:ArrayList>
...

 

5. Dentro da coleção ArrayList, copie o controle Image e cole três instâncias abaixo da primeira.

...
<mx:Image source="imagens/band_df.jpg"/>
<mx:Image source="imagens/band_df.jpg"/>
<mx:Image source="imagens/band_df.jpg"/>
<mx:Image source="imagens/band_df.jpg"/>
</s:ArrayList>
...

 

6. Na propriedade source substitua os nomes repetidos por  band_go.jpg, band_mt.jpg e band_ms.jpg.

...
<mx:Image source="imagens/band_df.jpg"/>
<mx:Image source="imagens/band_go.jpg"/>
<mx:Image source="imagens/band_mt.jpg"/>
<mx:Image source="imagens/band_ms.jpg"/>
</s:ArrayList>
...

 

7. Localize o componente DataGroup.

8. No componente DataGroup, reescreva  spark.skins.spark.DefaultComplexItemRenderer como o  itemRenderer.

<s:DataGroup dataProvider="{estadosList}"

itemRenderer="spark.skins.spark.DefaultComplexItemRenderer ">

<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:DataGroup>

9. Salve e rode a aplicação.

Você deve ver as imagens das bandeiras exibidas  verticalmente abaixo do cabeçalho (veja Figura 4).

Observe que os nomes dos Estados agora não são exibidos.

Figura 4: Rodando a aplicação e vendo imagens das bandeiras exibidas sem os nomes dos Estados.

 

III. Usando a função item renderer.

 

Nesta seção você usará uma função para determinar a forma correta de usar a classe item renderer para arranjar os dados.

1. Retorne ao Flash Builder.

2. Localize o componente DataGroup.

3. No componente DataGroup remova a propriedade itemRenderer e seu valor.

4. No componenente DataGroup adicione a propriedade  itemRendererFunction com valor de rendererFunction.

<s:DataGroup dataProvider="{estadosList}"
itemRendererFunction="rendererFunction">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:DataGroup>

Agora você criará uma função que testará qual o tipo de dados está sendo arranjado para cada elemento na coleção ArrayList. Lembre-se que esta função e chamada múltiplas vezes, uma vez a cada elemento de dados.

5. Localize o comentário de Script.

6. Abaixo do comentário crie um bloco de Script.

<!-- Script
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Script>
<![CDATA[

]]>
</fx:Script>

7. Dentro do bloco de Script crie uma função privada chamada rendererFunction que retorna informações sobre o tipo de dados para a classe ClassFactory.

private function rendererFunction():ClassFactory
{

}

8. Na função rendererFunction(), atribua um parâmetro chamado item do tipo de dados da classe Object.

private function rendererFunction
(item:Object):ClassFactory  {

}

O argumento item representa o elemento de dados atualmente sendo avaliado pelo método rendererFunction(). Se o dado for uma String então você usará a classe DefaultItemRenderer para processá-la. Se por outro lado, o dado é um elemento UI, então você usará a classe DefaultComplexItemRenderer para processá-la.

9. Dentro da função rendererFunction(), crie uma declaração if que avalie se o valor do parâmetro item é do  tipo String.

private function rendererFunction
(item:Object):ClassFactory
{
if(item is String)
{

}

}

10. Dentro da declaração if use a declaração return para criar uma nova instância da classe ClassFactory e processar o dado usando a classe DefaultItemRenderer. Use a ferramenta de assistente de contéudo de código para retornar a classe DefaultItemRenderer. Observe que a declaração import correspondente é gerada dentro do bloco de Script.

import spark.skins.spark.DefaultItemRenderer;
if(item is String)
{
return new ClassFactory(DefaultItemRenderer);
}

11. Abaixo da declaração if, crie uma declaração else.

if(item is String)
{
return new ClassFactory(DefaultItemRenderer);
}
else
{

}

12. Dentro da declaração else, use a declaração return para retornar uma nova isntância da classe ClassFactory e processar o dado usando a classe DefaultComplexItemRenderer. Use a ferramenta de assistente de contéudo de código para selecionar DefaultComplexItemRenderer como a classe a ser retornada e observe que a correspondente declaração import é gerada dentro do bloco de script.

import spark.skins.spark.DefaultComplexItemRenderer;
if(item is String)
{
return new ClassFactory(DefaultItemRenderer);
}
else
{
return new ClassFactory(DefaultComplexItemRenderer);
}

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

Você deve ver os nomes dos estados e as imagens das  bandeiras exibidas na ordem que são listadas dentro da coleção ArrayList (veja Figura 5).

Figura 5: Rodando a aplicação e vendo os dados exibidos a medida que são processados.

 

IV. Alterando a ordem de visualização dos objetos de dados.

 

Nesta seção você arranjará os objetos de dados na coleção ArrayList de forma que os nomes dos estados e sua respectiva bandeira sejam mostrados ordenados.

1. Retorne ao Flash Builder.

2. Dentro da coleção ArrayList aninhado dentro do bloco Declarations.

3. Dentro da coleção ArrayList, mova o controle Image para que fique localizado abaixo da respectiva tag String.

<s:ArrayList id="estadosList">
<mx:Image source="imagens/band_df.jpg"/>
<fx:String>Distrito Federal - DF</fx:String>
<mx:Image source="imagens/band_go.jpg"/>
<fx:String>Goiás - GO</fx:String>
<mx:Image source="imagens/band_mt.jpg"/>
<fx:String>Mato Grosso - MT</fx:String>
<mx:Image source="imagens/band_ms.jpg"/>
<fx:String>Mato Grosso do Sul - MS</fx:String>
</s:ArrayList>

4. salve e rode a aplicação.

Você deve ver que os nomes dos estados são mostrados acima das bandeiras respectivas (veja Figura 6).

Figura 6: Rodando a aplicação e vendo os nomes dos estados exibidos abaixo das imagens das bandeiras.

Conhecimentos adquiridos

Nesse exercício você aprendeu como usar as classes DefaultItemRenderer e DefaultComplexItemRenderer para processar dados em um componente DataGroup. Você tambem aprendeu a criar uma função para processar os dados.

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