BlazeDS é uma aplicação Java opensource mantida pela Adobe, sob licensa GNU Lesser General Public License, Version 3 (LGPL v3), que fornece um conjunto de serviços, todos sobre o protocolo HTTP(Hyper Text Transfer Protocol), para permitir uma aplicação Flex fazer chamadas a serviços remotos Java, retornando os dados tanto de forma assíncrona como em tempo real.

Por utilizar o formato de dados binário chamado AMF(Action Message Format) para a serialiazação e deserialização de dados, a comunicação entre uma aplicação Flex e o servidor Web se torna muito otimizada. Existem estudos feitos comparando as diversas tecnologias, como o Jamesward, mostrando o potencial do AMF.

Outra grande vantagem quando usamos o BlazeDS é a facilidade de ter classe Java automaticamente convertida para uma classe ActionScript e vice-versa.

O BlazeDS pode ser baixado do site da Adobe em dois formatos:

1. Turnkey – Versão que já vem com exemplos e servidor tomcat pré configurado
2. Binary – Versão com os binários

Você pode optar também por fazer o download do código fonte. A documentação também está disponível neste link.


Entendendo os arquivos de configuração do BlazeDS
A estrutura de arquivos do BlazeDS é bem simples, quando descompactamos o blazeds.war, presente na versão binária, podemos ver a seguinte estrutura:

Devemos nos atentar a duas pastas. A pasta lib, que contém todos os jars necessários, e a pasta flex, que contém todos os arquivos de configuração do BlazeDS. Vamos ver o que cada arquivo significa:

1. services-config.xml: É neste arquivo que estão as principais configurações do BlazeDS como segurança, logging, serviços disponíveis (Canais), fábricas para a integração com Frameworks Java como Spring e EJB3 e as referências para os outros três arquivos de configuração.
2. remoting-config.xml: É nesse arquivo que iremos configurar os serviços Java para serem “consumidos” pela aplicação Flex. Sempre quando configuramos este arquivo, iremos trabalhar com o componente Flex chamado RemoteObject.
3. message-config.xml: Aqui é configurado tudo o que for relacionado com mensageria, sempre necessário quando trabalhamos com os componentes Flex Consumer e Producer. Um exemplo da utilização desta tecnologia seria fazer um bate bapo, ou até mesmo aplicações colaborativas, onde é desejável a iteração simultânea de diversos usuários.
4. proxy-config.xml: Além da possibilidade de utilizarmos o componente RemoteObject, o Flex disponibiliza mais duas formas de integração: O HTTPService e o WebService. Porém, por questões de segurança, os serviços só podem ser chamados quando os mesmos estão no mesmo domínio que a aplicação, ou que exista uma configuração específica que permita um cliente Flex fazer a consulta (esta configuração é feita por um arquivo chamado crossdomain.xml e está sempre no servidor onde está o serviço chamado). Caso uma das duas condições acima não seja satisfeita, deveremos utilizar o BlazeDS como proxy , e é ai que configuração deste arquivo se torna necessário.

Criando o seu primeiro projeto com o BlazeDS

Para criar o projeto iremos precisar de:

1. Eclipse Galileo JEE
2. FlashBuilder Plugin
3. BlazeDS 4 Binary
4. Tomcat 6

Feito os downloads e a instalação do Eclipse e FlashBuilder, vamos iniciar o FlashBuilder para criar o projeto.
Antes de criar o projeto, vamos configurar o Tomcat:

1. Nas preferências do Eclipse, vá em Server — Runtime Environments e clique em Add…
   
2. Na pasta Apache selecione Apache Tomcat v6.0 e clique em Next
   
3. Selecione a pasta onde você descompactou o Tomcat e clique em Finish
   

Feito a configuração do Tomcat, vamos criar o projeto:

1. Vá em File – New – Flex Project
2. Preencha os dados do primeiro passo como na imagem abaixo e clique em Next
   
3. Neste passo vamos configurar os dados do servidor. Deixe tudo configurado como na imagem e clique em Next
   
   
   Para selecionar o “Target Runtime”, clique em New e depois escolha o Apache Tomcat 6, como na imagem abaixo.
   
4. No último passo não será necessário mudar nada, clique em Finish
   

Agora vamos criar a classe Java que terá o serviço para retornar a string “HelloBlazeDS”

1. Crie uma classe Java br.com.dclick.service.RemotingService
   
2. Crie o serviço:

   1 2 3 4 5 6 7 8

   package br.com.dclick.service; public class RemotingService { ? ? public String sayHello() { ? ? ? ? return “HelloBlazeDS”; ? ? } ? ? }

