Flash MX 2004 - Datagrid Component

This is a brief introduction to the 2004 Professional DataGrid component. If you've ever seen a spreadsheet, you'll understand what the DataGrid component is used for. It allows for data display in a column format and can be useful in many applications.

The information can be obtained in a variety of ways but for this tutorial we'll be filling a DataGrid with a small array of information using Actionscript. Once that's accomplished we'll need a way to know when a user has interacted with the component, and we'll do that with an Event Listener.

But first things first. We're going to start by adding a DataGrid component to our stage. If it's not already up, bring up the Components panel (Ctrl + F7) and double click the DataGrid component to add it to the work stage. In the Properties Inspector (Ctrl + F3) give the component an Instance name of UserGrid and make the width (W) 287.0 and the height (H) 99.0. Once that's done we'll move on to adding the information to the DataGrid.

We've got 3 people, Dave who's 27 from Florida, Chris who's 23 from California and Susan who's 24 from New York. We'll be using them to fill our DataGrid. This would come in especially handy for an employer that needed to keep track of his or her employees, but in a real world setting would require a little further development, such as interaction with a database. But for this tutorial we're going to keep it simple.

We'll now move on to the Actionscript. Insert a new layer either by going to Insert > Timeline > Layer or clicking the Insert Layer button at the bottom left corner of the Timeline. Select the first frame of this layer and bring up the Actions panel (F9). Copy and paste in the following:

Users = new Array(
    {Name:"Dave", Location:"Florida", Age:"27"},
    {Name:"Chris", Location:"California", Age:"23"},
    {Name:"Susan", Location:"New York", Age:"24"}
);
UserGrid.dataProvider = Users;

"Users" is our data provider which is the source that holds the information. The most common use for data providers is arrays which is what we're using. Name:, Location: and Age: define the column headings and their values fill the cells in each row. We're setting up 3 columns because we have 3 pieces of information to display for each person, those of course being their name, where they're from and their age. The last line asks what the data provider will be for our grid, UserGrid, which is the array Users that we set up. I hope I didn't lose too many people right there.

Test your movie, you should have something that looks like this:

Now that we have this information loaded into the DataGrid, we need a way to know when a user interacts with it. As I mentioned in the beginning of this tutorial we'll do that with an Event Listener. Events are broadcast by components and any object that is registered to the event broadcaster (component instance) as a listener can be notified of the event. A function is applied to the listener to handle the event and execute operations based on it. Our listener will be listening for the change event.

Go back to frame 1 of your Actions layer and apply this below the code you added above:

var userListener = new Object();
userListener.change = function(event) {
    trace(
        "Meet " + event.target.selectedItem.Name +
        " who is " + event.target.selectedItem.Age +
        " from " + event.target.selectedItem.Location
    );
};
UserGrid.addEventListener("change", userListener);

The majority of this code creates the listener and it's function and uses a simple trace action to display the information depending on the selected row. The trace action can be replaced with any Actionscript you want, I used it for explanation purposes only. The final line applies the listener to the grid component. When a row is selected, the trace action displays the Name, Age and Location for each person listed.

Now test your movie again and click one of the names. The output panel should display those results. I know I probably made it sound more difficult than it really is, but once you've done it, everything should make a little more sense. Note that the trace function only works in Flash, so you won't be able to see the results externally using the trace action.