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. WebORB version 4 for .NET enables integration between Flash Builder and .NET 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.
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.|
|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.|
Create a Flash Builder project with the server-type set to ASP.NET 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 .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. 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 .NET class which loads data from a database and returns it to Flex. You can see the code of the class below:
public class DataBinding
private static string connectionString = "connection 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 );
adapter.Fill( 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:
fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
|2.||Call Responder - used to hold results of the last service call:|
|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:
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.