Flash CS3 Documentation

ActionScript 2.0 Components Language Reference > DataSet component > Using the DataSet component > Creating an application with the DataSet component

Creating an application with the DataSet component

Typically, you use the DataSet component with other user interface components, and often with a connector component such as XMLConnector or WebServiceConnector. The items in the data set are populated by means of the connector component or raw ActionScript data, and then bound to user interface controls (such as List or DataGrid components).

The DataSet component uses functionality in the data binding classes. If you intend to work with the DataSet component in ActionScript only, without using the Binding and Schema tabs in the Component inspector to set properties, you'll need to import the data binding classes into your FLA file and set required properties in your code. See Making data binding classes available at runtime.

To create an application using the DataSet component:

1. Select File > New and choose Flash File (ActionScript 2.0).
2. In the Components panel, drag a DataSet component from the Components panel to the Stage. In the Property inspector, give it the instance name user_ds.
3. Drag a DataGrid component to the Stage and give it the instance name user_dg.
4. Resize the DataGrid component to be approximately 300 pixels wide and 100 pixels tall.
5. Drag a Button component to the Stage and give it the instance name next_button.
6. In the Timeline, select the first frame on Layer 1 and open the Actions panel.
7. Add the following code to the Actions panel:

   var recData_array:Array = [{id:0, firstName:"Mick", lastName:"Jones"},
                 {id:1, firstName:"Joe", lastName:"Strummer"},
                 {id:2, firstName:"Paul", lastName:"Simonon"}];
   user_ds.items = recData_array;
   

   This populates the DataSet object's items property with an array of objects, each of which has three properties: id, firstName, and lastName.

8. Add the three properties and their required data types to the DataSet schema:
   1. Select the DataSet component on the Stage, open the Component inspector, and click the Schema tab.
   2. Click Add Component Property, and add three new properties, with field names id, firstName, and lastName, and data types Number, String, and String, respectively.

   Or, if you prefer to add the properties and their required data types in code, you can add the following line of code to the Actions panel instead of following steps a and b above:

   // Add required schema types.
   var i:mx.data.types.Str;
   var j:mx.data.types.Num;
   

9. To bind the contents of the DataSet component to the contents of the DataGrid component, open the Component inspector and click the Bindings tab.
10. Select the DataGrid component (user_dg) on the Stage, and click the Add Binding (+) button in the Component inspector.
11. In the Add Binding dialog box, select "dataProvider : Array" and click OK.
12. Double-click the Bound To field in the Component inspector.
13. In the Bound To dialog box that appears, select "DataSet <user_ds>" from the Component Path column and then select "dataProvider : Array" from the Schema Location column.
14. To bind the selected index of the DataSet component to the selected index of the DataGrid component, select the DataGrid component on the Stage and click the Add Binding (+) button again in the Component inspector.
15. In the dialog box that appears, select "selectedIndex : Number". Click OK.
16. Double-click the Bound To field in the Component inspector to open the Bound To dialog box.
17. In the Component Path field, select "DataSet <user_ds>" from the Component Path column and then select "selectedIndex : Number" from the Schema Location column.
18. Enter the following code in the Actions panel:

    next_button.addEventListener("click", nextBtnClick);
    function nextBtnClick(evt_obj:Object):Void {
        user_ds.next();
    }
    

    This code uses the DataSet.next() method to navigate to the next item in the DataSet object's collection of items. Since you had previously bound the selectedIndex property of the DataGrid object to the same property of the DataSet object, changing the current item in the DataSet object changes the current (selected) item in the DataGrid object as well.

19. Save the file, and select Control > Test Movie to test the SWF file.

    The DataGrid object is populated with the specified items. Notice how clicking the button changes the selected item in the DataGrid object.

Flash CS3