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

Depois de alguns dias sem postar nada no blog, vou atender ao pedido de alguns colegas que fizeram um curso de Scrum a uns dias atrás e postar algo no blog sobre como começar um projeto com Java e Flex, como faço para “instalar” o BlazeDS e fazer minha primeira comunicação.

If you want to see this post in english, click here.

Para quem está iniciando no desenvolvimento Flex com Java como back-end e está optando por trabalhar com Remote Objects precisa trabalhar com algo que faça a comunicação entre Flex e Java.

Existem diversas opções hoje no mercado, e a própria Adobe disponibiliza dois produtos para isso.  O objetivo desse tutorial é exemplificar o uso do BlazeDS para essa comunicação.

O BlazeDS é uma ferramenta open-source, e hoje é amplamente utilizada para a comunicação Java – Flex. Tem como objetivo prover ao desenvolvedor Flex uma forma de se comunicar com seu back-end através de Remote Objects ou comunicação Real-Time através de Messages.

Vale lembrar que o BlazeDS pode ser utilizado para comunicações de aplicações desenvolvidas em Flex para Web (Flash Player) ou para Desktop (AIR).

Mas como iniciar? Primeiramente, devemos fazer o download (clique aqui para o download) através do site oficial do BlazeDS.

O download que estamos fazendo é a versão binária, contendo um arquivo .WAR que contém os arquivos .xml e os .jars necessários para a sua utilização. Também é possível fazer o download do código-fonte do BlazeDS clicando aqui.

Após o download e sua descompactação, também é necessário descompactar o arquivo blazeds.war. Para isso, você poderá utilizar um descompactador como o WinRAR por exemplo. Fazendo isso, obteremos a seguinte estrutura:

O conteúdo da pasta META-INF será desconsiderado. Levaremos em consideração apenas o conteúdo da pasta WEB-INF conforme seguinte apresentação:

A pasta classes e src serão desconsideradas nesse tutorial também.

Dentro da pasta flex, temos os arquivos XMLs necessários para configuração em nosso projeto que será criado no Java, e na pasta lib, temos as bibliotecas java (*.jar) que deverão ser incorporados em nosso projeto. E o arquivo web.xml contém as informações necessárias para a configuração do servlet em nosso projeto.

Nesse artigo, o software utilizado para criação e desenvolvimento do projeto Java é Eclipse Galileu junto com o  WebTools. Você pode tranquilamente adaptar esse tutorial para qualquer IDE que você utilize em seu dia-a-dia.

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.

O primeiro arquivo que iremos configurar, é o arquivo web.xml que fica dentro da pasta WebContent/WEB-INF/. Para essa configuração, iremos adicionar o conteúdo do arquivo web.xml que veio dentro do arquivo blazeds.war que foi previamente descompactado. 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

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>FlexDuck</display-name>
	<welcome-file-list>
		<welcome-file>FlexDuck.html</welcome-file>
	</welcome-file-list>
 
 
    <!-- 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>
        <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-mapping>
        <servlet-name>MessageBrokerServlet</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 Flex.

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:

Após conferir essas informações, podemos iniciar o desenvolvimento do projeto no Flex.

Primeiramente, iremos criar o bean que será enviado para o Java e vice-versa. Esse bean será um espelho do bean criado no Java, conforme abaixo:

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

package br.com.horochovec.model
{
	[RemoteClass(alias="br.com.horochovec.model.Contato")]
	[Bindable]
	public class Contato
	{
 
		public var nome 	: String;
 
		public var email 	: String;
 
		public function Contato()
		{
		}
 
	}
}

Em seguida, irei 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
23
24

<?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>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
		<s:Button x="55" label="Cadastrar" bottom="10" id="btnCadastro"/>
		<s:Label x="10" y="16" text="Nome:"/>
		<s:Label x="13" y="50" text="Email:"/>
		<s:TextInput x="56" y="10" width="332" id="nome"/>
		<s:TextInput x="56" y="44" width="332" id="email"/>
	</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="{this.listContato}">
			<mx:columns>
				<mx:DataGridColumn headerText="Nome" dataField="nome"/>
				<mx:DataGridColumn headerText="Email" dataField="email"/>
			</mx:columns>
		</mx:DataGrid>
		<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5"/>
	</s:Panel>
</s:Application>

