Flex Client with WebORB for .NET

WebORB 3.0 for .NET introduces support for Flex Remoting. Using WebORB developers can integrate Flex client applications with the objects and services running the .NET environment. The integration leverages all the features available in WebORB:

Getting Started - Creating a Flex Application

The instructions below will guide you through the process of creating and running a remoting-enabled Flex application using Flex Builder 3. At the end of the walkthrough you will have a Flex application communicating with a .NET object exposed through WebORB.

Run Flex Builder 3 and select File -> New -> Flex Project.  The dialog window shown below will appear. Enter "SampleFlexToDotNetProject" as the project name. Make sure to select "ASP.NET" as the Application server type. Make other selections as shown below and click "Next >".

The next step is very important as it establishes the configuration paths. Select "Use Internet Information Services" and enter the paths for a weborb-enabled virtual directory. The paths shown in the image below assume WebORB is installed in the /weborb30 virtual directory (default location):

Click "Finish" to continue. Flex Builder creates an default (blank) Flex application.

Right click the project node in the "Flex Navigator" panel and open Properties. Select "Flex Compiler" and enter the following parameter into the "Additional compiler arguments" as shown in the image below:

-services c:\Inetpub\wwwroot\weborb30\web-inf\flex\services-config.xml

Click OK to close the window.

When you save the project, you may receive the following error in the "Problems" window:

Channel definition, weborb.messaging.WeborbMessagingChannel, can not be found.

To remove the error, open project properties and select "Flex Build Path". Open the "Library Path" tab and click "Add SWC..". Use the Browse button to select to the following file:

/Inetpub/wwwroot/weborb30/weborbassets/wdm/weborb.swc

The steps below will guide you through adding MXML/ActionScript code and connecting it with a .NET object.

Running Flex Application

When you run the application in Flex Builder, it opens a browser and loads the application from:

http://localhost/weborb30/SampleFlexToDotNetProject/SampleFlexToDotNetProject.html

If you compiled the application using the command line compiler, use the following URL to run it:

http://localhost/weborb30/SampleFlexToDotNetProject/SampleFlexToDotNetProject.swf

The application connects to the backend service and invokes a method upon the startup or when a user clicks the "Send Request" button. The method returns a data structure (complex type) rendered in the Flex UI:

Code Review

Flex application declares a remote object using the <RemoteObject> tag:

<mx:RemoteObject id="compinfo" destination="GenericDestination"
                 source="Weborb.Examples.ComputerInfoService" 
                 showBusyCursor="true" fault="faultHandler(event)" >
           <mx:method name="getComputerInfo" result="getComputerInfoHandler(event)"/>
</mx:RemoteObject>

.NET objects deployed in WebORB must be exposed as "destinations". WebORB includes a special "catch-all" destination called "GenericDestination". When a RemoteObject uses GenericDestination, it must specify the name of the class using the "source" attribute. Notice the source attribute in the code above contains the name of the C# class invoked by Flex client. Once a remote object is declared in a Flex application (you can use either MXML or API), it is available for invocation and can be addressed by the assigned id ("compinfo" in this example). For instance, when the Flex application is started, it invokes the initApp() function which then performs a remote method invocation using the compinfo remote object:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
                pageTitle="Database Administration Tool"
                initialize="initApp()">

private function initApp():void
{
   compinfo.getComputerInfo( reqId++ );
}

When an invocation response is available, Flex invokes a response handler specified in the "result" attribute of the <RemoteObject> tag. The response handler in the example, populates the text fields with the data available in the returned object:

private function getComputerInfoHandler( event:ResultEvent ) : void
{
  serverName.text = event.result.serverName;
  clrVersion.text = event.result.clrVersion;
  clrVendor.text = event.result.clrVendor;
  os.text = event.result.os;
  osVersion.text = event.result.osVersion;
  requestId.text = event.result.requestId;
}

The source code for the server-side object is below:

using System;
using System.Web;
using Weborb.Util;

namespace Weborb.Examples
{
  public class ComputerInfoService
  {
    public ComputerInfo getComputerInfo( String requestId )
    {
      ComputerInfo computerInfo = new ComputerInfo();
      System.Web.HttpRequest request = ThreadContext.currentRequest();
      computerInfo.serverName = request.ServerVariables[ "SERVER_SOFTWARE" ];
      computerInfo.clrVersion = Environment.Version.ToString();
      computerInfo.clrVendor = "Microsoft";
      computerInfo.os = Environment.OSVersion.Platform.ToString();
      computerInfo.osVersion = Environment.OSVersion.Version.ToString();
      computerInfo.requestId = requestId;
      return computerInfo;
    }
  }

  public class ComputerInfo
  {
    public string serverName;
    public string clrVersion;
    public string clrVendor;
    public string os;
    public string osVersion;
    public string requestId;
  }
}