Creating a strongly typed ArrayCollection

Russ — Fri, 24 Jul 2009 08:04:16 +0000

The scenario

The ArrayCollection class’ addItem(), addItemAt(), getItem() and getItemAt() methods accept/return a generic Object which is great because we can use if for storing pretty much anything. But there is no way to ensure that the ArrayCollection only contains a specific class of Object, or to return an Object cast as a specific class.

Typically you just get your Object out of the ArrayCollection, cast it as the class you know it belongs to, and then carry on. But when you’re doing this over and over again it makes sense to override the get and add methods to work with specific Object classes.

Example data

To start with we need some data and for this example we have a number of ‘products’ to work with. So for this we have a simple Product Value Object with name and price properties:

package valueobjects
{
  public class Product
  {
    public var name:String;
    public var price:Number;

    /**
    * Constructor function sets up this Product object
     */
    public function Product(name:String, price:Number):void
    {
      this.name = name;
      this.price = price;
    }

  }

}

The strongly-typed ArrayCollection (ProductArrayCollection.as)

Next we need our new ArrayCollection class – which I’ve called ProductArrayCollection for this example – that extends the base ArrayCollection class:

package extensions
{
  import mx.collections.ArrayCollection;
  import valueobjects.Product; 

  public final class ProductArrayCollection extends ArrayCollection
  {

    /**
     * Private property used to prevent direct use of addItem and addItemAt methods
     */
    private var _itemOk:Boolean = false;

    /**
     * Constructor function simply calls the constructor function of the ArrayCollection super class
     */
    public function ProductArrayCollection(source:Array=null)
    {
      super(source);
    }

The only thing to note here is a private Boolean variable called _itemOk, which is defaulted to false. We’ll use this to protect our ArrayCollection from rogue addItem() and addItemAt() method calls, as we’ll see next, starting with overrides of the addItem() and addItemAt() methods…

These overrides both check to see if the _itemOK property is set to true. If it’s true then we call the super class’ addItem() (or addItemAt()) method which adds the supplied Object to the ArrayCollection. If it’s false, we throw an error. Doing this prevents us from calling the addItem() and addItemAt() methods directly as we can’t set the _itemOK value to false from outside the ProductArrayCollection class, we need to do that with an internal method.

    /**
     * Overrides the ArrayCollection's addItem() method
     * Adds an item only if the _itemOK property has been set by the addProduct() method
     * Resets the _itemOK property if the add is successful, or throws an error
     */
    override public function addItem(item:Object):void
    {
      if (this._itemOk)
      {
        super.addItem(item);
        this._itemOk = false;
      }
      else
      {
        throw new Error("Use addProduct() to add a Product to the ProductArrayCollection");
      }
    }

    /**
     * Overrides the ArrayCollection's addItemAt() method
     * Adds an item at the specified index only if the _itemOK property has been set by the addProductAt() method
     * Resets the _itemOk property if the add is successful, or throws an error
     */
    override public function addItemAt(item:Object, index:int):void
    {
      if (this._itemOk)
      {
        super.addItemAt(item, index);
        this._itemOk = false;
      }
      else
      {
        throw new Error("Use addProductAt() to add a Product to a specific location in the ProductArrayCollection");
      }
    }

To enable us to do that then, we need two new methods: addProduct() and addProductAt(). These simply set the value of _itemOK to true before calling the addItem() and addItemAt() methods:

    /**
     * Sets the _itemOK property and calls the addItem() method
     */
    public function addProduct(product:Product):void
    {
      this._itemOk = true;
      this.addItem(product);
    }

    /**
     * Sets the _itemOK property and calls the addItemAt() method
     */
    public function addProductAt(product:Product, index:int):void
    {
      this._itemOk = true;
      this.addItemAt(product, index);
    }

So now we can only add Product Objects to our ProductArrayCollection, the last thing we need to do is add a getProductAt() method that will return a Product rather than a generic Object:

    /**
     * Uses the ArrayCollection's getItemAt() method and returns the result as a Product
     */
    public function getProductAt(index:int, prefetch:int=0):Product
    {
      return this.getItemAt(index) as Product;
    }

  }
}

And that’s it – we now have a strongly-typed ArrayCollection that we can use for Products and can be extended for any other Object class.

The ProductArrayCollection in action

The example below is a simple one. Clicking on the each button calls the method on the button’s label. The addItem() and addItemAt() methods should should do nothing while the addProduct() and addProductAt() methods update the list. The core methods fail silently as this example is in release mode and the errors don’t display. However you can download and run the source code to generate these errors for yourself.

Clicking on the getProductAt(0) button should display name of the name of the item at position 0 in the list. An explanation of the source code is below and you can download and edit the source code, or right-click on the demo below and choose View Source to see how it all fits together.

Example

You need Flash Player 10 to view this content. You can download this for free from the Adobe website. If you’re using a feed reader you could try loading this post in your web browser.

The application (main.mxml)

In our application we begin with some basic layout properties, a call to a creationCompleteHandler() method, and a Script block with a private variable containing an instance of the ProductArrayCollection class:




  
    
Next we have our creationCompleteHandler() function that is called when the application is created. In this example, it simply adds event listeners to each of the buttons in the example. Each event listnener triggers the clickHandler() method and it’s this method that calls each of the ProductArrayCollection methods we’re concerned with: addItem(), addProduct(), addItemAt(), addProductAt(), and getProductAt().
The line that calls getProductAt() also grabs the returned Product and updates the view with the name of that Product. As the getProductAt() method returns a Product instead of a generic Object class, we don’t need to cast it as a Product and can therefore reference the properties of it directly.
      /**
       * Adds event listeners to each of the buttons in the example
       */
      private function creationCompleteHandler(event:FlexEvent):void
      {
        this.btnAddItemJeans.addEventListener(MouseEvent.CLICK, clickHandler);
        this.btnAddProductJeans.addEventListener(MouseEvent.CLICK, clickHandler);
        this.btnAddItemAtTeeShirt.addEventListener(MouseEvent.CLICK, clickHandler);
        this.btnAddProductAtTeeShirt.addEventListener(MouseEvent.CLICK, clickHandler);
        this.btnGetProductAt.addEventListener(MouseEvent.CLICK, clickHandler);
      }			

      /**
       * Creates two example products and handles click events on
       * each of the buttons in the example
       */
      private function clickHandler(event:MouseEvent):void
      {

        var jeans:Product = new Product("Jeans", 19.99);
        var teeShirt:Product = new Product("Tee Shirt", 54.99);

        switch (event.target.id)
        {
          case "btnAddItemJeans":
            this._products.addItem(jeans);
            break;
          case "btnAddProductJeans":
            this._products.addProduct(jeans);
            break;
          case "btnAddItemAtTeeShirt":
            this._products.addItemAt(teeShirt, 0);
            break;
          case "btnAddProductAtTeeShirt":
            this._products.addProductAt(teeShirt, 0);
            break;
          case "btnGetProductAt":
            this.txtLog.text = "Product at 0 = " + this._products.getProductAt(0).name;
            break;
        }
      }
The final part of our Script block is a simple label function that the list uses to display the properties of each Product in the list:
      /**
        * Returns a string containing the Product name and price
        */
      private function labelFunction(item:Object):String
      {
        var text:String = "";
        if (item is Product)
        {
          var product:Product = item as Product;
          text = product.name + ", £" + product.price;
        }
        return text;
      }

    ]]>
  
Our MXML view components are simple: A Vbox with some text and each of the buttons that will test our class, and a list to display the Products in our _products ProductArrayCollection variable.

Russ Back » ArrayCollection