Aula 1.4 - Adicionando dados em uma aplicação Flex.

Requisitos

Introdução

Nessa aula você vai aprender como usar um arquivo XML para popular controles DropDownList e TextInput com dados dinâmicos obtidos remotamente. (Veja a figura 1)

Figura 1: exercício pronto.

Nessa aula você aprenderá:

I. Visualizando os dados de exemplo

1. Abra seu browser e navegue até o endereço: http://www.aprendofacil.com.br/curso/flex/arquivos/aula01/estados.xml

Você deverá ver o arquivo "estados.xml" no seu browser (figura 2).Repare a estrutura do arquivo.

Figura 2: Estrutura do arquivo xml remoto.

Neste exemplo, estados.xml é um arquivo estático. Contudo se você estiver usando uma aplicação no servidor você pode simplesmente fazer uma chamada a rotina de geração dinâmica de arquivos XML no servidor e mostrá-los em sua aplicação desktop ou web usando as mesmas técnicas vistas nesse exercício.

II. Recuperando dados do arquivo de exemplo

1. Abra o Flash Builder

2. Baixe e descompacte o arquivo ex1_04_inicial.zip e importe o arquivo ex1_04_inicial.fxp (File | Import Flex Project FXP)

3. Abra o arquivo ex1_04_inicial.mxml.

4. Na seção "Source" localize o bloco "<Declarations>"

5. Dentro do bloco Declarations crie um objeto HTTPService.

<fx:Declarations>
<s:HTTPService />
</fx:declarations>

6. Adicione ao objeto HTTPService uma identificação (id property) chamada "estadosService" e para a propriedade URL o valor de http://www.aprendofacil.com.br/curso/flex/arquivos/aula01/estados.xml

<fx:Declarations>
<s:HTTPService
id="estadosService"
url="http://www.aprendofacil.com.br/curso/flex/arquivos/aula01/estados.xml" />
</fx:Declarations>

7. Dentro da tag Application use o assistente de conteúdo para criar o evento "creationComplete" para a aplicação (Figura 3).

Figura 3: Usando a ferramenta de assistente de conteúdo para gerar declaração de evento creationComplete para o aplicativo.

Para usar o assistente de conteúdo inicie digitando as primeiras letras da propriedade ou evento desejado, em seguida use a janela que aparece para selecionar a propriedade ou evento dê duplo clique com o mouse ou pressione a tecla "Enter" (figura 3).

8. Para o valor do evento creationComplete digite estadosService.send().

O método estadosService.send() dirá ao objeto HTTPService para recuperar os dados XML da URL especificada.

9. Salve o arquivo.

III. Usando o Network Monitor para confirmar a recuperação de dados

Se quiser experimentar a versão Premium você deve fazer um backup de seus dados, desinstalar a versão Standard e em seguida instalar a versão Premium.

Clique aqui para comparar as duas versões

Nesta seção usaremos o Flash Builder 4 Network Monitor para ver os dados recuperados da chamada ao HTTPService.

1. Abra o Network Monitor (veja Figura 4).

Figura 4: Abrindo o painel Network Monitor.

2. Clique no botão Enable Monitor (veja Figura 5).

Figura 5: Habilitando o Network Monitor.

3. Clique no botão Run para executar a aplicação (Figura 6).

Figura 6: Clicando no botão Run para executar o aplicativo.

Você verá o browser abrir.

4. Minimize-o e retorne ao Flash Builder e dê um duplo clique na tab "Network Monitor" para maximizar a tela.

5. Selecione a URL da chamada ao HTTPService (veja Figura 7).

Figura 7: Selecionando o registro HTTPService.

6. Do lado direito da janela, clique na tab "Response".

7. Expanda a árvore de dados para revelar os dados obtidos.

Repare que a estrutura mostrada no Network Monitor bate com a do arquivo estados.xml que você viu no início da primeira seção (veja Figura 8).

