Leonardo França » BlazeDS http://www.leonardofranca.com.br Flash Platform, Adobe AIR, ActionScript, Flash, RIA, Flex, Flash Media Server, RED5, Flash Lite, PHP, ZendAMF, AMFPHP, Java, GraniteDS, BlazeDS Thu, 29 Jul 2010 03:12:18 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Integrando Flex com Java usando BlazeDS – primeiros passos http://www.leonardofranca.com.br/index.php/2009/04/21/integrando-flex-com-java-usando-blazeds-primeiros-passos/ http://www.leonardofranca.com.br/index.php/2009/04/21/integrando-flex-com-java-usando-blazeds-primeiros-passos/#comments Wed, 22 Apr 2009 02:12:56 +0000 Leonardo França http://www.leonardofranca.com.br/?p=380

O Adobe Flex tem se tornado tendência quando o assunto é camada de visão entre os desenvolvedores, analistas, gerentes e principalmente os usuários, podendo se integrar praticamente com qualquer linguagem de programação. Na camada de negocios temos uma disputa boa entre Java e .NET(ok ok Java leva vantagem).
Para que o Flex consiga se integrar perfeitamente com Java, é necessário ter um gateway (dispositivo que atua em qualquer camada do modelo ISO/OSI para vencer "diferenças" entres redes, manipulando e convertendo dados) que possa converter os tipos de dados nativos do Flex para os tipos de dados nativos do Java e vice-versa utlizando o protocolo AMF.
Na seguinte link temos os tipos de dados do Flex e seu correspondente em Java:
http://livedocs.adobe.com/flex/3/html/help.html?content=data_access_4.html
O AMF(Action Message Format) é um protocolo de especificação aberta, compacta e trafega em formato binário, sendo que na versão 3 do ActionScript, será usado o AMF3 com suporte aos tipos de dados especificos do AS3.
Hoje temos varias implementações que suportam o AMF3, utlizaremos o BlazeDS como gateway para comunicação em o ActionScript 3 e o Java.
O banco de dados de nome "contatos" usado sera o MySQL tendo a seguinte estrutura:

PLAIN TEXT
SQL:
  1. CREATE TABLE `tabela` (                
  2.           `id` int(11) NOT NULL,                
  3.           `nome` varchar(30) DEFAULT NULL,      
  4.           `email` varchar(100) DEFAULT NULL,    
  5.           PRIMARY KEY  (`id`)                  
  6.         ) ENGINE=InnoDB DEFAULT CHARSET=latin1

Como servidor de aplicação utlizaremos o JBoss Application Server e utilizaremos o Eclipse e o Flex Builder respectivamente para codificação( nada empede de se usar o Eclipse para codificar em Flex e Java numa mesma IDE)
O BlazeDS vem por padrão com o Tomcat, mas ele é somente um container de sevlet. Com o JBoss poderemos usar mais tarde ejb3, JPA, Hibernate etc.
Baixe a ultima versão do BlazeDS neste link
Tendo tudo pronto e devidamente configurado, vamos a codificação:

  • Crie um novo projeto do tipo "Dynamic Web Project" e nomeie como "Contatos".
  • Selecione o "Target Runtime" como JBoss e em "Configurations" deixe "Default Configuration for JBoss v4.2.
  • Em "Projects Facets" não precisa mudar nada, basta clicar em next.
  • Em "Web Module" também não precisa mudar nada, clique em Finish.

Pronto, feito isso já podemos começar nossa codificação, mas antes vamos inserir no projeto as bibliotecas do BlazeDS, se você baixou o bin do BlazeDS, basta descompactar o "blazeds.war" com algum winrar da vida, e copiemos o diretorio "WEB-INF\lib" para dentro de nosso projeto em "WebContent\WEB-INF\lib", logo em seguida, façamos a mesma coisa com o diretorio "WEB-INF\flex" e com o arquivo "WEB-INF\web.xml".
Configure o JBoss para ser iniciado pelo eclipse e adicione o projeto "Contatos" para ser publicado automaticamente no JBoss e inicie o JBoss(caso não tenha configurado ainda, siga os passos desse link).
Agora vamos testar se nosso BlazeDS está devidamente configurado, basta abrir o navegador e entrar com o seguinte endereço:

http://localhost:8080/Contatos/messagebroker/amf

