Developer Resources:

Customer Quotes:

WebORB and Flash Builder Integration

Flash Builder version 4 offers new plugins to simplify data integration with server-side technologies like Java, PHP and Web Services. Integration with .NET is not something you will find out of the box. Fortunately, WebORB version 4 for .NET enables integration between Flash Builder and .NET with a custom plugin developed by Midnight Coders. This articles reviews the integration and describes the features available with the plugin.

Installation

To get started download and install WebORB version 4 for .NET.

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

  1. From the main menu select Help and then 'Install New Software'
  2. Enter the following address for the plugin's "update site" and press Enter:

    http ://dev.themidnightcoders.com/fb

  3. Select the checkbox next to "WebORB plugins for Flash Builder". The window in Eclipse/Flash Builder should look as shown in the image below:


  4. Click through the installation wizard to complete the installation.
  5. Click OK if you get a security warning saying the software is unsigned.
  6. Once the installation is complete Flash Builder/Eclipse will offer a choice of applying the changes or restarting the application. Make sure to choose the restart option.

Project Setup

Create a Flash Builder project with the server-type set to ASP.NET as described in the Introduction to Flex 4 and .NET integration (Setting up Flash Builder Project with WebORB section) article. 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 .NET...". 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 server and a virtual directory where WebORB is installed. 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 .NET 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.

This article uses an example of a .NET class which loads data from a database and returns it to Flex. You can see the class code below:

   1:  using System;
   2:  using System.Collections;
   3:  using System.Collections.Generic;
   4:  using System.Text;
   5:  using System.Data;
   6:  using System.Data.OleDb;
   7:  using System.Web;
   8:   
   9:  namespace Weborb.Examples
  10:  {
  11:    public class DataBinding
  12:    {
  13:      private static string connectionString = "..database connection string goes here..";
  14:        
  15:      public DataTable getCustomers()
  16:      {
  17:          DataTable dataTable = new DataTable();
  18:          OleDbConnection connection = new OleDbConnection( connectionString );
  19:          OleDbDataAdapter adapter = new OleDbDataAdapter();
  20:          String sqlQuery = "SELECT * FROM Customers order by CUSTOMERID";
  21:          adapter.SelectCommand = new OleDbCommand( sqlQuery, connection );
  22:   
  23:          try
  24:          {
  25:              adapter.Fill( dataTable );
  26:          }
  27:          finally
  28:          {
  29:              connection.Close();
  30:          }
  31:   
  32:          return dataTable;
  33:      }
  34:      
  35:      public void updateCustomer( Hashtable updatedCustomerRecord )
  36:      {
  37:        // not shown for brevity
  38:      }
  39:   
  40:      public bool updateCustomerProperty( Hashtable originalCustomerRecord, 
  41:                                          String changedFieldName, 
  42:                                          String newValue )
  43:      {
  44:        // not shown for brevity
  45:      }
  46:    }
  47:  }

Locate and select the checkbox for the DataQueryService destination. The 'Service details' group located at the bottom of the window contains two fields for the client-side package names. Click Finish to generate 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:

Now that the service is added to the project, you will need to configure the return and parameter types for the methods. 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. The server-side return type of the method is System.Data.DataTable which contains a list of records from the database. By default WebORB serializes DataTable object 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 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 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:

  1. Service declaration:
    <services:DataQueryService id="dataQueryService"
    fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
    showBusyCursor="true"/>
  2. Call Responder - used to hold results of the last service call:
    <s:CallResponder id="getCustomersResult"/>
  3. Function performing service call:
    protected function getCustomers():void

 The next step is to add a data grid component to MXML and wire 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:

When you run the Flex application, you might experience the following error:

"MessagingError message='Destination 'DataQueryService' either does not exist or the destination has no channels defined (and the application does not define any default channels.)']

Couldn't establish a connection to 'DataQueryService'".

The error occurs if the project does not reference WEB-INF/flex/services-config.xml in the additional compiler properties. See the instructions on how to reference services-config.xml in the compiler properties.