Connecting Flex to Java with BlazeDS
BlazeDS offers a great mechanism to attach your flex application to backend services. In this brief overview we’ll configure flex to call a Java Class and return results. This overview assumes you’ve already setup your IDE with a basic Flex / BlazeDS project.
Main points we’ll cover
- Build the Java Class
- Expose the Class with Blaze on the server
- Configure Flex to find the Blaze service
- Build the Flex components to make the call
Build the Java Class
In your IDE switch to the Java view and create a new Java class. We’ll call it HelloFlex. Create a private variable called message. Set an initial value for this variable in the constructor. Finally create a getter method that returns the message string.
package com.grant;
public class HelloFlex {
private String message;
public HelloFlex(){
message=”HI Flex. this is Java. How are you?”;
}
public String getMessage(){
return message;
}
}
Expose the class with BlazeDS on the server
Under your web-inf directory you’ll fine a subdirectory called flex. Within there you’ll see the main config files blaze uses to set up the services. services-config.xml is the main file and has statements to include the others. For this example we’re creating a simple remoting service, so go ahead and open up the remoting-config.xml. Here’s where we’ll set up the configuration for our reomting service.
Blaze calls exposed services destinations. In this remoting-config.xml we’ll set up a destination that points to our HelloFlex class.
Under the default-channels create a new destination as follows.
<?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=”helloflex”>
<properties>
<source>com.grant.HelloFlex</source>
</properties>
<adapter ref=”java-object” />
<channels>
<channel ref=”my-amf” />
</channels>
</destination>
</service>
Configure Flex to find the BlazeDS Service
Depending how you set up your workspace that set may already be done for you. In order for flex to know what channels and destinations are available, our application needs to know where these config files are. In Java, these files are in the class path and are included in the build process. In Flex we need to explicitly tell the compiler where these files are.
Right click on the project and choose properties. Under flex compiler you’ll see a textbox for additional compiler arguments. To configure the file location you’ll need an argument here called services which points to the location of your xml files.
You have two options now.
1) If the folder is part of your flex build path you can make a relative reference to the file using the –services=<file> format as follows. Notice the web-inf directory is not included in the definition. In this the folder containing the flex subfolder is on my build path.
2) If the folder is NOT on your build path you can point to the file location. This is the default method that FlashBuilder implements. We’ll use it for this example, however I suggest 
you move to a relative location style as soon as you can.
For an explicit file system location the flex option is slightly different. Here we use the –services “<file Location>” format. On my drive the option reads –services “C:\FlashBuilder\dev\MyProject\WebContent\WEB-INF\flex\services-config.xml”
Build the Flex components to make the call
Now we can get back to our flex components and make the actual call. First flip back over to your Flex Perspective and open your main mxml file.
First we’ll define the service:
<mx:RemoteObject id=”myService” destination=”helloflex” />
The id is the name you’ll reference this service elswhere in your flex app. The destination of helloflex needs to match the destination name you entered in your remoting-config.xml
Next we’ll move to some visual components. First lets add a panel to hold our controls.
<s:Panel width=”100%” height=”100%”>
<s:layout>
<s:VerticalLayout/>
</s:layout></s:Panel>
And add a text box to display some results
<s:Panel width=”100%” height=”100%”>
<s:layout>
<s:VerticalLayout/>
</s:layout><mx:TextArea id=”result_text”/>
</s:Panel>
Now we’ll add a button on the page to use the service
<s:Panel width=”100%” height=”100%”>
<s:layout>
<s:VerticalLayout/>
</s:layout><mx:TextArea id=”result_text”/>
<mx:Button label=”Call Java” click=”myService.getOperation(‘getMessage’).send();”/>
</s:Panel>
This is a direct use of the RemoteObject myService. This is not a best practice. Typically you would have a function managing your calls and the button would utilize that function. For simplicity sake I’ve included the direct call for this demonstration. In this example you’ll notice we use the getOperation function and pass in the java method name we want to call.
If you were to run this now you would see no results. We have yet to define what happens when the service gets called. Lets do that now.
Create a script block to hold our action script and add a simple method that puts the response of our service in our textbox.
<fx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
private function resultHandler(evt:ResultEvent):void
{
result_text.text = evt.message.body.toString();
}
]]>
</fx:Script>
To use this function we’ll go back to the service and add a handler to manage all responses.
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
<!– DEFINE REMOTE SERVICES WE’LL USE –>
<mx:RemoteObject
id=”myService”
destination=”helloflex”
result=”resultHandler(event)” />
</fx:Declarations>
Your completed code should look like this
<?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/halo” minWidth=”1024″ minHeight=”768″>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
<!– DEFINE REMOTE SERVICES WE’LL USE –>
<mx:RemoteObject
id=”myService”
destination=”helloflex”
result=”resultHandler(event)” />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
private function resultHandler(evt:ResultEvent):void
{
result_text.text = evt.message.body.toString();
}
]]>
</fx:Script>
<s:Panel width=”100%” height=”100%”>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:TextArea id=”result_text”/>
<mx:Button label=”Call Java” click=”myService.getOperation(‘getMessage’).send();”/>
</s:Panel></s:Application>
That’s it! Run the application and pat yourself on the back. Congratulations! Your first end to end Flex-Java app.