Se aparecer uma página em branco, significa que o BlazeDS esta pronto para ser usado :D

Comecemos pelo nosso VO, crie um package chamado "br.com.leonardofranca.vo" e crie uma classe chamada "ContatosVO", seu codigo é o seguinte:

PLAIN TEXT
JAVA:
  1. package br.com.leonardofranca.vo;
  2.  
  3. public class ContatosVO
  4. {
  5.     private int id;
  6.     private String nome;
  7.     private String email;
  8.    
  9.     public int getId()
  10.     {
  11.         return id;
  12.     }
  13.    
  14.     public void setId(int id)
  15.     {
  16.         this.id = id;
  17.     }
  18.    
  19.     public String getNome()
  20.     {
  21.         return nome;
  22.     }
  23.    
  24.     public void setNome(String nome)
  25.     {
  26.         this.nome = nome;
  27.     }
  28.    
  29.     public String getEmail()
  30.     {
  31.         return email;
  32.     }
  33.    
  34.     public void setEmail(String email)
  35.     {
  36.         this.email = email;
  37.     }
  38. }

Até aqui, nenhum misterio, temos um simples objeto tipado para ser usando no Java. Vamos a nossa classe Main que fara todo o trabalho.

PLAIN TEXT
JAVA:
  1. package br.com.leonardofranca;
  2.  
  3. import java.sql.Connection;
  4. import java.sql.DriverManager;
  5. import java.sql.ResultSet;
  6. import java.sql.SQLException;
  7. import java.sql.Statement;
  8. import java.util.ArrayList;
  9. import java.util.List;
  10.  
  11. import br.com.leonardofranca.vo.ContatosVO;
  12.  
  13. public class Contatos
  14. {
  15.     Connection conn;
  16.     Statement stm;
  17.     ResultSet rs;
  18.  
  19.     public Contatos()
  20.     {
  21.         try
  22.         {
  23.             Class.forName("com.mysql.jdbc.Driver");
  24.             conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/meubanco","root","minhasenha");
  25.             stm = conn.createStatement();
  26.         }
  27.         catch (Exception e)
  28.         {
  29.             e.printStackTrace();
  30.         }
  31.     }
  32.  
  33.     public List<ContatosVO> getData()
  34.     {
  35.         List<ContatosVO> list = new ArrayList<ContatosVO>();
  36.         try
  37.         {
  38.             rs = stm.executeQuery("SELECT id, nome, email FROM tabela");
  39.             while (rs.next())
  40.             {
  41.                 ContatosVO contatosVO = new ContatosVO();
  42.                 contatosVO.setId(rs.getInt("id"));
  43.                 contatosVO.setNome(rs.getString("nome"));
  44.                 contatosVO.setEmail(rs.getString("email"));
  45.                 list.add(contatosVO);
  46.             }
  47.         }
  48.         catch (SQLException e)
  49.         {
  50.             e.printStackTrace();
  51.         }
  52.         return list;
  53.     }
  54.    
  55.     public Boolean insertData(ContatosVO contatosVO)
  56.     {
  57.         try
  58.         {
  59.             String sql = "INSERT INTO tabela (nome, email) VALUES('"+contatosVO.getNome()+"','"+contatosVO.getEmail()+"')";
  60.             if(stm.execute(sql))
  61.             {
  62.                 return true;
  63.             }
  64.         }
  65.         catch (SQLException e)
  66.         {
  67.             e.printStackTrace();
  68.         }
  69.         return false;
  70.     }
  71.    
  72.     public Boolean deleteData(ContatosVO contatosVO)
  73.     {
  74.         try
  75.         {
  76.             stm = conn.createStatement();
  77.             String sql = "DELETE FROM tabela WHERE id = '"+contatosVO.getId()+"'";
  78.             if(stm.execute(sql))
  79.             {
  80.                 return true;
  81.             }
  82.         }
  83.         catch (SQLException e)
  84.         {
  85.             e.printStackTrace();
  86.         }
  87.         return false;
  88.     }
  89.    
  90.     public Boolean updateData(ContatosVO contatosVO)
  91.     {
  92.         try
  93.         {
  94.             stm = conn.createStatement();
  95.             String sql = "UPDATE tabela SET nome = '"+contatosVO.getNome()+"', email = '"+contatosVO.getEmail()+"' WHERE id = '"+contatosVO.getId()+"'";
  96.             if(stm.execute(sql))
  97.             {
  98.                 return true;
  99.             }
  100.         }
  101.         catch (SQLException e)
  102.         {
  103.             e.printStackTrace();
  104.         }
  105.         return false;
  106.     }
  107. }

