Scoreboard

**I. Introduction**
Training is going well! Dr. Horrible now has more evil henchmen than he can handle. He needs you to make a scoreboard ranking the evilness of each henchman so that he can deploy the henchman most the appropriate amount of evil for each assignment.

media type="custom" key="7696629" align="center"

**II. Learning Objectives**
//**Knowledge**// //**Skills.** By the end of the lesson you will be able to...//
 * Loading XML Files
 * Accessing XML objects
 * Read in a XML file
 * Parse a XML object

**III. Concepts**
There are many ways to load files in Flash depending on where the file is located, when you want to load it, and the nature of your application. One common case is that you have a file bundled with your application that you want access to right away. For example, lets suppose you have a file that contains some data you want to display. In this case the file is an XML file that contains a list of students each with their own score, which we'll name //scores.xml:// code format="xml"         code In this case, we are writing a Flex program and want the program to load the file immediately. As of Flex 4, it's now very easy to load an XML file compiled into the program. Let's say that you've put the scores.xml file in a directory called //assets,// and you want to load the XML in your Application, which you've named Scoreboard.mxml and placed in the //src// directory//.// You can load the scores.xml file in the declarations tags of Scoreboard.mxml: code format="mxml"  
 * Loading XML Files**

  

</s:Application>

code The source property of the <fx:XML> tag specifies a relative path from Scoreboard.mxml to scores.xml. The "../assets/scores.xml" means go up one directory from src (where the Scoreboard.mxml file is located) then down into the assets directory, then grab the scores.xml file. The scores.xml file is then read in, converted to XML then saved in the _scores variable. Easy.

Now that you've got the XML, what do you do with it?

When you have an XML object in Flash, you can access it's elements using a special notation that makes each xml element seem kindof like an object with its own methods. For example, lets say you want to iterate over each item in your scores.xml file: code format="mxml" <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  xmlns:s="library://ns.adobe.com/flex/spark" >
 * XML**

 <fx:XML id="_scores" source="../assets/scores.xml" /> </fx:Declarations>

<fx:Script> <![CDATA[

private function parseScores:void{ var scoresList:XMLList = _scores.score; for each(var scoreXml:XML in scoresList){ var name:String = scoreXml.@name; var value:Number = Number(scoreXml.@value); }           }

]]>   </fx:Script>

</s:Application>

code Your _scores variable is set equal to the xml in scores.xml whose top element is which holds a number of elements. When you say _scores.score, you get back an XMLList where each item is an xml element, specifically a list of elements. You can use a for each statement to iterate over the elements of an XMLList just like you iterate over elements of an array. To get the properties of of the element, you use a ".@". For example, if you have a variable called scoreXML set equal to the XML, you can access the //name// property of the by writing code like: scoreXml.@name. Whenever you access a property of an XML object you will get back a String, so if the string represents something else like a number, you need to convert it to that other type. For example Number(scoreXml.@value) will convert the //value// property (a String), to a Number.

You can learn much more about using XML in the [|Flex Deveoper's Guide on XML].

Array comes with a few sorting functions that can be used to reorder the items of the array. You can use //sort// if the objects in the array are numbers or strings. You can use //sortOn// if the objects in the array have a property that returns a number or string. You can use sort with a custom function for comparing two objects if neither of the other methods is sufficient. Read the Flash Language reference on [|Array.sort] and [|Array.sortOn] to see how to use these functions.
 * Sorting arrays**

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**IV. Scenario**
**Scoreboard**

**Use case** 1. Display the scores sorted in order

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**V. Program**
Here is the application file Scoreboard.mxml: code format="mxml" <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init" width="216" height="147">

 <fx:XML id="_scores" source="../assets/scores.xml" /> </fx:Declarations>

<fx:Script> <![CDATA[ import edu.nu.sesp.Score;

private function init:void{ var scores:Array = parseScores(_scores); scores.sortOn("value", Array.NUMERIC | Array.DESCENDING); displayScores(scores); }

private function parseScores(scoresXml:XML):Array{ var scores:Array = new Array; for each(var scoreXml:XML in scoresXml.score){ var name:String = scoreXml.@name; var value:Number = Number(scoreXml.@value); scores.push(new Score(name, value)); }               return scores; }

private function displayScores(scores:Array):void{ for each(var score:Score in scores){ _scoreboard.text = _scoreboard.text + score.name + " had a score of " + score.value + "\n"; }           }

]]>   </fx:Script> <s:TextArea x="10" y="10" width="196" height="129" editable="false" id="_scoreboard"/> </s:Application> code And here is the Score.as class, which sits in the directory src/edu/nu/sesp: code format="actionscript3" package edu.nu.sesp {   public class Score {       private var _value:Number; private var _name:String;

public function Score(name:String, value:Number) {           _name = name; _value = value; }

public function get name:String{ return _name; }

public function get value:Number{ return _value; } } } code

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**VI. Self-explain (Try it!)**
Go over each line in the program and explain out loud to yourself what it does. If you don't know what the line does, write down a question to ask.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**VII. Program Walkthrough (Try it!)**
To write the program above, do the following:
 * Create a new Flex project
 * Create the scores.xml file and place it in a directory called assets
 * Create the interface
 * Load in the xml and check that it is loaded properly
 * Write a Score class that holds a name and a score value
 * Parse the scores.xml xml and use it to create an array of Score objects
 * Write a function that iterates through the array of Score objects and displays them in the interface
 * Add a line of code to sort the array of Score objects before they are displayed.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**VIII. On your own (Try it!)**
Dr. Horrible is nothing if not thorough -- he does not choose henchmen based on their quantitative evil score alone but on a variety of detailed factors. Dr. Horrible needs you to construct a drill-down interface that allows him to access the individual characteristics of each henchman. media type="custom" key="7961340" align="center"

You'll need the file that contains all the information about each henchman.

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;"> IX. Check yourself
Be sure that you can answer the following questions:
 * How do you load a local xml file? Where should the xml file be placed?
 * How do you access the child elements of an xml element? How do you access the properties of the xml element?

<span style="font-size: 1.3em; margin: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 5px;">**XI. References**
This program is a flex version of a program in ** Berry & Griffiths' [|Head First Programming]. **