Google analytics code

Tuesday, April 13, 2010

Flex / ActionScript: Copy an ArrayCollection

While working with an ArrayCollection I ran into a issue. It seems when you set one ArrayCollection equal to another they share memory space. This can cause issues when you perform any operation that will alter the internal array.

var arrayCollection1:ArrayCollection = new ArrayCollection([1,2,3,4,5]);
var arrayCollection2:ArrayCollection = arrayCollection1;

trace("arrayCollction1: " + arrayCollection1.toString());
trace("arrayCollction2: " + arrayCollection2.toString());

arrayCollection1.removeItemAt(0);

trace("arrayCollction1: " + arrayCollection1.toString());
trace("arrayCollction2: " + arrayCollection2.toString());
Output:
arrayCollection1: 1,2,3,4,5
arrayCollection2: 1,2,3,4,5

arrayCollection1: 2,3,4,5
arrayCollection2: 2,3,4,5

The simple solution for this is to always create a new ArrayCollection for the target using the toArray method from the source.

var arrayCollection1:ArrayCollection = new ArrayCollection([1,2,3,4,5]);
var arrayCollection2:ArrayCollection = new ArrayCollection(arrayCollection1.toArray());

trace("arrayCollection1: " + arrayCollection1.toString());
trace("arrayCollection2: " + arrayCollection2.toString());

arrayCollection1.removeItemAt(0);

trace("arrayCollection1: " + arrayCollection1.toString());
trace("arrayCollection2: " + arrayCollection2.toString());
Output: 
arrayCollection1: 1,2,3,4,5
arrayCollection2: 1,2,3,4,5

arrayCollection1: 2,3,4,5
arrayCollection2: 1,2,3,4,5

Those post is based on findings from this blog post.

Friday, March 19, 2010

Flash / ActionScript 3: Singleton Example

Singletons are a design pattern that allows you to share one instance of a class throughout a application. An example of where a singleton is useful is when you only want one and only one connection to a database. It also allows you to keep memory usage down because there is only one copy in memory.

I've created a sample ActionScript project that shows how a singleton can be used. You can download it here.

Here is what the files look like.
Singleton_Example.as
package {
    import flash.display.Sprite;
    
    import Singleton.ExampleSingleton;
    import classes.ExampleClass;

    public class Singleton_Example extends Sprite
    {
        public function Singleton_Example()
        {
            //init the Singleton by grabbing an instance of it
            var singleton:ExampleSingleton = ExampleSingleton.instance;
            var exampleClass1:ExampleClass;
            
            
            //set the flag
            singleton.flag = ExampleSingleton.FLAG1;
            
            //show the current state of the flag
            trace("flag state: " + singleton.flag);
            
            //creating this class will update the flag in the singleton
            exampleClass1 = new ExampleClass;
            
            //the flag should be updated now
            trace("flag state: " + singleton.flag);
            
            //update the flag here
            singleton.flag = ExampleSingleton.FLAG3;
            
            //make the class display the state
            exampleClass1.displayFlagState();
        }
    }
}


ExampleSingleton.as
package Singleton
{
    public class ExampleSingleton
    {
        //a set of dummy values used to explain how a Singleton is manuplated
        public static const FLAG1:String = "value1";
        public static const FLAG2:String = "value2";
        public static const FLAG3:String = "value3";
        public static const FLAG4:String = "value4";
        
        
        //this is the only instance of the class
        private static const _instance:ExampleSingleton = new ExampleSingleton(SingletonLock);
        
        //list of allowed values that can be set for the flag
        private var _allowedValues:Array = [];
        
        //state of the flag
        private var _flag:String = "";
        
        //this will control wither the Singleton is really to be accessed
        private var _initialized:Boolean = false;
        
        /**
         * Use this to return an instance of the singleton 
         * @return 
         * 
         */
        public static function get instance() : ExampleSingleton {
            return _instance;
        }
        
        /**
         * Query the Singleton to see if it's ready to be accessed 
         * @return 
         * 
         */
        public function get initialized() : Boolean {
            return _initialized;
        }
        
        /**
         * Return the current flag 
         * @return String
         * 
         */
        public function get flag() : String {
            return _flag;
        }
        
        /**
         * Set the flag state 
         * @param value
         * @return Boolean
         * 
         */
        public function set flag(value:String) : void {
            //make sure the Singleton is initialized first
            if(!_initialized) {
                return;
            }
            
            //check to make sure it's an allowed value before setting it
            if(_allowedValues.indexOf(value) == -1) {
                return;
            }
            
            //update the flag
            _instance._flag = value;
        }
        
        /**
         * This will initialize the Singleton. It's never publicly called. Use ExampleSingleton.instance instead 
         * @param lock
         * 
         */
        public function ExampleSingleton(lock:Class) {
            if(lock != SingletonLock) {
                throw new Error("Invalid ExampleSingleton access. Use ExampleSingleton.instance");
            }
            
            initialize();
        }
        
        /**
         * This is where you would set up anything the Singleton needed before it should be accessable to the public 
         * 
         */
        private function initialize() : void {
            //we only need to initialize once. 
            if(_initialized) {
                return;
            }
            //set up what we allow the flag to be
            _allowedValues = [FLAG1, FLAG2, FLAG3, FLAG4];
            
            _initialized = true;
        }
    }
}

