Flash datagrid component tutorial
This article or section is currently under construction
In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")
<pageby nominor="false" comments="false"/>
This is part of the flash tutorials
Introduction
- Learning goals
- Learn how to use the DataGrid component
- Flash level
- CS3 and ActionScript 3
- Prerequisites
To use the DataGrid component, you should know some ActionScript, e.g.
- Flash components overview
- ActionScript 3 interactive objects tutorial
- ActionScript 3 event handling tutorial
- Some XML (for some sections)
- Moving on
- See the Flash tutorials
- Level and target population
- Beginners
- Quality
- This should help you solve some problems
Data Grid level 0
Let's create a table to display information about Learning management systems, i.e. datagrid with 3 colums. Column 1 is called "Name", column 2 is "Licence", column 3 is "Description.
- Step 1 - Make a DataGrid instance
- Open the components library (e.g. hit CTRL-F7)
- Drag a DataGrid to the stage
- Give it an instance name, e.g. datagrid
You now will see an emty square on the stage without any visual appeal.
- Step 2 - Resize
In the properties panel, make it a big bigger, e.g. w:300 and H:300
- Step 3 - Fill in some data with ActionScript
If your instance name is datagrid then hit F9 in frame 1 (or whereever you want it to be) and copy/paste this code:
1 datagrid.addColumn("Name");
2 datagrid.addColumn("Licence");
3 datagrid.addColumn("Description");
4 datagrid.addItem({Name:"Moodle", Licence:"Free", Description:"Good for blended activity-oriented teaching"});
5 datagrid.addItem({Name:"ATutor", Licence:"Free", Description:"Good for content-oriented teaching"});
6 datagrid.addItem({Name:"Blackboard", Licence:"Commercial", Description:"Good content and exercice-oriented teaching"});
7 datagrid.width = 400;
8 datagrid.move(10, 10);
9 addChild(datagrid);
Alternative - Pure AS3 creation
Instead of opening the component library, then dragging the component to the stage and giving it an instance name, you could just enter this code in the frame 1 of the main timeline.
1 import fl.controls.DataGrid;
2 var datagrid:DataGrid = new DataGrid();
3 datagrid.addColumn("Name");
4 datagrid.addColumn("Licence");
5 datagrid.addItem({Name:"Moodle", Licence:"Free", Description:"Good for blended activity-oriented teaching"});
6 datagrid.addItem({Name:"ATutor", Licence:"Free", Description:"Good for content-oriented teaching"});
7 datagrid.addItem({Name:"Blackboard", Licence:"Commercial", Description:"Good content and exercice-oriented teaching"});
8 datagrid.width = 400;
9 datagrid.move(10, 10);
10 addChild(datagrid);
Links
- Adobe tutorials
- Creating, populating, and resizing the DataGrid component
- Customizing and sorting the DataGrid component
- Filtering and formatting data in the DataGrid component
- Other tutorials
- Using the DataGrid Component by Kirupa (July 2006).
- Official documentation
- Using the DataGrid Adobe Flash CS3 Documentation
- fl.controls.dataGridClasses Reference manual for the controls (Adobe ActionScript 3.0 Language and Components Reference)
- fl.data Reference manual for data associated (Adobe ActionScript 3.0 Language and Components Reference)