Agora vamos configurar o BlazeDS para disponibilizar o serviço que acabamos de criar.

1. Abra o arquivo remoting-config.xml que está na pasta WebContent/WEB-INF/flex
2. Para que seja possível chamar os métodos da classe Java, precisamos configurar um destination. Isso é necessário para cada classe Java.
   O arquivo fica assim:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   xml version=“1.0″ encoding=“UTF-8″?> “remoting-service” class=“flex.messaging.services.RemotingService”> ? ? ? ? ? ? “java-object” ? ? ? ? ? ? class=“flex.messaging.services.remoting.adapters.JavaAdapter” ? ? ? ? ? ? default=“true” /> ? ? ? ? ? ? ? ? “my-amf” /> ? ? ? ? “blazeServices”> ? ? ? ? ? ? ? ? ? ? br.com.dclick.service.RemotingService ? ? ? ? ? ?

Vamos colocar na aplicação a chamada para o servidor.

1. A primeira coisa que precisamos fazer é configurar o RemoteObject. Fazer isso é muito simples:

   1 2 3 4 5

   ? ? ? ? ? ? ? ? “services” destination=“blazeServices” ? ? ? ? ? ? ? ? ? ? ? ? result=“services_resultHandler(event)” ? ? ? ? ? ? ? ? ? ? ? ? fault=“services_faultHandler(event)” /> ? ?

   
   Alguns detalhes:
   
   * Perceba que a propriedade destination aponta para o destination que configuramos no arquivo remoting-config.xml
   
   * Precisamos declarar um id para poder referenciar o RemoteObject
   
   * Adicionamos um ResultHandler para tratar o resultdo do serviço
   
   * Adicionamos um FaultHandler para tratar a falha do serviço

2. Os Handlers ficam assim:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   ? ? ? ? ? ? ? ? [CDATA[ ? ? ? ? ? ? import mx.controls.Alert; ? ? ? ? ? ? import mx.rpc.events.FaultEvent; ? ? ? ? ? ? import mx.rpc.events.ResultEvent; ? ? ? ? ? ? protected function services_resultHandler(event:ResultEvent):void ? ? ? ? ? ? { ? ? ? ? ? ? ? ? Alert.show(event.result.toString()); ? ? ? ? ? ? } ? ? ? ? ? ? protected function services_faultHandler(event:FaultEvent):void ? ? ? ? ? ? { ? ? ? ? ? ? ? ? Alert.show(event.fault.message); ? ? ? ? ? ? } ? ? ? ? ]]> ? ?

   
   Alguns detalhes:
   
   * A propriedade result do evento ResultEvent vai conter o resultado do serviço. No nosso caso o serviço retorna uma String “HelloBlazeDS”
   
   * A propriedade fault do evento FaultEvent contém os detalhes do erro.

3. A última coisa é chamar o serviço. Vamos fazer isso no evento creationComplete, como segue:

   1 2 3 4

   ? ? ? ? protected function application1_creationCompleteHandler(event:FlexEvent):void ? ? ? ? ? ? { ? ? ? ? ? ? ? ? services.sayHello(); ? ? ? ? ? ? }

4. A aplicação inteira fica assim:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

   ? ? ? ? xml version=“1.0″ encoding=“utf-8″?> “http://ns.adobe.com/mxml/2009″ ? ? ? ? ? ?? ? xmlns:s=“library://ns.adobe.com/flex/spark” ? ? ? ? ? ?? ? xmlns:mx=“library://ns.adobe.com/flex/mx” minWidth=“955″ minHeight=“600″ ? ? ? ? ? ?? ? creationComplete=“application1_creationCompleteHandler(event)”> ? ? ? ? ? ? [CDATA[ ? ? ? ? ? ? import mx.controls.Alert; ? ? ? ? ? ? import mx.events.FlexEvent; ? ? ? ? ? ? import mx.rpc.events.FaultEvent; ? ? ? ? ? ? import mx.rpc.events.ResultEvent; ? ? ? ? ? ? protected function services_resultHandler(event:ResultEvent):void ? ? ? ? ? ? { ? ? ? ? ? ? ? ? Alert.show(event.result.toString()); ? ? ? ? ? ? } ? ? ? ? ? ? protected function services_faultHandler(event:FaultEvent):void ? ? ? ? ? ? { ? ? ? ? ? ? ? ? Alert.show(event.fault.message); ? ? ? ? ? ? } ? ? ? ? ? ? protected function application1_creationCompleteHandler(event:FlexEvent):void ? ? ? ? ? ? { ? ? ? ? ? ? ? ? services.sayHello(); ? ? ? ? ? ? } ? ? ? ? ]]> ? ? ? ? ? ? ? ? “services” destination=“blazeServices” ? ? ? ? ? ? ? ? ? ? ? ? result=“services_resultHandler(event)” ? ? ? ? ? ? ? ? ? ? ? ? fault=“services_faultHandler(event)” /> ? ?

