Flash datagrid component tutorial

The educational technology and digital learning wiki
Revision as of 21:30, 29 October 2008 by Daniel K. Schneider (talk | contribs) (using an external editor)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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.

Moving on
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
Other tutorials
Official documentation
  • fl.data Reference manual for data associated (Adobe ActionScript 3.0 Language and Components Reference)