Saturday, July 2, 2011

ArrayCollection in Flex: Part 1 - Declaration

Today we will start learning about a class called ArrayCollection and Arrays in Flex in general.

If you have read my XML in Flex tutorials, you are now familiar with the XMLListCollection class, which is basically an object that groups the XMLList objects and allows us to use data binding and with them, as long as use some other methods. An ArrayCollection is similar to that, because it allows data binding and the use of additional methods, but it isn't a collection of many arrays, but rather a wrapper for just one Array.

So, basically, an ArrayCollection is an Array with bonus options, which include databinding and several methods.

Before we dive into all the advantages we can get using ArrayCollection class, let's first see how we can define an ArrayCollection and an Array in Flex. You might be wondering - what is so difficult about that? Just create an Array/ArrayCollection variable and assign data to it. You are right, it is not difficult, but Flex gives us more than one ways of doing that.

For example, you could define an Array in the fx:Script tags, where you usually define variables:

private var myArray:Array = [ { firstname: "John", lastname: "Jackson" }, { firstname: "Bob", lastname: "Thompson" }, { firstname: "Andy", lastname: "Doyle" } ];

Alternatively, you could use MXML to create this Array. The same array would look like this:

<fx:Declarations>
<fx:Array id="myArray">
<fx:Object firstname="John" lastname="Jackson" />
<fx:Object firstname="Bob" lastname="Thompson" />
<fx:Object firstname="Andy" lastname="Doyle" />
</fx:Array>
</fx:Declarations>

Remember, that if you are defining variables using MXML, do that in the fx:Declarations tags.

Now, to turn that into an ArrayCollection object, in MXML you would just include the Array tags in ArrayCollection tags:

<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:Array>
<fx:Object firstname="John" lastname="Jackson" />
<fx:Object firstname="Bob" lastname="Thompson" />
<fx:Object firstname="Andy" lastname="Doyle" />
</fx:Array>
</mx:ArrayCollection>
</fx:Declarations>

Or get rid of the Array at all:

<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:Object firstname="John" lastname="Jackson" />
<fx:Object firstname="Bob" lastname="Thompson" />
<fx:Object firstname="Andy" lastname="Doyle" />
</mx:ArrayCollection>
</fx:Declarations>

To do that declaration using ActionScript, you can create a new ArrayCollection object (remember to import the class) and set its source property to the array.

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

public var myAC:ArrayCollection = new ArrayCollection();
public var myArray:Array = [ { firstname: "John", lastname: "Jackson" }, { firstname: "Bob", lastname: "Thompson" }, { firstname: "Andy", lastname: "Doyle" } ];

public function init():void{
myAC.source = myArray;
}
]]>
</fx:Script>

We can pass the array as the parameter when creating our array collection:

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

public var myArray:Array = [ { firstname: "John", lastname: "Jackson" }, { firstname: "Bob", lastname: "Thompson" }, { firstname: "Andy", lastname: "Doyle" } ];
public var myAC:ArrayCollection = new ArrayCollection(myArray);
]]>
</fx:Script>

The ArrayCollection also has some methods to add and remove items to the collection. We can add items using addItem() and addItemAt() methods.

This will add a new item to the end of the collection (similar to push()):

myAC.addItem( {firstname: "Harry", lastname: "Potter"} );

And this will add a new item and set its index to 2:

myAC.addItemAt( {firstname: "Harry", lastname: "Potter"}, 2 );

Removing is easy as well, use the removeItemAt() method and just specify the index of the element to remove:

myAC.removeItemAt(2);

This concludes today's tutorial.

Thanks for reading!

Related:

ArrayCollection in Flex: Part 2 - Sorting
ArrayCollection in Flex: Part 3 - Listening to updates
ArrayCollection in Flex: Part 4 - Filtering the elements
ArrayCollection in Flex: Part 5 - Searching using a Cursor

1 comment:

Anonymous said...

Hi,

I'm trying to use your code to do similar thing, but I'm having problems with the array selection on text. I should say that I'm brand new on flex.

My code:
















My problem starts here:


I want to push a text from array but something is missing.

Can you help please?

Thanks a lot

CarlaMurta

Post a Comment