Agora só falta fazer o deploy da aplicação e subir o servidor.

1. Vá em Window – Show View – Other. Na janela que abrir, digite Servers e clique OK
   
2. Na view Servers, clique com o botão direito em Tomcat v6.0 e selecione Add and Remove…
3. Selecione a aplicação HelloBlazeDS e clique em Add e depois Finish
   
4. Na view Servers, clique com o botão direito em Tomcat v6.0 e clique em Run

Agora é só executar a aplicação e ver o resultado:

Isso é tudo, guarde esse projeto configurado para ser usado nos próximos posts.

No final de 2008, a comunidade Spring começou a trabalhar no projeto de integração Spring BlazeDS para adicionar suporte ao Flex no desenvolvimento de aplicações com Java e Spring.
O BlazeDS cria instâncias de objetos do lado do servidor Java e usa os para responder aos pedidos do remote object. A integração com Spring BlazeDS permite que você configure o Spring beans como um destino BlazeDS para utilização de remote objects no Flex.

Ferramentas necessárias:

•  Eclipse 3.5 (Galileo) para Java EE Developers – http://www.eclipse.org/downloads/
ou,  SpringSource Tool Suite : http://www.springsource.com/products/springsource-tool-suite-download/
• Flash Builder 4, plugin para instalar na distribuição do eclipse 3.5  -  http://www.adobe.com/go/try_fashbuilder
• Tomcat 6: http://tomcat.apache.org/
• BlazeDS 4 (Binary Distribution): http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/
• Spring Framework 3.0.2 (vanilla release): http://www.springsource.org/download
• Spring BlazeDS Integration 1.0.3 (vanilla release): http://www.springsource.org/spring-flex
• AOP Alliance 1.0: http://sourceforge.net/projects/aopalliance/files/
• backport-util-concurrent 3.1: http://sourceforge.net/projects/backport-jsr166/files/backport-jsr166/
• cglib 2.2 http://sourceforge.net/projects/cglib/files/
• asm 3.2 http://forge.ow2.org/projects/asm/

Como fazer:

1) Primeiro instale o Eclipse e, em seguida, instalar o Flash Builder 4 plugin para a distribuição Eclipse  que você acabou de instalar.

2) No Eclipse crie um servidor:
1. File > New > Other
2. Selecione Server > Server
3. Clique em Avançar
4. Selecione> Apache Tomcat v6.0 Server
5. Clique em Avançar
6. Especifique o local onde o Tomcat está instalado e selecione o JRE
7. Clique em Concluir

3) Criar um “Dynamic Web project”

No Eclipse, importe o arquivo blazeds.war para criar o projeto:
1. Escolha File > Import
2. Selecione  WAR file. Especifique o local do arquivo blazeds.war.
Dê um nome para o projecto web, flexcomspring
3. Clique em Concluir

Primeiro remova o arquivo xalan.jar do diretório: WebContent/WEB-INF/lib. Em seguida, vá em propriedades do projeto.   Selecione Java Build Path e em seguida, clique na guia Source. Defina o
diretório de saída: flexcomspring/WebContent/WEB-INF/classes

Isso faz com que todas as classes Java criadas no projeto serem implantadas na aplicação web.
No WebContent/WEB-INF/flex atualizar o services-config.xml para o seguinte código:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<channels>
   <channel-definition id="my-amf"
	  class="mx.messaging.channels.AMFChannel">
	  <endpoint
	  url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf"
	  class="flex.messaging.endpoints.AMFEndpoint" />
   </channel-definition>
   <channel-definition id="my-streaming-amf"
      class="mx.messaging.channels.StreamingAMFChannel">
	  <endpoint
	  url="http://{server.name}:{server.port}/{context.root}/messagebroker/streamingamf"
	  class="flex.messaging.endpoints.StreamingAMFEndpoint" />
   </channel-definition>
   <channel-definition id="my-polling-amf"
	  class="mx.messaging.channels.AMFChannel">
	  <endpoint
	  url="http://{server.name}:{server.port}/{context.root}/messagebroker/amfpolling"
	  class="flex.messaging.endpoints.AMFEndpoint" />
   </channel-definition>
