Using Adobe Flex With Java

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.

BlazeDS is a Java web application that leverages the Java Servlets

specification. It runs within a Java Servlet container or a Java application

server, for example Apache Tomcat, JBoss AS or BEA Weblogic. The RPC and

messaging services form the core features of the BlazeDS. The RPC service lets

you make asynchronous calls to remote services, process the requests and then

return the data to the clients. The request can be a remote Java object, Web

service or a HTTP service. Flex SDK can alone provide for HTTP and Web Services,

while for Remote Object Services you'll require 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.

While creating a new Flex project in Eclipse, select app server type as J2EE & app type as Web App which will be based on Flash platform.

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.

During the J2EE Server configuration step, add Apache Tomcat as target runtime and browse for 'blazeds.war' and provide the same as Flex WAR file.

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:

class="flex.messaging.endpoints.AMFEndpoint"/>

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:

class="flex.messaging.endpoints.AMFEndpoint"/>

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.