No construtor instancio a classe do banco de dados, o método seguinte é para listar os dados do banco, retornando uma List do Java que alimentara minha DataGrid no Flex, o restante dos métodos(para inserir, atualizar e deletar) deixei apenas para me retornar um Boolean.

Agora vamos a parte em Flex.
Começamos pelo VO da parte do Flex, note que não é necessário colocar os métodos get's e set's, no entanto, é necessário colocar o "RemoteClass":

PLAIN TEXT
ACTIONSCRIPT3:
  1. package br.com.leonardofranca.vo
  2. {
  3.     [Bindable]
  4.     [RemoteClass(alias="br.com.leonardofranca.vo.ContatosVO")]
  5.     public class ContatosVO
  6.     {
  7.         public var id:uint;
  8.         public var nome:String;
  9.         public var email:String;
  10.        
  11.         public function ContatosVO()
  12.         {
  13.         }
  14.  
  15.     }
  16. }

Vamos implementar agora a nossa camada de apresentação, precisaremos de um formulario com dois campos de nome e email, e uma datagrid para listar os emails do banco de dados, necessitamos ainda de três botões, um para cadastro, uma para atualizar e outro para excluir os registros do banco de dados. O Esqueleto da aplicação ficaria da seguinte forma:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3. <mx : HBox x="0" y="0" width="100%" height="100%">
  4.         <mx : Panel width="338" height="389" layout="absolute">
  5.             <mx : Form x="0" y="0" width="100%" height="100%">
  6.                 <mx : FormItem label="Nome:">
  7.                     <mx : TextInput id="input_nome"/>
  8.                 </ mx : FormItem>
  9.                 <mx : FormItem label="Email:">
  10.                     <mx : TextInput id="input_email"/>
  11.                 </ mx : FormItem>
  12.                 <mx : FormItem>
  13.                     <mx : Button id="btnCadastrar" label="Cadastrar" />
  14.                 </ mx : FormItem>
  15.                 <mx : FormItem>
  16.                     <mx : Button label="Excluir"/>
  17.                 </ mx : FormItem>
  18.                 <mx : FormItem>
  19.                     <mx : Button label="Atualizar" />
  20.                 </ mx : FormItem>
  21.             </ mx : Form>
  22.         </ mx : Panel>
  23.         <mx : DataGrid height="390" id="dg">
  24.             <mx : columns>
  25.                 <mx : DataGridColumn headerText="id" dataField="id"/>
  26.                 <mx : DataGridColumn headerText="Nome" dataField="nome"/>
  27.                 <mx : DataGridColumn headerText="Email" dataField="email"/>
  28.             </ mx : columns>
  29.         </ mx : DataGrid>
  30.     </ mx : HBox>
  31. </ mx : Application>

Geralmente agora precisariamos configurar o arquivo services-config.xml para que o swf saiba onde buscar o serviço. Mas farei diferente, vou configurar direto no endpoint do RemoteObject:

PLAIN TEXT
MXML:
  1. <mx : RemoteObject id="ro" destination="blazeds" source="br.com.leonardofranca.Contatos"  endpoint="http://localhost:8080/Contatos/messagebroker/amf">
  2.         <mx : method name="getData" result="onResult(event);" fault="onFault(event);"/>
  3.         <mx : method name="insertData" result="onResultData(event);" fault="onFault(event);"/>
  4.         <mx : method name="deleteData" result="onResultData(event);" fault="onFault(event);"/>
  5.         <mx : method name="updateData" result="onResultData(event);" fault="onFault(event);"/>
  6. </ mx : RemoteObject>

E na tag method, deixo configurado para chamar os métodos da minha classe Java. Agora basta escrever as funções que receberão os retornos de sucesso ou falha, note que deixei o mesmo método em caso de falha.

