You use Flex Builder to add data provider controls such as a ComboBox or a DataGrid to your application. For example, a ComboBox control might be populated with a list of countries from a database or an XML file.

Data provider controls take input from a data provider, which is a collection of objects similar to an array. After adding a data provider control, you must define a data provider for the control.

1. In the MXML editor's Design mode, drag a data provider control from the Components view into your user interface.

   Data provider controls are listed in the Controls category of the Components view. They include the DataGrid, HorizontalList, List, TileList, Tree, and ComboBox controls. For more information, see Using Data-Driven Controls in the Adobe Flex 3 Developer Guide.

2. Switch to Source mode and insert a <mx:dataProvider> child tag in the control's tag.

   You can use Content Assist to quickly enter the tag. In the following example, you insert the <mx:dataProvider> tag in a Tree control tag:

   <mx:Tree id="myTree">
       <mx:dataProvider>
       </mx:dataProvider>
   </mx:Tree>
   
   

3. Specify the source of the data in the <mx:dataProvider> tag.

   You can specify the data directly in the tag with an Array of Objects, as in the following example:

   <mx:ComboBox> 
       <mx:dataProvider>
           <mx:Array>
               <mx:Object label="Red" data="#FF0000"/>
               <mx:Object label="Green" data="#00FF00"/>
               <mx:Object label="Blue" data="#0000FF"/>
           </mx:Array>
       </mx:dataProvider>
   </mx:ComboBox>
   
   

   The <mx:Object> tag in the example defines a label property that contains the string to display in the ComboBox, and a data property that contains the value that you want to submit for processing.

   You can define the data provider in an ActionScript variable, and then use the variable in the <mx:dataProvider> tag, as in the following example:

   <mx:Script>
       <![CDATA[
           var COLOR_ARRAY:Array = 
               [{label:"Red", data:"#FF0000"},
               {label:"Green", data:"#00FF00"},
               {label:"Blue", data:"#0000FF"}    ];
       ]]>
   </mx:Script>
   
   <mx:ComboBox>
       <mx:dataProvider>
           {COLOR_ARRAY}
       </mx:dataProvider> 
   </mx:ComboBox>
   
   

   In the previous example, you could also write the <mx:ComboBox> tag as follows:

   <mx:ComboBox dataProvider="{COLOR_ARRAY}"> 
   </mx:ComboBox>