Call Us: +1-888-227-1645

AS3 Remoting ArrayCollection Tutorial – Part I

Eric Meyer

5 min read

Okay, we’ve all used the <mx:RemoteObject> tag before, but now that we are following some good design principles and using a model view controller setup, we want to get rid of that tag and put the remote object logic into it’s own class.

When you decide to go ahead and start creating your own remote object classes in AS3, your’re going to have to keep in mind not only good design principles, but also encapsulation. This post is going to show you how to create an AS3 class that encapsulates the logic for connecting to a server side data service (In this one I am going to use ColdFusion, but you can easily substitute your own Ruby or Php based service). We are going to assume that you have a good understanding of Object Oriented AS3, as well as the AS3 event model.

When we create a remote service class over here we like to extend the EventDispatcher class. (The EventDispatcher class is the most primitive non-visual class in AS3 that can get and recieve events. If this was a visual component I would have used the Sprite class.) This way, the remote object class can send and recieve events in a relatively easy manner. The class signature ends up looking something like this:

public class MyRemoteEvent extends EventDispatcher{


public function MyRemoteEvent(target:IEventDispatcher=null)



Now, at this point you can use a singleton design pattern to define the class, but I prefer to leave the singleton pattern to any intermediate functions that I would create to manage the events between the UI and the remote service.

Once we have decided on (if any) a design pattern, then we go on to actually build the class. For the purposes of this tutorial, I’m going to omit the package directive.

public class MyRemoteEvent(target:IEventDispatcher=null){

import mx.collections.ArrayCollection;

import mx.rpc.remoting.RemoteObject;

private var _myConnection:RemoteObject;
private var _myArrayCollection:ArrayCollection;

_myConnection = new RemoteObject;
_myConnection.destination = “ColdFusion”;
_myConnection.source = “Your.Service.Path”;
//create some event handlers
_myConnection.addEventListener(ResultEvent.RESULT, serviceSuccessHandler);
_myConnection.addEventListener(FaultEvent.FAULT, genericFaultHandler);


In the above constructor, we are simply setting up our remote object, and adding the event handlers to the same remote object. For example purposes I have put the ResultEvent.RESULT handler on the main object itself. This will trigger whenever you get a result event from the remote object. In a production version you are going to want to add the Result listener(s) only to the RemoteObject’s methods that you are planning on using. For Example if my remote object has a method called addCustomer, then my eventListener on the object _myConnection would look like: _myConnection.addCustomer.addEventListener(ResultEvent.RESULT, …blah, blah, blah.

Alot of the Flex documentation out there will show you that you can bind the resultObject of a remote procedure call directly to a visual component. In practice I have found that this is not the case, or even best practice. To make your remote classes more reusable, I find that it’s really important to cast the data returned from the rpc into either an array or arraycollection.

In the example above, lets imagine that our rpc returns an object with a name and a birthday, as an array object that flex will place into the result event. In the event handler function below we are going to take in the result event, and then create a loop that iterates over the result set, casting each row into an object. We will then push each object into an array, and then use the array as the source for a new ArrayCollection.

private function serviceSuccessHandler(event:ResultEvent):void{

//get the length of the result array – this is going to be different for each remote object.
//Init a new   array to hold the result objects.

var length:int = event.result.length;
var tempArray:Array = [];

//Create the loop to iterate over the result set.

for(var i:int=0; i<length; i++){

//create a temp object

var tempObj:Object = {

//push the temp object into the array


//create the arraycollection
_myArrayCollection = new ArrayCollection(tempArray);

//dispatch a custom event to let the app know you’ve got the data….


And there you have it. To finish off the operation, you can dispatch a custom event with the array collection inside, or create a get function to shuffle the operation off to another service. That’s about it for now, Happy Coding!

Let's build something amazing together

Give us a ring and let us know how we can help you reach your goals. Or if you'd like, start a chat. We're usually available 9-5 EST. We try to respond to every inquiry within one business day.

Phone number

Technologies and services we work with:

Laravel Laravel
WordPress WordPress
React ReactJS
EmberJS EmberJS
woocommerce WooCommerce
next.js NextJS
gatsby Gatsby
Shopify Shopify
VueJs VueJS
contentful Contentful
next.js JAMStack
gatsby Laravel Jigsaw
WPEngine WP Engine
Laravel Livewire Laravel Livewire
Netlify Netlify