Introduction to Flex 4 and .NET Integration

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:

• Flex and .NET Integration Options
• Project Description
• .NET Service
• Deploying .NET Code as Class Library
• Deploying .NET Code as Web Site Project
• Setting Up Flash Builder Project
• Developing ActionScript Code
• Final Steps

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

• WebORB v.3:  localhost/weborb30/weborb.aspx
• WebORB v.4:  localhost/weborb4/weborb.aspx

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

using
System;

namespace WeatherServiceNamespace
{
    public class WeatherService
    {
        public Weather GetWeather(String zipCode)
        {
            Random randomValue = new Random();

            Weather weather = new Weather();
            weather.temperature = randomValue.Next( 100 );
            weather.humidity = randomValue.Next(100);
            weather.condition = WeatherCondition.SUNNY;
            return weather;
        }
    }

    public class Weather
    {
        public double temperature;
        public float humidity;
        public WeatherCondition condition;
    }

    public enum WeatherCondition
    {
        SUNNY, CLOUDY, RAIN, FOG
    }
}
    

Deploying .NET Code as Class Library

                                <?xml
version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark"  
xmlns:mx="library://ns.adobe.com/flex/halo" 
  minWidth="400" minHeight="200"

  creationComplete="init()">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.RemoteObject;

[Bindable]
private var temperature:Number = 0;
[Bindable]
private var humidity:Number = 0;
[Bindable]
private var condition:String;

private var remoteObject:RemoteObject;

private function init():void
{
remoteObject = new RemoteObject( "GenericDestination" );
remoteObject.source = "WeatherServiceNamespace.WeatherService";
remoteObject.GetWeather.addEventListener( ResultEvent.RESULT,
gotWeather );
remoteObject.GetWeather.addEventListener( FaultEvent.FAULT,
gotError );
}

private function getWeatherInZipCode():void
{
var zipCode:String = zipCodeField.text;
remoteObject.GetWeather( zipCode );
}

private function gotWeather( resultEvent:ResultEvent ):void
{
temperature = resultEvent.result.temperature;
humidity = resultEvent.result.humidity;
condition = resultEvent.result.condition;
}

private function gotError( fault:FaultEvent ):void
{
Alert.show( "Server reported an error - " + fault.fault.faultString
);
}
]]>
</fx:Script>
<fx:Declarations>

</fx:Declarations>
<s:HGroup width="100%">
<s:Label text="Enter ZIP code:"  paddingTop="5"/>
<s:TextInput id="zipCodeField" width="100" />
<s:Button label="Get Weather" click="getWeatherInZipCode()"
/>
</s:HGroup>
<s:HGroup width="100%">
<mx:Form width="100%">
<mx:FormHeading label="Weather From Server:"/>
<mx:FormItem label="Temperature:">
<s:TextInput editable="false" width="100" text="{temperature}"
/>
</mx:FormItem>
<mx:FormItem label="Humidity:">
<s:TextInput editable="false" width="100" text="{humidity}"
/>
</mx:FormItem>
<mx:FormItem label="Condition:">
<s:TextInput editable="false" width="100" text="{condition}"
/>
</mx:FormItem>
</mx:Form>
</s:HGroup>
</s:Application>