Mapping .NET and Actionscript classes with WebORB

If you haven't used WebORB before, please read this recipe:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=12746&loc=en_US

Now, after you have seen how to connect your server and your Flex application you would like to see how to map Actionscript object with your server side class types.

Let's create a class library for WebORB.

Create a new  project for class Library. You can use this code:

using System;
using System.Collections.Generic;
using System.Text;

namespace FlexWebOrb.ZgFlex
{
    public class UserService
    {
        public WebOrbUser getUserProperties(WebOrbUser user)
        {
            WebOrbUser WebOrbUser = new WebOrbUser();
            WebOrbUser.firstName = user.firstName.ToUpper();
            WebOrbUser.lastName = user.lastName.ToUpper();
            WebOrbUser.age = user.age;

            return WebOrbUser;
        }
    }

    public class WebOrbUser
    {
        public string firstName;
        public string lastName;
        public int age;

    }
}

As you can see, this library contains a simple class WebOrbUser. We will use it to see how easy it is make client-server mapping.

In  Flex Builder create a new project, set library path to use WebORB.swc and compiler path with services config (you can check this on WebORB site or in my related article).

Create a new Actionscript class:

package org.zgflex.vo
{
    //[RemoteClass(alias="FleFlexWebOrb.ZgFlex.WebOrbUser")]
    public class WebOrbUser
    {
        public var firstName:String;
        public var lastName:String;
        public var age:int;       
    }
}   

It is important to have a commented line, because that is the way how WebORB will recognize the type of an object that Flex will send to  your .NET class  library. Here you can see the code that sends object data to the server.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   
    <mx:Script>
        <![CDATA[

        import mx.rpc.events.*;
        import mx.collections.*;
        import mx.controls.*;
        import org.zgflex.vo.*;
       
        [Bindable]
        public var serverUser:WebOrbUser = new WebOrbUser();       
       
        private function faultHandler(event:FaultEvent):void
        {
            Alert.show(event.fault.faultString, "Error");   
        }
      
        private function getUserPropertiesHandler(event:ResultEvent):void
        {
               serverUser.firstName = event.result.firstName;
               serverUser.lastName = event.result.lastName;
               serverUser.age = event.result.age;
              
               // you can display values in another panel
               lblFirstName.text = serverUser.firstName;
               lblLastName.text = serverUser.lastName;
               lblAge.text = serverUser.age.toString();

               Alert.show("You successfully transfered an object to your .NET server!");
           
        }

        private function sendUserData():void
        {
            var myUser:WebOrbUser = new WebOrbUser();
            myUser.firstName = txtFirstName.text;
            myUser.lastName = txtLastName.text;
            myUser.age = new int(txtAge.text);
           
            WebOrbConnect.getUserProperties(myUser);
        }
        ]]>       
    </mx:Script>
   
    <mx:RemoteObject id="WebOrbConnect"
                     destination="GenericDestination"
                     source="FlexWebOrb.ZgFlex.UserService"
                     showBusyCursor="true"
                     fault="faultHandler(event)" >
        <mx:method name="getUserProperties" result="getUserPropertiesHandler(event)"/>
    </mx:RemoteObject>

    <mx:Panel x="23" y="19" width="289" height="200" layout="absolute" title="Sending user data">
        <mx:Label x="10" y="10" text="First name:"/>
        <mx:Label x="10" y="40" text="Last name:"/>
        <mx:Label x="10" y="70" text="Age:"/>
        <mx:TextInput x="87" y="8" width="172" id="txtFirstName"/>
        <mx:TextInput x="87" y="38" width="172" id="txtLastName"/>
        <mx:TextInput x="87" y="68" width="46" id="txtAge"/>
        <mx:Button x="14" y="111" label="Send to .NET server" width="153" click="sendUserData()"/>
    </mx:Panel>
    <mx:Panel x="329" y="19" width="289" height="200" layout="absolute" title="Server data">
        <mx:Label x="10" y="10" text="First name:"/>
        <mx:Label x="10" y="40" text="Last name:"/>
        <mx:Label x="10" y="70" text="Age:"/>
        <mx:Label x="87" y="10" width="94" id="lblFirstName" textAlign="center"/>
        <mx:Label x="87.5" y="40" width="94" id="lblLastName" textAlign="center"/>
        <mx:Label x="87.5" y="70" width="94" id="lblAge" textAlign="center"/>
    </mx:Panel>
</mx:Application>
 

UserService class on a server side contains method getUserProperties(WebOrbUser user). It gets Flex WebOrbUser object, transforms the data and sends C# object to Flex. Then Flex gets this data back to display it in another panel.

Download ZIP file to see this full example.