//this is used to lock the Singleton
class SingletonLock{}

ExampleClass.as
package classes
{
    import Singleton.ExampleSingleton;
    
    public class ExampleClass
    {
        public function ExampleClass() {
            //update the flag in the Singleton. we don't need to create a var to update it
            ExampleSingleton.instance.flag = ExampleSingleton.FLAG2;
        }
        
        /**
         * This will display the current flag from the Singleton 
         * 
         */
        public function displayFlagState() : void {
            trace("flag state from ExampleClass: " + ExampleSingleton.instance.flag);
        }
    }
}

Lets start with ExampleSinglton.as. The important parts of this class are the _instance member variable, the instance getter method and the ExampleSingleton constructor.

The constructor takes a SingletonLock class argument as a locking precaution. This class is defined at the bottom of the ExampleSingleton package. This allows us to control the way the class is created. The _instance member variable is where we create the instance of the ExampleSingleton. The ExampleSingleton constructor should check to make sure the lock argument is a SingletonLock class and throw an error if it isn't. The error you throw should let the person know how to properly access the singleton.

ExampleSingleton.initialize is where some basic values are set up that are accessed in the rest of the project.

Now lets look at Singleton_Example.as. When we create the singleton variable we access the .instance property of the class. This will return the single instance of ExampleSingleton.

ExampleClass.as also uses the ExampleSingleton class. You'll see how setting a property on ExampleSingleton in Singleton_Example is reflected in ExampleClass and vice versa.

Friday, March 12, 2010

ActionScript: The difference between "FOR IN" and "FOR EACH"

I ran into an issue earlier while looping through a list of objects where I couldn't get the index of the array I was accessing. Turns out there is a BIG difference between FOR and FOR EACH. Coding late at night probably didn't help either.

FOR EACH gives you access to the element in the array. FOR gives you access to the index of the array.

var elements:Array = [{name:'Orange'}, {name:'Apple'},{name:'Banana'},{name:'Pear'}];

for(var i:Object in elements) {
    trace("index: " + i);
}

for each(var e:Object in elements) {
    trace("element: " + e.name);
}

The output from FOR loop looks like this:
index: 0
index: 1
index: 2
index: 3

The output from FOR EACH looks like this:
element: Orange
element: Apple
element: Banana
element: Pear

Hopefully this helps someone from blunt force trauma caused by baning your head against the desk. Probably common knowledge for most, but it never hurts to post it.

Monday, March 1, 2010

Flash / Flex / ActionScript: Using IResponder instead of EventListeners

Using addEventListener is a popular way of waiting for a response from a server. I've run into issues using this when a server returns the same response for all methods. Many of the listener methods are tripped for the wrong response. The easy way to avoid this is to use an IResponder.

Here is an example using the HTTPService object. You should be able to use the same steps on a method that returns an AsyncToken.

var asyncToken:AsyncToken;
var internalIResponder:IResponder;
...
asyncToken = _httpService.send();
internalIResponder = new AsyncResponder(onHTTPServiceSuccess, onHTTPServiceFault, asyncToken);
asyncToken.addResponder(internalIResponder);

