Integrating Flex Applications with WebORB for .NET
Search:
home / articles / flex integration

INTRODUCTION
WebORB version 3.0 and above for .NET  provides a NET implementation of the functionality similar to Adobe's LiveCycle Data Services. Using WebORB developers can integrate Flex client applications with the objects and services running in the .NET environment. Additionally, WebORB supports real-time video streaming, data push and remote shared objects. WebORB does not require LCDS as the WebORB implementation is independent of any third party products.
  • .NET objects exposed to Flex clients can be protected using WebORB security;
  • WebORB automatically handles method argument type adaptation and return type serialization;
  • Construction of method argument objects can be overridden using argument type factories;
  • Return type serialization can be customized using custom serializers;

GETTING STARTED - DEVELOPING A .NET CLASS

The Flex sample application referenced  in this guide invokes the C# method shown below via WebORB. The method creates and returns a data structure with some basic information about the server-side environment:

using System;
using System.Web;
namespace GettingStarted.Examples
{
     public class ComputerInfoService
     {
        public ComputerInfo getComputerInfo( String requestId )
        {
            ComputerInfo computerInfo = new ComputerInfo();           
            computerInfo.serverName = Environment.MachineName;
            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;
    }
}

The next step is to compile the .NET code and deploy it into WebORB. You can copy and paste the code as it is shown above or download the source (and the compiled assembly DLL) from here. If you would like to skip the compilation step and proceed to the deployment, use the assembly included in the zip file. Otherwise create a Visual Studio project to produce a class library from the code shown above.
 

DEPLOYING .NET ASSEMBLY

There are two ways to deploy an assembly:

  1. You can copy the assembly dll into the /bin folder of the weborb ASP.NET application

    or
     

  2. Use the "Deployment" tab of the WebORB management console to upload assembly into the selected, weborb-enabled virtual directory.

The end result should be the same - the classes from the deployed assembly can be invoked from Flex. You can see the deployed classes in the service browser available in the WebORB Management Console (see the Management tab).
 

CREATING A FLEX APPLICATION
  Select a tab for the version of Flex Builder you use to get instructions specific to that version:
 
 


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

Run Flex Builder 2.0 and select File -> New -> Flex Project.  The dialog window shown below will appear. Make the selections as shown below and click "Next >".

The next step is very important as it establishes the configuration paths. Clear the checkbox and enter the path to the folder containing the WebORB installation into the "Root folder" text field. The default location is "C:\Inetpub\wwwroot\weborb30".  The "Root URL" text field must contain a URL of a weborb-enabled ASP.NET application. The URL of the default installation is http://localhost/weborb30. The paths shown in the image below assume WebORB is installed in the /weborb30 virtual directory (default location):

 Click "Next >" to continue.

The next step is to assign a name to the Flex project. Enter  "SampleFlexToDotNetProject" as the name and click "Finish" to finalize the creation of the project.

Flex Builder creates an empty Flex application. The steps below will guide you through adding MXML/ActionScript code and connecting it with a .NET object.
 

CONFIGURATION - FLEX BUILDER
  WebORB product distribution contains a finished Flex application demonstrating Flex to WebORB remoting invocation and connectivity. Copy and paste the contents of the GettingStartedProject.mxml file located at the path below into the mxml file created in Flex Builder:

     [WEBORB PATH]\examples\quickstart\flex\

 The code in the application connects to a .NET object and retrieves some basic information about the computer where the object is running.

Before you run the application, verify project configuration settings. Select the project node in Flex Builder's Navigator and open project properties.

Select the "Flex Server" node and make sure the root folder and server URL point to your WebORB-enabled ASP.NET application:

Select the "Flex Build Path" node and verify the value for the "Output folder" field:

Select "Flex Compiler" and verify the path in the "Additional compiler arguments" field. The path must point to the services-config.xml file located in the WEB-INF\flex folder in your weborb-enabled ASP.NET application.

IMPORTANT: If you plan to use WebORB Rel-time Messaging features like MSMQ integration, data push, video streaming, make sure to reference weborb-services-config.xml

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

The application connects to the backend service upon the startup or when a user clicks the "Send Request" button:


 

FLEX CLIENT CODE

Client side application's logic for this example is very straightforward. The code must create a RemoteObject to invoke the remote method and have controls to visualize server response. The code below demonstrates the usage of the RemoteObject tag and the  mx.rpc.remoting.RemoteObject API for the .NET class above:

using MXML:

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

using ActionScript:

var compinfo:RemoteObject = new RemoteObject( "GenericDestination" );
compinfo.source="GettingStarted.Examples.ComputerInfoService";
compinfo.addEventListener( FaultEvent.FAULT, faultHandler );
compinfo.getComputerInfo.addEventListener(Result.EVENT,getComputerInfoHandler);

There are two response handlers: one is responsible to handle errors (faultHandler) and the other will be processing remote method invocation return data (getComputerInfoHandler). Both functions are shown below:

private function faultHandler( event:FaultEvent ):void
{
    Alert.show( event.fault.faultString, "Error" );
}

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;
} 

And finally the user interface part to display the response could have the following MXML markup:

<mx:Panel width="476" height="281"
          layout="absolute" title="Getting Started Example"
          cornerRadius="0" backgroundColor="#ffffff">
     <mx:Label x="292" y="-23" text="Flex Remoting with WebORB"/>
     <mx:Label text="Server Name" y="33" x="47"/>
     <mx:Label x="46" y="59" text="CLR Version" />
     <mx:Label x="46" y="85" text="CLR Vendor" />
     <mx:Label x="46" y="111" text="OS" />
     <mx:Label x="46" y="137" text="OS Version" />
     <mx:Label x="46" y="163" text="Request ID" />
     <mx:TextInput x="154" y="34" id="serverName"/>
     <mx:TextInput x="154" y="60" id="clrVersion"/>
     <mx:TextInput x="154" y="86" id="clrVendor"/>
     <mx:TextInput x="154" y="112" id="os"/>
     <mx:TextInput x="154" y="138" id="osVersion"/>
     <mx:TextInput x="154" y="164" id="requestId"/>
     <mx:Button x="47" y="209" label="Send Request" themeColor="haloBlue"
                click="compinfo.getComputerInfo( reqId++ )"/>
</mx:Panel>

Full client code listing is available here.

Compile and run the project. You should have a working Flex application using Flex Remoting with .NET.
 
Copyright © 2003-2008 Midnight Coders, Inc.  Privacy Policy | Contact Webmaster
Home | Products | Customers | Download | Licensing | Forum | About