Mar
29
2010
Flash Builder 4

Flash Builder 4 + Flex 4 + Java + BlazeDS – Tutorial

Author An article by Stefan Horochovec    Comments 19 Comments

Hello everybody!

After a few days without posting anything on the blog, I will attend the request of some colleagues who did a course of Scrum in a few days ago and post to the blog on how to start a project with Flex and Java, how do I “install” BlazeDS and doing my first communication.

For those who are starting to develop Flex with Java back-end and are choosing to work with Remote Objects need to work with something that makes communication between Flex and Java.

There are several options on the market today, and Adobe itself offers two products for this. The purpose of this tutorial is to illustrate the use of BlazeDS to this communication.

BlazeDS is an open-source tool, and is now widely used for communication Java – Flex. It aims to provide for the Flex developer a way to communicate with their back-end through Remote Objects and Real-time Communication via Messages.

Remember that BlazeDS can be used for communications applications developed in Flex for Web (Flash Player) or Desktop (AIR).

But how to start? First, we should download (click here for download) through the official website of BlazeDS.

The download we are doing is the binary version, containing a file. WAR that contains the files .xml and .jars needed for its use. You can also download the source code of BlazeDS by clicking here.

After downloading and unpacking, it is also necessary to decompress the file blazeds.war. For this, you can use a decompressor like WinRAR for example. By doing so, we obtain the following structure:

The contents of the META-INF will be disregarded. We will take into account only the contents of the WEB-INF as presented below:

The folder src and classes will be disregarded in this tutorial as well.

Inside the flex, we have the XML files needed to setup our project to be created in Java, and the lib folder we have the java libraries (*. jar) to be incorporated into our project. And the web.xml file contains the information necessary to configure the servlet in our project.

In this article, the software used for creation and development of the project is Java with Eclipse Galileo WebTools. You can smoothly adapt this tutorial to any IDE that you use in your daily life.

To start a project, I chose the option File -> New -> Web -> Dynamic Web Project, as follows:

And then set up the project as follows:

Well, after setting up the project, we will create a bean to serialize some information that will be sent to the Flex. The idea is quite simple, I will create a model for a simple agenda of contact.

?Download Contato.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
32
33
34
35
36

package br.com.horochovec.model;
 
import java.io.Serializable;
 
/**
 * Model to contact
 * @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;
	}
 
}

And then I’ll create a service that will add to an ArrayList contacts that will be sent from Flex to Java.

?Download ContatoService.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;
 
/**
 * Service to Contacts
 * @author Stefan Horochovec 
 */
public class ContatoService {
 
	private static ArrayList listContato = new ArrayList(); 
 
	/**
	 * Add a contact to listContact
	 * @param contato
	 */
	public void addContato(Contato contato) {
		listContato.add(contato);
	}
 
	/**
	 * Return the contact list
	 * @return
	 */
	public ArrayList getListContato() {
		return listContato;
	}
 
}

After that, we have a simple application ready to work with Flex, you only need to configure the. XML so that BlazeDS can work.

The first file we will configure is the web.xml file which is inside the folder WebContent/WEB-INF/. For this setting, we will add the contents of the web.xml that came within the file that was previously blazeds.war uncompressed. The result will be:

?Download web.xml
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>

Now, we’ll add the folder inside the WebContent folder flex that was previously uncompressed file blazeds.war, and also the entire contents of the lib into the directory WebContent/WEB-INF/lib, obtaining the following result:

Now, we’ll set up the single xml file in BlazeDS for this example to work. The file is WEB-INF/flex/remoting-config.xml. We’ll add a setting to tell BlazeDS about the service ContatoService that was created previously, as follows:

?Download remoting-config.xml
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>

After this last configuration, we can export our project to a web server. In this case, we will use Tomcat 6.x. This article does not go into details of its installation and configuration.

Well, the settings in the Java project has been completed, and considering that deploy the application within the Tomcat has been completed and from now on we will work directly with Flex.

In this article I will demonstrate the communication using the Flash version of the Builder and Flex 4. You can download the version 4.0 of Flash Builder and the Flex 4 SDK here.

Once installed and started the Flash Builder, we will create a project in the following order:

The settings made in the second configuration screen are very important. Making them the right way, you will be able to start the project without making any further settings.

In the first line, Root Folder, was appointed the directory deploy my application in my application server.

In the second line, Root URL, was appointed the URL path to open the application in my browser.

In the third line in ContextRoot, we point out the name of our application.

The fourth and last line in the Output folder, point the directory that should be exported files when compiled. For this tutorial, it was pointed directly at the directory of my application in my Tomcat server.

As a result, Flash Builder will create and deliver on a project workspace as follows:

It is very important to make the conference a configuration automatically generated by Flash Builder upon the parameters reported in the second stage of project creation. On the ‘Project’ go on ‘Properties’ and check the properties according to the image below:

After giving this information, we can start developing the project in Flex.

First, we will create the bean that will be sent to Java and vice versa. This bean is a mirror of the bean created in Java, as follows:

?Download Contato.as
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()
		{
		}
 
	}
}

Next, I create a screen in Flash Builder that contains two text input fields to fill in information the name and contact email, and also a grid to contain the list of contacts that will be added in Java and return to Flex via BlazeDS.

Follow implementation

?Download FlexDuck.mxml
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>