When send is called it will return an AsyncToken. We can attach an IResponder object to the AsyncToken that will handle the success and fail cases for the response.

Monday, December 7, 2009

MySQL: Error 1305 - Function xxx does not exist

I ran into an odd issue on a project I updated awhile ago. I updated an existing sql statement to include IFNULL for an exclusion check. It worked fine on my dev machine, but caused an issue on the production machine.

The version of MySQL on my dev machine was a little bit newer than production so the issue never came up. Here is the error the sql server returned:
#1305 - FUNCTION [DATABASE_NAME].ifnull does not exist

Here is a little bit of the sql that caused the error:
AND IFNULL ( `tbl_category_admin`.`admin_key_id` =5, true )

The problem was caused by the space between IFNULL and (. Changing it to IFNULL( solved the problem. If you run into an issue where MySQL returns an error saying a given function does not exist look for spaces between the function and the "(".

Monday, November 30, 2009

Flex (Learning Flex 3 Book) : Removing IEventDispatcher error from the DataGrid

When I decided to learn Flex I started with Learning Flex 3. It's a great book and does an excellent job of introducing the MXML framework and Flex Builder IDE. I would recommend it to anyone.

One of the problems I have with the book is it doesn't teach you how to remove warnings from your code. A later code example produces the following error: warning: unable to bind to property 'contact' on class 'XML' (class is not an IEventDispatcher). It's not a big deal, but I like to write code that doesn't produce hidden errors.

Here is the code from the book:
<mx: Application
    xmlns: mx="http: //www.adobe. com/2006/mxml"
    xmlns: view="com.oreilly.view.*"
    layout="absolute"
    applicationComplete="contactsService.send()" >
    <mx:HTTPService id="contactsService"
        resultFormat="e4x"
        url="contacts.xml" />
    <mx:DataGrid id="contactsDataGrid"
        dataProvider="{contactsService.lastResult.contact}"
        selectedIndex="0"
        left="10"
        top="10"
        bottom="10"
        width="300">
        <mx: columns>
            <mx: DataGridColumn headerText="First"  
            dataField="firstName"/>
            <mx: DataGridColumn headerText="Last" dataField="lastName"/>
        </mx:columns>
    </mx:DataGrid>
    <view: ContactViewer
        contact="{contactsDataGrid. selectedItem}"
        x="318" y="10">
    </view: ContactViewer>
</mx: Application>

The problem is the dataProvider property of DataGrid. It's unable to figure out how to parse the data, so it throws a warning. This can be resolved with casting. We can tell the dataProvider what it should be and it will remove the warning. Here is the code that will remove the warning.

dataProvider="{XMLList(XML(contactsService.lastResult).contact)}"

contactsService.lastResult is an XML object. There are multiple children in the object. We can then cast the XML object as an XMLList to use contact child node.

Feel free to leave a comment if you have any questions.

Wednesday, November 18, 2009

Flex: TileList cell switching/redraw problem using an itemRenderer

While working with the TileList component I ran into a very odd issue. Images would move around while scrolling up and down. Also when I updated the dataProvider the TileList didn't display the new information. Here is an example so you can see what is going on. You can view the source the source by right-clicking and selecting "View Source".

After a lot of research, and a post on StackOverflow, I figured out what was going on. My broken example relies on a MXML completion method (init, creationComplete, etc..)  to set the source of the image in the itemRenderer.

index.mxml
<mx:Component>
    <itemRenderers:ImageTile_bad />
</mx:Component>

ImageTile_bad.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
    <mx:Script>
        <![CDATA[
            /**
            * This is an example of how not to use an item render in a TileList  
            * */
            private function init() : void {
                this.source = data;
                this.name = data.toString().split("/").pop().split(".").shift();
            }
        ]]>
    </mx:Script>
</mx:Image>

TileList reuses cells inside the component. I'm not sure why, but can't keep track of where things should render and starts switching images around. I tried overridding the data method and it works, but I wanted to find a solution that doesn't require overriding a private method.

The answer is to use a setter inside the itemRenderer to assign the value to the component. Here is a snip-it of code to show you what I mean.

index.mxml
<mx:Component>
    <itemRenderers:ImageTile img="{data}"/>
</mx:Component>

ImageTile.mxml
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            /**
            * This is an example of how to use an itemRenderer in a TileList
            * Create a setter that will always update the when the TileList redraws
            * */
            public function set img(value:String) : void {
                //make sure there is something to work with. avoid error# 1010
                if(!value) {
                    return;
                }
                this.source = value;
                this.name = value.toString().split("/").pop().split(".").shift();
            }
        ]]>
    </mx:Script>