</channels>
</services-config>

Lista 1 – services-config.xml

4) Em seguida, você precisa adicionar as dependências necessárias para  a aplicação web. Copie todas as bibliotecas do Spring Framework / arquivos .JAR (localizado na pasta dist) para o seguinte diretório: WebContent/WEB-INF/lib.
Também copie as bibliotecas do Spring BlazeDS Integration (localizado na pasta dist ) para a pasta lib. Faça o mesmo para aopalliance.jar, backport-util- concurrent.jar, cglib-2.2.jar, asm-3.2.jar.

5) Para configurar o servidor para o Flex Remoting, primeiro editar o web.xml em: WebContent/WEB-INF. Substituir seu conteúdo para:

<?xml version="1.0" encoding="UTF-8"?>
<web-app 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="
        http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">
	<listener>
		<listener-class>
			org.springframework.web.context.ContextLoaderListener
		</listener-class>
	</listener>
	<listener>
		<listener-class>flex.messaging.HttpFlexSession</listener-class>
	</listener>
	<servlet>
		<servlet-name>flexcomspring</servlet-name>
		<servlet-class>
			org.springframework.web.servlet.DispatcherServlet
		</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value></param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>flexcomspring</servlet-name>
		<url-pattern>/messagebroker/*</url-pattern>
	</servlet-mapping>
</web-app>

Lista 2 – web.xml

O Spring irá agora tratar os pedidos para o messagebroker / url.

6) Agora configure o Spring criando um arquivo applicationContext.xml em WebContent/WEB-INF com o seguinte código:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:flex="http://www.springframework.org/schema/flex"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/flex 
        http://www.springframework.org/schema/flex/spring-flex-1.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-3.0.xsd">
 
 	<flex:message-broker>
        <flex:remoting-service default-channels="my-amf" />
    </flex:message-broker>
 
    <context:component-scan base-package="com.luis.flex" />
</beans>

Lista 3 – applicationContext.xml

Na lista 3 cria-se o Flex message-broker, que permitirá ao Flex habilitar o remoting-service, utilizando o canal my-amf. O  component-scan vai encontrar classes no pacote “com.luis.flex” que foram anotados para Remoting.

7) Agora crie uma classe Java simples que será exposta através do AMF channel para uma aplicação Flex. Na pasta src criar uma nova classe no pacote criado anteriormente com o nome “OlaMundoService”. Definir com o seguinte código  em OlaMundoService.java para:

package com.luis.flex;
 
import org.springframework.flex.remoting.RemotingDestination;
import org.springframework.flex.remoting.RemotingInclude;
import org.springframework.stereotype.Service;
 
@Service
@RemotingDestination
public class OlaMundoService {
    @RemotingInclude
    public String olaUser(String name) {
        return "Olá, " + name;
    }
}

Lista 4 – OlaMundoService.java

Na classe OlaMundoService você vai notar duas anotações. O @Service annotation diz ao Spring qual classe é um serviço e @RemotingDestination expõe a classe como um remoting endpoint para o Flex. Esta classe também contém um único método chamado olaUser, que simplesmente recebe uma string. Por padrão, todos os métodos públicos de uma classe estão disponíveis para remoting. Você pode ocultar um método público de ser exposto como um endpoint remoto usando o @RemotingExclude.

?8 ) Agora crie uma aplicação Flex que vai chamar o método olaUser em OlaMundoService. Para começar a construir a aplicação Flex, basta criar um novo projeto Flex. No assistente para Novo projeto Flex de o nome: “olaMundo”, selecione Web como o tipo de aplicação, e definir o Flex SDK versão para Flex 4.0 (geralmente o padrão). Também escolha J2EE como o tipo de servidor de aplicativos, habilite Use Remote Object Access Service, e selecione BlazeDS. Certifique-se que Create Combined Java/Flex Project Using WTP não está marcada e clique em Avançar. Agora insira as informações para o projeto flexcomspring. A pasta raiz é a pasta WebContent no projeto flexcomspring. A URL raiz deve ser http://localhost:8080/flexcomspring /. A raiz de contexto deve ser /flexcomspring.

Clique em Concluir para criar o projeto. Agora você deve ver o código da aplicação. Substitua o código pelo seguinte:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
 
	<fx:Declarations>
		<s:RemoteObject id="ro" destination="olaMundoService" 
		endpoint="http://localhost:8080/flexcomspring/messagebroker/amf"/>
	</fx:Declarations>
 
	<s:layout><s:VerticalLayout/></s:layout>
 
	<s:TextInput id="txt"/>
 
	<s:Button label="Enviar" click="ro.olaUser(txt.text)"/>
 
	<s:Label id="lbl" text="{ro.olaUser.lastResult}"/>
 
</s:Application>

Lista 5 – olaMundo.mxml

Agora, execute a aplicação olaMundo (uma maneira é clicar com o botão direito no olaMundo. mxml, selecione Executar como e, em seguida, selecione Web Application). Digite seu nome no TextInput Clique no botão Enviar. Isto irá iniciar um pedido Flex Remoting para o servidor Tomcat chamando o Spring DispatcherServlet, que então procura o serviço OlaMundoService. Este destino é automaticamente mapeado para o Spring OlaMundoService Bean. Em seguida, o método olaUser será chamado no bean, passando para a chamada  do RemoteObject no cliente. O método retorna uma nova String, que é então serializado em AMF, inserido no corpo da resposta HTTP, e enviados de volta para o cliente. Você acabou de concluir uma aplicação web com Flex  para comunicar através de aplicações com Spring BlazeDS usando o Spring BlazeDS Integration!

Olá pessoal

A grande sensação ontem (23/03) foi a publicação pelo guru Christophe Coenraets demonstrando um vídeo aonde através do Flash Builder ele consumiu recursos de um projeto Java sem codificação no ambiente Flex. Nesse artigo vou demonstrar como trabalhar com esse recurso passo-a-passo.

Bom, primeiro passo é você ter em seu computador todas as ferramentas necessárias. Neste caso, você irá utilizar o Eclipse Galileu JEE, Flash Builder (stand-alone ou plugin) e do BlazeDS 4 Beta.

A aplicação que desenvolveremos nesse tutorial é a mesma desenvolvida no post anterior, com a diferença que aonde foi feito codificação manual no ambiente Flex, agora, iremos utilizar o Flash Builder para a geração do código fonte.

Bom, no Eclipse Galileo para iniciar um projeto, eu escolhi a opção File -> New -> Web -> Dynamic Web Project, conforme abaixo:

E depois configurei o projeto da seguinte maneira:

Bom, depois de configurar o projeto, iremos criar um Bean para serializarmos algumas informações que serão enviadas para o Flex. A idéia é bastante simples, irei criar um model para uma simples agenda de contato.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

package br.com.horochovec.model;
 
import java.io.Serializable;
 
/**
 * Modelo para agenda de contato
 * @author Stefan Horochovec
 */
