Developer Resources:

Customer Quotes:

Introduction

This article describes the process of building a very basic .NET application and integrating it with a Flex client. The purpose of the article is to review the configuration steps required to create a client/server development environment when working with Flex and .NET. You will need the following software:

  • Adobe Flash Builder 4
  • Microsoft Visual Studio
  • WebORB for .NET v. 3.6.0.3 or higher

This article consists of the following sections:

To get started install WebORB for .NET and verify the installation by opening WebORB Management Console. The console is available at the following URLs:

If there is a problem with installation or configuration, the console will display an error message.

Flex and .NET Integration Options

One of the first questions you might asking at this point is what is WebORB and why you need it to integrate Flex and .NET. Indeed, Flex supports several options for connecting the client-side with the server application. These options include XML/SOAP web services, integration through basic HTTP GET/POST requests and AMF Remoting. While each of these alternatives have its own pros and cons, the AMF Remoting provides the best performance as well as simplicity and speed of development. The performance factor is significant as Rich Internet Applications created with Flex require fast response times to avoid scenarios when users have to wait for a screen to update or a business transaction to be completed. (There is a live benchmark comparing performance of AMF/Remoting and Web Services)  The speed of development is equally important as businesses strive to complete projects on time and beat the time to market.

Project Description

Since the article focuses on the subject of client-server integration between Flex and .NET, the application will be as simple as possible. The server side will contain a .NET class exposed as a remoting service through WebORB. The Flex side will use the RemoteObject API to invoke methods on the .NET service. To keep things simple, the service has one method - receiving and returning a string value.

.NET Service

In this section you will learn about ways to expose a .NET class as a Flex remoting service. Consider the code below:

   1:  using System;
   2:   
   3:  namespace WeatherServiceNamespace
   4:  {
   5:      public class WeatherService
   6:      {
   7:          public Weather GetWeather(String zipCode)
   8:          {
   9:              Weather weather = new Weather();
  10:              weather.temperature = 74.0;
  11:              weather.humidity = 20;
  12:              weather.condition = WeatherCondition.SUNNY;
  13:              return weather;
  14:          }
  15:      }
  16:   
  17:      public class Weather
  18:      {
  19:          public double temperature;
  20:          public float humidity;
  21:          public WeatherCondition condition;
  22:      }
  23:   
  24:      public enum WeatherCondition
  25:      {
  26:          SUNNY, CLOUDY, RAIN, FOG
  27:      }
  28:  }

The code shows 2 classes (WeatherService, Weather) and an enumeration (WeatherCondition). The WeatherService class will be exposed as a remoting service. Notice the class does not use any special interfaces or annotations. As long as it is deployed in WebORB, it will automatically become a remoting service. Once it is deployed, the public method in the class (GetWeather) can be accessed by Flex clients.

Deploying .NET Code as Class Library

There are two ways for deploying your .NET code. The easiest approach is to create a Class Library project in Visual Studio so the code is compiled as a .NET assembly. When you installed WebORB, the installer created a fully functional .NET application which you can use to deploy your code. The compiled assembly should be copied into the /bin folder of the WebORB application. If you use WebORB version 3, the bin folder is located at /inetpub/wwwroot/weborb30/bin. In case of WebORB version 4, the bin folder is at /Program Files/WebORB for .NET/[VERSION OF WEBORB]/bin (where [VERSION OF WEBORB] is a directory corresponding to the version number of your WebORB installation). Once the assembly is copied, you can verify it in the WebORB Management Console available at:

WebORB version 3: localhost/weborb30/weborb.aspx
Select 'Management', locate your assembly in the Services tab.

WebORB version 4: http://localhost/weborb4/weborb.aspx
Select 'Services', expand the '.NET Assemblies' node and locate your assembly.

If you decide to proceed with the Class Library approach, you can download a complete Visual Studio project for the WeatherService class.

Deploying .NET Code as Web Site Project

