Criando uma aplicação com Flex 4, Java e

Blazeds
Publicado em janeiro 12, 2011 por Pablo Souza

Hoje vou mostrar a integração de aplicações Flex 4 com back-end Java, utilizando o Blazeds para
comunicação entre eles. Durante a instalação e configuração do ambiente de desenvolvimento,
estamos considerando que você está trabalhando numa máquina com Windows. Caso não seja este
o caso não fique preocupado, basta repetir os mesmos passos descritos para o Windows adaptando
para o sistema operacional que você estiver utilizando.

1. Instalações

- Download Java Development Kit (JDK6), e após configurar a váriavel de sistema JAVA_HOME.
- Download Eclipse IDE for Java EE Developers.
- Download BlazeDS Turnkey, contêm uma versão configurada do servidor Tomcat e diversos
exemplos.
- Download Adobe Flash Builder 4, versão Standalone.

2. Instalando o BlazeDS

Após o download do BlazeDS descompacte-o num diretório de sua preferência:

C:\blazeds

* Nesse momento você já deve ter instalado o JDK e confgurado a variável JAVA_HOME.

Para verificar se tudo está funcionando vamos iniciar o servidor Tomcat.

Abra um prompt do Windows e digite:

cd C:\blazeds\tomcat\bin

Em seguida inicie o servidor Tomcat:

catalina start

Após a inicialização do servidor, você verá a janela abaixo:

O servidor de aplicação foi inicializado na porta 8400. Como eu disse anteriormente, o BlazeDS
Turnkey vem com uma série de aplicações de exemplo mostrando a integração entre o Adobe Flex e
o Java.

Para verificar se o servidor está rodando corretamente e ver as aplicações que citei, digite num
browser de sua preferência:
http://localhost:8400/

3. Instalando o Eclipse

Após o download do Eclipse, descompacte o conteúdo do arquivo compactado para uma pasta um
diretório de sua preferência:
C:\eclipse

* Assim como o BlazeDS, o Eclipse também não necessita de instalação. Basta descompactá-lo
para utilizar.

4. Instalando o Flash Builder 4

Para a instalação do Adobe Flash Builder 4 basta você ir avançando as opções, sempre mantendo os
valores padrões. A versão Standalone é uma versão Trial que dura 60 dias. No site da Adobe você
pode obter gratuitamente uma licensa de utilização caso você se enquadre nas exigências legais
(estudantes, profissionais autônomos, etc).

5. Criando o projeto Java

Abra a pasta onde você descompactou o Ecplise e execute-o:

C:\eclipse\eclipse.exe

Em seguida vamos criar nosso projeto Java. Clique em:

File > New > Dynamic Web Project
Agora vamos criar um bean que será usado na serialização das informações que serão trocadas entre
o Adobe Flex e o Java.

Clique com o botão direito do mouse no projeto e então:

New > Class
A seguir a implementação da nossa classe Java bean Usuario.java:

package br.com.rectius.model;

import java.io.Serializable;