</mx:Image>

When TileList redraws the cell it will pass data into the img setter. This will make sure that the cell receives the correct information when it redraws. Also switching the dataProvider on the TileList works properly now. Here is a link to the working example that has available source code. Feel free to contact me if you have any questions.

Thursday, November 12, 2009

Flash / ActionScript 3: Event Bubbling Example

Previously I wrote an article that showed an example of Event Bubbling with Flex. I wanted to write a similar example for ActionScript 3. The principle is the same, but it works just a little different.

Any class involved in bubbling must extend DisplayObjectContainer. Sprite is the most basic DisplayObjectContainer class and most examples I see use it, so that's what I will use. I gave a brief overview of how event bubbling works in the Flex example that I won't repeat here.

I'm creating three classes that include each other. The primary class includes Level1. Level1 includes Level2. Level2 includes Level3. Level3 triggers an event when it's added to the stage. The event from Level3 will bubble through Level2 and Level1 to the primary class without re-dispatching it.

event_bubbling_as.as
package {
    import flash.display.Sprite;
    import flash.events.Event;
    
    import obj.Level1;
    import obj.Level3;

    public class event_bubbling_as extends Sprite
    {
        private var _level1:Level1
        
        public function event_bubbling_as()
        {
            _level1 = new Level1;
            _level1.addEventListener(Level3.EVENT, onEvent);
            
            addChild(_level1);
        }
        
        private function onEvent(event:Event) : void {
                trace('caught event from level 3');
        }
    }
}

Level1.as
package obj
{
    import flash.display.Sprite;
    
    public class Level1 extends Sprite
    {
        private var _level2:Level2;
        
        public function Level1()
        {
            trace("in level 1");
            _level2 = new Level2;
            
            addChild(_level2);
        }
    }
}
Level2.as
package obj
{
    import flash.display.Sprite;
    
    public class Level2 extends Sprite
    {
        private var _level3:Level3;
        
        public function Level2()
        {
            trace("in level 2");
            _level3 = new Level3;
            
            addChild(_level3);
        }
    }
}
Level3.as
package obj
{
    import flash.display.Sprite;
    import flash.events.Event;
    
    public class Level3 extends Sprite
    {
        public static const EVENT:String = "level3";
        public function Level3(){
            trace("in level 3");
            
            //trigger event when the object is added to the stage
            addEventListener(Event.ADDED_TO_STAGE, launchEvent);
        }
        
        public function launchEvent(event:Event) : void {
         var newEvent:Event = new Event(EVENT, true, true);
         dispatchEvent(newEvent);
        }
    }
}
You can download the Flex Project Archive example here. This can be directly imported into Flex. Run it in debug mode to see how each level is triggered.

Sunday, November 1, 2009

Flex: Event Bubbling Example

A refactor it gave me a chance to update the way I handled events. This page on Adobe's site explains the event bubbling model. To give a brief overview there are three phases: Capture, Targeting and Bubbling. The Capture phase will pass through each branch of a DisplayObject tree until it reaches the last node. The Targeting phase will look for objects that have event listeners bound to them. The Bubbling phase ascends the DisplayObject tree from the last node to the first node and activates the event listeners. Only DisplayObjects have a Capture and Bubbling phase.

Here is some example code I made in MXML that shows how event bubbling works. There are four files. The Application file includes Layer1. Layer1 includes Layer2. Layer2 includes Layer3. When Layer3 is created it will throw an event. The first property of the event is the string that will trigger event listeners, the second allows the event to bubble through the DisplayObject tree. The third allows the event to be canceled at any of the DisplayObjects it passes through.  The event will bubble through each DisplayObject and back to the Application without manually passing it forward.

UPDATE
If you're looking for an example of event bubbling in ActionScript please view this article.