Após a construção da tela, iremos criar o serviço remoto que será responsável pela comunicação com o Java. Conforme trecho abaixo, criaremos um RemoteObject e dois métodos para serem executados pela aplicação. Definiremos também os métodos que devem ser disparados quando ocorrerem os retornos, tanto de sucesso quanto de falha na comunicação.

1
2
3
4
5
6
7
8
9
10
11
12

<fx:Declarations>
	<s:RemoteObject id="remoteObject" 
					destination="ContatoService" 
					fault="onFault(event);">
		<s:method name="addContato" 
				  result="onResultAddContatoHandler(event);"
				  fault="onFault(event);" />
		<s:method name="getListContato" 
				  result="onResultGetListContatoHandler(event);"
				  fault="onFault(event);" />
	</s:RemoteObject>
</fx:Declarations>

Feito isso, faremos a implementação dos métodos a cima informados para resultados do RemoteObject.

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

<fx:Script>
<![CDATA[
import br.com.horochovec.model.Contato;
 
import mx.collections.ArrayList;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
 
[Bindable]
public var contato : Contato 		= new Contato();
 
[Bindable]
public var listContato : ArrayList 	= new ArrayList();
 
 
/**
 * Metodo para falhas na comunicação
 */				
protected function onFault(event:FaultEvent) : void
{
	Alert.show('Erro');
}
 
/**
 * Funcao para retorno de cadastro do Contato
 */
protected function onResultAddContatoHandler(event:ResultEvent) : void 
{
	Alert.show('Adicionado');
}
 
/**
 * Funcao para retorno da lista de contatos
 */
protected function onResultGetListContatoHandler(event:ResultEvent) : void
{
	this.listContato = event.result as ArrayList;
}
 
]]>
</fx:Script>

Agora, iremos implementar no botão do painel de cadastro e ao botão no painel de listagem de informações, o evento de click para que seja enviado ao java o bean para cadastro e solicitado ao java a lista de contatos.

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

<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
	<s:Button x="55" label="Cadastrar" bottom="10" id="btnCadastro" click="btnCadastroClickHandler(event)"/>
	<s:Label x="10" y="16" text="Nome:"/>
	<s:Label x="13" y="50" text="Email:"/>
	<s:TextInput x="56" y="10" width="332" id="nome"/>
	<s:TextInput x="56" y="44" width="332" id="email"/>
</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="{this.listContato}">
		<mx:columns>
			<mx:DataGridColumn headerText="Nome" dataField="nome"/>
			<mx:DataGridColumn headerText="Email" dataField="email"/>
		</mx:columns>
	</mx:DataGrid>
	<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5" id="btnListar" click="btnListarClickHandler(event)"/>
</s:Panel>

Com os eventos de click de cada botão implementados, falta apenas fazer a implementação de seus métodos. Para isso vamos adicionar ao bloco fx:script o seguinte código:

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

/**
 * Evento de click do botão de cadastro
 */
protected function btnCadastroClickHandler(event:MouseEvent):void
{
	this.remoteObject.addContato(this.contato);
}
 
/**
 * Evento de click do botão de pesquisa
 */
protected function btnListarClickHandler(event:MouseEvent):void
{
	this.remoteObject.getListContato();
}

Para finalizar o código, irei adicionar o Binding entre os dois TextInput e o bean que será serializado para o Java:

1
2

<fx:Binding source="nome.text" destination="contato.nome" twoWay="true"/>
<fx:Binding source="email.text" destination="contato.email" twoWay="true"/>

Feito isso, pronto, nossa aplicação de teste está pronta para o uso final, como resultado, obtemos:

A implementação completa do Flex 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
98
99
100
101
102
103

