XML and V2 Tree Example 1.

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

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');
</pre>
This will result in something similar to the following image
<a href="/wp-content/uploads/2011/01/tree_xml1_step1.gif"><img class="alignnone size-full wp-image-548" title="tree_xml1_step1" src="/wp-content/uploads/2011/01/tree_xml1_step1.gif" alt="" width="222" height="67" /></a>
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
<pre>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');

here is the resulting tree

Leave a Reply