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:


<?xml version="1.0"?>
<books>
	<book>
		<title>Learning ActionScript 3.0: A Beginner's Guide</title>
		<instock>yes</instock>
		<price>26.39</price>
	</book>
	<book>
		<title>Essential ActionScript 3.0</title>
		<instock>yes</instock>
		<price>34.64</price>
	</book>
</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:


package {
	import flash.display.MovieClip;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import fl.controls.DataGrid;
	import fl.controls.ComboBox;
	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:


package {
	public class XMLDataGrid extends MovieClip {
		var dg:DataGrid;
		var cb:ComboBox;
		var urlLoader:URLLoader = new URLLoader();
		var loadButton:Button;
		var bookXML:XML;

Step 5: Set up the Constructor

Here we set up the constructor with three functions we will be using:


public function XMLDataGrid():void {
		setupGrid();
		setupComboBox();
		setupButton();
}

Step 6: Function Definitions

Here we define the functions we are using in the constructor:


private function setupGrid():void {
	dg=new DataGrid();

	dg.addColumn("Title");
	dg.addColumn("InStock");
	dg.addColumn("Price");
	//This sets the size of the datagrid
	dg.setSize(600,100);
	//This is how many rows you want the datagrid to show
	dg.rowCount=5;
	//When we add colums they are put into an array
	//Here we set the first column "Title" width to 450
	dg.columns[0].width=450;
	
	//This set the x and y position of the datagrid
	dg.move(0,100);

	addChild(dg);
}

private function setupComboBox():void {
	cb = new ComboBox();
	//This adds item to the comboBox
	cb.addItem({label: "Flash" });
	cb.addItem({label: "Ajax" });
	cb.addItem({label: "Php" });
	//This sets the x and y positions
	cb.move(200,50);

	addChild(cb);
}

private function setupButton():void {
	loadButton = new Button();
	loadButton.label = "Load Books";
	loadButton.addEventListener(MouseEvent.CLICK, loadBooks);
	loadButton.x = 200;
	loadButton.y = 325;
	addChild(loadButton);
}

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.


private function loadBooks(e:Event):void {
	//Here the cb.selectedLabel returns a string so we call toLowerCase() on it
	//and append .xml to it i.e. if 'Flash' is selected we load 'flash.xml'
	urlLoader.load(new URLRequest(cb.selectedLabel.toLowerCase()+".xml"));
	urlLoader.addEventListener(Event.COMPLETE, populateGrid);
}

Step 8: Define the populateGrid Function

The populateGrid function is used in the eventListener of the urlLoader in the loadBooks function.


	private function populateGrid(e:Event):void {
		var booksXML:XML = new XML( e.target.data);
		//How many items are in the xml file
		var booksLength:int = booksXML.book.length();
		
		//This removes all the previously added data in the datagrid.
		dg.removeAll();
		//Here we loop through the <book> nodes in the xml file, and add each as a row to the datagrid
		for (var i:int =0; i &lt; booksLength; i++) {
			dg.addItem({Title: booksXML.book[i].title, InStock: booksXML.book[i].instock,Price: booksXML.book[i].price});
		}
	} //Close out the class
} // 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!