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.

Neste post vou explicar como usar a API de Log para mostrar os logs de execução da aplicação e também como usar o componente TraceTarget, que é muito útil para poder recuperar as informações das chamadas para o servidor, facilitando a resolução de problemas.

No Flex temos duas opções para recuperar informações ou logs de execução de uma aplicação. Uma primeira maneira e a mais utilizada, é usar a função global trace(”) para mostrar informações no console do FlashBuilder. Essa abordagem sempre requer que a aplicação esteja sendo executada em modo de debug, o que exige a instalação de um FlashPlayer versão de debug. Lógico que para o ambiente de desenvolvimento isso não é um problema, já que a instalação do FlashBuilder já inclui a versão correta do FlashPlayer versão debug. Mais e quando a aplicação está em produção, ou seja, quando não contamos com a versão de debug do FlashPlayer? Ai que entra a segunda opção.Na segunda opção vamos usar a API de Logging do Flex, que vai nos permitir delegar para uma classe a função de logar informações, seja usando o trace(”), primeira abordagem, ou até mesmo customizando a forma de apresentação. Esta abordagem também nos permite controlar o que é exibido, utilizado categorias e nível de log.

A API de Logging do Flex é muito simples de ser usada. Toda vez que queremos usa-la, estaremos envolvendo duas partes:

1. O Logger, que possui os meios para enviar informações em diversos níveis (all, debug, info, warn, error e fatal) em uma determinada categoria para o Log Target. O Logger sempre irá implementar a interface ILogger, iremos utilizar a classe mx.logging.LogLogger, que já vem no SDK;
2. O Log Traget, que será responsável por registrar a informação usando o trace(”) ou outra implementação. Iremos utilizar a classe mx.logging.targets.TraceTarget.

Para ficar mais fácil de entender como usar a API, vamos imaginar que queremos logar quando a aplicação é pré-inicializado, inicializado e criado.Inicialmente iremos usar a função global trace(”) e depois usar as classes de Log.

Ler o resto…

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 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:blazedstomcatbin

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:eclipseeclipse.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 da nossa classa 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:blazedsBlazedsConfigBase

Localize agora o arquivo blazeds.war e descompacte-o na pasta que acabamos de criar:
Arquivo: C:blazedsblazeds.war
Pasta: C:blazedsBlazedsConfigBase

Veja o contéudo da pasta C:blazedsBlazedsConfigBase>:
C:blazedsBlazedsConfigBaseMETA-INF
C:blazedsBlazedsConfigBaseWEB-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:blazedsBlazedsConfigBaseWEB-INF

Copie o arquivo e os diretórios abaixo para WebContentWEB-INF, dentro do Eclipse:
C:blazedsBlazedsConfigBaseWEB-INFweb.xml
C:blazedsBlazedsConfigBaseWEB-INFflex
C:blazedsBlazedsConfigBaseWEB-INFlib

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:
WebContentWEB-INFweb.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>BlazeDSdisplay-name>
    <description>BlazeDS Applicationdescription>
?
    -- Http Flex Session attribute and binding listener support -->
    <listener>
        <listener-class>flex.messaging.HttpFlexSessionlistener-class>
    listener>
?
    -- MessageBroker Servlet -->
    <servlet>
        <servlet-name>MessageBrokerServletservlet-name>
        <display-name>MessageBrokerServletdisplay-name>
        <servlet-class>flex.messaging.MessageBrokerServletservlet-class>
        <init-param>
            <param-name>services.configuration.fileparam-name>
            <param-value>/WEB-INF/flex/services-config.xmlparam-value>
       init-param>
        <load-on-startup>1load-on-startup>
    servlet>
?
-- begin rds
end rds -->
    <servlet>
        <servlet-name>RDSDispatchServletservlet-name>
		<display-name>RDSDispatchServletdisplay-name>
        <servlet-class>flex.rds.server.servlet.FrontEndServletservlet-class>
		<init-param>
			<param-name>useAppserverSecurityparam-name>
			<param-value>falseparam-value>
		init-param>
        <load-on-startup>10load-on-startup>
    servlet>
?
    <servlet-mapping id="RDS_DISPATCH_MAPPING">
        <servlet-name>RDSDispatchServletservlet-name>
        <url-pattern>/CFIDE/main/ide.cfmurl-pattern>
    servlet-mapping>