public class Contato implements Serializable {
 
	/**
	 *
	 */
	private static final long serialVersionUID = 1L;
 
	private String nome;
 
	private String email;
 
	public String getNome() {
		return nome;
	}
 
	public void setNome(String nome) {
		this.nome = nome;
	}
 
	public String getEmail() {
		return email;
	}
 
	public void setEmail(String email) {
		this.email = email;
	}
 
}

E em seguida, criarei um serviço que irá adicionar em um ArrayList os contatos que serão enviados do Flex para o Java.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package br.com.horochovec.service;
 
import java.util.ArrayList;
 
import br.com.horochovec.model.Contato;
 
/**
 * Serviço para manutenção dos contatos
 * @author Stefan Horochovec
 */
public class ContatoService {
 
	private static ArrayList listContato = new ArrayList();
 
	/**
	 * Adiciona um contato a lista
	 * @param contato
	 */
	public void addContato(Contato contato) {
		listContato.add(contato);
	}
 
	/**
	 * Retorna a lista de contatos
	 * @return
	 */
	public ArrayList getListContato() {
		return listContato;
	}
 
}

Após isso, já temos uma simples aplicação pronta para trabalhar com o Flex, basta apenas configurar os arquivos .XML para que o BlazeDS possa funcionar.

A partir de agora é necessário que você já tenha descompactado o arquivo blazeds-bin-4.0.0.14910.zip. Após descompactá-lo, você terá que descompactar o arquivo blazeds.war que surgiu da descompactação anterior. Como resultado, obterá o seguinte:

Bom, podemos copiar para o diretório WebContent/WEB-INF de nosso projeto Java, os diretórios: flex/, lib/, spring/ e os arquivos: flex-servlet.xml e web.xml. Após copiar esse conteúdo, o primeiro arquivo que iremos configurar, é o arquivo web.xml que fica dentro da pasta WebContent/WEB-INF/.

Para essa configuração, iremos alterar o conteúdo do arquivo web.xml que veio dentro do arquivo blazeds.war que foi previamente descompactado.

