Flash datagrid component tutorial

The educational technology and digital learning wiki
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

{{quotation|The DataGrid class is a list-based component that provides a grid of rows and columns. You can specify an optional header row at the top of the component that shows all the property names. Each row consists of one or more columns, each of which represents a property that belongs to the specified data object. The DataGrid component is used to view data; it is not intended to be used as a layout tool like an HTML table. (DataGrid, retrieved 10:12, 30 October 2008 (UTC)).

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.

You may have a look at the data-grid-0 example now.

Below we will show three solutions:

  • Doing as much as we can with Flash CS3
  • Doing it with CS3 but using only ActionScript
  • Doing it with AS3 only, i.e. the Flex way (not done yet)

Adding code for a DataGrid instance

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:200

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. The result is a three column table with headers. 

datagrid.addColumn("Name");
datagrid.addColumn("Licence");
datagrid.addColumn("Description");
datagrid.addItem({Name:"Moodle", Licence:"GPL (free)", Description:"Good for blended activity-oriented teaching"});
datagrid.addItem({Name:"ATutor", Licence:"Free", Description:"Good for content-oriented teaching"});
datagrid.addItem({Name:"Blackboard", Licence:"Commercial", Description:"Good for content and exercice-oriented teaching"});
datagrid.addItem({Name:"MediaWiki", Licence:"GPL (free)", Description:"Good for writing-to-learn and technical mini-projects teaching"});

The result is not absolutely convincing, since you can't read the contents of column three. It shows the minimum AS code you need to know in order to fill in DataGrid tables. Below we show a slightly improved version.

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 the code below in frame 1 of the main timeline.

Firstly we have to import some standard packages that we will need. 

 // Import the necessary packages
 import fl.controls.DataGrid;
 import fl.controls.ScrollPolicy

 // Now create a a new instance of DataGrid and name it "datagrid_AS"
 var datagrid_AS:DataGrid = new DataGrid();

We also taylor the size of column three and make the whole widget horizontally scollable. To do so we have to save the column we want to change into a variable. This way we can change its properties: 

 // this is to make col. 3 a bit bigger
 var col3 = datagrid_AS.addColumn("Description");
 col3.minWidth = 350;

Then we have to set the size 

 // Fix the size
 datagrid_AS.width = 400;
 // Set the height to the number of rows + 1 (fo
 datagrid_AS.rowCount = datagrid_AS.length + 1;

Finally we position this instance and put it on the stage for real. 

 // Position it at x=400 and y = 50
 datagrid_AS.move(300, 70);
 // Then add it to the stage
 addChild(datagrid_AS);

Here is the complete code (that also can be found in the *.fla source file below): 

// Import the necessary packages
import fl.controls.DataGrid;
import fl.controls.ScrollPolicy

// Now create a a new instance of DataGrid and name it "datagrid_AS"
var datagrid_AS:DataGrid = new DataGrid();

datagrid_AS.addColumn("Name");
datagrid_AS.addColumn("Licence");
// this is to make col. 3 a bit bigger
var col3 = datagrid_AS.addColumn("Description");
col3.minWidth = 350;
datagrid_AS.addItem({Name:"Moodle", Licence:"Free", Description:"Good for blended activity-oriented teaching"});
datagrid_AS.addItem({Name:"ATutor", Licence:"Free", Description:"Good for content-oriented teaching"});
datagrid_AS.addItem({Name:"Blackboard", Licence:"Commercial", Description:"Good for content and exercice-oriented teaching"});
datagrid_AS.addItem({Name:"MediaWiki", Licence:"GPL (free)", Description:"Good for writing-to-learn and technical mini-projects teaching"});

// Fix the size
datagrid_AS.width = 400;
// Set the height to the number of rows + 1 (for the header)
datagrid_AS.rowCount = datagrid_AS.length + 1;

// Position it at x=400 and y = 50
datagrid_AS.move(300, 70);

// Horizontal scrolling is on
datagrid_AS.horizontalScrollPolicy = ScrollPolicy.ON ;

// Then add it to the stage
addChild(datagrid_AS);

Example code

Links

Adobe tutorials
Other tutorials
Official documentation
  • fl.data Reference manual for data associated (Adobe ActionScript 3.0 Language and Components Reference)
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Flash_datagrid_component_tutorial&oldid=19241"