WebORB as .NET Remoting for Flex

27 02 2008

When I started this Flex mission, one of the requirements for the RIA I am working on is, obviously, a server-backend.

I went and read all of Adobe’s docs on Flex and .NET (I’m sorry, but I do love C#) and found there were two main .NET Remoting options. The open-source Fluorine (now named FluorineFx) by The Silent Group and the commercial software WebORB by The Midnight Coders. [I’m not sure why both groups need a “The” prefix – maybe theirs is a highly competitive industry?]

I was somewhat non-plussed to go through Adobe Flex .NET tutorials on remoting that were specific to WebORB knowing that the overhead wasn’t going to be deemed appropriate by the upper-crust. I turned to FluroineFx, and found the community helpful, even if the documentation for Flex usage, quite lacking.

Only recently, has a followup from the Midnight Coders actually had me once again interested in WebORB. A representative from the company assured me that their product is now free-for-all, and that they will soon be changing their website to reflect this… WELL. That changes everything. I mean, it is an impressive tool for Flash/Flex Remoting in .NET (and they’ve released it in Java, PHP and Rails as well).

Advertisements




Flex 3 : FluorineFx : .NET

25 01 2008

Right, I might be sold on this setup I’ve got here.

So, I’m running Flex 3 Beta 3, the new open source remoting tool from the Silent Group called FluorineFx and .NET 2.0 (under Visual Studio 2008). Now, I’d been reading through online docs, and was struggling with persistent remote objects. Basically, I had assumed that after one call to some method in a remote object, the subsequent call would be to the same object, thereby any changes made in the first call would be noticed in the second.

HOWEVER, it turns out (thanku Zoli from the Fluorine mailing list) that by default, services have a “request” scope. If you want to change this, you must modify the remoting config file in the Fluorine .NET gateway.

The code below works as intended when you change the above remote file to include “<scope>session</scope>” under the destination tag of id “fluorine”… interesting…

Note: the code below is a modification of an example by Mark Piller from the Adobe docs on Flex and .NET (pg. 6).

C# Code

City.cs

using System;

 

namespace FlexInterop

{

    public class City

    {

        // The class uses public fields for brevity.

        // It could work with the public properties too

        public String name;

        public String country;

        public long population;

 

        // Public constructor is required so instances of

        // City can be created when the arrive from Flex

        public City()

        {

        }

 

        public City(String name, String country, long population)

        {

            this.name = name;

            this.country = country;

            this.population = population;

        }

    }

}

 

 

CityService.cs

 

using System;

using System.Collections.Generic;

using FluorineFx;

 

namespace FlexInterop

{

  

    [RemotingService(“Fluorine city service.”)]

    public class CityService

    {

        public List<City> cities;

 

        public CityService()

        {

            cities = new List<City>();

            cities.Add(new City(“Dallas”, “USA”, 1248816));

            cities.Add(new City(“Chicago”, “USA”, 2873790));

            cities.Add(new City(“Tokyo”, “Japan”, 12570000));

        }

 

 

        public void addCity(City newCity)

        {

            foreach (City city in cities)

                if (city.name.Equals(newCity.name))

                    throw new Exception(“City with name “ + newCity.name + ” already exists”);

 

            cities.Add(newCity);

           

        }

 

        public List<City> getCities()

        {

            return cities;

        }

    }

}

 

 

ActionScript 3.0 Code

City.as

package com.interop

{

 [RemoteClass( alias=“FlexInterop.City”)]

 public class City

 {

  public var name:String;

  public var country:String;

  public var population:Number;

 }

}

 

 

Application.mxml

 

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application creationComplete=”init()” xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute>

      <mx:Script>

            <![CDATA[

                 

                  import com.interop.City;

                  import mx.rpc.events.FaultEvent;

                  import mx.rpc.events.ResultEvent;

                  import mx.controls.Alert;

                  import mx.rpc.remoting.RemoteObject;

                       

                       

                 

                  private var cityService:RemoteObject;

                 

                  public function init():void

                  {

                        cityService = new RemoteObject( “fluorine” );

                        cityService.source = “FlexInterop.CityService”;

                        cityService.addEventListener( FaultEvent.FAULT, gotFault );

                        cityService.addCity.addEventListener( ResultEvent.RESULT, cityAdded );

                        cityService.getCities.addEventListener( ResultEvent.RESULT, gotCities );

                       

                       

                        addCity();

                       

                       

                  }

                 

                  private function gotFault( evt:FaultEvent ):void

                  {

                   Alert.show( “Server reported an error – “ + evt.fault.faultString + evt.fault.faultDetail );

                  }

                 

                  private function addCity():void

                  {

                   var city:City = new City();

                   city.name = “London”;

                   city.country = “UK”;

                   city.population = 10000000;

                   cityService.addCity( city );

                  }

                 

                  private function cityAdded( evt:ResultEvent ):void

                  {

                   trace( “city added, refreshing cities list” );

                   getCities();

                  }

                 

                  private function getCities():void

                  {

                   trace( “getting all cities” );

                   cityService.getCities();

                  }

                 

                  private function gotCities( evt:ResultEvent ):void

                  {

                   trace( “received all cities” );

                   // display in a data grid

                   cities.dataProvider = evt.result;

                   }

            ]]>

      </mx:Script>

     

      <mx:DataGrid id=”cities/>

</mx:Application>





Trawling through the Flex Remoting world

24 01 2008

Well, I’ve been a-reading, powering through the offerings available on the communication between .NET and Flex.

If you don’t know why, the reason is that Flex is almost completely a client-side application, and requires a server-side application to handle everything from databasing to file uploading.

Basically, everyone seems to agree on the remoting option rather than HTTP services or WebServices and fair enough. However, a lot of the documentation seems to focus around WebORB which is a pretty fantastic tool from The Midnight Coders. It is a remoting gateway that sits on IIS (requiring version 6, and thereby Windows Server 2003, I later learned) and interfaces with classes you make in .NET. There are open-source options, the main one I have been testing is FluorineFx which seems to be the newer release of Fluorine. However, it doesn’t have all the bells and whistles of WebORB.  But – I can develop on my own machine (running XP), which is a plus as you can imagine.

Essentially, you setup a virtual directory on IIS, running .NET 2.0 and then tell Flex to run from within that .NET application. On the .NET side, you ensure your classes use the right remoting compiler directives, and on the Flex side, ensure your actionscript objects reflect their .NET counterparts. Then in Flex, use the RemoteObject control along with a source property (which is the namespace and classname of your class) and call your methods via the RemoteObject.

Phew. It’s a bit messy comparing the different implementations of Flex remoting though, and that’s what I’m currently struggling with, not to mention, using the still-under-testing Flex 3 Beta 3.

I’ll post more, with examples, when I understand more.