Requirements

 
User level
Intermediate
 
Required products
Flex Builder 3 (Download trial)

 
Additional Requirements

 
Microsoft Internet Information Services Server (version 5.x or later)
 
Microsoft .NET version 2.0 or later (installed on the system and integrated into IIS)
 
Visual Studio 2003 or 2005
 
WebORB for .NET (version 3.3 or later)
Code generators have long been used to automate creation of the code solving common programming problems. For instance, there are popular code generators automating data access code generation like CodeSmith, LLCoolGen, and NHibernate. Flex and .NET integration using Flex Remoting is not an exception. In fact, ActionScript code invoking different methods of a .NET class would have the same structure with the difference being method names, argument and return value types. As a result, using an ActionScript code generator can result in significant productivity boost and increased quality of code (with the assumption that the generated code is bug free).
 
The solution demonstrated in this article uses WebORB for .NET, a free product by Midnight Coders that facilitates connectivity between Flex and .NET. WebORB functions as a gateway between Flex clients and .NET objects. Using WebORB, your Flex applications can use the standard remoting API to communicate with .NET applications. WebORB includes a code generator enabling integration between Flex and .NET applications.
 
The code generator described in this article produces ActionScript code enabling remoting invocations for the methods for a given class. Code generation uses XSLT-style sheets which describe the structure and the content for the generated code.
 
To get started, review the class shown below. The class is already included into the WebORB distribution and is provided here for the reference and to establish the context:
 
 
C# class:
using System; using System.Collections; using System.Text; using System.Data; using System.Data.OleDb; namespace Weborb.Examples { public class DataBinding { private static string connectionString = "..Skipped for brevity..."; public DataSet getCustomers() { DataSet dataSet = new DataSet(); OleDbConnection connection = new OleDbConnection( connectionString ); OleDbDataAdapter adapter = new OleDbDataAdapter(); adapter.SelectCommand = new OleDbCommand( "SELECT * FROM Customers order by CustomerID", connection ); try { adapter.Fill( dataSet ); } finally { connection.Close(); } return dataSet; } } }
 
VB.NET class:
Imports System Imports System.Collections Imports System.Text Imports System.Data Imports System.Data.OleDb Namespace Weborb.Examples Public Class DataBinding Private Shared connectionString As String = "..Skipped for brevity..." Public Function getCustomers() As DataSet Dim dataSet As DataSet = New DataSet() Dim connection As OleDbConnection = New OleDbConnection(connectionString) Dim adapter As OleDbDataAdapter = New OleDbDataAdapter() adapter.SelectCommand = New OleDbCommand("SELECT * FROM Customers order by CustomerID", connection) Try adapter.Fill(dataSet) Finally connection.Close() End Try Return dataSet End Function End Class End Namespace
You can see and inspect the class in the service browser which is a part of the WebORB management console. You can access the console at the following URL after installing the product: http://localhost/weborb30
 
Open the Management tab and navigate to the following path (see Figure 1):
 
weborb.dll > Weborb > Examples > DataBinding
Navigation path
Figure 1. Navigation path
 
When you select the class, the console automatically generates and displays the code which can be used to invoke class methods using the Flex Remoting API (RemoteObject). The structure of the generated code is very simple. It consists of the 'service' and 'model' classes (plus any DTO (data transfer object) classes representing the complex types used in the method signatures) (see Figure 2):
 
Generated code structure
Figure 2. Generated code structure
 
The generated 'service' class (has the same name as the selected .NET class) contains the logic for setting up an instance of RemoteObject and invoking the remote methods. The 'model' class aggregates server responses and can be used for data binding in the user interface. The diagram below illustrates the relationship between the generated classes and a View component created by developer (see Figure 3):
 
Relationship between the generated classes and a View component
Figure 3. Relationship between the generated classes and a View component
 
Create a project in Flex Builder for your application as described in this article.
 
To keep the naming consistency with this article, name your project DataBindingProject.
 
Click the Download Code button in the WebORB management console to download a zip file with the generated code. Extract the contents of the zip file into the created Flex Builder project. If you are using Flex Builder 3, make sure to extract 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 (see Figure 4):
 
Project structure in Flex Builder 3
Figure 4. Project structure in Flex Builder 3
 
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()">
Place a data grid component into the application by adding the following MXML code:
 
<mx:DataGrid x="10" y="37" width="467" height="143" dataProvider="{model.getCustomersResult}"> </mx:DataGrid>
Notice the mx:columns declaration is not present, as a result, the data grid will render all columns in the returned resultset. The datagrid uses data binding by setting its data provider to be a bindable property from the model. The property in the model is automatically updated by the generated code when a response from the remote method invocation is available.
 
Save the file and run the application. When the application is loaded, it makes a remote method invocation which runs a query. The query results are displayed in the data grid.
 

 
Conclusion

Code generation is a very efficient and productive way to start Flex and .NET integration. Proven code generators provide less error-prone, high quality code. The technique described in this article additionally provides support for complex type generation which saves a lot of time for more complex projects.