Integrando Flex + Java + BlazeDS

Transcrição

1 Integrando Flex + Java + BlazeDS (Vagner Machado) Para este tutorial serão necessários os seguintes requisitos: - Flex Builder BlazeDS Server. - Servidor de Aplicação (Glassfish utilizado neste tutorial). - Plugin do Glassfish com.sun.enterprise.jst.server.sunappsrv_ Plugin WTP (Web Tools Plataform) Os plugins são facilmente instalados pelo gerenciador de plugins do Eclipse.

2 Há várias maneiras de comunicar o Java com o Flex, mas em destaque é que você pode trocar objetos Java/Flex por um protocolo que provê compactação e tranferência binária, este é o AMF. Adobe BlazeDS O BlazeDS é um produto OpenSource (Licença LGPL v3) que corresponde à tecnologia JAVA server-side que dá suporte tanto para o Remoting assim como ao Messaging de objetos trocados entre o Java e o Flex/Flash através do protocola AMF que mostra ser 10x mais rápido que outros protocolos utilizados sobre HTTP em formato XML. Arquitetura Java+Flex+BlazeDS:

3 Abaixo segue uma imagem de uma aplicação em Flex (Census) por JamesWard que mostra gráficamente o tempo gasto em transferências utilizando diversos tecnologias/métodos de comunicação.

4 - Criando o projeto Após fazer o download dos requisitos e configurar o servidor de aplicação vamos iniciar a criação do projeto. 1 Abra o Flex Builder e crie um novo projeto Dynamic Web Project De um nome ao projeto e clique em Next. De outro Next na próxima tela

5 Então na próxima altere Java Sorce Directory para src_java para nao haver confusões quando a integração for feita. 2 Vamos agora transformar o projeto em um projeto Flex Clique com o botão direito sobre o projeto Então selecione:

6 Selecione J2EE e clique em Next Na próxima tela clique em Finish

7 3 Agora novamente clique com o botão direito sobre o projeto e vá em propriedades, e siga os seguintes passos: Flex Builder Path Altere Output folder para WebContent Este diretório será responsável pelos arquivos gerados pelo flex como Html s e SWF s. Vá em Library path e remova a pasta flex_libs que não será mais necessária pois as bibliotecas irão ser armazenadas no WebContent(veremos mais à frente).

8 4 Vamos agora integrar o BlazeDS ao nosso projeto. Após fazer o download do BlazeDS e extrair, copie a pasta WEB-INF para seu WebContent. Após ter feito deverá ficar assim: Repare que o web.xml foi substituido, agora o Servelet do BlazeDS está sendo chamado.

9 Agora vamos dizer ao compilador do Flex que existe um servidor de AMF levantado, para isso de um botão direito no projeto JavaFlex -> Properties -> Selecione Flex Compiler -> em Additional compiler arguments adicione a linha e ok: -services "../WebContent/WEB-INF/flex/services-config.xml"

10 5 Vamos agorar criar uma classe java para fazer a comunicação com o Flex através do BlazeDS Crie uma classe Java no diretório src_java com o nome OlaMundo public class OlaMundo { } public String ola(string nome){ return "Olá "+nome; } Agora vamos fazer com que o BlazeDS reconheça nossa classe e permita que o flex possa acessa-la através de seu protocolo AMF. Dentro do diretorio WebContent\WEB-INF\flex estão contidos todos os XML s de configurações do BlazeDS Abra o remoting-config.xml e declare sua classe java Ficaria assim: <?xml version="1.0" encoding="utf-8"?> <service id="remoting-service" class="flex.messaging.services.remotingservice"> <adapters> <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.javaadapter" default="true"/> </adapters> <default-channels> <channel ref="my-amf"/> </default-channels> <destination id="servico"> <properties> <source>olamundo</source> </properties> </destination> </service>

11 6 Acessando o servico por RemoteObject no Flex Abra seu MXML que foi criado no diretório flex_src e adicione o RemoteObject, um TextInput e um Label Repare que o RemoteObject tem um destination, este destination equivale ao mesmo destination que foi declarado no remoting-config.xml <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="absolute"> <mx:remoteobject id="servico" destination="servico"/> <mx:textinput x="269" y="85" width="175" change="servico.ola(campo.text);" id="campo"/> <mx:label x="269" y="115" width="201" id="label1" text="{servico.ola.lastresult}"/> </mx:application> No TextInput, a cada mundança de caractere o método ola do servico é chamado e sendo passado como parâmetro seu próprio texto O label, obtem o ultimo resultado no método. 7 Após ter realizado todos estes passos, um erro é gerado. Abra a aba Problems clique com o direito sobre ele e então mande recriar os Templates HTML

12 8 Agora abra o arquivo web.xml dentro do WebContent\WEB-INF E na linha <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> </welcome-file-list> Altere index.html e index.htm para o nome de seu MXML, que no caso foi criado por padrão quando adicionado FlexNatureProject com o nome dado ao seu projeto, no meu caso ficou JavaFlex.html, mas se você deu outro nome ao projeto, ponha este nome. Indicará qual arquivo será aberto ao iniciar a aplicação. 9 Clique com o botão direito sobre o projeto e dê um Build Project 10 Clique com o botão direito sobre o projeto, Run As > Run on Server Resultado: Está é a integração básica Flex+Java+BlazeDS. Espero que tenha ajudado. Até a próxima. Vagner Machado