This article explains how to create a Flex application in Flash Builder 4.5 that invokes a method in a Java class on the server using BlazeDS Remoting service. After you set up the server environment required for the sample application, you’ll use Flash Builder 4.5 to generate ActionScript service classes and build a Flex application that displays the service call results.

Setting up the server environment

The first step is to create a Java class to be invoked from the Flex application. The sample application for this article uses the SimpleCustomerService class. This class has a method named getAllCustomers(), which will be invoked from the Flex application:

        public class SimpleCustomerService 
{   
    public ArrayList<SimpleCustomer> getAllCustomers()
    {
        ArrayList<SimpleCustomer> customers = null;
        //code to create ArrayList containing SimpleCustomer objects
        return customers;
    }
}
    

Start by compiling SimpleCustomerService.java and SimpleCustomer.java in the <SampleZipFile>/java_src folder (or you can use the precompiled class files from the <SampleZipFile>/java_classes folder).

To create a web application that uses the class files, follow these steps:

If you don’t already have Tomcat installed, install it now. See http://tomcat.apache.org/ for download information and more details.
Find the folder webapps in your Tomcat installation directory. On Windows the default location is C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps.
Create a folder named samplewebapp under the webapps folder to create the new web application.
Copy the Java class files SimpleCustomerService.class and SimpleCustomer.class to webapps/samplewebapp/WEB-INF/classes under appropriate sub folders reflecting the package hierarchy.

Set up BlazeDS

Before you can invoke the Java class from the Flex application you must expose the class as a Remoting service destination using BlazeDS. To set up BlazeDS for your web application you have to deploy BlazeDS JAR files in your web application source path. Follow these steps to set up BlazeDS:

Download the latest release build of BlazeDS, which has the JAR files and other configuration files you’ll need. If you want to use the earlier builds of BlazeDS or LiveCycle Data Services ES, you will need to perform the steps outlined in my blog post on this topic.
Extract the zip file you downloaded into a folder. In the folder you will now have blazeds.war, which contains the required JAR files and configuration files for setting up BlazeDS, and blazeds-bin-readme.htm, which contain terms, conditions, and license details.
Extract the contents of blazeds.war into a separate folder named blazeds. (You can use WinZip or a similar tool to extract the contents of the WAR file.)
Copy all JAR files from blazeds/WEB-INF/lib to samplewebapp/WEB-INF/lib.
Copy the blazeds/WEB-INF/flex folder to samplewebapp/WEB-INF
This folder contains BlazeDS configuration files, which are used to configure Remoting, Messaging, and Proxy services.
If you don’t already have a web.xml file that you want to use, copy blazeds/WEB-INF/web.xml to samplewebapp/WEB-INF.

Next, you need to add Servlet mapping for the BlazeDS Servlet named MessageBrokerServlet, so that BlazeDS is invoked when you send a request to a Remoting, Messaging, or Proxy destination using any of the channels supported.

If you are using your own web.xml file, then you’ll need to add the code below. Alternatively, you can copy it from blazeds/WEB-INF/web.xml.

        <!-- Http Flex Session attribute and binding listener support -->
<listener>
<listener-class>flex.messaging.HttpFlexSession</listener-class>
</listener>
<!-- MessageBroker Servlet -->
<servlet>
<servlet-name>MessageBrokerServlet</servlet-name>
<display-name>MessageBrokerServlet</display-name>
<servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
<init-param>
<param-name>services.configuration.file</param-name>
<param-value>/WEB-INF/flex/services-config.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>MessageBrokerServlet</servlet-name>
<url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>
    

Flash Builder 4.5 uses RDSDispatchServlet (bundled with BlazeDS and LiveCycle Data Services ES2) to get service destination details in a web application. If you’re using your own web.xml file, add Servlet mapping for RDSDisptachServlet in your web application by copying the following XML snippet into the samplewebapp/WEB-INF/web.xml file under the <web-app> node.

        <servlet>
    <servlet-name>RDSDispatchServlet</servlet-name>
    <display-name>RDSDispatchServlet</display-name>
    <servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>
    <init-param>
        <param-name>useAppserverSecurity</param-name>
        <param-value>false</param-value>
    </init-param>        
    <load-on-startup>10</load-on-startup>