<?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:Script>
	<![CDATA[
		import br.com.horochovec.model.Contato;
 
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import mx.rpc.events.FaultEvent;
		import mx.rpc.events.ResultEvent;
 
		[Bindable]
		public var contato : Contato 				= new Contato();
 
		[Bindable]
		public var listContato : ArrayCollection 	= new ArrayCollection();
 
 
		/**
		 * Metodo para falhas na comunicação
		 */				
		protected function onFault(event:FaultEvent) : void
		{
			Alert.show('Erro');
		}
 
		/**
		 * Funcao para retorno de cadastro do Contato
		 */
		protected function onResultAddContatoHandler(event:ResultEvent) : void 
		{
			Alert.show('Adicionado');
		}
 
		/**
		 * Funcao para retorno da lista de contatos
		 */
		protected function onResultGetListContatoHandler(event:ResultEvent) : void
		{
			this.listContato = event.result as ArrayCollection;
		}
 
		/**
		 * Evento de click do botão de cadastro
		 */
		protected function btnCadastroClickHandler(event:MouseEvent):void
		{
			this.remoteObject.addContato(this.contato);
		}
 
		/**
		 * Evento de click do botão de pesquisa
		 */
		protected function btnListarClickHandler(event:MouseEvent):void
		{
			this.remoteObject.getListContato();
		}
 
	]]>
	</fx:Script>
 
	<fx:Binding source="nome.text" 	destination="contato.nome" 	twoWay="true"/>
	<fx:Binding source="email.text" destination="contato.email" twoWay="true"/>
 
	<fx:Declarations>
 
		<s:RemoteObject id="remoteObject" 
						destination="ContatoService" 
						fault="onFault(event);">
 
			<s:method name="addContato" 
					  result="onResultAddContatoHandler(event);"
					  fault="onFault(event);" />
			<s:method name="getListContato" 
					  result="onResultGetListContatoHandler(event);"
					  fault="onFault(event);" />
 
		</s:RemoteObject>
 
	</fx:Declarations>
 
 
	<s:Panel width="400" height="137" title="Cadastro" left="10" top="10">
		<s:Button x="55" label="Cadastrar" bottom="10" id="btnCadastro" click="btnCadastroClickHandler(event)"/>
		<s:Label x="10" y="16" text="Nome:"/>
		<s:Label x="13" y="50" text="Email:"/>
		<s:TextInput x="56" y="10" width="332" id="nome"/>
		<s:TextInput x="56" y="44" width="332" id="email"/>
	</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="{this.listContato}">
			<mx:columns>
				<mx:DataGridColumn headerText="Nome" dataField="nome"/>
				<mx:DataGridColumn headerText="Email" dataField="email"/>
			</mx:columns>
		</mx:DataGrid>
		<s:Button x="-1" y="163" label="Listar todos" left="5" bottom="5" id="btnListar" click="btnListarClickHandler(event)"/>
	</s:Panel>
 
</s:Application>

Você pode fazer o download do projeto aqui.

Obrigado e um abraço a todos!

Rod Johnson (Spring) abriu o evento com uma palestra sobre as tendências Java EE, aonde fez uma abordagem sobre como ele vê o desenvolvimento Java EE nos próximos 5 anos. Falou muito sobre cloud computing, data centers e sobre o quanto ainda aumentará a complexidade da arquitetura de uma aplicação Java EE e as responsabilidades do arquiteto Java por mais facilidades que irão surgir no Java EE 6.  Foi excelente e nos primeiros 30 minutos todos já puderam ter idéia sobre como seria o evento.

Em seguida, uma palestra excepcional. Mike Keith (Oracle) fez um overview sobre a nova versão do Java EE 6 que será lançada no dia 10 de dezembro.  Demonstrou (através de slides) boa parte do novo suporte de annotations para auxiliar a produtividade do desenvolvedor. Demonstrou também todo o trabalho que tiveram para evoluir e facilitar ainda mais o uso de EJBs e todas as inovações da nova JPA (agora com Criteria). Comentou bastante sobre a fragmentação de XMLs em JARs e sobre os namespaces dos XMLs para configuração de projetos.

Logo após a palestra do Mike, o pessoal da Globalcode aproveitou a onda dos EJBs e fez um Lightning Talk sobre EBJ 3.1. Comentando sobre o projeto deles: “EJB 3.1 Code Samples” que está hospedado hoje no Kenai e tem como objetivo ensinar a galera como utilizar o EJB 3.1 – Nota 10 pra equipe da Globalcode.

Logo após o almoço, tivemos mais um Lightning Talk, agora com o Vinicius Senger aonde ele fez uma abordagem muito divertida sobre o Arduino.

A tarde, teriamos uma palestra com Chris Schalk do Google, porem, por motivos de visto ele não pode permanecer no Brasil e Rod Johnson fez uma outra palestra, a palestra sem slides, que foi ótima. Ele sentou na frente de um notebook e se matou programando e explicando o Spring ROO para que você possa ter produtividade ao máximo em Java. O Spring ROO é um framework muito parecido com o Rails para o Ruby. Muito interessante. Nessa palestra ele também demonstrou diversas funcionalidades da Spring IDE.

Por padrão, a cada palestra dos gurus, uma intervenção com um Lightning Talk pelo pessoal da Globalcode ou V.Ofiice. Dessa vez a bola ficou com o pessoal da V.Office que demonstrou uma ótima solução para celulares e telefonia VoIP utilizando o Asterisk.