public class Usuario implements Serializable {

/**
*
*/
private static final long serialVersionUID = 1L;

private String nome;

private String email;
private String cargo;

public void setNome(String nome) {

this.nome = nome;
}
public String getNome() {
return nome;
 }

public void setEmail(String email) {

this.email = email;
}
public String getEmail() {
return email;
}

public void setCargo(String cargo) {

this.cargo = cargo;
}
public String getCargo() {
return cargo;
}

Agora vamos criar nossa camada de serviço, que será o ponto de entrada das requisições do nosso
front-end Flex.

Clique novamente com o botão direito do mouse sobre o projeto e então:

New > Class
A seguir a implementação da nossa camada de serviço UsuarioService.java:

package br.com.rectius.service;

import java.util.ArrayList;

import br.com.rectius.model.Usuario;

public class UsuarioService {

/*
* Como não estamos utilizando nenhuma ferramenta
* para persistência dos dados, vamos armazenar
* a informações nessa lista estática
*/
private static ArrayList<Usuario> listaUsuarios =
new ArrayList<Usuario>();

/*
* Insere um novo usuário
* @param usuario
*/
 public void insereUsuario(Usuario usuario)
{
listaUsuarios.add(usuario);
}

/*
* Retorna todos os usuários
* @return
*/
public ArrayList<Usuario> listaUsuarios()
{
return listaUsuarios;
}

Pronto! Nossa aplicação Java já está finalizada.

6. Configurando o BlazeDS

Para que o Adobe Flex possa se comunicar com nossa camada de serviço no Java, teremos que
modificar alguns arquivos de configuração do BlazeDS.

Abra a pasta onde você descompactou o BlazeDS:

C:\blazeds

Crie um nova pasta chamada:

C:\blazeds\BlazedsConfigBase

Localize agora o arquivo blazeds.war e descompacte-o na pasta que acabamos de criar:

Arquivo: C:\blazeds\blazeds.war
Pasta: C:\blazeds\BlazedsConfigBase

Veja o contéudo da pasta C:\blazeds\BlazedsConfigBase>:

C:\blazeds\BlazedsConfigBase\META-INF
C:\blazeds\BlazedsConfigBase\WEB-INF

* A pasta WEB-INF contém toda a informação necessária para a integração de um projeto Adobe
Flex + Java + Blazeds.

Agora vamos copiar algumas pastas do BlazeDS para dentro nosso projeto Java. Localize a pasta:
C:\blazeds\BlazedsConfigBase\WEB-INF

Copie o arquivo e os diretórios abaixo para WebContent\WEB-INF, dentro do Eclipse:

C:\blazeds\BlazedsConfigBase\WEB-INF\web.xml
C:\blazeds\BlazedsConfigBase\WEB-INF\flex\
C:\blazeds\BlazedsConfigBase\WEB-INF\lib\

A pasta lib contém todas as biliotecas necessárias para realizar a comunicação do Adobe Flex com o
Java.
A pasta flex contém os arquivos de configuração necessários para estabelecer essa comunicação.
Nesse momento a estrutura do seu projeto deve estar como na imagem abaixo:
Agora vamos configurar nossa aplicação para que o Flex consiga se comunicar com o nosso projeto
Java.

Dentro do Eclipse localize e abre o arquivo:

WebContent\WEB-INF\web.xml

Configure-o conforme a seguir:

<?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>BlazeDS</display-name>
<description>BlazeDS Application</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>

<!-- begin rds

end rds -->
<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>
-->

</web-app>

Ainda dentro do Eclipse localize e abra o arquivo:

WebContent\WEB-INF\flex\remoting-config.xml

Dentro desse arquivo é que informamos quais os serviços que nosso front-end Flex poderá ter
acesso. Para tal basta criar um novo destino para cada serviço.

Crie um destino para o serviço UsuarioService adicionando no arquivo remoting-config.xml o

código abaixo:

<destination id="UsuarioService">
<properties>
<source>br.com.rectius.service.UsuarioService</source>
</properties>
</destination>

Pronto! O projeto Java já está configurado para trabalhar com o BlazeDS.

7. Publicando nossa aplicação no Tomcat

Já terminamos o projeto Java e a configuração do BlazeDS. Agora o próximo passo é publicar o

projeto no servidor de aplicações Tomcat.

Navegue até a pasta:

C:\blazeds\tomcat\webapps

Crie uma pasta para o projeto Java:

C:\blazeds\tomcat\webapps\GerenciaUsuario
Agora dentro do Eclipse, clique sobre a pasta WEB-INF e a copie Edit > Copy.
Cole então seu conteúdo na pasta criada no passo acima:
C:\blazeds\tomcat\webapps\GerenciaUsuario

Agora reinicie o servidor de aplicação Tomcat para subir o projeto que acabamos de fazer deploy:
catalina stop
catalina start

08. Criando o projeto Flex

Uma das novidades do novo ambiente de desenvolvimento Adobe Flex, o Flash Builder 4, é sem
dúvidas os recursos de conexão a dados e serviços.
No passo 4 nós fizemos a instalação do Flash Builder 4. Agora localize seu ícone na área de
trabalho ou no menu iniciar e abra o aplicativo.
Em seguida crie um novo projeto Flex. Clique em File > New > Flex Project
Agora faça suas configurações conforme a imagem abaixo:

Root folder: Representa o diretório onde fizemos o deploy do nosso projeto Java, dentro do
servidor de aplicação.
Root URL: Representa a URL de acesso ao projeto no servidor de aplicação.
Context root: Representa o nome da nossa aplicação.
Output folder: Representa o local onde serão compilados os arquivos do Flex.

Clique em Validate Configuration para se certificar de que você configurou tudo corretamente e
em seguida clique em Finish.

Antes de qualquer coisa vamos conferir se o Flash Builder inseriu corretamente um parâmetro de
compilação no projeto Flex.
Clique com o botão direito do mouse no projeto Flex, clique em Properties e certifique-se de que o
argumento de compilação -services foi inserido:

Agora vamos criar a interface. Digite o código abaixo:

<?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">

<s:controlBarContent>
<s:Label text="Gerenciamento de Usuários"
fontWeight="bold" fontSize="18"/>
</s:controlBarContent>

<s:layout>
<s:VerticalLayout
horizontalAlign="center" verticalAlign="middle"
paddingLeft="10" paddingRight="10" paddingBottom="20"
paddingTop="20"/>
 </s:layout>

<s:Panel title="Cadastro de Usuários" width="500">

</s:Panel>

<s:Panel width="500" height="100%" title="Listagem de Usuários">

<mx:DataGrid id="dgUsuarios" left="20" right="20" bottom="20"
top="20">
</mx:DataGrid>
</s:Panel>

</s:Application>
09. Conectando a aplicação Adobe Flex ao Java

Em seguida vamos utilizar os novos recursos inseridos no Flash Builder 4 para se comunicar com o
Java.

Clique em Windows > Data/Services. Após a aba correspondente se abrir clique em Connect to
Data/Service….
Veja que alguns arquivos foram criados automaticamente:
Clique com o botão direito em qualquer ponto da sua Application (não clique nos componentes
Panel ou qualquer outro que não seja a Application) e clique em Generate Service Call:

Em seguida selecione o método listaUsuarios():

Vá para o modo de visualização “Source” e veja que um método handler foi criado para manipular
o evento CreationComplete da Application.
Agora volte para o modo “Design”, clique com o botão direito no componente DataGrid e em
seguida clique em Bind to Data…
Clique no botão OK e veja o resultado:

Finalizamos o código para a listagem dos usuários. Agora precisamos fazer o código que vai inserir
os usuários.

Novamente clique com o botão direito do mouse no componente DataGrid e então clique na opção
Generate Details Form…
Arrume o posicionamento do formulário de cadastro, altere o label do botão. Em seguida clique
com botão direito do mouse sobre o botão e Generate Service Call…

Agora altere o método button_clickHandler que foi gerado automaticamente:

protected function button_clickHandler(event:MouseEvent):void

{
var usuario:Usuario = new Usuario();
usuario.email = emailTextInput.text;
usuario.nome = nomeTextInput.text;
usuario.cargo = cargoTextInput.text;
insereUsuarioResult.token = usuarioService.insereUsuario(usuario);
}

Com isso já conseguimos inserir usuários na coleção do back-end Java. Agora vamos modificar
nosso código para que toda vez que um usuário for inserido os usuários sejam listados novamente
no componente DataGrid.

Agora altere o método insereUsuarioResult_resultHandler:

protected function insereUsuarioResult_resultHandler(event:ResultEvent):void

{
listaUsuariosResult.token = usuarioService.listaUsuarios();
}

Agora rode sua aplicação e veja o resultado final.

Pronto! A aplicação está rodando perfeitamente.
Como lição de casa, faça com que seja possível remover e alterar um usuário.

Fontes do projeto:

Download do projeto Flex (28 KB)

Download do projeto Java (3.67 MB)

Referências:
- Accessing data services overview

Espero que tenham gostado e até a próxima!

Esta entrada foi publicada em BlazeDS, Flex, Java. ligação permanente.

← Dica Flex – O padrão Factory Method
Dica Flex – Usando a tag ArrayElementType →

13 Respostas a Criando uma aplicação com Flex 4, Java e Blazeds

1. Maicon diz:

fevereiro 11, 2011 ás 5:12 pm

Ola, gostaria se possível que tirassem uma duvida: Na parte (9) em que eu vou conectar a
aplicaçao flex com o java e vou em Windows > Data/Services. Após a aba correspondente
se abrir clico em Connect to Data/Service.. qndo dou next aparece uma tela de autenticação
e pede para eu fazer login. Qual seria este??

Obrigado.

Reply

o admin diz:

fevereiro 12, 2011 ás 1:47 pm

Verifique a configuração que vc fez no WebContent\WEB-INF\web.xml

Abs!

Reply