</servlet>
<servlet-mapping id="RDS_DISPATCH_MAPPING">
    <servlet-name>RDSDispatchServlet</servlet-name>
    <url-pattern>/CFIDE/main/ide.cfm</url-pattern>
</servlet-mapping>
    

Create a Remoting destination

To expose a Java class as a Remoting destination you need to add a <destination> node in the samplewebapp/WEB-INF/flex/remoting-config.xml file under the <service> node as shown below. (You can find the remoting-config.xml and services-config.xml files used for the sample application in the <SampleZipFile>/config folder.)

        <destination id="SimpleCustomerServiceDestination">
    <properties>
        <source>com.adobe.services.SimpleCustomerService</source>
    </properties>
</destination>
    

When you start your web server, BlazeDS will expose your Java class as a Remoting destination with SimpleCustomerServiceDestination as the id.

Developing the client application

Now that the server is set up, you are ready to use Flash Builder 4 to generate code for consuming the Remoting service destination. The Flex application will invoke the getAllCustomers() method in the destination you created.

To generate ActionScript code that can consume a Remoting service destination, Flash Builder will send a request to the BlazeDS or Adobe LiveCycle Data Services ES2 enabled web application you configured in the project server settings and retrieve details of the exposed service destinations.

Follow these steps to create the new Flex project:

Choose File > New > Flex Project.

Figure 1. Setting project properties

For the Project Name, type BlazeDSSample.
Select Web (Runs In Adobe Flash Player) as the application type.
Click Next to continue.

Figure 2. Configuring server settings

Select Java as the Application Server Type.
Select Use remote object access service check box and then select BlazeDS radio button (see Figure 2).
To configure the J2EE server, set the Root Folder to the path of the root folder of your web application that has been configured for BlazeDS.
Set the Root URL to the URL of the root of the web application; for example, http://localhost:8080/samplewebapp
Set the Context Root to context root of the web application; for example, /samplewebapp.
Leave the default value for the Output Folder, which will be on the server
Click Validate Configuration to check if the server configuration is valid. If it is not valid, verify your settings and try again.
When your server configuration is valid, click Finish to create the project.

Creating a new service

Follow these steps to create a new service in Flash Builder 4.5:

Locate the Data/Services view in Flash Builder 4.5; if the view is not open, select Window > Data/Services.
Click Connect to Data/Service (or choose Data > Connect to Data/Service). Flash Builder 4.5 displays list of service types that can be consumed from the current Flex project.

Figure 3. Select service type

In this sample, you are using a BlazeDS service, so select BlazeDS as shown in Figure 3.
Click Next.
If Flash Builder 4 prompts for an RDS password just select No Password Required and then click OK. (This works because the useAppSecurity parameter of RDSDispatchServlet is set to false in web.xml.)
Flash Builder communicates with the server and displays list of exposed service destinations as shown in Figure 4.

Figure 4. List of available destinations.

Select SimpleCustomerServiceDestination from the list and click Finish. If your application has more than one destination, you can select any destination from the list for which you want code to be generated.

Flash Builder 4.5 generates an ActionScript class that represents the Java class associated with the selected Remoting service destination. In this case, Flash Builder 4.5 generated a class named SimpleCustomerServiceDestination, which has functions for each public method exposed in SimpleCustomerService.java. To invoke a method of SimpleCustomerService.java on the server, you simply invoke the corresponding function in SimpleCustomerServiceDestination.as. You can see the service (SimpleCustomerServiceDestination.as) and its operations (representing functions in the service class) listed in the Data/Services view; you can also view the code using the Package Explorer.

