Flash datagrid component tutorial: Difference between revisions
m (using an external editor) |
m (using an external editor) |
||
Line 27: | Line 27: | ||
== Data Grid level 0 == | == 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. ([http://help.adobe.com/en_US/AS3LCR/Flash_10.0/fl/controls/DataGrid.html DataGrid], retrieved 09:30, 30 October 2008 (UTC)). | |||
Let's create a table to display information about [[Learning management system]]s, i.e. datagrid with 3 colums. Column 1 is called "Name", column 2 is "Licence", column 3 is "Description. | Let's create a table to display information about [[Learning management system]]s, i.e. datagrid with 3 colums. Column 1 is called "Name", column 2 is "Licence", column 3 is "Description. | ||
Line 45: | Line 47: | ||
; Step 2 - Resize | ; Step 2 - Resize | ||
In the properties panel, make it a big bigger, e.g. w:300 and H: | In the properties panel, make it a big bigger, e.g. w:300 and H:200 | ||
; Step 3 - Fill in some data with ActionScript | ; 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 | 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. | ||
<source lang="actionscript" enclose="div"> | <source lang="actionscript" enclose="div"> | ||
// Define 3 columns (including the headers) | |||
datagrid.addColumn("Name"); | datagrid.addColumn("Name"); | ||
datagrid.addColumn("Licence"); | datagrid.addColumn("Licence"); | ||
datagrid.addColumn("Description"); | datagrid.addColumn("Description"); | ||
// Add four lines of data | |||
datagrid.addItem({Name:"Moodle", Licence:"GPL (free)", Description:"Good for blended activity-oriented teaching"}); | 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:"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:"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"}); | datagrid.addItem({Name:"MediaWiki", Licence:"GPL (free)", Description:"Good for writing-to-learn and technical mini-projects teaching"}); | ||
// Horizontal scrolling is on | |||
datagrid.horizontalScrollPolicy = ScrollPolicy.ON; | |||
</source> | </source> | ||
Line 75: | Line 83: | ||
datagrid_AS.addColumn("Name"); | datagrid_AS.addColumn("Name"); | ||
datagrid_AS.addColumn("Licence"); | datagrid_AS.addColumn("Licence"); | ||
datagrid_AS.addColumn("Description"); | |||
datagrid_AS.addItem({Name:"Moodle", Licence:"Free", Description:"Good for blended activity-oriented teaching"}); | 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:"ATutor", Licence:"Free", Description:"Good for content-oriented teaching"}); | ||
Line 81: | Line 90: | ||
// Fix the size | // Fix the size | ||
datagrid_AS.width = 300; | datagrid_AS.width = 300; | ||
datagrid_AS.height = 200; | |||
// Position it at x=400 and y = 50 | // Position it at x=400 and y = 50 | ||
datagrid_AS.move(400, 50); | datagrid_AS.move(400, 50); | ||
// Horizontal scrolling is on | |||
datagrid_AS.horizontalScrollPolicy = ScrollPolicy.ON; | |||
// Then add it to the stage | // Then add it to the stage | ||
Line 105: | Line 119: | ||
; Official documentation | ; Official documentation | ||
* [http://livedocs.adobe.com/flash/9.0/main/00000436.html Using the DataGrid] Adobe Flash CS3 Documentation | * [http://livedocs.adobe.com/flash/9.0/main/00000436.html Using the DataGrid] Adobe Flash CS3 Documentation | ||
* [http://help.adobe.com/en_US/AS3LCR/Flash_10.0/fl/controls/DataGrid.html DataGrid] (AS3 Language and components reference) | |||
* [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/dataGridClasses/package-detail.html fl.controls.dataGridClasses] Reference manual for the controls (Adobe ActionScript 3.0 Language and Components Reference) | * [http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/dataGridClasses/package-detail.html fl.controls.dataGridClasses] Reference manual for the controls (Adobe ActionScript 3.0 Language and Components Reference) | ||
Revision as of 11:30, 30 October 2008
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
{{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 09:30, 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.
Below we 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.
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.
// Define 3 columns (including the headers)
datagrid.addColumn("Name");
datagrid.addColumn("Licence");
datagrid.addColumn("Description");
// Add four lines of data
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"});
// Horizontal scrolling is on
datagrid.horizontalScrollPolicy = ScrollPolicy.ON;
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. Some explanations can be found in the //commented lines of the code.
// Import the necessary package
import fl.controls.DataGrid;
// 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");
datagrid_AS.addColumn("Description");
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"});
// Fix the size
datagrid_AS.width = 300;
datagrid_AS.height = 200;
// Position it at x=400 and y = 50
datagrid_AS.move(400, 50);
// Horizontal scrolling is on
datagrid_AS.horizontalScrollPolicy = ScrollPolicy.ON;
// Then add it to the stage
addChild(datagrid_AS);
Example code
- Directory:
- File
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
- DataGrid (AS3 Language and components reference)
- 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)