Advertisement
  1. Code
  2. Coding Fundamentals
  3. XML

Quick Tip: Using the Datagrid With XML

Scroll to top
Read Time: 4 min

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 &lt; 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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.