Another option for deployment is to create an ASP.NET Web Application project in Visual Studio. In that case all the code would be contained with the project and you would need to deploy WebORB into the project as well. Follow the instructions below to deploy WebORB into your Visual Studio Project:

  1. Open Web.config in your project and add the following HTTP handler configuration to the <system.web><httpHandlers> element:

    <add verb="*" path="weborb.aspx" type="Weborb.ORBHttpHandler" />
    <add verb="*" path="codegen.aspx" type="Weborb.Management.CodeGen.CodegeneratorHttpHandler" />
    <!-- ADD THE LINE BELOW ONLY WITH WEBORB v. 4 -->
    <add verb="*" path="dcd.aspx" type="Weborb.RDS.Handler.FrontEndHttpHandler"/>

    For IIS7 deployments, also add the following configuration to <system.webServer><handlers>:
    <add name="weborb.aspx_*" verb="*" path="weborb.aspx" type="Weborb.ORBHttpHandler" />
    <add name="codegen.aspx_*" verb="*" path="codegen.aspx" type="Weborb.Management.CodeGen.CodegeneratorHttpHandler" />
    <!-- ADD THE LINE BELOW ONLY WITH WEBORB v. 4 -->
    <add name="dcd.aspx_*" verb="*" path="dcd.aspx" type="Weborb.RDS.Handler.FrontEndHttpHandler"/>

    For detailed instructions on http handler registration see the following page:
    http://msdn.microsoft.com/en-us/library/46c5ddfy.aspx

  2. Add the following files and folders from the WebORB installation to your project:
    /weborb.config
    /WEB-INF folder

    to deploy WebORB console into your application (optional, but will be very helpful):
    /console folder
    /weborbconsole.html
    /weborbassets folder

  3. Add weborb.dll as a reference into your project

When you are done, your project structure should look as in the image below:

Compile and run your Web Application project. When the browser opens with your default page, navigate to the "/weborb.aspx?diag" page. If WebORB is deployed correctly to your site, you should see the WebORB diagnostics information. If you deployed the WebORB console, you can open weborb.aspx or weborbconsole.html.

Setting Up Flash Builder Project

This article assumes you are using Flash Builder to develop Flex applications. However, if you are using Flex Builder, you can read about setting up Flex Builder to work with .NET.

From Flash Builder main menu select New > Flex Project. In the "New Flex Project" dialog enter project name and select ASP.NET for the Application Server Type as shown in the image below:

Click "Next >". The next step sets up the web server paths. This is an important step since Flash Builder will be using the path to deploy, run and debug compiled Flex application (for running and debugging, application will be loaded from the web server via http:// url).

Select "Use Internet Information Services (IIS)" in the Server section. If you installed WebORB for .NET version 3 enter paths in the Server location section as shown below:

If you use version 4 of WebORB for .NET, the paths should be:

Web application root: c:/Program Files/WebORB for .NET/[VERSION OF WEBORB]/
Web application URL: http ://localhost/weborb4

Where [VERSION OF WEBORB] is a directory corresponding to the version number of WebORB you have installed. For example, the full directory path may be: c:/Program Files/WebORB for .NET/4.1.0.1/

The "Output folder" path is adjusted automatically.

Click the "Validate Configuration" button. Flash Builder should display a confirmation message at the top of the window as shown in the image above.

Click "Next >" and then "Finish" to finalize creation of the project. Flash Builder sets up a project and opens application's main MXML file. From the main menu open Project and select Properties. Click 'Flex Compiler' in the Properties window. Enter the following text in the "Additional compiler options":

If you use WebORB version 3:
-services c:/inetpub/wwwroot/weborb30/WEB-INF/flex/services-config.xml

If you use WebORB version 4:
-services c:/Program Files/WebORB for .NET/[VERSION OF WEBORB]/WEB-INF/flex/services-config.xml

Make sure to replace [VERSION OF WEBORB] with a specific folder name which corresponds to the version number of WebORB you installed. 

The image below is an example of the window for WebORB version 4.0:

Click OK to finalize project setup.

Developing ActionScript Code

Enter the following code in the application's main file. You can download complete MXML code listing and copy and paste from there:

   1:  <?xml version="1.0" encoding="utf-8"?>
   2:  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
   3:           xmlns:s="library://ns.adobe.com/flex/spark" 
   4:           xmlns:mx="library://ns.adobe.com/flex/mx" 
   5:           minWidth="400" minHeight="200"
   6:           creationComplete="init()">
   7:    <s:layout>
   8:      <s:VerticalLayout/>
   9:    </s:layout>
  10:    <fx:Script>
  11:      <![CDATA[
  12:        import mx.controls.Alert;
  13:        import mx.rpc.events.FaultEvent;
  14:        import mx.rpc.events.ResultEvent;
  15:        import mx.rpc.remoting.RemoteObject;
  16:        
  17:        [Bindable]
  18:        private var temperature:Number = 0;
  19:        [Bindable]
  20:        private var humidity:Number = 0;
  21:        [Bindable]
  22:        private var condition:String;
  23:        
  24:        private var remoteObject:RemoteObject;
  25:        
  26:        private function init():void
  27:        {
  28:          remoteObject = new RemoteObject( "GenericDestination" );
  29:          remoteObject.source = "WeatherServiceNamespace.WeatherService";
  30:          remoteObject.GetWeather.addEventListener( ResultEvent.RESULT, gotWeather );
  31:          remoteObject.GetWeather.addEventListener( FaultEvent.FAULT, gotError );
  32:        }
  33:        
  34:        private function getWeatherInZipCode():void
  35:        {
  36:          var zipCode:String = zipCodeField.text;
  37:          remoteObject.GetWeather( zipCode );
  38:        }
  39:        
  40:        private function gotWeather( resultEvent:ResultEvent ):void
  41:        {
  42:          temperature = resultEvent.result.temperature;
  43:          humidity = resultEvent.result.humidity;
  44:          condition = resultEvent.result.condition;
  45:        }
  46:        
  47:        private function gotError( fault:FaultEvent ):void
  48:        {
  49:          Alert.show( "Server reported an error - " + fault.fault.faultString );
  50:        }
  51:      ]]>
  52:    </fx:Script>  
  53:    <fx:Declarations>
  54:   
  55:    </fx:Declarations>
  56:    <s:HGroup width="100%">
  57:      <s:Label text="Enter ZIP code:"  paddingTop="5"/>
  58:      <s:TextInput id="zipCodeField" width="100" />
  59:      <s:Button label="Get Weather" click="getWeatherInZipCode()" />
  60:    </s:HGroup>
  61:    <s:HGroup width="100%">
  62:      <mx:Form width="100%">
  63:        <mx:FormHeading label="Weather From Server:"/>
  64:        <mx:FormItem label="Temperature:">
  65:          <s:TextInput editable="false" width="100" text="{temperature}" />
  66:        </mx:FormItem>
  67:        <mx:FormItem label="Humidity:">
  68:          <s:TextInput editable="false" width="100" text="{humidity}" />
  69:        </mx:FormItem>
  70:        <mx:FormItem label="Condition:">
  71:          <s:TextInput editable="false" width="100" text="{condition}" />
  72:        </mx:FormItem>
  73:      </mx:Form>
  74:    </s:HGroup>
  75:  </s:Application>

User enters a zip code in the Flex client application (line 58) and clicks the "Get Weather" button (line 59). The button click results in a remote method invocation of the .NET service (lines 34-38). The service returns a Weather object with information about the weather. The Flex client retrieves the data from the received object (lines 40-45) and updates the user interface through data binding (lines 17-22 and 65, 68 and 71).

The code uses the RemoteObject API to communicate with the .NET backend. The API provides Flex/.NET integration using the AMF protocol. Application declares remoteObject variable on line 24. The initialization code (lines 26-32) configures the remote object with a destination name (line 28), full name of the server-side class (line 29) and callback events for the GetWeather method (lines 30 and 31). The init() function is invoked through the creationComplete event (line 6).

It is important to understand the significance of the destination name used by the remote object. The "GenericDestination" used on line 28 provides a way to invoke server-side classes exposed by WebORB. The destination became "known" to the Flex application as a result of the configuration step made earlier when you referenced services-config.xml in the additional compiler arguments.

Final Steps

At this point your Flex application is ready to run. Click Run from the main menu in Flash Builder and select "Run WeatherApp". Additionally, you should try setting a few breakpoints in the code (perhaps on lines 28, 36 and 42) and run the application in the debugger. If you are new to remoting, stepping line-by-line through the code is a great learning exercise.