E a ultima palestra dos gurus, ficou para o Ed Burns (Sun). Ele fez uma abordagem completa do JSF 2.0. Teve alguns problemas com os exemplos dele mas no mais foi tranquilo. Confesso que não fiquei surpreso com absolutamente nada que ele demonstrou, mas o JSF também está evoluindo a largos passos.

E para finalizar o ciclo de palestras antes das perguntas aos gurus, o pessoal da Globalcode preparou mais um Lightning Talk com o Vinicius Nunes aonde foi feito uma abordagem do ScrumToys. Um projeto muito legal que está disponivel nos exemplos do Netbeans (parabens a iniciativa do projeto ao pessoal da Globalcode). O projeto é bastante simples mas demonstra o uso de EJBs e do JSF 2.0.

E para finalizar o dia com chave de ouro, um painel de perguntas aos palestrantes. Eu tive a oportunidade de fazer 2 perguntas (quem me conhece sabe que eu não deixaria essa oportunidade passar em branco). A primeira foi destinada ao Ed Burns para que fizesse um comparativo do JSF 2.0 entre o Adobe Flex (claro), Silverlight e JavaFX para desenvolvimento de RIAs. Ele respondeu que depende muito do que se quer da aplicação, por isso existe espaço para todas essas tecnologias no mercado. (PS: ele fez uma cara meio feia quando recebeu a pergunta).

E outra pergunta foi para o Rod Johnson sobre a entrevista dele no Mundo Java aonde ele não pode comparar Adobe Flex X JavaFX alegando não ter conhecimento a fundo do JavaFX (na epoca), então, aproveitei para perguntar se agora era possivel fazer esse comparativo. Ele deu muitas voltas e disse o que já tinha dito, que o Adobe Flex está a todo vapor, tem uma boa IDE e de fato, as outras tecnologias precisam se esforçar para alcança-lo e tomar um pouco do mercado que ele já adquiriu.

Não fiz perguntas direcionadas ao Mike devido a sua palestra ter sido tão boa, que realmente não vi necessidade de perguntar nada, apenas aguardar anciosamente a versão do Java EE 6 para download.

Nota do evento: Dez, simplesmente dez. Ótima organização, ótimos palestrantes, tanto internacionais como nacionais. Só resta parabenizar a Globalcode pela iniciativa do TDC. Apenas achei que tinha pouca gente para ouvir quem estava palestrando. Acredito que perto de 300 pessoas acompanharam o evento. Se tratando de Rod Johnson, Mike Keith e Ed Burns, eu particularmente esperava muito mais.

Abaixo, fotos do evento e da tietagem, é obvio. Não perderia a oportunidade de registrar minha presença ao lado dos palestrantes, que tiveram a maior paciencia do mundo em tirar fotos com todos que quiseram. E ainda ganhei um capitulo no novo livro que vai ser publicado no próximo ano do Ed Burns sobre JSF.

Ano que vem? Estarei lá com certeza!

Ed Burns, Rod Johnson e Mike Keith no Painel de Perguntas coordenado pela Yara (Globalcode)

Mauri (IDS), Mike Keith (Oracle), Rod Johnson (Spring) e eu (IDS)

Marcos (Banco do Brasil), Mauri (IDS), Ed Burns (Sun) e eu (IDS)

Em mais uma parceria com o NTI Paraná e Sudotec, estaremos realizando um curso de 24 horas de Adobe Flex em Dois Vizinhos/PR.

O curso tem duração de 24 horas. As aulas serão na Sudotec. O curso é para iniciantes e a linguagem que utilizaremos como back-end será o Java.

Para mais informações, acesse o site do NTI Parana, clicando aqui

Meu amigo Erko Bridee publicou recentemente em seu blog um artigo interessantissimo para quem não conhece a forma que o BlazeDS sabe o que executar. Para ler o artigo, clique aqui.

Boa leitura!

Para mim, um mero programador, o casamento entre Java e Flex é a união estável no desenvolvimento web. Com algumas técnologias você pode até ficar, ter uns namoricos, mas parece mesmo que Java e Flex foram feitos um para o outro.

A integração entre os dois é muito tranquila, tanto usando o Blaze quanto usando o Granite, e parece que isso virou moda mesmo entre o pessoal. A cada dia surgem mais e mais post’s no forum com o pessoal usando essa combinação que tudo leva a crer, é a combinação ideal para soluções robustas e realmente ricas em interface sem gambiarras usando Javascript.

 Com certeza quem ler isso e gosta de Javascript vai cair em cima com criticas, etc.. mas convenhamos, não vejo como uma aplicação em Javascript com Ajax, pode competir com interfaces em Flex.

 Um post que está sempre pegando fogo, e quem deu inicio foi Rodrigo Fraga com seu ótimo tutorial, mostrando a integração entre Flex, Java com a utilização do Spring Framework..

Segue o link, acompanhem o Forum, contribuam e façam parte desta comunidade!

Abraços

Qualquer aplicação que você for fazer via web, seja ela em html, php, java, asp, .net (ugh!), que necessite fazer impressões é um problema.

Relatórios são um sofrimento para quem vem do PHP (como eu). Tem que suar para fazer a implementação da FPDF ou da PDFlib, para geração de relatórios gráficos em PDF ou ainda tentar montar layouts via HTML que façam controle de páginas, cabeçalhos, rodapé, etc… ou seja, sofre mesmo.

Para quem está no Java (ufa!), pensa que vai se libertar disso tudo usando o Jasper com o iReport, que realmente ajuda MUITO na hora de gerar os relatórios, com opções de exportações, etc, realmente uma mão na roda, mas… Isso tudo ainda não está bom, existe a necessidade de impressão de documentos fiscais via web (Que ainda bem que vai acabar com a chegada nas NFe). E é ai que a coisa complica.

Pois é, usar as impressoras matriciais em um ambiente 100% web é um pouco complicado. Para que você possa imprimir em boa velocidade, é necessário enviar comandos em para impressora na sua linguagem, geralmente em padrão EPSON, de comandos para impressão em linhas e colunas, aonde voce atraves de caracteres ASCII define tipo de letra, fontes, avanço de papel, retorno, etc.

Há algum tempo eu tive essa necessidade de impressão de documentos fiscais. Depois de um pouco de pesquisas e troca de mensagens em foruns, optei por fazer a impressão através de um Applet.

O Applet em java, quando assinado pelo desenvolvedor e aceito pelo usuário (igual quando você aceita rodar o Applet do Banco do Brasil, por exemplo), pode acessar várias informações dentro do computador do usuário, inclusive esse tipo de periféricos. Dessa forma, é possivel que você acesse a impressora do usuário, ela estando conectada na maquina dele, ou ainda, ela estando conectada em alguma máquina da rede do usuário.

Depois desse teste de acesso, gastei um bom tempo criando uma classe que fizesse a leitura de um documento XML aonde qualquer aplicação que gerasse esse documento, e ativasse o applet para a leitura do mesmo, ele faria um parser, verificando as TAGs de mapeamento e de dados a serem impressos e o Applet enviaria os comandos para a impressora.

Depois disso funcionando no meu netbeans (na epoca eu ainda usava netbeans), eu tratei de descobrir como fazer a assinatura do Applet. Gerei minha chave e assinei o Applet usando o Jarsigner e pronto. Quando a aplicação chamou o Applet e passou o arquivo que ele deveria interpretar, a impressora foi ativada e a impressão começou.

Com o uso de applet’s, já foi possivel a criação de rotinas para impressão em impressoras matriciais, impressoras térmicas e leitores de biometria. O Applet é muito esquecido e um tanto quanto criticado quando você pensa em usá-lo, porém, apresenta resultados satisfatórios depois da implementação.

O próximo passo, é tentar fazer com que o Flex ative um applet! Mas como ando muito apurado, vou esperar essa situação ser obrigatória, dai eu penso em como fazer!

Abraços a todos!

Bem vindos ao meu blog pessoal!! Vou tentar usar esse espaço parar passar um pouco de minhas pesquisas atuais na area de Adobe Flex + Java, buscando sempre a melhor maneira de intrega-los e ter sucesso nas aplicações desenvolvidas.

Pretendo falar também sobre o Forum Flex-Brasil, no qual, sou um dos administradores junto com meu amigo Rodrigo Fraga. Falar sobre topicos que achei importantes, topicos meus, sobre o proprio sistema do Forum, etc..

E na medida dos acontecimentos, falar um pouco sobre Linux e seus serviços, já que sou fã do sistema operacional e volte e meia eu fico fazendo umas instalações meio doidas testando novas coisas…

Sejam bem vindos  :D