After the construction of the screen, we create the remote service to be responsible for communication with Java. As the excerpt below, create a RemoteObject and two methods to run the application. Also define the methods that should be triggered when there are returns of both success and failure in communication.

?Download FlexDuck.mxml
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>

That done, we will implement the above methods results reported for the RemoteObject.

?Download FlexDuck.mxml
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

<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();
 
protected function onFault(event:FaultEvent) : void
{
	Alert.show('Erro');
}
 
protected function onResultAddContatoHandler(event:ResultEvent) : void 
{
	Alert.show('Adicionado');
}
 
protected function onResultGetListContatoHandler(event:ResultEvent) : void
{
	this.listContato = event.result as ArrayList;
}
 
]]>
</fx:Script>

Now, we will implement the panel button and the register button on the listing information, click the event to be sent to the java bean to register and asked the java list of contacts.

?Download FlexDuck.mxml
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>

With the click events of each button in place, missing only make the implementation of its methods. To do this we add the block fx: script the following code:

?Download FlexDuck.mxml
1
2
3
4
5
6
7
8
9

protected function btnCadastroClickHandler(event:MouseEvent):void
{
	this.remoteObject.addContato(this.contato);
}
 
protected function btnListarClickHandler(event:MouseEvent):void
{
	this.remoteObject.getListContato();
}

To finish the code, I will add the Binding between the two TextInput and the bean will be serialized to Java:

?Download FlexDuck.mxml
1
2
3

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

That done, done, our test application is ready for final use, as a result, we get:

The full implementation of the Flex will be:

?Download FlexDuck.mxml
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

<?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();
 
		protected function onFault(event:FaultEvent) : void
		{
			Alert.show('Erro');
		}
 
		protected function onResultAddContatoHandler(event:ResultEvent) : void 
		{
			Alert.show('Adicionado');
		}
 
		protected function onResultGetListContatoHandler(event:ResultEvent) : void
		{
			this.listContato = event.result as ArrayCollection;
		}
 
		protected function btnCadastroClickHandler(event:MouseEvent):void
		{
			this.remoteObject.addContato(this.contato);
		}
 
		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>

You can download the project here.

Thanks and a hug to everyone!

Tags: , , , , ,

About the Author: Stefan Horochovec

19 Comments + Add Comment

  • Stefan Horochovec » Blog Archive » Flash Builder + Flex SDK 4 + Java + BlazeDS – Tutorial March 29, 2010 at 11:02 pm

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

  • Tweets that mention Stefan Horochovec » Blog Archive » Flash Builder 4 + Flex 4 + Java + BlazeDS – Tutorial -- Topsy.com March 29, 2010 at 11:27 pm

    [...] This post was mentioned on Twitter by Leonardo França, Stefan Horochovec. Stefan Horochovec said: Flash Builder 4 + Flex 4 + Java + BlazeDS – Tutorial (enUS) – http://is.gd/b5VJL [...]

  • Jônatas Paganini March 29, 2010 at 11:35 pm

    Very simple!

  • martin April 16, 2010 at 10:30 am

    Hi, great article, could you fix download link ?
    http://www.horochovec.com.br/blog/FlexDuck20100323.zip

    thank you

  • Emily June 2, 2010 at 6:15 pm

    Hi, great article, could you fix download link ?
    http://www.horochovec.com.br/blog/FlexDuck20100323.zip

    thank you

  • Stefan Horochovec June 6, 2010 at 11:33 am

    @Emily

    You can download this example at: http://www.horochovec.com/FlexDuck20100323.zip

    Thanks for visiting my blog

  • Raeghin July 13, 2010 at 10:12 am

    Awesome example. Best I’ve found so far!

  • bog November 8, 2010 at 3:42 am

    I love you :D

  • Indra November 24, 2010 at 3:40 am

    That’s so cool.. i was really looking for this stuf…

  • rod82 November 28, 2010 at 5:46 pm

    Nice example! Worked perfectly.

  • Vathanak December 3, 2010 at 5:40 am

    Thanks very much.

  • Vince January 17, 2011 at 2:47 pm

    Great post – Easily understandable and very detailed! I appreciate the time you put into this…

    Thanks.

  • Vamsi February 2, 2011 at 9:10 am

    Excellent one. You made it very simple for those who wants to start from scratch. Can you please post another one about Spring and Blazeds integration too. It would be very helpful.

  • Rajik Pasha June 16, 2011 at 3:53 am

    Hi ,

    That is Nice example… But Links for download is not working please send me the Project or Download link.

    Cheers..

  • Varun July 18, 2011 at 1:10 pm

    Hi, Great article.

  • ankit July 20, 2011 at 3:27 am

    Can you please elobrate how can we create Dynamic web project and Flex project with same name “FlexDuck”. Is some thing i missed.

  • Umer August 23, 2011 at 6:40 am

    http://www.horochovec.com.br/blog/FlexDuck20100323.zip is not working, can you please update source code url?

  • lindif August 24, 2011 at 5:15 am

    very good ,but you use ArrayList at first cann’t recommond what’s your express,I’m from china

  • wolf September 9, 2011 at 10:03 am

    what a cool example! this is the one i’m looking for these days .now i think i’v got it! thanks stefan !
    but i’m so sorry stefan that i can’t donwload from the links you gave.if possable,could you send me one?283732265@gmail.com..thank you very much..

Leave a comment