Navigation:  Client Support > Flex Client > Flash Builder Integration

Flash Builder version 4 offers new plugins to simplify data integration with server-side technologies like BlazeDS, PHP and Web Services. WebORB version 4 for Java enables integration between Flash Builder and Java services accessible through WebORB with a custom plugin developed by Midnight Coders. This section  of the documentation reviews the integration and describes the features available with the plugin.

IMPORTANT: the WebORB plugin requires Adobe Flash Builder version 4.5 or later.

Installation

The WebORB plugin can be installed using the standard Eclipse plugin installation method:

 

 

Project Setup

Create a Flash Builder project as described in the Create Flex Project section of the Getting Started with WebORB for Flex chapter. The plugin uses the address of the server from the project configuration.

Using the Data/Services Plugin

Make sure the project is selected in Flex Package Explorer before using the plugin. If no project is selected, Flash Builder will display the following error message "No Flex project is active. Please select a project in Flex Package Explorer.". To activate the plugin, click Data in the main menu and select "Connect to WebORB for Java...". Flash Builder will display the following dialog window:

The plugin obtains the URL of the server displayed in the window from the selected project. The URL identifies both the hostname and the port of the server where WebORB is running. To continue select the "No password required" checkbox and click OK. (Later on in this article you will find out how to configure security in WebORB to enable user authentication in the plugin.)

 

In the next step the plugin connects to the WebORB server and loads a list of available remoting destinations. A destination is an abstract concept that maps a Java class to a logical name. Flex clients can communicate with the server-side classes by connecting to destinations. Destinations must be declared in WEB-INF/flex/remoting-config.xml.

 

The plugin will display a list of destinations as shown in the image below:

You can create additional destinations in WEB-INF/flex/remoting-config.xml, but make sure to restart the ASP.NET process or the application pool where WebORB is running. Alternatively, WebORB can be configured to dynamically create destinations from all public classes. To enable the feature, open the WebORB management console, select the Server Configuration tab, then Code Generation. Select the 'Create dynamic destinations' checkbox in the Flash Builder Integration section as shown below:

 

When enabled, WebORB stores all dynamic destinations in WEB-INF/flex/dynamic-remoting-config.xml. The file is automatically imported by Flash Builder since it is referenced from services-config.xml.

 

Consider the following example of a Java class which loads data from a database and returns it to the client. The class is already included into the distribution of WebORB for Java, it is available in WEB-INF/lib/weborbexamples.jar. You can see the code of the class below:

package weborb.examples;
 
import java.sql.*;
import java.util.Hashtable;
import weborb.util.log.*;
 
public class DataBinding
{
 public ResultSet getCustomers()
 {
   try
   {
     Class.forName( "org.hsqldb.jdbcDriver" );
     connection = DriverManager.getConnection( "jdbc:hsqldb:.", "sa", "" );
 
     String query = "SELECT CustomerID, CompanyName , ContactName , ContactTitle , Address ,
                     City , PostalCode , Country FROM Customers order by CustomerID;";
 
     Statement statement = connection.createStatement();
     return statement.executeQuery( query );
   }
   catch( Exception e )
   {
     if( Log.isLogging( ILoggingConstants.EXCEPTION ) )
       Log.log( ILoggingConstants.EXCEPTION, e.getMessage() );
 
     return null;
   }
 }
}

 

Locate and select the checkbox for the DataQueryService destination. Click Finish to add the service. Flash Builder generates the ActionScript code for the selected destination (notice you can select more than one destination at a time). When Flash Builder finishes creating the code, it displays the Data/Services panel with the added services as shown below:

Once the service is added to the project, you may need to configure the return and parameter types for some methods. This is needed only for the types which cannot be automatically mapped between Java and ActionScript. For example, the getCustomers() method returns java.sql.ResultSet. The ResultSet Java data type does not automatically map to an ActionScript type, therefore it must be defined using the plugin. Select the getCustomers():Object[] method, right click and select "Configure Return Type..". as shown in the image below:

In the "Configure Return Type" window, keep the default selection (Auto-detect the return type from sample data). Click Next to continue.. Flash Builder invokes the getCustomers() method. By default WebORB serializes ResultSet as an array of untyped objects. When FlashBuilder receives the response, it cannot detect the type of the objects in the array and displays a window shown in the image below. Type in "Customer" for the name of the class as shown below and click Finish:

Flash Builder creates the Customer data type with the properties received from the operation. You can confirm the type exists by expanding the Data Types node in the Data/Services panel:

Generating a Service Call

Now that both operations and data type have been configured, it is very easy to add code for a service call into the project. Open an MXML file from the project. In the Data/Services panel right click on getCustomers():Customer[] operation and select "Generate Service Call". Flash Builder adds code to the selected MXML application. Specifically, the added code consists of 3 elements:

 

<services:DataQueryService id="dataQueryService"
    fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
    showBusyCursor="true"/>

 

<s:CallResponder id="getCustomersResult"/>

 

protected function getCustomers():void

 

The next step is adding a data grid component and wiring it to the service call. Add the following markup right before the closing <s:Applications> tag:

 

<mx:DataGrid dataProvider="{getCustomersResult.lastResult}"
            left="20" right="20" top="20"/>

Save and run the application. You should see a list of records from the database displayed in the data grid: