Collections provide simple properties and methods for indexed access to linear data. These properties and methods are defined in the IList interface, which provides a direct representation of the underlying data object. Any operation that changes the collection also changes the data provider in a similar manner: if you insert an item as the third item in the collection, it is also the third item in the underlying data object, which is an Array or an XMLList object when working with ArrayCollection objects and XMLListCollection objects, respectively.

Simple data access properties and methods let you do the following:

• Get, set, add, or remove an item at a specific index into the collection
• Add an item at the end of the collection
• Get the index of a specific item in the collection
• Remove all items in the collection
• Get the length of the collection

You can use this functionality directly on ArrayCollection and XMLListCollection objects and also on the dataProvider property of any standard Flex data provider component.

The following sample code uses an ArrayCollection object to display an Array of elements in a ComboBox control. For an example that shows how to manage an ArrayCollection of objects with multiple fields, see Example: Modifying data in a DataGrid control.

In the following example the Array data source initially consists of the following elements:

"AZ", "MA", "MZ", "MN", "MO", "MS"

When you click the Button control, the application uses the length property of the ArrayCollection and several of its methods to do the following:

1. Change the data in the Array and the displayed data in the ComboBox control to a correct alphabetical list of the U.S. state abbreviations for states that start with M:

   MA, ME, MI, MN, MO, MS, MT
   
   

2. Display in a TextArea control information about the tasks it performed and the resulting Array.

The code includes comments that describe the changes to the data object.

<?xml version="1.0"?>
<!-- dpcontrols\UseIList.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initData()">

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

            // The data provider is an Array of Strings
            public var myArray:Array = ["AZ", "MA", "MZ", "MN", "MO", "MS"];
            // Declare an ArrayCollection that represents the Array.
            [Bindable]
            public var myAC:ArrayCollection;

            //Initialize the ArrayCollection.
            public function initData():void {
                myAC = new ArrayCollection(myArray); 
            }

            // The function to change the collection, and therefore
            // the Array.
            public function changeCollection():void {
                // Get the original collection length. 
                var oldLength:int=myAC.length;

                // Remove the invalid first item, AZ.
                var removedItem:String=String(myAC.removeItemAt(0));
                // Add ME as the second item. (ILists used 0-based indexing.)
                myAC.addItemAt("ME", 1);
                // Add MT at the end of the Array and collection.
                myAC.addItem("MT");
                // Change the third item from MZ to MI.
                myAC.setItemAt("MI", 2);
                // Get the updated collection length. 
                var newLength:int=myAC.length;
                // Get the index of the item with the value ME.
                var addedItemIndex:int=myAC.getItemIndex("ME");
                // Get the fifth item in the collection.
                var index4Item:String=String(myAC.getItemAt(4));

                // Display the information in the TextArea control.
                ta1.text="Start Length: " + oldLength + ". New Length: " +
                    newLength;
                ta1.text+=".\nRemoved " + removedItem;
                ta1.text+=".\nAdded ME at index " + addedItemIndex;
                ta1.text+=".\nThe item at index 4 is " + index4Item + ".";
                // Show that the base Array has been changed.
                ta1.text+="\nThe base Array is: " + myArray.join();
            }
        ]]>
    </mx:Script>

    <mx:ComboBox id="myCB" rowCount="7" dataProvider="{myAC}"/>
    <mx:TextArea id="ta1" height="75" width="300"/> 
    <mx:Button label="rearrange list" click="changeCollection();"/>
</mx:Application>
The executing SWF file for the previous example is shown below: