Using Flex, BlazeDS, and Java Together - A Simple Tutorial

Introduction

When you want to directly use Java classes to provide data to a Flex application you need to add some additional plumbing that enables Flex to "talk with" the Java classes. Flex comes ready to rock with ColdFusion Components, but doesn't have everything it needs to communicate directly with Java classes exposed by a J2EE or servlet container such as Tomcat.

I know that Flex can use either web services or HTTP services to communicate with a Java servlet or JSP page, but what I want to be able to do is leverage my Java classes directly to provide data to Flex, similar to how a ColdFusion Component can be called using the <mx:RemoteObject> tag and return complex data to the Flex application.

Adobe offers 3 different technologies (reference 1) that have different costs and provide different services (see references 2 and 3) for integrating Flex with Java.

BlazeDS is "the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data..." (reference 4). As I understand it BlazeDS is the free open-source plumbing we need to install in our server to allow Flex to communicate with Java classes.

Since I recently changed jobs from a company that used Flex and ColdFusion to a company using Java to create web applications, I need to learn how to integrate Flex and Java. I won't get into how much I miss creating web applications using ColdFusion 8 (it's alot). I hope to eventually show my new co-workers the benefits of using Flex on the front-end of our web applications. To do that I need to get Flex working with Java on the back end.

This is the first in what I hope will be a series of posts showing how to use Java on the back end with Flex on the front end and BlazeDS providing the plumbing to enable Flex and Java to work together. I'm starting off very easy with a "Hello World" example.

Frustration

I spend much of a Sunday morning just trying to find a good example of integrating Flex and Java using BlazeDS. The BlazeDS web site (reference 5) was not the most helpful. First they expect you to download a complete turn-key system that includes a version of Tomcat, the BlazeDS application, and several examples. They then explain how to run the examples but only if you've downloaded their turn-key system. I already have Tomcat running on my Java web application development server so I really just wanted to learn how to integrate BlazeDS into my existing Flex Builder 3 and Tomat server development environment.

I would have happily studied their example code to try to figure out how to use BlazeDS but after searching throughout the BlazeDS web site I could not find a download just for the example applications source code.

After several hours of trial-and-error, I think I've come up with the steps to get Flex, BlazeDS, and Java working together. So this blog article will hopefully help you (and me) learn how to get Flex, BlazeDS, and Java working together. A demo of the example application you'll build using the instructions below can be viewed here.

Steps for Using Flex With Java

1. Note my development system setup. If your system setup is different then you'll need to adjust these instructions.

a. Windows XP

b. Tomat 6.0 installed in C:\Program Files\Apache Software Foundation\Tomcat 6.0\ referred to as [tomcat-home]

c. Tomat server running on port 8080

d. Flex Builder 3

2. These instructions assume you know how to do the following:

a. Create Java classes

b. Use Flex Builder 3

c. Stop and start Tomcat

3. Download BlazeDS (these instructions are as of June 22, 2008)

a. http://opensource.adobe.com/wiki/display/blazeds/Release+Builds

b. Download the BlazeDS binary distribution

 i. Save the .zip file to your computer

ii. There are two files in the zip – blazeds.war and blazeds-bin-readme.html

iii. Extract blazeds.war to your [tomcat-home]\webapps directory

c. Stop Tomcat if it's running and then start Tomcat

d. In Windows Explorer navigate to the folder [tomcat-home]\webapps

 i. You should now have a folder named blaseds

ii. Under blazeds is a folder named web-inf

 iii. Under web-inf are several folders, one called classes is where we will put our Java classes so that our Flex application may use them.

iv. Under the folder flex is an xml file named remoting-config where we will put an XML node that tells our Flex application how to connect to the Java class

4. Using a Java IDE (for example Eclipse or Flex Builder 3 with the Java plug-in) create the following Java source file named HelloWorld.java.

package example;

public class HelloWorld {

public HelloWorld() {

}

public String getHelloWorld() {

return "Hello From Java!";

}

}

