Week 7: Building an MP3 Player : "Wiring Up" the Player
Building a list from XML data
The code that constructs the list is:
var tempArray = new Array();
for(var i = 0; i < this.firstChild.childNodes.length; ++i){
tempArray[i] = new Object();
tempArray[i].label = this.firstChild.childNodes[i].firstChild.nodeValue;
tempArray[i].data = this.firstChild.childNodes[i].attributes.URL;
}
playlist_lb.dataProvider = tempArray;
Rather than go through it line-by-line, let's look at what it does instead. To do that keep in mind how the XML document is structured:
<Playlist>
<Song URL="Agent00.mp3">Agent 00</Song>
<Song URL="HardCope.mp3">Hard Cope</Song>
<Song URL="LoungeJam.mp3">Lounge Jam</Song>
<Song URL="Prosonica.mp3">Prosonica</Song>
</Playlist>
As you can see the data being loaded into the XML object contains both a song name and a the file name. Those two pieces of data are going to be loaded, at some point, into the List component named playlist_lb. They need to be separated which is the purpose of the .label and .data properties.
What we need to do is to take the loaded XML data, place it into indexed positions in an array and then use that array as the data provider for the List component. What we also have to keep in mind is that only the label - Lounge Jam- will appear in the List component while the data associated with it- LoungeJam.mp3- is only accessed when the label is clicked.
Where do the two properties - label and data - come from? They are requirements of the List Component as shown below. Note the labels and data properties are actually lists because they contain the square brackets used by arrays.
Image 5: A List component has "data" and "labels" as two of its properties. You can either enter them manually or use Actionscript for the task.
The first line of the code creates the Array object. The next line fills the object with the data from the loaded XML file.
You are probably looking at that second line:
for(var i = 0; i < this.firstChild.childNodes.length; ++i)
... and wondering, "Huh?". The line is a loop which is set to iterate until it runs out of data.
In plain english, the initial value of "i" is less than the number of nodes in the XML document - this.firstChild.childNodes.length. The term "this" refers to the XML document and firstChild refers to to the root node <Playlist></Playlist> of the file. childNodes is an array composed of any childNodes in the root Node-<SongURL> is a childNode of <Playlist>. If you count the number of childNodes you will see there are four of them meaning that line of code runs, or iterates, four times because the value will increment by 1, which is the purpose of ++i.
++ is a symbolic operator for increment. In the case of this code the initial value to increment is set to 0.
With each iteration of that line of code, an object is created in the current index position of the array named tempArray. That object is then assigned the label and data values pulled out of the XML object.
Let's assume the the loop is about to start it's third pass through the XML data at the point where the LoungJam.mp3 file is about to be added to the list.
First off it is given an index value of 2 because index values start with a value of 0. This means the next three lines of code would read:
tempArray[2] = new Object();
tempArray[2].label = this.firstChild.childNodes[2].firstChild.nodeValue;
tempArray[2].data = this.firstChild.childNodes[2].attributes.URL;
Thus the object is created in index position 2 of the tempArray. The label is given the value of "Lounge Jam" and the data's value will be "Loungejam.mp3". The following illustration shows how the label value is obtained:
Image 6: The label value is the song name in the node added to index position 2 in the array.
The final line of code:
playlist_lb.dataProvider = tempArray;
sets the array -tempArray- as the dataProvider for the List component named playlist_lb.Thus the values in the array are added to the data and the label parameters of the List component.
If you test the movie at this point- Control-Enter(PC) or Command-Return (Mac) - you will see the List component fill up with the song names
Next... Wiring up the buttons.
This work is licensed under a Creative Commons License.
