• Documentation
• Examples
• WebORB for .NET API
• Webinars
• Articles and Screencasts
• Discussion Forum
• Professional Support

Tweet

This article will guide you through the process of creating a basic Flex remoting application. The end result will be a Flex client communicating with a .NET object using the Flex RemoteObject API and WebORB for .NET.

To get started, make sure to install WebORB for .NET and create a Flex Builder project as described in this article.

Developing .NET class

Consider the following C# class. The method in the class will be invoked by the Flex application created in this guide. 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.

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 is 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).

Make sure the Flex Builder project is created as described in the "Setting up Flex Builder to work with WebORB" article.

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.

Client side application's logic for this example is very straightforward. The code creates a RemoteObject to invoke the remote method and uses UI 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>