Flex Data Services 2.0 – Trazendo Java Collections através de Flash Remoting (RPC)

Como muitos já sabem, a Adobe resolveu “dividir” o Flex em três partes : o Flex Builder, o Flex Data Services e o Flex SDK. O primeiro a maioria já conhece e consiste em uma IDE robusta e performática para os desenvolvedores. O segundo produto consistem em um servidor que fornece uma série de serviços que podem elevar muito as funcionalidades de uma aplicação. E o ultimo consiste no conjunto de classes e pacotes acompanhado de alguns utilitários de linha de comando que permitem ao programador desenvolver sem custo algum RIAs para a Flash Platform. Alguns dos serviços do Flex Data Services, incluem serviços de mensageria, integração nativa com Hibernate e EJB, push de dados, sincronia e lock de dados etc. Também, continuamos tendo conexão via Flash Remoting e WebServices com o servidor, chamados agora de RPC ( Remote Procedure Call). Na verdade já era chamado de RPC antes, mas agora é efetivamente identificado como tal pelos packages.

Hoje em dia, a grande maioria das empresas que compraram o Flex 1.5 usa o Flash Remoting para consumir objetos Java do servidor muitos estã perguntando como essa conexão será feita com o Flex Data Services 2.0. Foi então que decidimos fazer esse post mostrando como isso será feito. O que já posso dizer nesse momento é que a conexão via Flash Remoting continua simples como na versão 1.5, o que muda é como essa conexão é configurada do lado do servidor, ou seja, nossa implementação no Flex, já conhecida, não muda.

Primeiramente iremos instalar o Flex Data Services 2.0. Vocês verão que temos duas opções de instalação: com JRun embutido ou com geração de .war das aplicações. Iremos fazer a instalação através dos .war no próprio JRun. Nada nos impede de fazer essa instalação em qualquer application server como Tomcat, JBoss, BEA etc. Sintam-se a vontade para tanto. Irei explicar como fazer esse deploy no JRun, pois é o application server que tenho instalado em minha máquina. Para os que não possuem nenhum application server instalado, recomendo que instalem o Flex Data Services 2.0 com o JRun já integrado ao mesmo.

1. Primeiramente baixe o Flex Data Services 2.0 do site da Abode. Esse produto pode ser encontrado em http://labs.macromedia.com;
2. Execute o .exe baixado (na época desse post é FDS2-win_B2_Install_03-16.exe) e siga os passos abaixo:
3. Clique Next;
4. Escolha a primeira opção e clique em Next;
5. Escolha o diretório de instalação do Flex Data Service 2.0. No caso deixarei o default. Clique next;
6. Se você não tem um application server instalado escolha a primeira opção Flex Data Services with Integrated JRun. Se você já tem um application server instalado (no meu caso utilizarei o JRun já instalado na minha máquina) utilize a segunda opção Flex Data Services J2EE web application.
   
7. Finalize a instalação e veja o arquivo readme.html.

O que estaremos fazendo é a instalação no JRun sugerida pelo arquivo readme.html. Na verdade estaremos dando um deploy das aplicações flex, flex-admin e samples no JRun. Como são aplicações J2EE, o deploy pode ser feito em qualquer application server como já dito . Iremos explodir os arquivos para fazer o deploy em vez de colocar o .war diretamente no servidor. Faremos isso porque iremos configurar a conexão via Flash Remoting editando um arquivo .xml

Criando um servidor no JRun (apenas para instalação no JRun)

1. Inicialize o servidor admin do JRun. Para tanto, no prompt de comando em C:\JRun4\bin execute jrun.exe -start admin;
2. Abra seu browser preferido e acesse http://localhost:8000;
3. Crie um novo servidor clicando em Create New Server;



4. Digite o nome do servidor que você deseja criar. No meu caso usei flexservices;
5. Escolhas as portas que rodarão seu servidor. A porta que você deve anotar é a Web Server Port Number, pois é através dessa porta que você acessará o Flex Data Services. No meu caso utilizei a porta 8101, ou seja, acesso o servidor através de http://localhost:8101;



6. Seu servidor está criado.

Instalando o Flex Data Services 2.0 na instância criada

1. Abra a pasta em você gerou os arquivos .war. No caso C:\fds2;
2. Descompacte os arquivos .war em pastas diferentes. Os arquivos .war são idênticos a arquivos .zip; No meu caso descompactei para C:\fds2\flex, C:\fds2\flex-admin e C:\fds2\samples;
3. Agora copie as pastas C:\fds2\flex, C:\fds2\flex-admin e C:\fds2\samples para C:\JRun4\servers\flexservices. Teremos então:



