Specifying data providers in MXML applications -- Flex 2.01

The Flex framework lets you specify and access data providers in many ways. For example, as with any MXML control, you can define the data provider by using an <mx:dataProvider> property child tag of a control, or you can define the data provider in an ActionScript assignment. All access techniques belong to one of three major patterns:

Subtopics

Using a raw data object as a data provider

You can use a raw data object, such as an Array object, directly as a data provider any time the data is static. For example, you could use an array for a static list of U.S. Postal Office state designators. Do not use the data object directly as the dataProvider property of a control if the object contents can change dynamically, for example in response to user input or programmatic processing.

The result returned by an HTTPService or WebService often is an Array, and if you treat that data as read-only, you can use the Array directly as a data provider. (RemoteObject classes often return ArrayCollections.)

List-based controls, however, internally turn Array-based data providers into collections, so there is no performance advantage of using an Array as the data provider. If you pass an Array to multiple controls, it is more efficient to convert the Array into a collection when the data is received, and then pass the collection to the controls.

To use a raw data object, assign the object to the control's dataProvider control, or define the object directly in the body of the control MXML tag, as shown in the example in About data providers.

Using a collection object directly

You can use an object that implements the ICollectionView or IList interface as a data provider directly in an MXML control by assigning it to the component's dataProvider property. This technique is more direct than using an interface and is appropriate if the data provider always belongs to a specific collection class.

For list-based controls, you often use an ArrayCollection object as the data provider, and populate the ArrayCollection using an Array. The following example shows a data provider that specifies the data for a ComboBox control:

<?xml version="1.0"?>
<!-- dpcontrols\ArrayCollectionInComboBox.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:ComboBox id="myCB"> 
        <mx:ArrayCollection id="stateArray">
            <mx:Object label="AL" data="Montgomery"/>
            <mx:Object label="AK" data="Juneau"/>
            <mx:Object label="AR" data="Little Rock"/>
        </mx:ArrayCollection>
    </mx:ComboBox>
</mx:Application>

In this example, the dataProvider default property of the ComboBox defines an ArrayCollection object whose source default property is an array of Objects, each of which has a label and data field. (The ArrayCollection source property's takes an Array object, so there is no need to use an <mx:Array> tag in this example.)

The following example uses ActionScript to declare and create the ArrayCollection object:

<?xml version="1.0"?>
<!-- dpcontrols\ArrayCollectionInAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initData()">
    <mx:Script>
        <![CDATA[
            import mx.collections.*;
            [Bindable]
            public var stateArray:ArrayCollection;
            
            public function initData():void {
                stateArray=new ArrayCollection(
                [{label:"AL", data:"Montgomery"},
                {label:"AK", data:"Juneau"},
                {label:"AR", data:"Little Rock"}]);
            }
        ]]>
    </mx:Script>

    <mx:ComboBox id="myComboBox" dataProvider="{stateArray}"/>
</mx:Application>

After you define the ComboBox control, the dataProvider property of the ComboBox control provides access to the collection that represents the underlying data provider source object, and you can use the property to modify the data provider. If you add the following button to the preceding code, for example, you can click the button to add the label and data for Arizona to the end of the list in the ComboBox.

    <mx:Button label="Add AZ" 
click="myComboBox.dataProvider.addItem({'label':'AZ',
'data':'Phoenix'});"/>

It is generally a better practice, and highly recommended, to reference the collection directly, as in the following example:

<mx:Button label="Add AZ"
click="stateArray.addItem({'label':'AZ', 'data':'Phoenix'});"/>

Accessing the data provider using collection interfaces

If you know that a control's data provider can always be represented by a specific collection class, use the class directly, as shown in Using a collection object directly. If your code might be used with different underlying collection types, then you should use the ICollectionView Interface in your application code, as shown in the following meta-example:

public var myICV:ICollectionView = indeterminateCollection;
<mx:ComboBox id="cb1" dataProvider="{myICV}" initialize="sortICV()"/>