Flash Data Transfer
using FluorineFx

Specialmoves Labs

Written by Matt Bilson, 20 May 2010

Recently at specialmoves, we’ve worked on some very large, multi-language, bespoke CMS driven sites. The Flash versions of these sites require many calls to the back-end (.NET) to send and retrieve data.

One approach would have been to transfer all of this data in XML or JSON. However we turned to FluorineFx which is a Flash (and Flex) remoting framework for .NET which facilitates data transfer using AMF (ActionScript Message Format.) It is similar in functionality to BlazeDS (for Java) and ZendAMF (for PHP).

This article is going to show how easy it is to use Fluorine in a Flash site, and introduce the ActionScript classes we’ve written to make it even simpler!

Why?

Fluorine removes the need for coding your own serialization (converting back-end data into XML or JSON) and deserialization (converting the XML or JSON into ActionScript objects) by transferring data in AMF – a binary form of ActionScript. Because Fluorine takes care of this ‘behind the scenes’, there are two fewer steps of the data transfer process for you to build, which saves time and reduces the opportunity for errors.Also, due to the structure of the data (raw binary ActionScript – no XML or JSON markup) it is smaller in size, improving the speed of communication with the back-end.More general information on FluorineFX can be found at the main site (including information on using Fluorine with Silverlight and AJAX.)

How?

Configure .NET

So, to set Fluorine up within your .NET project, you just need to add a .dll to your project and a few lines to your web.config file :


        <!-- Reflection optimizer provider="codedom|il" debug="true|false" -->
      <!-- <optimizer provider="codedom" debug="true" /> -->
      true
      FluorineFx.Proxy
      <!-- Time Zone Compensation ="none|auto" -->
      <!-- <timezoneCompensation>none</timezoneCompensation>  -->
      <!-- Any value-type that is not explicitly initialized with a value will contain the default value for that object type -->
      false
      <!-- value="browse|access" -->
      <!-- <remotingServiceAttribute>browse</remotingServiceAttribute> -->

Merge these nodes into the equivalent nodes in your web.config file, and you should be good to go.

ActionScript – Class Mapping

Within Flash, the first step is to map the .NET classes to their equivalent ActionScript classes.This is done using flash.net.registerClassAlias :


        registerClassAlias("com.specialmoves.example.Cake", CakeVO);
registerClassAlias("com.specialmoves.example.Slice", SliceVO);

This code tells Fluorine that our ActionScript class CakeVO is equivalent to the .NET class com.specialmoves.example.Cake.

N.B. In Flex this can be done using a meta tag above the class definition :


        [RemoteClass(alias="com.specialmoves.example.Cake")]

ActionScript – Connecting to .NET

To make a connection, we use Flash’s NetConnection object, making sure to specify the correct encoding.

Here we are connecting to a hypothetical Fluorine gateway at http://www.specialmoves.com/example/Gateway.aspx.


        _connection = new NetConnection();
_connection.objectEncoding = ObjectEncoding.AMF3;
_connection.connect("http://www.specialmoves.com/example/Gateway.aspx");

Now we have an open connection, we can start making some calls.

Call and Response

Here’s an example of making a call and receiving a response :


        private function getSlice(sliceType : String) : void {
   var getSliceResponder : Responder = new Responder(getSliceSuccessHandler, getSliceFailHandler);
   _connection.call("com.specialmoves.example.Cake.GetSlice", getSliceResponder, sliceType);
}
 
private function getSliceSuccessHandler(slice : SliceVO) : void {
   trace("We have cake! Is it iced? " + slice.hasIcing);
}
private function onFailed(result : Object) : void {
   trace("What? Why no cake? " + result['description']);
}

Firstly, in the getSlice function, we create a responder, which defines 2 handlers; a function for a successful call, and a function for a failed call.

Next we make the call using the connection instance which is connected to our Fluorine gateway. The first argument in the _connection.call method is the method name to call on the back-end (the GetSlice method of the Cake class), the second is the responder, and any arguments after this are used as arguments in the GetSlice method.

The C#, .NET implementation of the Cake class would look something like this :


        using System;
using FluorineFx;
 
namespace com.specialmoves.example.Cake {
	[RemotingService("Cake")]
	public class Cake {
		public Slice[] slices { get; set; }
 
		public static Slice GetSlice(string sliceType) {
			//get the slice from the database...
			//and then return it
			return slice;
        	}
    	}
}

The main things to note here are that line 5 lets Fluorine know that this class contains methods for Flash to call, and that the GetSlice method returns a Slice object, rather than a serialized, XML or JSON representation of a Slice object.

As for handing this returned object in Flash, that’s simple…

A failed call returns an object to the failHandler which contains information about the error to aid debugging and error handling.

The success handler receives a typed object – SliceVO, ready to be used in ActionScript, rather than a chunk of XML or JSON which needs deserializing.

Whilst this may seem like a trivial example, when developing a 500 page Flash site available in 11 languages, a fast, simple and reliable approach to data transfer can save a lot of time and headaches!

As can a good tool for debugging, introducing Charles…

Debugging AMF data transfer

Charles is a web proxy – it lets you view web traffic being sent and received by your machine. A tool such as this is essential when working on sites which depend on custom data structures and bespoke CMS’s – it can help you diagnose and fix bugs quickly and easily. What sets Charles apart from tools like Firebug is that it understands AMF and shows AMF requests/responses in a clear tree structure. This makes it incredibly useful when working with Fluorine connections (and any other form of Flash Remoting). Charles also provides connection throttling, repeat requests and request editing, as well as many other useful features.

Specialmoves Labs Libraries : FluorineConnection

Whilst implementing Fluorine connectivity in our own projects, we’ve created a few classes which make creating, configuring and debugging Fluorine connections incredibly simple :


        var fluorineConnection : IFluorineConnection = new FluorineConnection(new FluorineConfig("/Gateway.aspx"));
fluorineConnection.addEventListener(FluorineErrorEvent.CONNECT_ERROR, errorHandler, false, 0, true);
fluorineConnection.addEventListener(FluorineErrorEvent.CALL_ERROR, errorHandler, false, 0, true);
var responder : Responder = new Responder(onSuccess, FluorineUtils.onError);
fluorineConnection.call("Cake.GetSlice", responder, sliceType);

To find out more, see full examples and download these classes to use in your own projects, view the project on GitHub.

And if you have any comments, questions or ideas let us know below…

Flash Data Transfer using FluorineFx - Specialmoves

Flash Data Transfer using FluorineFx