index.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()" styleName="plain">
    <mx:Script>
        <![CDATA[
            import obj.Level3;
            import obj.Level1;
            
            private var _level1:Level1;
            
            private function init() : void {
                trace("in the base");
                _level1 = new Level1;
                
                //add eventListener
                _level1.addEventListener(Level3.EVENT,onEvent);
                
                addChild(_level1);
            }
            
            private function onEvent(event:Event) : void {
                trace("picked up event from Level3 ");
            }
        ]]>
    </mx:Script>
</mx:Application>


Layer1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" initialize="init()">
    <mx:Script>
        <![CDATA[
            private var _level2:Level2;
            private function init() : void {
                trace("in level 1");
                _level2 = new Level2;
                addChild(_level2);
            }
        ]]>
    </mx:Script>
</mx:Canvas>

Layer2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" initialize="init()">
    <mx:Script>
        <![CDATA[
            private var _level3:Level3;
            private function init() : void {
                trace("in level 2");
                _level3 = new Level3;
                addChild(_level3);
            }
        ]]>
    </mx:Script>
</mx:Canvas>

Layer3.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" initialize="init()">
    <mx:Script>
        <![CDATA[
            public static const EVENT:String = "level3";
            private function init(): void {
                trace("in level 3");
                var event:Event = new Event(EVENT,true,true);
                dispatchEvent(event);
            }
        ]]>
    </mx:Script>
</mx:Canvas>

You can download the Flex Project Archive example here. This can be directly imported into Flex. Run it in debug mode to see how each level is triggered.

Thursday, October 29, 2009

Flex: Problems reusing the HTTPService class

UPDATE: This problem occurred because of a bug in the 3.4 SDK. This bug does not exist in 3.2 or lower. I've opened a bug with adobe on the issue.

UPDATE 2: The issue has been resolved in a new nightly build of the SDK. It should be fixed when 3.6 is release.

I ran into an issue using the HTTPService object that involved removing event listeners that were added inside MXML.

Here is a snippet of code in the project. This will open an xml file and load some data into a List.

//this will fetch all our content.
private var _httpService:HTTPService = new HTTPService; 

private function init() : void {
    _httpService.url = "stub/data/albums.xml";
    _httpService.resultFormat = "e4x";
    
    //set up http call
    _httpService.addEventListener(ResultEvent.RESULT, populateList);
    _httpService.send();
}

private function populateList(event:ResultEvent) : void {
    //set the data provider
    albumsComboBox.dataProvider = event.result.album;
    
    //remove listener
    _httpService.removeEventListener(ResultEvent.RESULT, populateList);
}

This will open another xml file and populate the TileList with images.

private function loadAlbum(event:ListEvent) : void {
    _httpService.url = "stub/data/" + event.currentTarget.selectedItem.@images;
    _httpService.resultFormat = "e4x";
    
    //set up http call
    _httpService.addEventListener(ResultEvent.RESULT, populateTilelist);
    _httpService.send();
}

private function populateTilelist(event:ResultEvent) : void {
    //set the data provider
    imageGrid.dataProvider = event.result.photo;
    
    //remove listener
    _httpService.removeEventListener(ResultEvent.RESULT, populateTilelist);
}

When loadAlbum calls send() it will call populateList first and then goto populateTilelist. removeEventListener didn't work. I posted a question to StackOverflow with the problem and got some great answers.


To get around this problem I created a HTTPService wrapper that can be reused with no issues because it's an ActionScript Class. It's very light weight, doesn't include everything under the sun, but it gets the job done in a pinch. This is the 3rd revision of the class. It's been cleaned up and there are fewer methods now.

