Aula 2.9.1 - Usando o Assistente Data Services para conexão com um XML Service.

Aula 2.10 - Usando o Assistente Data Services para conexão com um XML Service.

Requisitos

Introdução

Neste exercício, você usará o assistente "Flash Builder Data Services" para se conectar a um XML Service remoto e gerar classes value object. Você vai então utilizar uma dessas classes para criar uma série de instâncias de "empregados" e preencher o pedido de requisição de uso de Veículos da empresa fictícia de nossos exemplos com esses dados.

Em exercícios anteriores, você aprendeu sobre as classes value objects e criação de modelos com tipo de dados . Este exercício apresenta-lhe  característica do Flash Builder que pode ajudá-lo na etapa de criação das classes de value object.

Nessa aula aprenderemos como:

I. usando o assistente Flash Builder para se conectar a um XML service.

Nota: O assistente pode criar conexões HTTP, web service e conexões remotas/AMF (veja Figura 1). Escolhemos trabalhar com XML Service neste exercício, mas você pode  usar os conhecimentos adquiridos até aqui e conectar-se usando opção Web Service ou AMF.

1. Baixe e descompacte o arquivo ex2_10_inicial.zip.

2. Abra o Flash Builder e importe o arquivo ex2_10_inicial.fxp.

3. Selecione Data > Connect to XML (veja Figura 1).

Figura 1: selecionando Data > Connect to XML.

4. Na caixa de diálogo Connect to Data/Service em XML Source marque URL e digite/cole o endereço

http://www.aprendofacil.com.br/curso/flex/arquivos/aula210/xml/empregados.xml.

Clique no botão Invoke. Marque Is Array?

Figura 2: Informando URL do arquivo XML.

5. Clique em Finish

Certifique-se de que foi gerado os campos de acordo com a Figura 3.

Figura 3: Vendo os campos gerados e clicando em Finish.

7. Clique em Finish.

Você deve ver a tab Data/Service com informações sobre o serviço (veja Figura 4).

Figura 4: Visualizando o painel Data/Services

II. Examinando a geração da classe value object.

Nesta seção você vai ver o value object para os dados do empregado que o Flash Builder criou.

1. no painel Package Explorer, expanda a pasta (pacote) "ValueObjects" para revelar seu conteúdo (veja Figura 5).

Figura 5: Expandindo a pasta ValueObjects.

2. Dê duplo clique no arquivo _Super_Empregado.as para abrí-lo.

3. Dentro do arquivo, localize as propriedades de classe na linha 38 (veja Figura 6). Estas propriedades foram criadas do objeto Employees no servidor e representam nós do arquivo XML existentes no servidor. Você pode usar estas propriedades para criar tipos de dados compatíveis com o Ex2_10 service.

Figura 6: Localizando propriedades de classe.

III. Usando a classe value object para criar modelos com tipo de dados.

Nesta seção você usará um loop para popular um ArrayCollection com value objects "Empregados".

1. No painel Package Explorer, abra o arquivo ex2_10_inicial.mxml.

2. Dentro do bloco de script, localize a função employeeService_resultHandler().

3. Dentro do bloco de script crie uma variável local chamada dadosDoEmpregado do tipo da classe ArrayCollection.

protected function employeeService_resultHandler(event:ResultEvent):void

{

var dadosDoEmpregado:ArrayCollection;

}

4. Configure a variável dadosDoEmpregado com o valor da propriedade event.result.

protected function employeeService_resultHandler(event:ResultEvent):void

{
var dadosDoEmpregado:ArrayCollection = event.result;
}

5. Use o operando as para converter o valor event.result à classe ArrayCollection.

protected function employeeService_resultHandler(event:ResultEvent):void
{
var dadosDoEmpregado:ArrayCollection = event.result as ArrayCollection;
}

6. Abaixo da variável dadosDoEmpregado, declare uma variável local chamada empregado e use o assistente de conteúdo para atribuir a essa variável o tipo de dados da classe personalizada "Empregado"

(veja Figura 7).

Figura 7: Criando uma variável local e usando o assistente de conteúdo para atribuir o tipo de dados "Empregado".

7. Abaixo da variável local empregado crie um loop for each

protected function employeeService_resultHandler(event:ResultEvent):void
{
var dadosDoEmpregado:ArrayCollection = event.result as ArrayCollection;
var empregado:Empregado;
for each(var emp:Object in dadosDoEmpregado)
{
}
}

8. Dentro do loop for each, para a variável empregado, atribua uma nova instância value object da classe Empregado.