 nemézio diz:

fevereiro 18, 2011 ás 3:48 pm

 Tb não consigo passar desse pedaço… coloquei a mesma configuração do
tutoria no web.xml, mas to quebrando cabeça…
Dá Error executing RDS command. Status Code: 407

Reply

 admin diz:

fevereiro 18, 2011 ás 4:54 pm

No problema anterior ele colocou o mapeamento do Servlet errado,

esqueceu de setar o “param-value” para “false” no web.config
copiado do blazeds.war

Verifique se esse é o seu problema também.

Abs!

Reply

 Pablo Souza diz:

fevereiro 18, 2011 ás 5:00 pm

Você pode tambem baixar o projeto de exemplo que está anexo e

verificar se está funcionando.

Abs!

Reply

2. Gustavo diz:

abril 6, 2011 ás 12:27 am

Vc nao ensinou a especificar o workspace do eclipse e do flashbuilder, pode tirar minha

duvida?
E quando eu tento conectar o BlazeDS, ele coloca uma mensagem….’Unable athenticate
RDS with current security information’ pode me explicar?

Reply

o admin diz:

abril 6, 2011 ás 8:08 am

Olá Gustavo!
 Quanto ao workspace, você pode escolher qualquer pasta de sua preferência, é
indiferente para o tutorial. É o local onde será criado o seu projeto, tanto no Eclipse
quanto no FlashBuilder.
Com relação ao erro que você citou, refaça o passo 6 do tutorial, copiando o web.xml
que coloquei no tutorial para o seu projeto.

Você ainda pode fazer o download dos projetos Flex e Java para comparar o que está
diferente no seu projeto.

Abs!

Reply

3. Antonio diz:

abril 7, 2011 ás 11:39 am

estou com um problema na integração entre o flex + java (com BlazeDS) a rede aqui tem
proxy, e com o ambiente todo configurado (em tese), quando clico em Data/Services e
escolho BlazeDS, aparece uma tela para login.
já tentei colocar no web.xml false para useAppserverSecutiry, e nessa tela de Autenticação
selecionar o []No password required
mas continua dando um erro: Error executing RDS command. Status Code : 407 , Reason :
Proxy Authenticaton Required.
teria algum conselho?

Reply

o admin diz:

abril 7, 2011 ás 11:48 am

Esse passo que você descreveu que já fez deveria ser suficiente.

Tente comentar o trecho de configuração do servlet RDSDispatchServlet

Você tentou baixar o projeto java que eu coloquei anexo ao post e subi-lo no seu
ambiente. Assim você pode procurar onde está a diferença entre os projetos,
analisando os arquivos de configuração.

abs!

Reply

