Using Flash Builder Data Plugin for Flex to .NET integration

Getting Started

To get started download and install WebORB version 4 for .NET. The installation of WebORB includes the installer for the Flash Builder plugin. The plugin installer is located in the /integration/flashbuilder folder located in the root of the installation directory.

If Flash Builder is running, make sure to shut it down before running the plugin installer. When the installer finishes the installation of the plugin, start Flash Builder. You should be able to confirm the installation of the plugin by opening to the Data menu. It should have the "Connect to WebORB for .NET..." submenu item as shown in the image below:

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:

using System;
using System.Collections;
using System.Text;
using System.Data;
using System.Data.OleDb;
using System.Web;
using System.Collections.Generic;

namespace Weborb.Examples
{
  public class DataBinding
  {
    private static string connectionString = "connectin string goes here";
    public DataTable getCustomers()
    {
      DataTable dataTable = new DataTable();
      OleDbConnection connection = new OleDbConnection( connectionString );
      OleDbDataAdapter adapter = new OleDbDataAdapter();
      adapter.SelectCommand = new OleDbCommand( "SELECT * FROM Customers order by CUSTOMERID", connection );

      try
      {
          adapter.Fill( dataTable );
      }
      finally
      {
          connection.Close();
      }

      return dataTable;
    }

    // This method is invoked when the user updates a record using the form
    public void updateCustomer( Hashtable updatedCustomerRecord )
    {
      // removed for sample brevity
    }

    // This method is invoked when the user updates a record directly in the datagrid
    public bool updateCustomerProperty( Hashtable originalCustomerRecord, String changedFieldName, String newValue )
    {
      // removed for sample brevity
    }
  }
}

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.