PLAIN TEXT
ACTIONSCRIPT3:
  1. import mx.controls.Alert;
  2.             import mx.events.ListEvent;
  3.             import br.com.leonardofranca.vo.ContatosVO;
  4.             import mx.collections.ArrayCollection;
  5.             import mx.rpc.events.FaultEvent;
  6.             import mx.rpc.events.ResultEvent;
  7.            
  8.             public function init():void
  9.             {
  10.                 dg.addEventListener(ListEvent.CHANGE,selectedItems);
  11.             }
  12.            
  13.             public function onResult(re:ResultEvent):void
  14.             {
  15.                 var data:Object = re.message.body;
  16.                 dg.dataProvider = data;
  17.             }
  18.            
  19.             public function onFault(fault:FaultEvent):void
  20.             {
  21.                 trace("Code: "+fault.fault.faultCode);
  22.                 trace("Detail: "+fault.fault.faultDetail);
  23.                 trace("String: "+fault.fault.faultString);
  24.             }
  25.            
  26.             public function insertData():void
  27.             {
  28.                 var contatosVO:ContatosVO = new ContatosVO();
  29.                 contatosVO.nome = input_nome.text;
  30.                 contatosVO.email = input_email.text;
  31.                 ro.insertData(contatosVO);
  32.             }
  33.            
  34.             public function onResultData(re:ResultEvent):void
  35.             {
  36.                 ro.getData();
  37.             }
  38.            
  39.             public function deleteData():void
  40.             {
  41.                 if(dg.selectedItem != null)
  42.                 {
  43.                     var contatosVO:ContatosVO = new ContatosVO();
  44.                     contatosVO.id = dg.selectedItem.id;
  45.                     ro.deleteData(contatosVO);
  46.                 }
  47.                 else
  48.                 {
  49.                     Alert.show("Selecione um item da tabela!!!");
  50.                 }
  51.             }
  52.            
  53.             public function selectedItems(evt:ListEvent):void
  54.             {
  55.                 input_nome.text = dg.selectedItem.nome;
  56.                 input_email.text = dg.selectedItem.email;
  57.             }
  58.            
  59.             public function updateData():void
  60.             {
  61.                 if(dg.selectedItem != null)
  62.                 {
  63.                     var contatosVO:ContatosVO = new ContatosVO();
  64.                     contatosVO.id = dg.selectedItem.id;
  65.                     contatosVO.nome = input_nome.text;
  66.                     contatosVO.email = input_email.text;
  67.                     ro.updateData(contatosVO);
  68.                 }
  69.                 else
  70.                 {
  71.                     Alert.show("Selecione um item da tabela!!!");
  72.                 }
  73.             }

