DataGrid Component

DataGrid Component

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add Pre-Built DataGrid Component to Your Flash File

 

 

Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.

Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a DataGrid Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, CheckBox Component, ColorPicker Component, ComboBox Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component. To use a DataGrid with an external XML file, see topic, XML Files.

Tutorial Elements

DataGrid Component with instance name dataGrid01_mc

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Four

Double-click the DataGrid Component icon to a add a DataGrid to the center of the stage. The DataGrid and it's assets are also added to the Library.

Step Five

With the DataGrid selected open the Properties panel and change it's x and y settings to 50 and 50.

Step Six

With the DataGrid selected and Properties panel still open change it's width (w) to 230 and height(h) to 125.

Step Seven

With the DataGrid still selected, open the Component Inspector (Window > Component Inspector).

Step Eight

Click the number in the Value column next to the word headerHeight and change the value to 35, then press the Enter key.This increases the header size.

Step Nine

Click the number in the Value column next to the word rowHeight and change the value to 30, then press the Enter key.This increases the row height size.

Step Ten

With the DataGrid still selected, open the Properties panel and assign it an instance name of dataGrid01_mc..

Step Eleven

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Twelve

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.DataGrid;

var dataGrid02_mc:DataGrid=new DataGrid();

var fruit01:Object = { Fruit:"Apple", Type:"Cameo", Flavor:"Tangy" };

var fruit02:Object = { Fruit:"Apple", Type:"Fuji", Flavor:"Juicy" };

var fruit03:Object = { Fruit:"Apple", Type:"Gala", Flavor:"Slightly Tart" };

dataGrid02_mc.headerHeight=35;

dataGrid02_mc.rowHeight=30;

dataGrid02_mc.width=230;

dataGrid02_mc.height=125;

dataGrid02_mc.x=300;

dataGrid02_mc.y=50;

addChild(dataGrid02_mc);

dataGrid01_mc.columns=["Fruit", "Type", "Flavor"];

dataGrid01_mc.addItem(fruit01);

dataGrid01_mc.addItem(fruit02);

dataGrid01_mc.addItem(fruit03);

dataGrid02_mc.columns=["Fruit", "Type", "Flavor"];

dataGrid02_mc.addItem(fruit01);

dataGrid02_mc.addItem(fruit02);

dataGrid02_mc.addItem(fruit03);

Step Thirteen

Click the Auto Format button to format the code

Step Fourteen

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two GridData boxes appear on the stage. Click the header area of either box to sort the rows.

Dissecting the Code

The first line of the code at Step Twelve imports the code necessary to talk to the DataGrid class. Line two establishes a new DataGrid variable named dataGrid02_mc. This is the second DataGrid that we are adding to the stage with ActionScript.

The three variables named fruit01, fruit02 and fruit03 define the content in each of the rows.

The grid's headerHeight, rowHeight, height, width and location are set with the next few lines of code.

Line 12 adds the dataGrid02_mc to the stage.

Line 13 defines the heading for each column and the variable name for each data set.

Lines 14 to16 add the data to the grid.

The remaining lines perform the same tasks for the second grid.

More Component Options

In this example we showed how to change the DataGrid headerHeight and rowHeight. You can use this same method to change the other DataGrid values shown in the Component Inspector (i.e., allowMultipleSelection, editable, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, resizableColumns, showHeaders, sortableColumns, verticalLineScrollSize, verticalPageScrollSize and verticalScrollPolicy).

 

Lynda.com career skills