Flex 3.0 Applications with BlazeDS in Eclipse

SHARE & COMMENT :

Introduction

BlazeDS is the server-based Java remoting and web messaging technology. BlazeDS enables Adobe Flex and Adobe AIR applications developers to easily connect to back-end distributed data and push data in real-time. BlazeDS makes use of AMF3 protocol which is similar to SOAP, but AMF3 protocol is a binary protocol and so is much faster than SOAP. strong>BlazeDS, enables Flex applications make remote procedure calls to the Java server. BlazeDS Simplifies integration with existing Java code.

In this article we will see how to develop Flex RIA and integrate with Java server side using BlazeDS – Remote Object Service.

Software used in BlazeDS – Remote Object Service

List of topics covered in this article:

  • BlazeDS Overview
  • Features of BlazeDS
  • Creating a Flex project ith BlaxeDS in Eclipse
  • Lanching server view in Flex Development Perspective
  • Creating RPC Service
  • Configuring Remote Object Service
  • Creating the Client application MXML file
  • Running the Flex Web application
  • Download Flex Application Source Code

BlazeDS Overview

BlazeDS consists of two parts a Clint side application and a Server side application.

BlazeDS client side application is typically an Adobe Flex applicaton or an Adobe Air Application. Client side application use Flex components to communicate with the BlazeDS server, including the

  • RemoteObject,
  • HTTPService,
  • WebService,
  • Producer, and
  • Consumer components.

In this article we will see only about RemoteObject component. Other components are not in the scope of this article.

BlazeDS Server side application is a server-side J2EE web application that runs on a J2EE application server. Below figure shows the client server intraction architecture of BlazeDS.

Features of BlazeDS

The following bullet points lists the features of BlazeDS.

  • RPC Services
  • Messaging Service
  • Proxy Service
  • Service Adapters

In this RPC and Messaging services form the core features of BlazeDS.

RPC Service includes HTTP GET or POST(HTTPService), SOAP(Web Service), or Java Object(Remote Object Service).

For services like HTTP and Web Service you can use only Flex SDK and work. But for Remote Object Service you need to use BlazeDS.

Creating a Flex project with BlaxeDS in Eclipse

To start with first of all we will have to install BlaseDS. BlaseDS is a Zip file. Just unzip the file to a folder. The unzipped folder will contain a ‘.war’ file called ‘blaseds.war’. Install flex plugin along with Eclipse SDK (Not covered in this artical). Now we are ready to go.

  1. Launch Adobe Flex Builder 3 Eclipse Launcher.
  2. Choose File > New . Click on Others for the New Wizard to open. From the new wizard click on ‘Flex Builder’ to expand the options under Flex Builder node. Select ‘Flex Project’ as shown in the below figure.

  3. Next the wizard leads to the following screen where you have to enter the project name, select the application type and also select the application server type. Here ‘FlexBeat’ is given as the project name. Since we are going to develop Flex web application i have selected the first option that is ‘Web application’. Since we are going to use Java server side I have selected application server type as ‘J2EE’.

  4. Once server type is selected as J2EE, then make sure the below check box (Use remote object access) is checked and Life Cycle Data Service option is selected. Leave the rest as it is. then click on Next(see the figure below for reference).

  5. Now its time to configure a J2EE server for the project we are creating.
    • If you already have a server configured in your work space you can use the same as Target run time or create a new one.
    • To create a new one click on New button near Target Runtime(Creating a target runtime is out of scope of this document). See the below figure for reference.
    • Select the server for Target runtime. Then the wizard expects the user to select the Flex war file location. In our case BlaseDS is the flex war file to be selected.
    • Once the war file is selected you can leave the rest of the wizard settings as it is and finish the wizard. Once you click on finish the flex builder will ask if you want to change the persepective to flex as shown below.

    • Now Flex Project is created and the IDE will open up the main application. ie., the main mxml file named in the same name as the project created by you. Here, our main application mxml file will be FlexBeat.mxml. This file is opened in the editior’s source view. see the figure below.

Launching server view in Flex Development Perspective

