Building Flex application for BlazeDS Remoting destinations using Flash Builder 4

Updated for Flash Builder 4 release version 🙂

Data Centric Development (DCD) in Flash Builder 4 allows developers to build Flex front end for Remoting destinations with just couple of clicks. Continue reading to see how Flash Builder is increasing J2EE developer productivity.

Set up BlazeDS

Download BlazeDS binary distribution from this URL Download (4MB) and follow instructions at this URL to setup BlazeDS https://sujitreddyg.wordpress.com/2009/04/07/setting-up-blazeds/

Once BlazeDS is setup you need to expose the Java class as Remoting destination, visit this URL to know how to expose a Java class as Remoting destination https://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/

Once your Java class is exposed as Remoting destination using BlazeDS, follow steps below to build Flex application using Flash Builder 4.

In this sample we will expose SimpleCustomerService.Java as Remoting destination. SimpleCustomerService communicates with database and returns SimpleCustomer objects.

Setting up BlazeDS RDSDispatchServlet

After setting up BlazeDS, you have to enable RDSDisptachServlet, which is used by Flash Builder 4 to get destination details. This is disabled by default. It’s very simple all you have to do is to un-comment/add the Servlet mapping in the web.xml.

Copy the Servlet URL mapping and declaration for the RDSDispatchServlet from the web.xml in the blazeds.war file and add to your web application web.xml file. If you copy the Servlet mapping from web.xml in blazeds.war file, don’t forget to change the useAppserverSecuirty param value to false as highlighted below. Alternatively copy the Servlet mapping from below

<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>

Install Flash Builder 4

Download and install Flash Builder 4 from here http://www.adobe.com/products/flashbuilder/

Creating new Flex project with BlazeDS server configurations

Create new Flex project

Create new Flex project from the File menu as shown in the image above.

Enter project details

In this screen:

1. Enter project name
2. set “Web (runs in Adobe Flash Player)” as the application type
3. Use default Flex SDK (Flex 4.0)
4. Set the application server type to J2EE
5. Select BlazeDS
6. Click on Next to continue

Configure J2EE server settings

In this screen:

1. Set the Root folder to the root folder of your web application with BlazeDS configured. Its C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\demo in this sample
2. Set the Root URL to root URL of your BlazeDS enabled web application
3. Set the Context root to context root of your BlazeDS enabled web application
4. Leave the output folder to default value
5. Click on validate configuration button
6. Click finish to continue

Using DCD feature to connect to consume Remoting Service

DCD or Data-Centric Development is one of the advancements to the Flash Builder 4. Let’s see how this is making developers productive. In this sample we will see how to create a Flex application which consumes BlazeDS Remoting service. Same steps can be followed for LCDS Remoting services also.

Creating Service using DCD

1. Select the Data/Services window shown in the image above. If this is not visible, select it from Window -> Data/Services
2. Click on “Connect to Data/Service” (Highlighted in the image above) in the Data/Services window
3. Window as shown in the image below will be launched

Select BlazeDS and click on Next. Flash Builder will display a window asking for RDS credentials. Since we turned off security for our RDSServlet by setting the “useAppserverSecurity” parameter to “false” in the web.xml, select “No password required” and click on OK to continue.

Selecting Remoting destination

You can see that Flash Builder listed all destinations exposed in the screen below.

In this screen we are selecting the destination the newly created service should use. All destinations available will be displayed. Select a destination (SimpleCustomerServiceDestination in this sample) and click on Finish to continue.

Code for invoking the Remoting service will be generated, you can see the service and its operations (methods exposed by the Java class) being displayed in the “Data/Services” window and in the package explorer.

Flash Builder 4 introspects return types for the Java class methods and creates AS3 classes for any custom Java classes.

Binding data/service to UI controls

Switch design view and drag and drop a DataGrid component as shown in the image below.

In this screen:

1. Switch to design view
2. Change the Application layout to “vertical” using the properties panel
3. Drag and drop a “DataGrid” from the “components” panel on to the design area
4. Set the width and height properties of the “DataGrid” to 100%

Select the DataGrid. Right click on the DataGrid and select “Bind to Data …” as shown in the image below

A window as shown in the image below will be launched.

In this screen:

1. We select a “New service call” because there are no existing services in the current application.
2. Select the “SimpleCustomerServiceDestination”
3. Select “getAllCustomers():SimpleCustomer[]” from the operations list
4. Selct “SimpleCustomer[]” as Data provider
5. Click OK

You can see the DataGrid with columns for added for properties of the SimpleCustomer class in the design view as shown in the image below.

Configuring DataGrid columns

Select the DataGrid. Right click on the DataGrid and select “Configure Columns …” as shown in the image below.

A window with options to configure the columns for the DataGrid will be launched as shown in the image below.

In this screen:

1. Arrange columns using the “up” and “down” button
2. Click on OK
3. Save and run the application

You can see application with data retrieved from the server and displayed in the DataGrid as shown in the image below.

More articles on how to use Flash Builder 4 – https://sujitreddyg.wordpress.com/flash-builder-4/

That’s it we have a Flex front end build for an existing Java class in just few minutes. Flash Builder 4 rocks 🙂