Setting up dynamic images and event handlers for each in Flash Builder

Question

How can I add a set of dynamic images and then add event handlers to each that trigger a different event?

My scenario is that I have a remote service that grabs a set of data (ArrayCollection) that has a className, classID and classDescription. I would like the images to have event handlers that trigger a new panel display that would show the "classDescription" for the particular class that is clicked. My problem is figuring out how to retrieve the proper set of data and adding the images properly to the panel.

Answer 1

From your Array Collection create a value object, a class or an interface making sure the properties names are identical and create the relevant accessors for it

public class DataObject
{
  protected var _classDescription:String;

  public function get classDescription():String
  {
     return _classDescription;
  }

  public function set classDescription(value:String):void
  {
     _classDescription = value;
  }
}

When you retrieve your object form your ArrayCollection, you can loop thru the object's properties to assign them to your value object

   var dataObj:DataObject = new DataObject();

   for each ( var prop:String in collectionObject )
       if( dataObj.hasOwnProperty(prop) )
           dataObj[prop] = collectionObject[prop] ;

This object should extend Sprite so that you can add your image as a child and dispatch a mouse event. In the images container, the value object would add a MouseEvent listener and the listening function could be something like this:

private function mouseClickHandler(event:MouseEvent ):void
{
    var target:YourValueObject = event.currentTarget as YourValueObject;
    trace ( target.classDescription );
}