Aula 2.5 - Recuperando e manipulando dados com RemoteObject.

Aula 2.5 - Recuperando e manipulando dados com RemoteObject .

 

Requisitos

Introdução

Neste exercício você usará o objeto RemoteObject para recuperar dados dinâmicos gerados do lado do servidor para preencher o controle DropDownList do Flex com dados de empregados da companhia fictícia. Esses dados são provenientes de um banco de dados mySQL remoto (ver Figura 1).

 

Figura 1: Preview da aplicação.

 

Nessa aula aprenderemos como:

 

 

I. Usando o objeto RemoteObject.

Nesta seção, você usará o componente RemoteObject para recuperar dados de empregados da empresa fictícia.

Nota: Neste exercício, você está usando o gateway de comunicação remota para um servidor PHP. No entanto, você pode utilizar qualquer tecnologia de servidor que suporte dados binários AMF. Alguns exemplos são o BlazeDS para Java e o Zend Framework para PHP.

Veja no site da Adobe em Developer Centers artigos que exploram essas tecnologias para PHP, Java, ColdFusion e. NET para saber mais sobre Flex e essas tecnologias.

 

1. Baixe e descompacte o arquivo ex2_05_inicial.zip

2. Abra o Flash Builder.

3. Importe o arquivo ex2_05_inicial.fxp. (File > Import Flex Project (FXP))

4. Dentro do projeto ex2_05_inicial abra o arquivo ex2_05_inicial.mxml. Dentro do bloco de Script declare uma variável chamada empregados do tipo ArrayCollection, conforme abaixo.

 

[Bindable]
private var empregados:ArrayCollection;

5. Localize o bloco "Declarations"

6. Entre as tags Declarations, adicione uma instância do objeto RemoteObject.

<fx:Declarations>
<s:RemoteObject/>
</fx:Declarations>

7. Na instância do componente RemoteObject adicione a propriedade id o valor de employeeService e a propriedade destination o valor de amfphp,para a propriedade source o valor de mysqlList, e para a propriedade endpoint o valor de http://www.aprendofacil.com.br/curso/flex/amfphp/gateway.php.

Ao definir a propriedade fonte para "mysqlList", você está apontando para o componente "amfphp" a instância do objeto RemoteObject será utilizada para realizar consultas no banco de dados no servidor. O valor endpoint,  http://www.aprendofacil.com.br/curso/flex/amfphp/gateway.php, refere-se ao mapeamento usado pelo servidor PHP para manipular as solicitações AMF/RemoteObject.

<s:RemoteObject
id="employeeService"
destination="amfphp"
source="mysqlList"
showBusyCursor="true"
endpoint="http://www.aprendofacil.com.br/curso/flex/amfphp/gateway.php"/>

8. Salve o arquivo.

 

II. Fazendo requisiçoes ao objeto RemoteObject.

Nesta seção, você irá iniciar a recuperação de dados usando o componente RemoteObject.

1. Dentro do bloco de script, localize a função initApp().

2. Dentro dessa função faça uma chamada ao método employeeService.listTable().

O método listTable() está no componente mysqlList e retorna todas as informações sobre os empregados listados em uma tabela no banco de dados mySql no servidor.

private function initApp():void

{

dataDeRetirada.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateChangeHandler);
dataDeEntrega.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateChangeHandler);

employeeService.getEmployees();

}

3. Salve o arquivo.

private function initApp():void
{

dataDeRetirada.addEventListener
(CalendarLayoutChangeEvent.CHANGE,manipuladorDeDataAlterada);
dataDeEntrega.addEventListener
(CalendarLayoutChangeEvent.CHANGE,manipuladorDeDataAlterada);
employeeService.listTable();

}

4. Salve o arquivo.

 

III. Visualizando o resultado dos dados no Network Monitor.

Nota: Para completar esse seção da aula é necessário ter o Flash Builder Premium Edition instalado. Se você tiver instalado o Flash Builder Standard Edition, pule essa parte e continue na próxima seção.

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. Ao abrir a página clique na Tab Version Comparision.

