Quick Tip: Using the Datagrid With XML
I'm going to demonstrate how to use the datagrid component with an xml file. When you need to display tabular data there is no quicker and easier way than to use a datagrid, and when paired up with an xml file it makes things all the better.
Step 1: Setting up the Flash Document
Create a new flash file (Actionscript 3.0). Set the document to 600x400px with a white background.
Save this file with the name xmlDatagrid.fla
Step 2: Add Components to the Document
Open the components window by going to Menu > Window > Components or pressing Ctrl+F7.
Drag a button, a combobox and a datagrid component to the stage.
Then delete the button, combobox and datagrid components off the stage; they are now in your library.

Here's a preview of the xml document structure we will be using:
1 |
|
2 |
<?xml version="1.0"?>
|
3 |
<books>
|
4 |
<book>
|
5 |
<title>Learning ActionScript 3.0: A Beginner's Guide</title> |
6 |
<instock>yes</instock> |
7 |
<price>26.39</price> |
8 |
</book>
|
9 |
<book>
|
10 |
<title>Essential ActionScript 3.0</title> |
11 |
<instock>yes</instock> |
12 |
<price>34.64</price> |
13 |
</book>
|
14 |
</books>
|
The Source download contains three XML files: flash.xml
, ajax.xml
, and php.xml
; each follow the same structure as the snippet above, but contain different books. You'll need to place them in the same folder as your FLA.
Step 3: Open a New ActionScript File
Open a new actionscript file and save it with the name XMLDataGrid.as
Now open the package declaration and import the classes we will be using:
1 |
|
2 |
package { |
3 |
import flash.display.MovieClip; |
4 |
import flash.net.URLLoader; |
5 |
import flash.net.URLRequest; |
6 |
import flash.events.MouseEvent; |
7 |
import flash.events.Event; |
8 |
import fl.controls.DataGrid; |
9 |
import fl.controls.ComboBox; |
10 |
import fl.controls.Button; |
Step 4: Extend the MovieClip Class and Declare Variables
The main document class must extend either the Sprite or MovieClip Class; here we extend the MovieClip Class. Declare the variables we will be using:
1 |
|
2 |
package { |
3 |
public class XMLDataGrid extends MovieClip { |
4 |
var dg:DataGrid; |
5 |
var cb:ComboBox; |
6 |
var urlLoader:URLLoader = new URLLoader(); |
7 |
var loadButton:Button; |
8 |
var bookXML:XML; |
Step 5: Set up the Constructor
Here we set up the constructor with three functions we will be using:
1 |
|
2 |
public function XMLDataGrid():void { |
3 |
setupGrid(); |
4 |
setupComboBox(); |
5 |
setupButton(); |
6 |
}
|
Step 6: Function Definitions
Here we define the functions we are using in the constructor:
1 |
|
2 |
private function setupGrid():void { |
3 |
dg=new DataGrid(); |
4 |
|
5 |
dg.addColumn("Title"); |
6 |
dg.addColumn("InStock"); |
7 |
dg.addColumn("Price"); |
8 |
//This sets the size of the datagrid
|
9 |
dg.setSize(600,100); |
10 |
//This is how many rows you want the datagrid to show
|
11 |
dg.rowCount=5; |
12 |
//When we add colums they are put into an array
|
13 |
//Here we set the first column "Title" width to 450
|
14 |
dg.columns[0].width=450; |
15 |
|
16 |
//This set the x and y position of the datagrid
|
17 |
dg.move(0,100); |
18 |
|
19 |
addChild(dg); |
20 |
}
|
21 |
|
22 |
private function setupComboBox():void { |
23 |
cb = new ComboBox(); |
24 |
//This adds item to the comboBox
|
25 |
cb.addItem({label: "Flash" }); |
26 |
cb.addItem({label: "Ajax" }); |
27 |
cb.addItem({label: "Php" }); |
28 |
//This sets the x and y positions
|
29 |
cb.move(200,50); |
30 |
|
31 |
addChild(cb); |
32 |
}
|
33 |
|
34 |
private function setupButton():void { |
35 |
loadButton = new Button(); |
36 |
loadButton.label = "Load Books"; |
37 |
loadButton.addEventListener(MouseEvent.CLICK, loadBooks); |
38 |
loadButton.x = 200; |
39 |
loadButton.y = 325; |
40 |
addChild(loadButton); |
41 |
}
|
The setupGrid()
function creates a DataGrid
component, which will display the data from the XML file we pass to it.
The setupComboBox()
function creates a ComboBox
, which is a drop-down list that we'll use to allow the user to pick an XML file to be passed to the data grid.
The button created in setupButton()
will be used to pass the XML file, which is selected in the combo box, to the data grid. We'll write that code next.
Step 7: Define the loadBooks Function
The loadBooks function is used in the eventListener of the loadButton.
1 |
|
2 |
private function loadBooks(e:Event):void { |
3 |
//Here the cb.selectedLabel returns a string so we call toLowerCase() on it
|
4 |
//and append .xml to it i.e. if 'Flash' is selected we load 'flash.xml'
|
5 |
urlLoader.load(new URLRequest(cb.selectedLabel.toLowerCase()+".xml")); |
6 |
urlLoader.addEventListener(Event.COMPLETE, populateGrid); |
7 |
}
|
Step 8: Define the populateGrid Function
The populateGrid function is used in the eventListener of the urlLoader in the loadBooks function.
1 |
|
2 |
private function populateGrid(e:Event):void { |
3 |
var booksXML:XML = new XML( e.target.data); |
4 |
//How many items are in the xml file
|
5 |
var booksLength:int = booksXML.book.length(); |
6 |
|
7 |
//This removes all the previously added data in the datagrid.
|
8 |
dg.removeAll(); |
9 |
//Here we loop through the <book> nodes in the xml file, and add each as a row to the datagrid
|
10 |
for (var i:int =0; i < booksLength; i++) { |
11 |
dg.addItem({Title: booksXML.book[i].title, InStock: booksXML.book[i].instock,Price: booksXML.book[i].price}); |
12 |
}
|
13 |
} //Close out the class |
14 |
} // This is closing the package out |
Step 9: Set the Document Class and Test
Set the document class to "XMLDataGrid" and test the movie!
Conclusion
Here we learned that displaying tabluar data in flash is made easy with the datagrid component and that pairing it up with xml makes a great solution.
This is my first tutorial, I hope you have learned something useful and thanks for reading!