Perceba que os parametros da aplicação foram alterados e também foi alterado o valor da propriedade useAppserverSecurity para false. O resultado será:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
 
    <display-name>FlexDuck</display-name>
    <description>FlexDuck</description>
 
    <!-- Http Flex Session attribute and binding listener support -->
    <listener>
        <listener-class>flex.messaging.HttpFlexSession</listener-class>
    </listener>
 
    <!-- MessageBroker Servlet -->
    <servlet>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <display-name>MessageBrokerServlet</display-name>
        <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
        <init-param>
            <param-name>services.configuration.file</param-name>
            <param-value>/WEB-INF/flex/services-config.xml</param-value>
       </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
 
    <servlet>
        <servlet-name>RDSDispatchServlet</servlet-name>
		<display-name>RDSDispatchServlet</display-name>
        <servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
		<init-param>
			<param-name>useAppserverSecurity</param-name>
			<param-value>false</param-value>
		</init-param>
        <load-on-startup>10</load-on-startup>
    </servlet>
 
    <servlet-mapping id="RDS_DISPATCH_MAPPING">
        <servlet-name>RDSDispatchServlet</servlet-name>
        <url-pattern>/CFIDE/main/ide.cfm</url-pattern>
    </servlet-mapping>
 
    <servlet-mapping>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
    </servlet-mapping>
 
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
    </welcome-file-list>
 
    <!-- for WebSphere deployment, please uncomment -->
    <!--
    <resource-ref>
        <description>Flex Messaging WorkManager</description>
        <res-ref-name>wm/MessagingWorkManager</res-ref-name>
        <res-type>com.ibm.websphere.asynchbeans.WorkManager</res-type>
        <res-auth>Container</res-auth>
        <res-sharing-scope>Shareable</res-sharing-scope>
    </resource-ref>
    -->
 