4. Pronto, seu Flex Data Services já está “instalado”;
5. Para iniciá-lo abra um prompt de comando em C:\JRun4\bin execute jrun.exe -start flexservices;
6. Acesse http://localhost:8101/samples e veja se a página Flex Samples Apps aparece. Execute o exemplo CRM (http://localhost:8101/samples/dataservice/crm/companyapp.mxml) para ver se sua instalação foi correta. Tome cuidado que alguns dos exemplos requerem algumas configurações adicionais. Portanto, se eles não funcionarem não quer dizer que o seu servidor não está instalado corretamente.

Aplicação de Exemplo

O objetivo deste post, como comentado anteriormente, é mostrar como é feito o consumo de Collections Java através do Flash Remoting. Dessa forma, não é o objetivo desse post mostrar as melhores práticas de programação e reaproveitamento de código. Apenas usamos o Cairngorm 2.0 na parte do Flex para fazer o consumo dos objetos Java, mas o seu uso não é necessário.

A aplicação é bem simples. Consiste em lista os colaboradores de uma empresa. Faremos isso trazendo um ArrayList e um HashMap. Também, teremos um “cadastro” de colaboradores onde o único objetivo é enviar um VO para o servidor e listarmos suas propriedades do prompt. Para essa aplicação ser completa, precisaríamos criar um bando de dados, o que alongaria muito nossa explicação. Entretanto, entendendo o conceito para se retornar os dados através de uma query em um banco de dados fica fácil.

Classes Java

Como não temos um banco de dados, desenvolvemos uma classe java bem simples para exemplificar o consumo das Collections ArrayList e HashMap. Vocês podem baixar o projeto Java feito em Eclipse aqui. Caso vocês queiram, você podem importar esse projeto no Eclipse, mas isso não será necessário para seguirmos em frente.

O projeto consiste de duas classes: a classe FlashRemotingExample e a classe EmployeeVO. A primeira é responsável por retornar os dados dos colaboradores e a segunda é o VO que representa um colaborador. No projeto baixado vocês podem ver o JavaDoc dessa classes na pasta doc.

Aplicação Flex

A aplicação que vocês irão baixar terá a seguinte interface:

O projeto Flex pode ser baixado aqui. Vamos agora criar o projeto no Flex Builder 2.0 e depois vamos importar o projeto baixado nesse projeto criado.

1. Abra o Flex Builder 2.0 e crie um novo Flex Project em File > New > Flex Project;
2. Selecione o tipo de projeto como Flex Data Services > Compile application on the server when page is viewed. O que irá acontecer é que os arquivos serão copiados para o servidor e o mesmo irá compilá-los. Existe uma maneira de se compilar os arquivos localmente, apenas apontando para os arquivos de configuração do Flex Data Services. Mas esse tipo de projeto não será abordado nesse post. Para os interessados, a configuração de Flex 2 com ColdFusion presente em http://labs.macromedia.com ensina como fazer essa configuração.
3. Edite o Root folder e o Root URL para que o Flex Builder execute o build (copie os arquivos) automaticamente. Certifique-se de configurar esses parâmetros corretamente com o caminho do seu apllication server e com a porta que você escolheu. A figura abaixo ilustra o meu caso:



4. Digite o nome do projeto como rpcexample o Main application file como Index.mxml e clique finish;
5. O projeto deve aparecer na árvore de projetos.

Importando o projeto

1. Se você ainda não baixou o projeto baixe aqui;
2. No Flex Builder clique em File > Import;
3. Escolha Existing Projects into Workspace e clique next;
4. Selecione Select arquive file e procure o arquivo .zip do projeto (rpcexample.zip);
5. Clique em Finish;
6. Clique em No to All para todas as perguntas que serão feitas;
7. Você já pode testar seu projeto clicando no botão Run do Flex Buider;
8. Você verá um Alert de erro na sua tela, pois não configuramos a conexão Flash Remoting no Flex.

Configurando a conexão via Flash Remoting

A conexão via Flash Remoting é configurada no servidor através do arquivo flex-remoting-service.xml localizado em WEB-INF/flex. Observe que neste diretório existem vários arquivos .xml de configuração como flex-data-service.xml, flex-message-service.xml, flex-proxy-service.xml, flex-webtier-config.xml etc. Cada um desses arquivos é responsável por um tipo se serviço disponibilizado pelo Flex Data Services 2.0. O arquivo principal é o flex-enterprise-services.xml que faz referência para todos os outros arquivos.

No caso iremos editar o arquivo flex-remoting-service.xml.