?
    <servlet-mapping>
        <servlet-name>MessageBrokerServletservlet-name>
        <url-pattern>/messagebroker/*
    
?
    
        index.html
        index.htm
    
?
    
    
?

Ainda dentro do Eclipse localize e abra o arquivo:
WebContentWEB-INFflexremoting-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.UsuarioServicesource>
    	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:blazedstomcatwebapps

Crie uma pasta para o projeto Java:
C:blazedstomcatwebappsGerenciaUsuario

Agora dentro do Eclipse, clique sobre a pasta WEB-INF e a copie Edit > Copy.

Cole então seu conteúdo na pasta que criada no passo acima:
C:blazedstomcatwebappsGerenciaUsuario

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!

Slides e fontes da minha apresentação sobre Flex Messaging na Semana da Informática da UNIVILLE.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="application1_creationCompleteHandler(event)" width="100%" height="100%">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			import mx.messaging.messages.AsyncMessage;
			import mx.messaging.messages.IMessage;
			import mx.rpc.Fault;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;

			private function send():void{
				var message:IMessage = new AsyncMessage();
				message.body.subtopic = "Joao"
				message.body.chatMessage  = txtMessage.text;
				producer.send(message);
				txtMessage.text = "";
			}

			private function messageHandler(message:IMessage):void{
				txtConversation.text += message.body.chatMessage + "n";
			}

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				consumer.subscribe();
			}

		]]>
	</mx:Script>

	<!--Responsável por receber as mensagens-->
	<mx:Consumer id="consumer" destination="chat" message="messageHandler(event.message)"/>

	<!--Responsável por enviar as mensagens-->
	<mx:Producer id="producer" destination="chat"/>

	<mx:TextArea id="txtConversation" width="100%" height="100%"/>
	<mx:TextArea id="txtMessage" width="100%" height="100"/>

	<mx:ControlBar width="100%" horizontalAlign="right">
		<mx:Button label="Enviar" click="send()"/>
	</mx:ControlBar>

</mx:Application>

O livro Dominando Flex e Java está muito perto de ser lançado! Você tem interesse na sua compra?? Preencha este pequeno formulário para receber em seu email uma oferta exclusiva, no dia de lançamento da obra:

http://bit.ly/CadastroFlexJava

Algumas informações sobre o livro:

• Quantidade de páginas: 256
• Principais Tecnologias abordadas
• Flex
• Java
• Eclipse
• MySql
• JBoss
• Tomcat
• Blazeds
• Spring
• Hibernate
• RTMP (Messaging)
• JasperReports e iReports
• Requisitos
• Saber programar
• Não é mostrado o que é if, for, essas coisas…
• Capítulos
• 1) Introdução
• 2) Preparando o ambiente
• 3) BlazeDS
• 4) CRUD com Flex e Java
• 5) Spring e Hibernate
• 6) Criando um sistama real
• 7) Criando aplicações RMTP
• Relatórios

Sumário completo: http://dl.dropbox.com/u/6740457/flex-java/Sumario-Livro-Dominando-Flex-Java.pdf

Seguindo o artigo anterior, iremos agora utilizar o Flex em conjunto com o PHP para salvar as imagens no servidor. A conexão entre o Flex e o PHP será realizada pelo AMFPHP.

Este artigo teve uma grande ajuda do Bruno Santana, que nos mandou o código sobre a gravação do arquivo pela webcam.

Pré requisitos

• Wamp Server instalado
• Biblioteca AMFPHP – http://www.amfphp.org/ 

Passos iniciais

• Cria a pasta c:wampwwwFlexFoto
• Crie o projeto FlexFoto. Atenção na parte de definição do Output Folder:

e

• Copie a pasta amfphp do zip para c:wampwwwFlexFoto
• O esquema de pastas fica como na figura a seguir:

Agora vamos configurar o services-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
    <services>
        <service id="amf-service"
            class="flex.messaging.services.RemotingService"
            messageTypes="flex.messaging.messages.RemotingMessage">
            <destination id="amf">
                <channels>
                    <channel ref="amf-endpoint"/>
                </channels>
                <properties>
                    <source>*</source>
                </properties>
            </destination>
        </service>
    </services>
    <channels>
        <channel-definition id="amf-endpoint"
            class="mx.messaging.channels.AMFChannel">
            <endpoint uri="amfphp/gateway.php"
                class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>

E configuramos o services-config.xml nas propriedades do projeto Flex:

Agora vamos fazer um teste de conexão. Crie a seguinte classe: HelloWorld.php em www/FlexFoto/amfphp/services

<?php
class HelloWorld
{
  function Say()
  {
    return "Hello World from amfphp";
  }
}

E no Flex, adicione o seguinte código:

<?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"
		   minWidth="955" minHeight="600">

<fx:Declarations>
	<s:RemoteObject id="HelloWorld"
	                   destination="amf" source="HelloWorld">
		<s:method name="Say" result="OnSayResult(event)"/>
	</s:RemoteObject>
</fx:Declarations>

<fx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.rpc.events.ResultEvent;

		protected function OnSayResult(e:ResultEvent):void
		{
			mx.controls.Alert.show(e.result.toString());
		}
	]]>
</fx:Script>

<s:Button label="Hello World">
	<s:click>
		<![CDATA[
		HelloWorld.Say();
		]]>
	</s:click>
</s:Button>

</s:Application>

Teste a aplicação. Veja inicialmente se a aplicação abre com o endereço "localhost" e não "c:….". Clique no botão e verifique se a mensagem "Hello World from AMFPHP" surgir. Se for algum erro, você precisa investigar o erro através da mensagem de erro padrão do log de erros do wamp (c:wamplogsapache_error.php). Se não achou nada, use o Firefox+Firebug+Flashbug ou então use o Charles Proxy(http://www.charlesproxy.com/)

Configurando a WebCam

Esta parte é tranquila, já que vimos isso no artigo anterior. Apague o “hello world” do teste de conexão e faça:

<?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"
			   minWidth="955" minHeight="600">

	<fx:Declarations>
		<s:RemoteObject id="Foto"
		               destination="amf" source="Foto">

		</s:RemoteObject>
	</fx:Declarations>

	<mx:VideoDisplay id="webcam"
				 	 width="160" height="120"
					 top="100"
					 left="100"
					 >
		<mx:creationComplete>
			<![CDATA[
				webcam.attachCamera(Camera.getCamera());
			]]>
		</mx:creationComplete>

	</mx:VideoDisplay>

	<s:Button label="Salvar!!" top="50" left="150">

	</s:Button>

</s:Application>

Salvando a imagem no servidor

Até aqui apenas exibimos a câmera e o botão salvar. Vamos agora dar a funcionalidade necessária para enviar a imagem da WebCam para o servidor. Crie o arquivo Foto.php na pasta services, com o seguinte conteúdo:

<?php
class Foto
{
 function __construct()
 {

 }

 function Save($fotoAsString)
 {
	//obtém um id unico para o arquivo
	$nomeArquivo = uniqid();

	//configura o nome do arquivo
	$nomeImagem = "imagem/{$nomeArquivo}.jpg";

	//abre o arquivo. A opção w vai criá-lo, caso nao exista
	$arquivo = fopen($nomeImagem, 'w');

	//escreve no arquivo
	fwrite($arquivo, base64_decode($fotoAsString));

	return "ok";

 }
}

Aqui, criamos no método Save uma rotina para salvar a imagem no disco. Isso é feito graças a transformação da foto em string e na sua volta, pelo método base64_decode.

Exibindo as imagens gravadas no Flex

Assim que a foto é gravada, a reqisição feita pelo Flex volta, com um "ok". Então podemos usar outra rotina para ler todas as imagens e apresentá-las no flex:

<s:List
	id="exibirImagens"
	top="10"
	left="150"
	right="10"
	bottom="10"
	width="530"
	height="400"
	>
	<s:layout>
		<s:TileLayout
			requestedColumnCount="5"
			requestedRowCount="8"
			horizontalGap="2"
			verticalGap="2"/>
	</s:layout>
	<s:itemRenderer>
		<fx:Component>
			<mx:Image source="{data}" />
		</fx:Component>
	</s:itemRenderer>
</s:List>

No código acima, criamos uma lista do tipo tile, cujo o itemrenderer é um componente do tipo image.

Para preencher esta lista, usamos o seguinte código:

protected function OnGetAll(event:ResultEvent):void
{
	exibirImagens.dataProvider = new ArrayList((event.result as Array));
}

Ou seja, sempre que chamamos o método GetAll, o php se encarrega de obter uma lista de imagens e retorná-la para o Flex. Com esta lista preenchemos o dataProvider da lista de imagens que possui o itemRenderer.

Para finalizar, o codigo php do método GetAll():

function GetAll()
{
	//http://snipplr.com/view/742/read-images-of-directory/
	$folder = opendir("imagem");
	$pic_types = array("jpg");
	$index = array();

	while ($file = readdir ($folder)) {
		if(in_array(substr(strtolower($file), strrpos($file,".") + 1),$pic_types))
		{
			array_push($index,"amfphp/services/imagem/$file");
		}
	}
	closedir($folder);	

	return $index;
}

O código php lê o diretório e retorna uma array com o caminho completo da imagem.

O resultado final é visto na tela abaixo:

Código fonte

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