1. Integrando Flex + Java + BlazeDS
(Vagner Machado)
Para este tutorial serão necessários os seguintes requisitos:
- Flex Builder 3 .
http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email
- BlazeDS Server.
http://opensource.adobe.com/wiki/display/blazeds/Release+Builds
- Servidor de Aplicação (Glassfish utilizado neste tutorial).
https://glassfish.dev.java.net/downloads/v2ur2-b04.html
- Plugin do Glassfish
com.sun.enterprise.jst.server.sunappsrv_1.0.3
- 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. http://www.jamesward.com/census/
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 WebContentWEB-INFflex 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="http://www.adobe.com/2006/mxml"
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 WebContentWEB-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