for each(var emp:Object in dadosDoEmpregado)
{
empregado = new Empregado();

}

9. A seguir atribua o valor de empregado.primeiroNome a variável emp.primeiroNome.

for each (var emp:Object in dadosDoEmpregado)
{
empregado = new Empregado();
empregado.primeiroNome = emp.primeiroNome;
}

10. repita o passo 9 para o restante das propriedades da classe Empregado.

for each (var emp:Object in dadosDoEmpregado)
{
empregado = new Empregado();
empregado.primeiroNome = emp.primeiroNome;
empregado.telefone = emp.telefone;
empregado.email = emp.email;
empregado.cargo = emp.cargo;
empregado.dataAdmissao = emp.dataAdmissao;
empregado.foto = emp.foto;
}

11. No final do loop for each adicione ao objeto empregado o ArrayCollections "empregados" usando o método addItem().

A variável "empregados" já existe e está localizada no bloco de script abaixo da declaração de comentários.

for each (var emp:Object in dadosDoEmpregado)
{
empregado = new Empregado();
empregado.primeiroNome = emp.primeiroNome;
...
empregado.dataAdmissao = emp.dataAdmissao;
empregado.foto = emp.foto;
empregados.addItem(empregado);
}

12. Na tag <Application ...> delete a declaração creationComplete="employeeService.getData()".

13. Na tag <fx:Declarations> delete a declaração <s:WebService id="employeeService" />

14. Salve o arquivo ex2_10_inicial.mxml.

15. Abra o arquivo FormRequisicaoVeiculos_2_10.mxml e mude para a aba Design.

16. Arraste o método getData():Empregado da aba Data/Services e solte dentro do DropDownList. Para a propriedade Label field escolha primeiroNome (veja Figura 8)

Figura 8: Caixa de diálogo Bind to Data.

17. Alterne para o modo Source e observe as funções que foram geradas:

protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
{
getDataResult.token = empregados2.getData();
}
<fx:Declarations>
<s:CallResponder id="getDataResult"/>
<empregados:Empregados id="empregados2" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
</fx:Declarations>
<s:DropDownList id="dropDownList" creationComplete="dropDownList_creationCompleteHandler(event)" labelField="primeiroNome">
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:DropDownList>

18. Salve o arquivo.

19. Rode a aplicação. Você deve ver no controle DropDownList a relação de funcionários. (veja Figura 9).

Figura 9: Observando relação de funcionários no controle DropDownList.

IV. Visualizando os dados em controles Flex.

Agora vamos vincular os dados relacionados de cada funcionário aos respectivos campos no formulário. De forma que ao clicar em um nome no controle DropDownList os valores sejam alterados nos controles TextInput e Imagem.

1. Abra o arquivoFormRequisicaoVeiculos.mxml e no editor de código acrescente/altere propriedades dos controles DropDownList e TextInput conforme exemplo abaixo:

<mx:FormItem label="Telefone:" width="287">
<s:TextInput id="phone" width="153"
text="{dropDownList.selectedItem.telefone}"/>
</mx:FormItem>
<mx:FormItem label="Email:" width="354">
<s:TextInput id="email"
width="239" color="#2148C6" fontSize="12"
text="{dropDownList.selectedItem.email}"/>
</mx:FormItem>
<mx:FormItem label="Cargo:" width="352">
<s:TextInput id="cargo"
width="235"
text="{dropDownList.selectedItem.cargo}"/>
</mx:FormItem>
<mx:FormItem label="Data de admissão:"
width="249">
<s:TextInput id="dataAdmissao"
width="147"
text="{dropDownList.selectedItem.dataAdmissao}"/>
</mx:FormItem>
<mx:FormItem label="Foto:">
<mx:Image id="foto"
source="{dropDownList.selectedItem.foto}"
/>
</mx:FormItem>

5. Salve o projeto e rode a aplicação.

Abra o controle DropDownList para vê-lo populado com dados dos empregados (veja Figura 10).

Dependendo da velocidade da conexão pode ser perceptível um pequeno delay.

Figura 10: Abrindo o controle DropDownList

Conhecimentos adquiridos.

Nesse exercício você aprendeu como usar o assistente Data Services para se conectar a um XML Service e gerar value objects ActionScript.

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

P.1. Que painel no Flash Builder é usado para mostrar XML Serices?

R.1. O painel Data/Services.

P.2. Qual é a maneira mais fácil de aplicar uma operação data service a um controle Flex?

R.2. Arrastando-o do painel de Data/Service e soltando-o no controle.