 Antonio diz:

abril 7, 2011 ás 2:51 pm

Pois éh,..!
mas então… tentei comentar todo o bloco do RDSDispatchServlet, reiniciei o
Catalina, e mesmo assim nada!
Se não for muito incomodo vc poderia anexar tmb no post o tomcat e o jdk.

estou com os dois aqui já porém pra desencargo de consciência ajudaria…

pois já tentei de várias formas resolver isso e até agora nada!

Qdo eu entrava em
http://localhost:8400/GerenciaUsuario/messagebroker/amf eram exibidos 3
erros os quais não consigo mais vê-los pois agora até o Catalina tá dando erro
na inicialização:

*com o bloco acima citado, comentado ou não:

–> **** MessageBrokerServlet in application ‘BlazeDS’ failed to initialize

due to runtime exception: Exception:
flex.messaging.config.ConfigurationException: Connection timed out:
connect

e acabou de aparecer outro agora na inicialização… “07/04/2011 13:43:46

org.apache.catalina.core.AprLifecycleListener init
INFO: The Apache Tomcat Native library which allows optimal performance
in produ
ction environments was not found on the java.library.path: c:\Arquivos de
progra
mas\Java\jdk1.6.0_24\bin;.;C:\WINDOWS\Sun\Java\bin;C:\WINDOWS\syst
em32;C:\WINDOW
S;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem
;C:\blazeds\tomcat\bin;C:\blazeds\tomcat”

parece que ao invés de melhorar minhas tentativas estão apenas piorando a

situação!!!

Reply

 admin diz:

abril 7, 2011 ás 3:13 pm

Entra no Gmail que te ajudo. Já te add aqui!!!

abs!

Reply

 Antonio diz:

abril 7, 2011 ás 11:08 pm

 Salve salve…!!!
Pois éh… depois de muita luta… está funcionando…!!!

Para que todos saibam como resolver o problema do erro 407

descrito acima, quando o ambiente de desenvolvimento estiver
sob um proxy…

O que acontece é o seguinte, mesmo colocando para o FB ou

as configurações padrões do sistema de proxy para não utilizar
o proxy para conexões locais, o FB utiliza essas configurações
para realizar a conexao RDS no service BlazeDS, sendo
assim, ou desabilita o proxy das configurações gerais do
sistema ou nas configurações de proxy do Flash Builder
coloca como Direct ao inves de Manual ou Native…!!!

Vale resaltar que a ajuda de nosso ilustrissimo Admin foi vital

para a compreensão do ambiente o que me fez perceber
juntamente com um outro colega de trabalho esse problema,
então creditos sejam dados ao nosso Admin e ao Wallas
(morais.intec).

coloquei o blog no meu leitor de rss

=D
parabens! teria funcionado de primeira se não fosse o
probleminha com o meu proxy
nota 10!

 admin diz:

abril 8, 2011 ás 11:23 am

Valeu !!!! =)