Se quiser se aprofundar no assunto, assista a opinião dos experts:

 

• Andrew Shorten, Flash Builder Product Manager
• Deepa Subramanium, Flex SDK Product Manager.

 

Nesta seção usaremos o Flash Builder 4 Network Monitor para ver os dados retornados pelo objeto RemoteObject.

 

1. Abra o Network Monitor (figura 2).

Figura 2: Visualizando o Network Monitor.

2. Clique no botão Enable Monitor (figura 3).

Figura 3: Habilitando o Network Monitor.

 

3. Clique no botão Run para executar a aplicação.

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

5. Selecione a URL do RemoteService (veja Figura 4).

Figura 4: Selecionando o registro RemoteService.

 

6. Do lado direito da janela, na tab "Response", expanda a árvore Response body para revelar os registros dos empregados.

Você verá que o resultado dos dados é exibido no Network Monitor, como mostrado na Figura 5.

 

Figura 5: Expandindo Response body e revelando dados dos empregados.

 

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

 

IV. Armazenar os dados recuperados em uma variável na aplicação.

Nesta seção você irá armazenar os dados retornados em uma variável ArrayCollection, chamada employees, que está vinculada ao controle DropDownList no Formulário da empresa fictícia.

1. Dentro da tag RemoteObject, use o assitente de conteúdo para gerar o evento result (veja Figura 6).

Figura 6: Gerando o evento result.

 

2. Dentro do assistente de conteúdo, clique duas vezes na opção Generate Result Handler (veja Figura 7).

Figura 7: Use o assistente de conteúdo para criar a função result handler.

 

3. Dentro do bloco de Script, localize a função employeeService_resultHandler().

4. Dentro da função remova o código comentado e configure o valor da variável employees para a propriedade event.result.

protected function employeeService_resultHandler(event:ResultEvent):void

{

empregados = event.result ;
}

 

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

Os dados retornados por padrão são do tipo Object. Você deve converter o resultado para o tipo ArrayCollection para que ele possa ser usado com a variável empregados.

protected function employeeService_resultHandler(event:ResultEvent):void

{

empregados = event.result as ArrayCollection;

}

 

6. Salve o arquivo.

 

V. Mostrando os dados na interface de usuário.

Nesta seção você irá ajustar a interface do usuário para utilizar os dados retornados pela chamada ao serviço do objeto remoto.

1. No arquivo ex2_05_remote_inicial.mxml dentro do bloco de container "Form", localize o container "FormItem" que está aninhado ao controle DropDownList.

2. Mude o valor da propriedade labelField do controle DropDownList para firstname.

<mx:FormItem label="Empregado: ">
<s:DropDownList id="dropDownList"
 labelField="firstname"
dataProvider="{empregados}"/>
</mx:FormItem>

 

3. Localize o container FormItem que está aninhado no controle TextInput do celular do empregado.

4. Altere o valor da propriedade "text" que está sendo passada pelo controle DropDownList para dropDownList.selectedItem.cellphone.

<mx:FormItem label="Celular:">
<s:TextInput id="celular"
text="{dropDownList.selectedItem.cellphone}"/>
</mx:FormItem>

5. Repita o passo 4, agora para o item email. Veja abaixo:

<mx:FormItem label="Email:">
<s:TextInput id="email"
text="{dropDownList.selectedItem.email}"/>
</mx:FormItem>

Salve o arquivo.

6. Rode a aplicação.

7. Selecione um empregado no controle DropDownList e verá o campo do celular preenchido e o email (veja Figura 8).

Figura 8: Selecionando um funcionário no controle DropDownList.

 

 

Conhecimentos adquiridos

Neste tutorial, você aprendeu a usar um objeto RemoteObject para recuperar dados de um servidor mySQL/PHP remoto.

 

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

 

P.1. Quais são as três propriedades do objeto RemoteObject que são usados para definir o caminho ao se conectar a um servidor PHP remoto?

R.1. As propriedades source, destination e endpoint.

P.2. Qual a propriedade de evento é usada para manipular os dados retornados do objeto RemoteObject?

R.2. O evento result.