If there are any custom data types used as a return type or as arguments in the Java class methods, Flash Builder 4.5 will generate an ActionScript class to represent the custom data type along with the service class files. In this sample getAllCustomers() returns an ArrayList containing SimpleCustomer object types. The ArrayList is a built-in data type and is converted to ArrayCollection on the client side by default. SimpleCustomer, however, is not a built-in data type so Flash Builder 4.5 generated SimpleCustomer.as with properties for each public property in SimpleCustomer.java to represent the SimpleCustomer objects returned from server. Note that the operation return types for the service are also properly configured in the Data/Services view based on the return type of the methods in the Java class.

Now that the code required to consume a Remoting service destination has been generated, follow the steps in the next section to display the response from the service call in a UI control.

Binding service call results to UI controls

Flash Builder 4.5 can also generate code to invoke a service call and bind the service call result to a UI control. In this sample you will bind the result of the getAllCustomers() operation to a DataGrid.

Add a DataGrid control to the application in Design view.
Right-click the DataGrid and select Bind To Data. Flash Builder will prompt saying the DataGrid component is already bound and if you want to replace the same. Just click OK to continue.

Figure 5. Selecting the service and operation

In the Bind To Data dialog box that appears, Select New Service Call.
Select SimpleCustomerServiceDestination from the services list and select getAllCustomers():SimpleCustomer[] from the list of operations as shown in Figure 5.
Select SimpleCustomer[] as the Data Provider. Click OK.

Because you selected New Service Call, Flash Builder 4 will create a new instance of the SimpleCustomerServiceDestination class and a CallResponder class in the current MXML file. If an instance of SimpleCustomerServiceDestination already exists only the CallResponder instance will be created. The CallResponder class helps you manage the results for asynchronous calls made to RPC-based services. You can find more details on CallResponder in the Flex Language Reference.

Note: If you already have a service call in the current MXML file and you want to bind its result to the UI control, then select Existing Call Result in the Bind To Data dialog box and choose the existing service call.

Save your application and run it. After the Flex application launches in a web browser, it will invoke the getAllCustomers() method in the SimpleCustomerService Java class on the server and displays the SimpleCustomer objects returned from the server in the DataGrid.

Where to go from here

Now that you have used Flash Builder 4 to develop a Flex application that sends a request to a BlazeDS Remoting service destination and displays the response in a DataGrid, you may want to look for opportunities to use this approach in your own applications. You can expose any Java class as a BlazeDS or LiveCycle Data Services ES2 Remoting service destination and build a Flex application in Flash Builder 4 to consume that destination.

You can also use Flash Builder 4 to build Flex applications for HTTP services, web services, and the data management services in LiveCycle Data Services ES2. You can learn more in the article Data-centric development with Flash Builder 4.

If you are developing a data-centric application, you should also take some time to understand the data management and model-driven development capabilities of LiveCycle Data Services ES2. The LiveCycle Data Services ES2 Quick Starts is an excellent resource to help you hit the ground running.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Tutorials & Samples

Tutorials

Samples

Flex User Forum

07/25/2011	Flash Player Debug Issues - Safari 5.1 & Chrome 13
04/22/2012	Loader png - wrong color values in BitmapData
04/22/2012	HTTPService and crossdomain.xml doesn't work as expected
04/23/2012	Memory related crashes in Flex application

Flex Cookbook

04/06/2012	How to detect screen resize with a SkinnableComponent
02/29/2012	Embed Stage3D content inside Flex application components
02/15/2012	Custom WorkFlow Component
02/09/2012	Using Camera with a MediaContainer instead of VideoDisplay

Building a Flex application that connects to a BlazeDS Remoting destination using Flash Builder 4.5

by Sujit Reddy G

Content

Modified

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files

Additional Requirements

Apache Tomcat

Setting up the server environment

Set up BlazeDS

Create a Remoting destination

Developing the client application

Creating a new service

Binding service call results to UI controls

Where to go from here

More Like This

Tutorials & Samples

Tutorials

Samples

Flex User Forum

Flex Cookbook

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company