Using Adobe Flex With Java

BANGALORE, INDIA: The Rich Internet Applications have been the result of Web 2.0 where the primary focus was on user interactivity. Flash has always been a great tool to add interactivity to websites. Adobe's Flex has helped designers and developers to build a variety of engaging RIAs that look and feel the same across different browsers and OSes.

However, user interactivity was limited within Flash application, be it a website or a desktop application. To counter this, BlazeDS comes to the rescue. This helps connect Flex platform applications to connect with server-side Java web applications.

About BlazeDS

BlazeDS is one of the several Open-Source projects hosted by Adobe. It is server-based technology used for integration between Flex and Java. For connecting Flex to Java, BlazeDS runs on Java application servers as servlets, which allows you to use it with any standard Java web application. It enables remote procedure calls and message exchanges between Flex and Java platforms, and hence helps developers to couple Flash platform based interfaces with robust enterprises servers.

BlazeDS uses ActionScript Message Format (AMF) protocol, which is somewhat similar to SOAP. But AMF protocol is a binary protocol and hence is faster than SOAP. When Adobe released BlazeDS, it also published AMF specification that allows BlazeDS and Java to communicate with the Flex clients using a compact binary format. Even the existing Java code can be integrated with Flex applications -be it Flash or AIR, with help of BlazeDS.

In this article we'll see how we can develop a simple Flex RIA and integrate it with Java server side using BlazeDS. We will be creating a Flex RIA project having BlazeDS using Eclipse.

Getting started

With this month's DVD we have provided the BlazeDS binary distribution. You would need to download Adobe Flex Builder 3.0.2 Professional Eclipse plug-in form http://bit.ly/6ZBF5. To get started with building the RIA, the prerequisite to be installed is JDK version 5 or higher and Eclipse 3.3 or higher on a Windows platform. Though Flex Eclipse plug-in requires Eclipse version 3.3 or higher, it works on Eclipse 3.2.2 onwards till Eclipse 3.4 (Ganymede), whereas for Eclipse Galileo (version 3.5) it does not install directly.

To install BlazeDS, just extract the zipped BlazeDS file to a location, say C:\BlazeDS. The extracted contents will contain a 'war' file named as 'blazeds.war'. Now install the downloaded Flex plug-in for Eclipse with installer FB3_WWEJ_ plugin.exe. During the installation process, the installer prompts for Eclipse installation directory and once that is supplied, the installation proceeds to install the Flex builder plug-in into Eclipse. After installation is completed, we are all set to create Flex application using Eclipse.

Creating Flex project with BlazeDS

Launch the Adobe Flex Builder 3 Eclipse Launcher and create a new project through File > New and then selecting Others that will open up a wizard. In that wizard, expand the Flex Builder node and select Flex Project option and click on 'Next'. The wizard leads to New Flex Project window, here provide the project name as 'PcqDemo', select application type as web application and select server type as J2EE, since we are using Java at server side. Also make sure that the option for Use remote object access service is checked and the LifeCycle Data Services option is also selected. Click on 'Next' to proceed to configure the J2EE server.

Under J2EE settings, select the target runtime as Tomcat (in our case), and where the wizard asks for Flex war file, browse to the location where you have extracted the blazeds.war. Once the war file is selected, click on 'Finish' so that Flex Builder can create the project, and when completed will also prompt you to switch the development perspective to Flex. When the project is created, the IDE will open up the main application and the main MXML file will be named same as the project, i.e. PcqDemo.mxml.

We also need to add the project to the Server, a simple way is to first add the server view to Flex development perspective. To add Server view, go to Windows > Show view > Other > Servers and click on 'OK'. This will add the Server view panel to the Flex development perspective environment.

In our case it will display Tomcat Server. Now to add the project 'PcqDemo' to the server, right-click on the listed server and select 'Add and Remove Project' option. From the Add and Remove Project wizard, select the project 'PcqDemo' and add it to the server.

Creating Remote Java Object BlazeDS has a feature of providing RPC Services, through which a client can interact with Java Object on the server side. So we'll now create the server implementation for the project. To create the Java class, expand the PcqDemo project node in the Flex Navigator panel and right-click on 'src' folder. Select New > Other and then on the selection wizard, expand the Java node and select Class and click on 'Next'.

On following screen name the class as PcqDemo and give the package as 'com.pcq.demo' and upon clicking the 'Finish' button the PcqDemo.java file is created and opened in the editor view. Now we add the method to the code that accepts string as parameter from the request and returns it with Hello word appended to it, as follows:

package com.pcq.demo;

public class PcqDemo {

public String addHello(String name) {

return "Hello " + name;

}}

The Flex Builder Plug-in for Eclipse provides complete Flex development within Eclipse IDE. You can drag-drop components onto the designer directly & see both source and design of your project and much more.

Configuring Remote Object Service

At the heart of BlazeDS is a Servlet that intercepts all communication between a Flex client and BlazeDS instance. This Servlet uses artifacts like channels, endpoints and adapters to enable proxy, remoting and messaging services. Channels and endpoints connect Flex client to BlazeDS. Endpoints reside at the BlazeDS end while the channels are used by Flex clients to connect to these endpoints. Each endpoint defines a type and format for communication. The binding of endpoints to their implementation classes is done in the services-config.xml file. In BlazeDS, the services-config file is logically split into four configuration files, of which first is services-config and rest are namely:

• Remoting-config.xml: for remote procedure calls
• Proxy-config.xml: for providing proxy services
• Messaging-config.xml: for message services

Now to add the remoting services for the Java object, we provide its destination definition in remoting-config.xml file. From Flex Navigator, go to WebContent > WEB-INF > Flex and open the remoting-config.xml file in editor and add the destination definition as shown below before the closing of services tab:

Now open the services-config.xml file in editor to change the channel-definition endpoints for Tomcat port, host and context. In the channel-definition description the endpoint would be defined as follows:

Change every instance of template quotes with the Tomcat server information, i.e. with Tomcat's information as follows in the services-config.xml file:

Invoking Object from Client

The Flex client application uses the destination property to specify the destination for the remote Java object. Just above we have defined the destination for the Java class as 'pcqdemo' and we will be providing the same to the Flex client. Open up the PcqDemo.mxml file in editor. The application will have an input box and upon clicking the 'Submit' buton, the content of the box will be sent to Java object (PcqDemo.java) and returned with Hello appended to it. Therefore, the layout will have two textboxes, a 'Submit' button and relevant labels. These components can be added to application using the Components panel in the Design view. While in the source, add the following script and remote object definition to pass the information to BlazeDS on server side.

import mx.rpc.events.FaultEvent;

import mx.rpc.events.ResultEvent;

import mx.events.ItemClickEvent;

private function btnClick():void {

var name:String = txtIn.text;

javaObject.addHello(name);

} private function resultHandler(event:ResultEvent):void {

txtOut.text += event.result ;

}

private function faultHandler(event:FaultEvent):void {

txtOut.text += "FaultEvent : " + event.fault + "\n";

}

>>>



destination="pcqdemo"

result="resultHandler(event);"

fault="faultHandler(event);"/>

To execute the application right-click on PcqDemo.html and select 'Run As' option. This will trigger open the application in a browser window.

Running the App

Once the project is cleaned and built, you will notice that in the bin-debug node of the project, the compiled .swf and HTML files have been autogenerated. In our case, PcqDemo.swf and PcqDe mo.html have ben created. Right-click on PcqDemo.html and select Run as > Run on Server option to run the application in the browser. This way, you can integrate Flex to server side Java and hence provide real-time remote object or messaging to the Flex applications.