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.
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:
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/
- 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
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:
Selecione J2EE e clique em Next




Na próxima tela clique em “Finish”
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).
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.
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"
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>
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
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

Tutorial integrado flex_+_java_+_blazeds

  • 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 maneirasde 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 umaimagem 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 oprojeto 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óximaaltere “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 eclique em Next Na próxima tela clique em “Finish”
  • 7.
    3 – Agoranovamente 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 – Vamosagora 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 dizerao 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 – Vamosagorar 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 – Acessandoo 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 – Agoraabra 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