In Flex Development perspective we can not view the server configured by us. So we have to get the server view by opening Windows manu in eclipse. ie. Windows -> Show View -> Others -> Servers -> Ok (See the fig. below)

This will launch the server view in the bottom panel of Flex development perspective. In our case we can see the tomcat server listed in the server view in stopped state.

Adding a web application to server

Right click on the server listed in the bottom panel and we will get a menu called ‘Add and Remove projects’ (see the figure below)

Clicking on this menu item will pop up a Add Remove Project wizard. In this wizard select the project and add it to the server as shown below. This will add the project to the server.

Creating RPC Service

The Remoting service is one of the RPC Service included in BlazeDS. Through this service client applications can talk to Java POJO’s on the server side.

First we will start with an server POJO implementation. So we will write a Java class which will return the entered name appended with Hello.

  1. In the Flex Navigator of the IDE, Expand the project node and go to ‘src’ folder.
  2. Right click on ‘src’ folder. Click on ‘New’ and go to ‘Other’ menu item and click on that item. (src > New > Other).
  3. The selection wizard opens up. Select ‘Java’ node and select ‘Class’ as shown below.

  4. Create a new Java class by name as ‘FlexBeat’ inside the package ‘net.java.beat’

  5. Write a method to accept a input string as a parameter and returns a string back appending with Hello to the input string. The Java code is given below.
    package net.java.beat;

    /**
    * @author Sri hari
    *
    */
    public class FlexBeat {
    /**
    * This method accepts a name and returns a string appending with Hello.
    *
    * @param yourName
    * @return
    */
    public String sayHello(String yourName) {
    return “Hello ” + yourName;
    }
    }

Configuring Remote Object Service

  1. In the Flex Navigator goto WebContent > WEB-INF > flex > remoting-config.xml and open it in the source editor of IDE.

  2. Change the configuration file as below.

  3. Change the services-config.xml file located. Here we have to change the channel-defenition end points to use tomcats port, host and context. Change it as shown below. This ends the configuration part of Remote Object Service.

  4. Creating the Client application MXML file

    The Flex client application uses the Remote Object component to access the Java POJO method, For doing so client application uses the destination property to specify the destination. see the client code below.

    In the above code Flex application uses the RemoteObject tag to invoke the Java POJO’s.

    Enter the same code shown above in the source editor. This code is saved as FlexBeat.mxml. Once the file is saved then clean and build the web application.

Running the Flex 3.0 Sample Application and Example Source Code

Once the application is cleaned and build its ready to run.

Navigate to flex navigator, you can find a node in the tree view called as ‘bin-debug’ expand the node. Inside the node you can find the compailed .swf files and auto generated html files. In our case we will have FlexBeat.html file and also a FlexBeat.swf file.

Now select the FlexBeat.html file, rigth click on the file,select ‘Run as’ menu item and click on run on server. Or you can directly use the play button icon given in the top of the IDE to run the application. see the figure below.

 

Once you run the application the IDE will open up a web browser (the default web browser set in the IDE) and run the Human Interface (GUI). The Human Interface(GUI) developed for this artical using the above mxml code is shown below. Here the interface is opened in Google Crome browser.

Now enter your name and click on go. You can see the server returned string displayed in the text output on the Human interface. see the figure below. you can also use some System.out.println statements in Java POJO side so that you can see the console outputs on the server.

Flex 3.0 Sample Source code

Here is the full source code developed for this artical. This source code has been exported from the IDE and so can be imported by others directly using eclipse import option. But make sure to currect some of the JDK / server problems mismatch once it is imported.

Conclusion

In this article you have learnt how to develop a Flex Web Application which connects to Java POJO’s through Remote Object included in BlaseDS service and deploy the application in Tomcat Server. Still many things like Messaging service, Proxy service etc are not covered in this artical. This artical just gives the developers a much needed push in Flex world. This is not the end, Still miles to go.

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Comments

  1. nice tutorial thanks for help

  2. can u plz share me the flex plugins for eclipse IDE.

Speak Your Mind

*

Close
Please support the site
By clicking any of these buttons you help our site to get better