Figura 8: Expandindo Response body na tab Response para visualizar dados dos Estados do Brasil.

8. Dê duplo clique na tab "Network Monitor" para minimizá-la.

IV. Mostrando os dados em controles

Nesta seção usaremos o objeto HTTPService para popular controles Flex com dados.

1. Localize o controle DropDownList dentro do primeiro FormItem container.

2. No controle DropDownList adicione uma propriedade "dataProvider" e ligue-a ao valor estadosService.lastResult.estados.estado.

A propriedade lastResult de "estadosService" do objeto HTTPService acessa um array de dados que você viu no Network Monitor. A outra parte da declaração estado.sigla usa a notação de ponto (dot notation) para acessar  e detalhar os dados XML e exibí-los no controle DropDownList.

<mx:FormItem label="Sigla do Estado:">
<s:DropDownList id="dropDownList" width="76"
dataProvider="{estadosService.lastResult.estados.estado}" />
</mx:FormItem>

3. Adicione a propriedade labelField com o valor lastResult.estados.estado.

...
<s:DropDownList id="dropDownList" width="76"
dataProvider="{estadosService.lastResult.estados.estado}"
labelField="sigla"/>
...

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

5. Clique no controle DropDownList e verá que o mesmo foi populado com os dados referente às siglas dos Estados Brasileiros (veja Figura 9).

Figura 9: Visualizando os dados dos Estados no controle DropDownList.

6. Retorne ao Flash Builder.

7. Dentro do bloco "Form" localize o container FormItem label="Nome do Estado".

8. Para a controle TextInput id="txt_nomeEstado" adicione a propriedade text ligando-a ao valor de dropDownList.selectedItem.nome.

A propriedade selectItem do DropDownList é usada para referenciar o objeto selecionado dentro do controle. Neste caso refere-se ao objeto estado. Acrescentando .nome para vincular o valor do nome e mostrá-lo no controle TextInput.

<mx:FormItem label="Nome do Estado:">

<s:TextInput id="txt_nomeEstado"
text="{dropDownList.selectedItem.nome}" />
</mx:FormItem>

9. Repita o passo 8 agora para vincular o valor referente ao nome da Capital do Estado. Para isso localize o TextInput "txt_nomeCapital e acrescente à propriedade text o codigo:

<s:TextInput id="txt_nomeCapital"
text="{dropDownList.selectedItem.capital}"/>

10. Repita o passo 9 agora para vincular o valor referente ao nome da Região brasileira a que pertence o Estado. Para isso localize o TextInput "txt_regiao e acrescente à propriedade text o codigo:

<s:TextInput id="txt_regiao"
text="{dropDownList.selectedItem.regiao}"/>

11. Repita o passo 10 agora para vincular o valor referente a quantidade de municípios que o Estado tem. Para isso localize o TextInput "txt_numeroMunicipios e acrescente à propriedade text o codigo:

<s:TextInput id="txt_numeroMunicipios"
text="{dropDownList.selectedItem.numeromunicipios}"/>

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

13. Selecione uma sigla de um Estado Brasileiro no controle DropDownList e você verá informações correspondentes (veja Figura 10).

Figura 10: Exercício pronto.

Nota: A rotina para os demais controles TextInput é a mesma. Para os demais controles TextInput os dados são:

População de 2000:
<s:TextInput id="txt_censo2000"
text="{dropDownList.selectedItem.populacao2000}"/>
População de 2010:
<s:TextInput id="txt_censo2010"
text="{dropDownList.selectedItem.populacao2010}"/>
Arrecadação de Tributos Federais em 2009:
<s:TextInput id="txt_arrecadacao2009"
text="{dropDownList.selectedItem.arrecadacao2009}"/>

Conhecimentos adquiridos

Neste tutorial você aprendeu como criar uma aplicação Flex e como navegar pelo espaço de trabalho do Flash Builder 4.

Agora já sabemos como responder, por exemplo as perguntas abaixo: