|
Flex and WebORB |
  
|
|
Flex and WebORB |
|
The instructions below will guide you through the process of creating and running a remoting-enabled Flex application using Flex Builder 3 or Flash Builder 4. At the end of the walkthrough you will have a Flex application communicating with a .NET object exposed through WebORB.
The code used in this quick start is available in your WebORB distribution at:
Flex source: [WEBORB HOME]/examples/quickstart/flex
C# code/compiled assembly: [WEBORB HOME]/examples/quickstart/server-side
The default location of [WEBORB HOME] is /Program Files/WebORB for .NET/[WEBORB VERSION]/
where [WEBORB VERSION] is the product's version number.
To create a Flex project in Flash Builder, select File -> New -> Flex Project from the main menu. The dialog window shown below will appear. Enter the project name. Make other selections as shown below and click "Next >".
The next step is very important as it establishes the configuration paths.
| 1. | Select "ASP.NET" as the Application server type |
| 2. | In the "Server" controls (two radio buttons), select "Use Internet Information Services". |
| 3. | In the "Server location" "Web application root" text entry field, enter the physical directory into which WebORB was installed (in this example, C:\Program Files\WebORB for .NET\4.0). Henceforth, in this documentation, this physical directory will be called "[WEBORB HOME]". |
| 4. | In the "Server location" "Web application URL" text entry field, enter the IIS virtual directory (in this example, http://localhost/weborb4/) that corresponds to the physical directory you entered in the "Web application root" text entry field. |
The "Output folder" field should be automatically populated with a path based on the name of the project.
Click "Finish" to continue. Flex/Flash Builder creates an default (blank) Flex/MXML 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, but make sure to replace [WEBORB VERSION DIR] with the actual name of the directory corresponding to a version of WebORB:
-services "C:\Program Files\WebORB for .NET\[WEBORB VERSION DIR]\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:
C:\Program Files\WebORB for .NET\[WEBORB VERSION DIR]\weborbassets\wdm\weborb.swc
The steps below will guide you through adding MXML/ActionScript code and connecting it with a .NET object.
Import Flex Application Code
The WebORB installation includes full source code listing for the example reviewed in this chapter. You can access the code at C:\Program Files\WebORB for .NET\4.0\examples\quickstart\flex\GettingStartedProject.mxml. The simplest approach is to copy and paste the contents of that file into the default MXML application created by Flex/Flash Builder (replace the contents of the default file).
Compile/Deploy Server Code
The server side code for this quick start can be found at the following path in your WebORB installation: [WEBORB HOME]\examples\quickstart\server-side. The directory also includes a compiled assembly (quickstart.dll). You can either compile the code yourself, or use quickstart.dll. To expose the server-side class as a remoting service through WebORB, the assembly must be deployed to the /bin folder of your WebORB installation. Once you deploy the assembly, you can verify that it is recognized by WebORB by opening the WebORB Management Console and selecting the Services tab. The assembly will show up in the ".NET Assemblies" node in service browser.
Running Flex Application
When you run the application in Flex/Flash Builder, it opens a browser and loads the application from:
http://localhost/weborb4/SampleFlexToDotNetProject/SampleFlexToDotNetProject.html
If you compiled the application using the command line compiler, use the following URL to run it:
http://localhost/weborb4/SampleFlexToDotNetProject/SampleFlexToDotNetProject.swf
The application connects to the backend .NET 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.quickstart.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 invocations and can be referenced by the assigned id ("compinfo" in the example above). For instance, when the Flex application is started, it invokes the initApp() function shown below, 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 returned, Flex invokes the 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.quickstart
{
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;
}
}