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

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):

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):

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):

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.

This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported License.

Using an ActionScript code generator to enable Flex and .NET integration

著者 Mark Piller

Created

ページツール

タグ

必要条件

ユーザーレベル

必要な製品

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)

C# class:

VB.NET class:

Conclusion

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

Using an ActionScript code generator to enable Flex and .NET integration

著者 Mark Piller

Created

ページ ツール

タグ

必要条件

ユーザーレベル

必要な製品

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)

C# class:

VB.NET class:

Conclusion

More Like This

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

ページツール