Segue o código completo:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx : Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="ro.getData();init();">
  3.     <mx : Script>
  4.         <![CDATA[
  5.             import mx.controls.Alert;
  6.             import mx.events.ListEvent;
  7.             import br.com.leonardofranca.vo.ContatosVO;
  8.             import mx.collections.ArrayCollection;
  9.             import mx.rpc.events.FaultEvent;
  10.             import mx.utils.ObjectUtil;
  11.             import mx.rpc.events.ResultEvent;
  12.            
  13.             public function init():void
  14.             {
  15.                 dg.addEventListener(ListEvent.CHANGE,selectedItems);
  16.             }
  17.            
  18.             public function onResult(re:ResultEvent):void
  19.             {
  20.                 var data:Object = re.message.body;
  21.                 dg.dataProvider = data;
  22.             }
  23.            
  24.             public function onFault(fault:FaultEvent):void
  25.             {
  26.                 trace("Code: "+fault.fault.faultCode);
  27.                 trace("Detail: "+fault.fault.faultDetail);
  28.                 trace("String: "+fault.fault.faultString);
  29.             }
  30.            
  31.             public function insertData():void
  32.             {
  33.                 var contatosVO:ContatosVO = new ContatosVO();
  34.                 contatosVO.nome = input_nome.text;
  35.                 contatosVO.email = input_email.text;
  36.                 ro.insertData(contatosVO);
  37.             }
  38.            
  39.             public function onResultData(re:ResultEvent):void
  40.             {
  41.                 ro.getData();
  42.             }
  43.            
  44.             public function deleteData():void
  45.             {
  46.                 if(dg.selectedItem != null)
  47.                 {
  48.                     var contatosVO:ContatosVO = new ContatosVO();
  49.                     contatosVO.id = dg.selectedItem.id;
  50.                     ro.deleteData(contatosVO);
  51.                 }
  52.                 else
  53.                 {
  54.                     Alert.show("Selecione um item da tabela!!!");
  55.                 }
  56.             }
  57.            
  58.             public function selectedItems(evt:ListEvent):void
  59.             {
  60.                 input_nome.text = dg.selectedItem.nome;
  61.                 input_email.text = dg.selectedItem.email;
  62.             }
  63.            
  64.             public function updateData():void
  65.             {
  66.                 if(dg.selectedItem != null)
  67.                 {
  68.                     var contatosVO:ContatosVO = new ContatosVO();
  69.                     contatosVO.id = dg.selectedItem.id;
  70.                     contatosVO.nome = input_nome.text;
  71.                     contatosVO.email = input_email.text;
  72.                     ro.updateData(contatosVO);
  73.                 }
  74.                 else
  75.                 {
  76.                     Alert.show("Selecione um item da tabela!!!");
  77.                 }
  78.             }
  79.         ]]>
  80.     </ mx : Script>
  81.     <mx : RemoteObject id="ro" destination="blazeds" source="br.com.leonardofranca.Contatos"  endpoint="http://localhost:8080/Contatos/messagebroker/amf">
  82.         <mx : method name="getData" result="onResult(event);" fault="onFault(event);"/>
  83.         <mx : method name="insertData" result="onResultData(event);" fault="onFault(event);"/>
  84.         <mx : method name="deleteData" result="onResultData(event);" fault="onFault(event);"/>
  85.         <mx : method name="updateData" result="onResultData(event);" fault="onFault(event);"/>
  86.     </ mx : RemoteObject>
  87.     <mx : HBox x="0" y="0" width="100%" height="100%">
  88.         <mx : Panel width="338" height="389" layout="absolute">
  89.             <mx : Form x="0" y="0" width="100%" height="100%">
  90.                 <mx : FormItem label="Nome:">
  91.                     <mx : TextInput id="input_nome"/>
  92.                 </ mx : FormItem>
  93.                 <mx : FormItem label="Email:">
  94.                     <mx : TextInput id="input_email"/>
  95.                 </ mx : FormItem>
  96.                 <mx : FormItem>
  97.                     <mx : Button id="btnCadastrar" label="Cadastrar" click="insertData();"/>
  98.                 </ mx : FormItem>
  99.                 <mx : FormItem>
  100.                     <mx : Button label="Excluir" click="deleteData();"/>
  101.                 </ mx : FormItem>
  102.                 <mx : FormItem>
  103.                     <mx : Button label="Atualizar" click="updateData();"/>
  104.                 </ mx : FormItem>
  105.             </ mx : Form>
  106.         </ mx : Panel>
  107.         <mx : DataGrid height="390" id="dg">
  108.             <mx : columns>
  109.                 <mx : DataGridColumn headerText="id" dataField="id"/>
  110.                 <mx : DataGridColumn headerText="Nome" dataField="nome"/>
  111.                 <mx : DataGridColumn headerText="Email" dataField="email"/>
  112.             </ mx : columns>
  113.         </ mx : DataGrid>
  114.     </ mx : HBox>
  115. </ mx : Application>

Se você chegou ate aqui ok! tudo certo e funcionando, mas pode esquecer, logo mostrarei uma maneira melhor e mais eficiente de fazer a integração do Flex com Java ;)

[UPDATE]
Acabei esquecendo de mencionar que é necessario um diretorio do projeto no eclispe, chamado WebContent/WEB-INF/flex que devem constar os arquivos: services-config.xml, remoting-config.xml, proxy-config.xml, messaging-config.xml. No caso do projeto só é necessario mesmo o remoting-config.xml, cujo o conteúdo deve ser como o código abaixo:

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <service id="remoting-service"
  3.    class="flex.messaging.services.RemotingService">
  4.  
  5.     <adapters>
  6.         <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
  7.     </adapters>
  8.  
  9.     <default-channels>
  10.         <channel ref="my-amf"/>
  11.     </default-channels>
  12.    
  13.     <destination id="blazeds">  
  14.           <properties>  
  15.              <source>br.com.leonardofranca.Contatos</source>
  16.              <scope>session</scope>
  17.            </properties>
  18.      </destination>  
  19. </service>

Translations:
English Version

]]> http://www.leonardofranca.com.br/index.php/2009/04/21/integrando-flex-com-java-usando-blazeds-primeiros-passos/feed/ 34