<!--
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>
			/WEB-INF/spring/*-config.xml
		</param-value>
	</context-param>
 
    <filter>
        <filter-name>springSecurityFilterChain</filter-name>
        <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
    </filter>
 
    <filter-mapping>
      <filter-name>springSecurityFilterChain</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>
 
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
 
	<servlet>
		<servlet-name>flex</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
 
	<servlet-mapping>
    	<servlet-name>flex</servlet-name>
    	<url-pattern>/messagebroker/*</url-pattern>
 	</servlet-mapping>
 
-->
 
</web-app>

Feito isso, iremos adicionar dentro da pasta WebContent a pasta flex que foi previamente descompactada do arquivo blazeds.war, e também todo o conteúdo da pasta lib para dentro do diretório WebContent/WEB-INF/lib , obtendo o seguinte resultado:

Feito isso, iremos configurar o único arquivo .xml do BlazeDS para que esse exemplo funcione. O arquivo WEB-INF/flex/remoting-config.xml. Iremos adicionar uma configuração para informar ao BlazeDS sobre o serviço ContatoService que foi criado anteriormente, conforme abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<?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="ContatoService">
    	<properties>
    		<source>br.com.horochovec.service.ContatoService</source>
    	</properties>
    </destination>
 
</service>

Após essa última configuração, podemos exportar o nosso projeto para um servidor web. Nesse caso, utilizaremos o Tomcat 6.x. Neste artigo não entrarei em detalhes de sua instalação e configuração.

Bom, as configurações no projeto Java já foram finalizadas, e considerando que o deploy da aplicação dentro do Tomcat já foi realizado, a partir deste momento iremos trabalhar diretamente com o Flash Builder.

Neste artigo irei demonstrar a comunicação utilizando o Flash Builder e a versão do Flex 4. Você pode fazer o download da versão 4.0 do Flash Builder e do Flex 4 SDK aqui.

Após instalado e iniciado o Flash Builder, iremos criar um projeto no seguinte molde:

As configurações feitas na segunda tela de configuração são bastante importantes. Fazendo elas da forma correta, você estará apto a iniciar o projeto sem fazer novas configurações.

Na primeira linha, em Root Folder, foi apontado o diretório de deploy da minha aplicação dentro do meu servidor de aplicação.

Na segunda linha, em Root URL, foi apontado o caminho da URL para abertura da aplicação em meu navegador de internet.

Na terceira linha, em ContextRoot, apontamos o nome da nossa aplicação.

Na quarta e ultima linha, em Output folder, apontamos o diretório de onde deve ser exportados os arquivos quando compilados. Para esse tutorial, foi apontado diretamente o diretório de minha aplicação dentro do meu servidor Tomcat.

Como resultado, o Flash Builder irá criar e disponibilizar no workspace um projeto da seguinte forma:

É muito importante fazer a conferência de uma configuração gerada automaticamente pelo Flash Builder em cima dos parametros informados na segunda etapa da criação do projeto. No menu ‘Project’ vá na opção ‘Properties’ e confira as propriedades de acordo com a imagem abaixo:

Iremos criar uma tela no Flash Builder que contenha dois campos text input para preencher as informações do nome e email do contato, e também um grid para conter a lista dos contatos que serão adicionados no Java e retornarão ao Flex através do BlazeDS.

Segue sua implementação

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" height="419">
 
 
	<fx:Declarations>
 
	</fx:Declarations>
 
 
	<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
 
	</s:Panel>
 
	<s:Panel x="12" y="166" width="400" height="227" title="Pesquisa" left="10">
		<mx:DataGrid x="10" y="10" bottom="30" left="5" right="5" top="5" id="grid">
		</mx:DataGrid>
		<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5" id="button"/>
	</s:Panel>
</s:Application>

A partir deste momento, usaremos os recursos de Data/Services presentes no Flash Builder 4 para a geração da comunicação com o Java.

Primeiro, iremos conectar o Flash Builder com o BlazeDS. Para isso, na aba “Data/Services” clique na opção “Connect to Data/Service”. Caso ela não esteja disponivel em seu workspace, vá ao menu “Window” e marque a opção “Data/Services”.

Feito isso, na próxima tela, marque a opção “BlazeDS”, clique em Next e marque a opção para não utilizar controle de acesso. Conforme as telas abaixo:

Na última tela, você deve marcar os serviços que deseja adicionar a aplicação, com opção de definição de endereços de pacotes e depois finalizar a criação do Objeto, conforme:

Após finalizar a configuração do serviço remoto, obtemos o seguinte resultado no Flash Builder.

Agora, iremos definir que no momento do click no botão logo abaixo do DataGrid, a aplicação deverá invocar o método getListContato().

O primeiro passo para isso, é clicar com o botão direito sobre o botão com do painel que contem o DataGrid e marcar a opção “Generate Service Call“. Feito isso configure a tela do serviço conforme apresentado abaixo:

Feito isso, selecione o DataGrid e clicando com o botão direito dentro dele, selecione a opção “Bind to Data” e configure a tela conforme informado abaixo:

Nesse momento, o painel responsável por listar as informações da nossa agenda de contato já está finalizado.

Agora, clicando novamente com o botão direito em cima do DataGrid, clique na opção “Generate Details Form” e configure a tela conforme abaixo:

O formulário gerado será adicionado no mesmo container que estiver o DataGrid, portanto, será necessário reposicioná-lo dentro do Panel já criado, conforme imagem abaixo:

Ok, agora basta configurarmos o clique do botão de salvar para que adicione novos contatos.

O primeiro passo é alterar o label do botão para “Cadastrar“.

O segundo passo é clicar com o botão direito sobre o botão de cadastro e selecionar a opção “Generate Service Call” e configure a opção da seguinte forma:

Ao terminar essa configuração, você será direcionado diretamente para a implementação do click do botão com a chamada do serviço remoto. A implementação gerada do método será a seguinte:

1
2
3
4
5
6

protected function button2_clickHandler(event:MouseEvent):void
{
	contato.email = emailTextInput.text;
	contato.nome = nomeTextInput.text;
	addContatoResult.token = contatoService.addContato(/*Enter value(s) for */ arg0);
}

E você deverá fazer a seguinte alteração. Adicionar o parametro a ser enviado no método addContato() e inicializar o objeto contato, da seguinte forma:

1
2
3
4
5
6
7

protected function button2_clickHandler(event:MouseEvent):void
{
	contato = new Contato();
	contato.email = emailTextInput.text;
	contato.nome = nomeTextInput.text;
	addContatoResult.token = contatoService.addContato(contato);
}

Com isso, nosso projeto estará enviado as informações para o Java. Agora, para finalizar, iremos adicionar um evento para disparar um método quando tivermos o resultado do serviço remoto.

No CallResponder com o id “addContatoResult” pressione o CTRL + SPACE para acionar o code complete e acione o event “result“, e em seguida, solicite para que seja adicionado o ResultHandler para o event adicionado, conforme imagens abaixo:

E na função adicionada no código devemos fazer a seguinte implementação:

1
2
3
4
5

protected function addContatoResult_resultHandler(event:ResultEvent):void
{
	contato = new Contato();
	getListContatoResult.token = contatoService.getListContato();
}

Rodando a aplicação, teremos como resultado no navegador o seguinte:

E como resultado final no código fonte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" height="419" xmlns:services="services.*" xmlns:valueObjects="valueObjects.*">
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
 
			protected function button_clickHandler(event:MouseEvent):void
			{
				getListContatoResult.token = contatoService.getListContato();
			}
 
 
			protected function button2_clickHandler(event:MouseEvent):void
			{
				var contato : Contato = new Contato();
				contato.email = emailTextInput.text;
				contato.nome = nomeTextInput.text;
				addContatoResult.token = contatoService.addContato(contato);
			}
 
 
			protected function addContatoResult_resultHandler(event:ResultEvent):void
			{
				contato = new Contato();
				getListContatoResult.token = contatoService.getListContato();
			}
 
		]]>
	</fx:Script>
 
 
	<fx:Declarations>
		<s:CallResponder id="getListContatoResult"/>
		<services:ContatoService id="contatoService" fault="Alert.show(event.fault.faultString + 'n' + event.fault.faultDetail)" showBusyCursor="true"/>
		<valueObjects:Contato id="contato"/>
		<s:CallResponder id="addContatoResult" result="addContatoResult_resultHandler(event)"/>
	</fx:Declarations>
 
	<fx:Binding source="grid.selectedItem as Contato" destination="contato"/>
 
	<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
		<mx:Form defaultButton="{button2}" x="1" y="-4" bottom="0" left="0" right="0" top="0">
			<mx:FormItem label="Email">
				<s:TextInput id="emailTextInput" text="{contato.email}"/>
			</mx:FormItem>
			<mx:FormItem label="Nome">
				<s:TextInput id="nomeTextInput" text="{contato.nome}"/>
			</mx:FormItem>
			<s:Button id="button2" label="Cadastrar" click="button2_clickHandler(event)"/>
		</mx:Form>
 
	</s:Panel>
 
	<s:Panel x="12" y="166" width="400" height="227" title="Pesquisa" left="10">
		<mx:DataGrid x="10" y="10" bottom="30" left="5" right="5" top="5" id="grid" dataProvider="{getListContatoResult.lastResult}">
			<mx:columns>
				<mx:DataGridColumn headerText="email" dataField="email"/>
				<mx:DataGridColumn headerText="nome" dataField="nome"/>
			</mx:columns>
		</mx:DataGrid>
		<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5" id="button" click="button_clickHandler(event)"/>
	</s:Panel>
</s:Application>

Para fazer o download do projeto clique aqui.

Espero ter ajudado, um abraço

Se você tentar instalar o Flex Builder 3 como plugin no Eclipse 3.5 (Galileo), você irá se deparar com uma mensagem de erro dizendo que o plugin não pôde ser instalado. Mas o FB3 pode sim rodar no Eclipse 3.5.

Ignore as mensagens de erro que aparecerem e termine a instalação do plugin. Depois, vá até o diretório onde está o arquivo executável do eclipse, entre na pasta links e edite o arquivo com.adobe.flexbuilder.feature.core.link. Dentro deste arquivo haverá uma única linha mais ou menos assim:

C:/Arquivos de programas/Adobe/Flex Builder 3 Plug-in

Altere essa linha, adicionando “path=” no começo dela. O seu arquivo ficará assim:

path=C:/Arquivos de programas/Adobe/Flex Builder 3 Plug-in

Pronto, o plugin do FB está funcionando!

Bons códigos!

Posts relacionados

• Instalação “avançada” do RestfulX no seu projeto Rails“Advanced” installation of RestfulX into your Rails app“>Instalação “avançada” do RestfulX no seu projeto Rails“Advanced” installation of RestfulX into your Rails app (0)
• Você precisa do arquivo pro11.msi? Acho que não …Do you need the pro11.msi file? I don’t think so …“>Você precisa do arquivo pro11.msi? Acho que não …Do you need the pro11.msi file? I don’t think so … (112)
• Erro “bad line length character” no Git“>Erro “bad line length character” no Git (1)
• Na web como os chineses“>Na web como os chineses (1)
• Instalando o Rails 2 no Debian“>Instalando o Rails 2 no Debian (2)
• Error #2032: Stream Error.“>Error #2032: Stream Error. (5)

© Elvis for Elvis Fernandes, 2009. |
Permalink |
7 comentários |
Adicione ao
del.icio.us


Tags: eclipse, erro, flex builder, galileo, instalação, plugin

Olá Pessoal,

Foi lançada hoje a nova versão do Eclipse, a 3.5 codinome Galileo.
Para baixar basta acessar a página de downloads.

Grande abraço.