Rendering XML using Tree component is very simple, because in Flash MX 2004, V2 Tree component is based on XML.
Lets explore the possible ways to visualize sample.xml in the coming examples.
Create a new document in Flash MX 04, drag and drop a tree component and name it as “tree”
Write the following code in the first frame
[cc lang=”actionscript3″]
import mx.controls.Tree;
var tree:Tree;
var sample_xml:XML = new XML();
sample_xml.ignoreWhite = true;
sample_xml.onLoad = function(done) {
if (done) {
tree.dataProvider = this;
}
};
sample_xml.load(‘sample.xml’);
This will result in something similar to the following image
What is wrong here? By default tree component looks for the label attribute to display the nodes. Since it is not present in the given xml it renders this junk text.
Lets fix this by placing a simple label function as shown below
import mx.controls.Tree;
var tree:Tree;
//icon function is added here
tree.labelFunction = function(node) {
return node.nodeType == 1 ? node.nodeName : node.nodeValue;
};
var sample_xml:XML = new XML();
sample_xml.ignoreWhite = true;
sample_xml.onLoad = function(done) {
if (done) {
tree.dataProvider = this;
}
};
sample_xml.load('sample.xml');
[/cc]
here is the resulting tree