Compile the Java source file into a class file (HelloWorld.class). Since our source file specified a package of example, our class file should be under a folder named example.

a. Copy the example folder to [tomcat-home]\webapps\blazeds\WEB-INF\classes

5.  Add the following node to [tomcat-home]\ webapps\blazeds\WEB-INF\flex\remoting-config.xml right after the closing </default-channels> node and before the closing </service> node. Note the values for id attribute and the value for the source tag (the complete path and name of our Java class).

<destination id="helloworld">

<properties>

<source>example.HelloWorld</source>

</properties>

<adapter ref="java-object"/>

</destination>

6. Stop Tomcat if its running and start Tomcat

7. Create a new Flex Project named HelloWorld

a. In the New Flex Project wizard select J2EE as the Application Server type (see the very limited instructions here for some help)

b. Make sure Use remote object access service is checked

c. Click next

d. On the configure J2EE server uncheck use default location for local LiveCyle Data Services server

e. Specify the following values for root folder, root URL, and context root

 i. Root folder: C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\blazeds

                                                       ii. Root URL: http://localhost:8080/blazeds

                                                      iii. Context root: /blazeds

f.  Click on the Validate Configuration button – should get the message "The web root folder and root URL are valid."

g. Click Next and then click Finish

8. In your HelloWorld.mxml create the following source between the <mx:Application> </mx:Application> tags

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;

import mx.rpc.events.FaultEvent;

import mx.utils.ObjectUtil;

import mx.controls.Alert;

import mx.utils.StringUtil;

private function resultHandler(event:ResultEvent):void

{

//used for debugging - shows details about result

//returned by the Java class method

Alert.show( ObjectUtil.toString(event.result) );

}

private function faultHandler(event:FaultEvent):void

{

Alert.show( ObjectUtil.toString(event.fault) );

}

]]>

</mx:Script>

<mx:RemoteObject id="ro" destination="helloworld"

source="example.HelloWorld"

result="resultHandler(event)"

fault="faultHandler(event)"/>

<mx:Panel x="10" y="10" width="440" height="200" layout="vertical" title="Test Flex 3 Using Java" borderColor="#008040" fontFamily="Arial" fontWeight="bold" fontSize="13">

<mx:Text text="Click The Button To Test Getting Data Into Flex From A Java Class" fontWeight="bold" width="250"/>

<mx:Spacer height="20"/>

<mx:Button label="Get Hello World!" click="ro.getHelloWorld()"/>

</mx:Panel>

9. Run the Flex HelloWorld application. You should see an HTML file with a Flex panel and a Get Hello World! button. Click on the button and a Flex Alert component should appear with the words "Hello from Java!".

10. Note in the mx:RemoteObject tag the value for destination matches the id attribute value and our source matches the value for the source tag in our destination node in the remote-config.xml file.

Trouble-shooting Tips

If you change the HelloWorld Java file then you'll need to copy the new class file into the [tomcat-home]\webapps\blazeds\WEB-INF\classes folder in the correct package. Then you'll have to stop and restart Tomcat.

If you change the remote-config.xml file, you'll need to stop and restart Tomcat. You may also need to rebuild your Flex application before running it again.

Summary:

How easily Flex works with ColdFusion Components (CFCs) is just another reason I miss ColdFusion. But my new company uses Java to develop their web applications and they are not going to change to ColdFusion. But I hope that eventually we will be able to use Flex on the front end and Java on the back end where it makes sense. But first I've got to get smart on how to integrate Flex and Java. So I've got alot of learning and trial and error. I'll keep you posted in this series of blog entries.

Up next - sending information from Flex to a Java class.

References

1. LiveCycle Developer Center
2. LiveCycle ES vs LiveCycle DS vs BlazeDS - clearing up the confusion
3. BlazeDS and LCDS Feature difference
4. BlazeDS Overview
5. BlazeDS
6. Creating Flex Builder Projects that Use Server Technologies