package util
{
    import mx.controls.Alert;
    import mx.rpc.AsyncResponder;
    import mx.rpc.AsyncToken;
    import mx.rpc.IResponder;
    import mx.rpc.events.FaultEvent;
    import mx.rpc.events.ResultEvent;
    import mx.rpc.http.HTTPService;
    
    public class HTTPServiceWrapper {
        //reference for connections
        private var _httpService:HTTPService;
        
        private var _alertTitle:String = "HTTPService: An error occured";
        
        // Holds all the tokens and callbacks
        private var _processingQueue : Object = {};
        
        /**
         * Create the HTTPService 
         * 
         */
        public function HTTPServiceWrapper() : void {
            //create the service
            _httpService = new HTTPService;
        }
        
        /**
         * Get content from URL 
         * @param url
         * @param resultFormat
         * @param callBack
         * @param request
         * @param returnErrorEvent
         * 
         */
        public function getContent(url:String,
                                    resultFormat:String,
                                    callBack:Function,
                                    request:Object = null, 
                                    returnErrorEvent:Boolean = false) : void {
            var asyncToken:AsyncToken;
            var internalIResponder:IResponder;
            
            //set the url and result format
            _httpService.url = url;
            _httpService.resultFormat = resultFormat;
            _httpService.request = null;
            
            //check for key/value pairs to be sent in the url
            if(request) {
                _httpService.request = request;
            }
            
            //send the request
            asyncToken = _httpService.send();
            internalIResponder = new AsyncResponder(onGetContentHandler,onFault, asyncToken);
            asyncToken.addResponder(internalIResponder);
            
            //give token unique ID
            asyncToken = tokenID(asyncToken);
            
            _processingQueue[asyncToken.ID] = new QueueObject(callBack,returnErrorEvent);
        }
        
        /**
         * This is the handler event for getContent. The callBack should accept a ResultEvent
         *  
         * @param event
         * @param token
         * 
         */
        private function onGetContentHandler(event:ResultEvent, token:AsyncToken) : void {
            var queueObject:QueueObject = _processingQueue[token.ID];
            
            queueObject.callBack(event);
        }
        
        
        /**
         * This is the fault event for the class. The callBack should accept a null ArrayCollection and a FaultEvent if
         * you want to handle the error.
         *  
         * @param event
         * @param token
         * 
         */
        private function onFault(event:FaultEvent, token:AsyncToken) : void {
            var queueObject:QueueObject = _processingQueue[token.ID];
            
            //handle the fault
            if(queueObject.returnErrorEvent){
                queueObject.callBack(null, event);
            }
            else {
                var displayMessage:String = event.fault.faultString;
                displayError(displayMessage);
                queueObject.callBack(null);
            }
        }
        
        
        /**
         * This will add a unique identifier to a token 
         * @param token
         * @return 
         * 
         */
        private function tokenID(token : AsyncToken) : AsyncToken {
            token.ID = Math.random();
            return token;
        }
        
        /**
         * Displays the error on a fault event in the content service 
         * @param event
         * 
         */
        private function displayError(displayMessage : String) : void {
            Alert.show(displayMessage, _alertTitle, Alert.OK);
        }
    }
}

class QueueObject{
    public var callBack:Function;
    public var returnErrorEvent:Boolean;
    
    public function QueueObject(callBack:Function, returnErrorEvent:Boolean){
        this.callBack = callBack;
        this.returnErrorEvent = returnErrorEvent;
    }
}


Using the class is really simple. Use getContent and pass it the file you want to load, the format it should be loaded in and the call back you want it to call after the file is retrieved. There are two extra properties I'm not using right now, but they will be helpful in the future. The fourth parameter accepts an Object of key/value pairs to be sent with the URL.The fifth parameter lets you capture the result of an error if one occurs. The call back should accept a FaultEvent object if you want to capture the error. If you let HTTPServiceWrapper handle the error an Alert window will pop up showing the error.
//http wrapper
private var _httpServiceWrapper:HTTPServiceWrapper = new HTTPServiceWrapper;

/**
* Runs when the application loads
* */
private function init() : void {
    //get the list of albums
    _httpServiceWrapper.getContent("stub/data/albums.xml", "e4x", populateList);
    
    //set event listeners for app
    albumsComboBox.addEventListener(ListEvent.CHANGE, loadAlbum);
}

/**
* This will populate the album list
* */
private function populateList(event:ResultEvent) : void {
 //if the result is null don't set it
 if(!event) {
  return;
 }
 
 //set the data provider
 albumsComboBox.dataProvider = event.result.album;
}

/**
* This will fetch the selected album
* */
private function loadAlbum(event:ListEvent) : void {
    _httpServiceWrapper.getContent("stub/data/" + event.currentTarget.selectedItem.@images, "e4x", populateTilelist);
}

This cut quite a bit of bloat out of my app and is also very reusable which saves time in the long run. The final version of this code is hosted here. You can view source on it by right-clicking in the app and selecting "View Source". Please let me know if you have any questions about it.