Part 3: Using DataGrid Component to create a Table of High Scores

  1. First, open up Adobe Flash CS3 and start a new file (Actionscript 3.0). Now, be sure to add the DataGrid component or else the program will crash later when you try to run it. To add the DataGrid component, you first have to press CTRL + F7 to bring up the components window as shown below.
    Component Window
  2. Now, drag the DataGrid icon into your library. You should see the that the component was successfully added into your library, as shown in the figure below. Components must be added to the library before they can be used in the flash applications. If you did not add these components, the flash program will fail to execute.
    Library with DataGrid Component Added
  3. Actionscript 3.0 Flash Code. Paste this into the Actions – Frame. If you don’t know how to deal with XML within Flash, it might be a good idea to read up on it. To learn about XML in Flash, click here. In the code shown below, we are making a request to the php script, which queries the MySQL database for the top 15 scores. This information is returned as an XML list and placed into the data table. The code may look archaic, but once you get the hang of dealing with XML within Flash, it should be quite simple. 
    import fl.controls.dataGridClasses.DataGridColumn;
import fl.controls.DataGrid;
import fl.data.DataProvider;
 
var myDataGrid:DataGrid = new DataGrid();
var variables:URLVariables = new URLVariables();
variables.playerTime = 5;
variables.roundNum = "finalTime";
 
var request:URLRequest = new URLRequest();
 
////insert in the location of the php script //////////
request.url = "insert URL of php script here";
///////////////////////////////////////////////////////
 
request.data = variables;
 
var loader:URLLoader = new URLLoader();
 
loader.load(request);
loader.addEventListener(Event.COMPLETE, createTable);
 
function createTable(event:Event):void {
 
	//typecast the data into XML
	var myXML:XML = XML(event.target.data);
 
	//put the xml data into a DataProvider variable
	var dp:DataProvider = new DataProvider(myXML);
 
	//initialize an empty array
	var columnArray = [];
 
	//initializes the columns of the data table
	for (var x:Number = 0; x < myXML.children()[0].children().length();x++){
		columnArray[x] = new DataGridColumn
		(String(myXML.children()[0].children()[x].name()));
	}
 
	//sets the width of each column
	columnArray[0].width = 150;  //name
	columnArray[1].width = 50;  //rank
	columnArray[2].width = 75;  //round 1 time
	columnArray[3].width = 75; //round 2 time
	columnArray[4].width = 75;  //round 3 time
	columnArray[5].width = 75;  //total time
 
	//adds the columns to the data grid
 
	for (x = 0; x < myXML.children()[0].children().length(); x++) {
 
		myDataGrid.addColumn( columnArray[x] );
 
	}
 
	//populates the datagrid with the xml data
	myDataGrid.dataProvider = dp;
	myDataGrid.width = 500;
	myDataGrid.rowCount = dp.length;
	myDataGrid.move(10, 10);
	myDataGrid.sortableColumns = false;
	addChild(myDataGrid);
 
}
  4. The following php code retrieves the top 15 scores, and outputs the result in XML format. Why XML? Using the XML method helps in a number of ways. XML format is very easy to use and makes things much easier in the long run. It helps to keep your data organized and makes it easy to integrate into a Flash environment. If you don’t know much about XML, it might be a good idea to read up on it! 
    <?php
header("Content-type: text/xml");
 
//////////  FILL IN THIS INFORMATION HERE! ////////////
 
  $host = ""; //insert the name of your host here.  usually its localhost
  $user = ""; //insert the name of the user here
  $pass = "";  //insert the password here
  $database = "";  //insert name of database wherein table was exported
  $table = "";  //insert the name of the table
 
////////////////////////////////////////////////////////
 
$round = $_GET['roundNum']; 
 
 
$linkID = mysql_connect($host,$user,$pass) or die("Could not connect to host.");
mysql_select_db($database, $linkID) or die("Could not find database.");
 
$query = "SELECT * FROM {$table} order by {$round} limit 15";
$resultID = mysql_query($query, $linkID) or die("Data not found.");
 
$xml_output = "<flashScores>\n";
 
for($x = 0 ; $x < mysql_num_rows($resultID) ; $x++){
	$y = $x +1;
    $row = mysql_fetch_assoc($resultID);
    $xml_output .= "\t<entry>\n";
    $xml_output .= "\t\t<Name>" . $row['name'] . "</Name>\n";
    $xml_output .= "\t\t<Rank>" . $y.  "</Rank>\n";
    $xml_output .= "\t\t<Round1>" . $row['roundOneTime'] . "</Round1>\n";
    $xml_output .= "\t\t<Round2>" . $row['roundTwoTime'] . "</Round2>\n";
    $xml_output .= "\t\t<Round3>" . $row['roundThreeTime'] . "</Round3>\n";
    $xml_output .= "\t\t<Total>" . $row['finalTime'] . "</Total>\n";
 
    $xml_output .= "\t</entry>\n";
}
 
$xml_output .= "</flashScores>";
echo $xml_output;
 
?>
  5. Now, go back to your Flash file, and execute the program. If you did everything correctly, you should see the data table! I recommend you take some time to go over the code because this is probably the most difficult part of this tutorial.

Pages: 1 2 3 4 5