The dataProvider Property

The `dataProvider` Property

So far, we have added data to components that can handle data either manually through their parameters, or by using the addItem method to add individual items. You can also use the dataProvider property.

The dataProvider property is used with some data-ready components such as the List and the ComboBox components. This property can be set to any array, and the component will fill with the array's data.

Here is an example of filling a ComboBox with an array using the dataProvider property:

Create a new Flash document.

Drag an instance of the ComboBox component onto the stage and give it an instance name of myCombo_cb.

Create a new layer called actions, and place the following code in the first frame:

 //create an array full of names var names:Array = new Array("David","Ben","Eddie","Todd","Doug","Paul"); //now set the dataProvider property to this array myCombo_cb.dataProvider = names;

The preceding code creates an array and fills it with names. Then we set the dataProvider property to the array.

Test the movie and you will see the ComboBox has filled with data. You can also add elements to either the array, or the ComboBox at runtime and it will show up in the ComboBox.

The array we just used is a simple array that just filled the label array property of the ComboBox. To really see what the dataProvider can do, you have to send it an array with objects that have specific properties. The two property names to use for objects are

label Elements with this name will go to the labels array.
data Elements in this array will be the value of the item.

Let's extend the previous example by adding not only names, but also ages into an array, and then setting that array to the dataProvider. We will also add an event listener to get the age from the ComboBox.

Go back into the actions layer and replace the code with this:

 //create the necessary arrays var names:Array = new Array("David","Ben","Eddie","Todd","Jeremy","John"); var ages:Array = new Array(25,25,27,30,26,23); //create an array to hold all the data var people:Array = new Array(); //now create a loop statement to combine these two arrays into one for(var i=0; i < names.length; i++){     //push the object with the label and data names into the main array     people.push({label: names[i], data: ages[i]}); } //now create the event listener for the  var listListen:Object = new Object(); //create the callback event for the listener listListen.change = function(){     trace("age - "+myCombo_cb.value); } //add the event listener to the ComboBox myCombo_cb.addEventListener("change", listListen); //now set the dataProvider property to this array myCombo_cb.dataProvider = people;

Here's what this code does: First, it creates two different arrays to hold the names and ages of people. Then it creates an array to hold all the data at once. After that, it creates a loop statement that will take one element at a time from both the names and the ages arrays and places them in as a single element, as an object, in the main array people. Then we create the listener for our ComboBox. After that, we create the callback function that, when triggered, will pull the selected element's value, in this case the age. Then we add the event listener to the ComboBox and set the dataProvider property to the people array.

Test the movie and you will see that not only was the data again successfully placed in the ComboBox, but also when you select an item from the ComboBox, it sends the age of the selected person to the Output panel, not the label.

There is another component that uses the dataProvider property, but in a slightly different way. The DataGrid component will take a dataProvider and create the necessary columns based on the elements provided.

Follow these steps to see how easy it is to fill the DataGrid with data:

1.	Create a new Flash document.
2.	Drag an instance of the `DataGrid` component onto the stage.
3.	Set its dimensions to about 350x150 and give it an instance name of `myDataGrid`.
4.	Create a new layer called `actions`, and place the following code in the first frame: [View full width] //create the necessary arrays var names:Array = new Array("David","Ben","Eddie","Todd","Jeremy","John"); var ages:Array = new Array(25,25,27,30,26,23); var locations:Array = new Array ("Prince George","Sussex","Richmond","Philadelphia" ,"Stafford","Springfield"); //create an array to hold all the data var people:Array = new Array(); //now create a loop statement to combine these two arrays into one for(var i=0; i < names.length; i++){ //push the object with the label and data names into the main array people.push({Name: names[i], Age: ages[i], Location: locations[i]}); } //now set the dataProvider property to this array myDataGrid.dataProvider = people;

Just like before, we created a few arrays and filled them with data. Then we used a loop statement to fill a main array with one element from each array at a time. Then we set the dataProvider property of the DataGrid to the main array people.

When you test the movie, you should see something like Figure 16.7. This time, the DataGrid used the property names of each person in the main array as column headers.

Figure 16.7. Use the `DataGrid` component to easily display large amounts of data at a time.

While on the subject of controlling data and values of components, the next section covers data binding.