Flash MX MP3 player, Pt.1
source: http://www.thegoldenmean.com
5 — Feeding data to the menu
Building a DataProvider — the concept
Two functions are required to convert the data contained in the xml file into the form the ListBox needs. This excellent technique is derived from examples demonstrated in Sam Wan and Branden Hall’s book “Object–Oriented Programing with ActionScript.” I’ve never seen it presented anywhere else, and I have found it invaluable for populating ListBox and ComboBox components with data contained in xml files. Spend some time getting to know this technique — it can be applied in many situations.
As mentioned earlier, each item in a ListBox list can be thought of as an associative array containing two elements: a data element and a label element. These data pairs can be added manually in the component’s Properites palette but we want to do it dynamically. All the necessary information is carried within attributes of the “song” child nodes of the xml document. We need to extract that data, build an array, populate a new instance of the DataProviderClass and finally set songList_lb’s DataProvider using the ListBox component’s setDataProvider() method.
The Callback
The first function, “songListLoaded()” (which will become the callback to the xml onLoad event handler on the page that follows this) extracts all the “song” nodes and treats those nodes as elements of an array, side–stepping the need to actually declare a new array. It then calls the createResourceList function (more on that in a moment) and finally calls the one of the component’s methods to set that object as the DataProvider:
The DataProvider
You may have noticed that the “createResourceList()” function calls
another function and passes it the resource_array as its one argument. The titles and file names are kept in attributes in the xml nodes. This function begins by creating a new instance of a class you might be unfamiliar with: the DataProviderClass. Then, using a loop, createResourceList walks the nodes, extracts the value of each attribute, creates anonymous objects each containing two name–value pairs and adds each to the new DataProvider.
/********************************
stuff extracted data into generic objects and return those objects
formatted to make sense to the listBox component.
********************************/
createResourceList = function(resource_array){
var listData = new DataProviderClass();
var resourceCount = resource_array.length;
var resource, display, url;
for (var i=0; i<resourceCount; i++){
resource = resource_array[i];
display = resource.attributes.display;
url = resource.attributes.url;
listData.addItem({label:display, data:url});
}
return listData;
}
Optionally, you can get the script to automatically append numbers to each track by modifying the “display” variable this way:
display = i+1+". "+resource.attributes.display;
Steve Bishop, who helped proof read this tutorial, suggested a variant you might be interested in pursuing. Steve substituted an instance of the ComboBox component for the ListBox to save some space. The ComboBox can accept a DataProvider just like the ListBox. If you feel adventuresome, drag a ComboBox from the Components palette instead of a ListBox and be sure to replace the “_lb” suffix with the “_cb” suffix everywhere this tutorial refers to the ListBox. It makes an already small module even more compact.
These two functions complete the code in the “functions” layer. That’s it for our custom functions! Now move on to Page Six which discusses additional ActionScript code in the “logic” layer.
--top--