Developer Resources:

Customer Quotes:

Using WebORB ActionScript code generator for Flex Remoting

This guide reviews WebORB client code generation capabilities and provides instructions for creating a Flex application using the generated code. At the end of the walkthrough you will have a Flex client application loading data from the server via a RemoteObject invocation.

To get started review the Java class below. The class is included into WebORB distribution and provided here for the reference and to establish the context:

package weborb.examples;

import java.sql.*;
import weborb.util.log.*;

public class DataBinding
{
   private static Connection connection;

  public ResultSet getCustomers()
  {
    openConnection();
    String query = "SELECT CustomerID, CompanyName, ContactName,
    ContactTitle , Address , City , PostalCode ,
    Country FROM Customers order by CustomerID;";
    Statement statement = connection.createStatement();

    ResultSet result = statement.executeQuery( query );
    return result;
  }

  public void openConnection() throws Exception
  {
    if( connection != null )
      return;

    Class.forName( "org.hsqldb.jdbcDriver" );
    connection = DriverManager.getConnection( "jdbc:hsqldb:.",
                 "sa","");
  }
}

You can see and inspect the class in the service browser which is a part of the WebORB management console. Start WebORB from the command line as shown below or follow the directions for deploying WebORB into a Java servlet container:

java -jar weborb.jar

For the standalone mode the console is available at localhost, however when WebORB is hosted in a Java EE server or servlet container, the console URL will also include the context path for the WebORB web application.

Open the Management tab and navigate to the following path:

weborb.jar > weborb > examples > DataBinding

When you select the class, WebORB automatically generates and displays the client code with all the code required to access the class via the Flex remoting API (RemoteObject). The structure of the generated code is very simple. It consists of a 'service' and 'model' classes (plus any DTOs (data transfer object) classes representing the complex types referenced by the service). The 'service' class contains the logic for instantiating a RemoteObject and exposing the remote methods. The 'model' class serves the purpose of aggregating server responses and can be used for data binding in the user interface.

Create a Flex Builder project for your Flex application as described in the Creating a Flex Builder project article.

Click the Download Code button to get a zip file with the generated code. Expand the contents of the zip file into the created Flex Builder project. If you are using Flex Builder 3, make sure to expand the code into the /src folder in the project structure. The image below demonstrates the project structure in Flex Builder 3 after the generated code has been added to the project:

Open the MXML Application file and add the following code:

<mx:Script>
 <![CDATA[
  import weborb.examples.DataBindingModel;
  import weborb.examples.DataBinding;

  [Bindable]
  private var model:DataBindingModel;
  private var dataBindingService:DataBinding;

  private function init():void
  {
    // create the model object
    model = new DataBindingModel();
    // create the service proxy - responsible for carrying out
    // remote method invocations and updating the model
    dataBindingService = new DataBinding( model );
    // invoke remote method
    dataBindingService.getCustomers();
  }
]]>
</mx:Script>

Modify the root mx:Application element to invoke the init() method shown above on the creationComplete event:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

Switch to the Design view and add a data grid component to the created MXML application. Switch back to the Source view and modify the data grid MXML as shown below:

<mx:DataGrid x="10" y="37" width="467" height="143"
         dataProvider="{model.getCustomersResult}">
</mx:DataGrid>
Notice the columns declaration is removed. Also, there is a data binding between the grid's dataProvider property and a property in the model object. The property in the model is automatically updated within the generated code when a response from the remote service is available. Save the file and run the application. When the application is loaded, it makes a remote object invocation which runs a query. The query results are displayed in the data grid.