All about ArrayCollection – Flex

ActionScript 3.0,Adobe Flex 1 September 2010 | 0 Comments

Today i was feeling very bored, then finally decided to get into one of the basics of Flex. Yes its ArrayCollection. Before we go into ArrayCollection, one must construe Array.Array

Array is a data structure consisting of a group of elements that are accessed via indexing. It can store simple data types such as number, boolean, string or even complex data type such as other objects or other Arrays.

[codesyntax lang="actionscript3"]

private var myArray:Array = new Array();
myArray[0] = "vinoth"; // string
myArray[1] = 2; // number
myArray[2] = new Object(); // object

[/codesyntax]

The above example shows how we define an Array in ActionScript. Now that we have declared an array, lets see how we can retrive the value.

[codesyntax lang="actionscript3"]

// retrieving the value of an array element
private var name:String = myArray[0];

[/codesyntax]

Arrays are dynamic and, therefore, can be resized simply by adding or removing elements.

[codesyntax lang="actionscript3"]

// adds an element to the end of an array and increases the array length by one
myArray.push("Vijay");

// removes the last element from an array and decreases the array length by one
myArray.pop();

[/codesyntax]

Arrays can also be built using MXML:

[codesyntax lang="php"]

<mx:Array id="myArray"/> <!--creates an array with zero elements-->

<mx:Array id="myArray"> <!--creates an array with three elements-->
   <mx:String>Vinoth</mx:String> <!--string-->
   <mx:Number>98</mx:Number> <!--floating-point number-->
   <mx:Object name="Vijay" age="25"/> <!--object-->
</mx:Array>

[/codesyntax]

Array is an object and as such it contains some usefel properties and methods. The length property represents the number of array elements.

[codesyntax lang="actionscript3"]

private var myArray:Array = new Array(10);
private var numberOfArrayElements:uint = myArray.length; // 10

[/codesyntax]

By utilizing the methods of the Array class, you can perform a number of operations on the Array elements or the Array itself. Popular Array methods include:

* filter
* indexOf
* join
* push
* reverse
* slice
* sort
* toString

Though Array has powerful features, but the inability to support data binding is a significant shortcoming. For this we have something called ArrayCollection.

Array Collection

Array Collection is a “wrapper class that exposes an Array as a collection that can be accessed and manipulated using the methods and properties of the ICollectionView or IList interfaces”.

To participate in data binding, an object must be able to:

1. It should dispatch event when something changes in the object.
2. It should allow other objects to listen and respond to events.

[codesyntax lang="actionscript3"]

// creates a bindable ArrayCollection with zero elements
[Bindable] private var myArrayCollection:ArrayCollection = new ArrayCollection();

[/codesyntax]

An ArrayCollection can be created in one of three ways:

[codesyntax lang="actionscript3"]

// creating ArrayCollection with zero elements
private var myArrayCollection:ArrayCollection = new ArrayCollection();
// passing an existing Array into an ArrayCollection via the constructor
private var myArrayCollection:ArrayCollection = new ArrayCollection(myArray);
// assigning an existing Array to the source property of an ArrayCollection
private var myArrayCollection:ArrayCollection = new ArrayCollection();
myArrayCollection.source = myArray;

[/codesyntax]

Extending the ListCollectionView class that implements the ICollectionView and IList interfaces, an ArrayCollection inherits a handful of properties, methods and events. Therefore, your plain old Array now has a new set of functionality.

New properties include (but not limited to):

* filterFunction
* length
* list
* sort
* source

New methods include (but not limited to):

* addEventListener
* addItem
* addItemAt
* contains
* getItemAt
* getItemIndex
* refresh
* removeAll
* removeItemAt
* setItemAt

Once an Array is wrapped inside an ArrayCollection, the properties and methods of the Array class are no longer accessible unless you access them through the Array object directly. For example, if you really want to use the Array’s push method, you could do the following:

[codesyntax lang="actionscript3"]
myArrayCollection.source.push("new element");

[/codesyntax]

Using an ArrayCollection in place of or in tandem with an existing Array provides Flex developers with a valuable and responsive data storage and retrieval mechanism.


				

Tagged in

Leave a Reply