1. Abra o arquivo flex-remoting-service.xml com um editor de texto. No meu caso ele encontra-se em C:\JRun4\servers\flexservices\flex\WEB-INF\flex
2. Vamos criar um novo destination com o nome de flashremotingexample. O nome do destination é o nome que iremos usar para o Flex instanciar esse serviço. Dentro da tag destination definimos a classe java instanciada. No caso br.dclick.rpcexample.flashremoting.FlashRemotingExample.
3. O arquivo flash-remoting-service.xml ficará da seguinte maneira:
   < ?xml version=“1.0″ encoding=“UTF-8″?>
   < service id=“remoting-service”
   class=“flex.messaging.services.RemotingService”
   messageTypes=“flex.messaging.messages.RemotingMessage”>
   < adapters>
   < adapter-definition
   id=“java-object”
   class=“flex.messaging.services.remoting.adapters.JavaAdapter”
   default=“true”/>
   < default-channels>
   < channel ref=“my-amf”/>
   < /default-channels>

   < destination id=“flashremotingexample”>
   < properties>
   < source>
   br.com.dclick.rpcexample.flashremoting.FlashRemotingExample
   < /source>
   < /properties>
   < /destination>
   < /service>

4. Reinicie o servidor flexservices;
5. Verifique se o destination foi criado com sucesso. Para tanto vamos usar o Flex Admin. Acesse http://localhost:8101/flex-admin. Navegue pela árvore como na figura abaixo e veja se o serviço flashremotingexample foi criado com sucesso:

Deploy das Classes Java

Para fazer o deploy das classes Java basta copiar a pasta br que está dentro da bin do projeto RPCexampleJava que você baixou para a pasta WEB-INF/classes do seu servidor Flex. No meu caso copiei a pasta br (com as classes compiladas) para C:\JRun4\servers\flexservices\flex\WEB-INF\classes.

Outra opção é importar o arquivo .zip que contém o projeto Java e executar o build contido nele. Esse build já copiará as classes Java para a pasta C:\JRun4\servers\flexservices\flex\WEB-INF\classes.

Obs: O Flex Builder 2 não vem preparado para editar classes Java e executar instruções ANT. Dessa maneira, as instruções de build acima não funcionarão na instalação padrão do Flex Builder 2. Sugerimos que você use uma instalação do Eclipse padrão e instale o Flex Builder 2 como um plugin do Eclipse.

Depois de fazer o deploy das classes java, reinicie seu servidor e teste a aplicação Flex novamente. Ela deverá funcionar.

Usando a Tag

Para se conectar ao destination criado, basta criar a tag como no Flex 1.5 e colocar no atributo destination o mesmo nome que configuramos no arquivo flex-remoting-service.xml. A tag RemoteObject ficará:

A aplicação Flex

Repare na aplicação que temos três abas:

Na primeira aba retornamos uma ArrayList de Objetos EmployeeVO. O método executado para retornar é o getEmployeesArrayList(). Nessa mesma aba podemos “filtrar” os colaboradores por nome. Nesse caso fizemos uma sobrecarga de método no Java e chamamos o mesmo método getEmployeesArrayList() passando uma string de nome como parâmetro. Podemos ver o objeto retornado do servidor no TextArea da direita:

O importante a ressaltar é que ocorre uma serialização dos objetos ActionScript com os objetos Java, mesmo dentro de um ArrayList ou um HashMap. Isso ocorre porque “informamos” ao Flex Data Services a correlação entre as classes AS e as classes Java. Esse correlacionamento é feito através do comando [RemoteClass(alias="br.com.dclick.rpcexample.flashremoting.vo.EmployeeVO")] presente na classe AS EmployeeVO. Antigamente, na versão 1.5, essa correlação era feita com a action Object.registerClass.

Na segunda aba retornamos um HashMap. Para os desenvolvedores de ColdFusion, o HashMap corresponde a um Struct. Nesse objeto, retornamos a página atual (currentPage), o total de páginas (totalPages) e o ArrayList de colaboradores em employees:

Na terceira aba enviamos o objeto EmployeeVO para o servidor simulando um cadastro. O método chamado é o addEmployee(). Observe a classe java e veja que estamos enviando um VO e o mesmo está sendo serializado no servidor. Caso se interessem mais por esse assunto, o Rubens fez um post a respeito disso. O objetivo aqui era mostrar que a implementação de VO pelo lado do servidor não muda com o Flex Data Services 2.0. Faça um teste de “cadastro” e veja os dados aparecendo no prompt do servidor flexservices:

Observe também que retornamos o objeto EmployeeVO para o Flex. Isso pode ser visto no TextArea da direita:

Conclusão

Trocar objetos Java usando o Flex Data Services 2.0 continua tão fácil como na versão 1.5. Entretanto, sabemos que o Flex Data Services 2.0 nos oferecerá muito mais recursos que apenas trocar objetos Java.

Para que se interessar em conhecer mais do Flex Data Services 2.0, sugiro a leitura do arquivo flex2_appdev.pdf obtido em http://labs.macromedia.com Parte 7.