XML and V2 Tree Example 4 – Hiding Text Nodes.

Lets explore how we can hide text nodes from rendering in tree. Before hiding the text nodes, the tree looks like this (as per Example 1) with this XML

Start with a blank FLA, add a tree component to stage, name it “tree”, add a text area component name it “textArea”
Write the following in the first frame

<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 = hideTextNodes (this);
        }
};
sample_xml.load ('/downloads/sample.xml');
//
function hideTextNodes (x) {
        for (var i = 0; i &lt; x.childNodes.length; i++) {
                if (x.childNodes[i].nodeType == 1) {
                        arguments.callee (x.childNodes[i]);
                } else {
                        //text node found, hide it as property text
                        x.text == undefined ? x.text = x.childNodes[i].nodeValue : x.text += x.childNodes[i].nodeValue;
                        x.childNodes[i].removeNode ();
                        i--;
                }
        }
        return x;
}
</pre>

then write the following on the Tree
<pre>on (change) {
        var t = this.selectedNode.text;
        if (t == undefined) {
                t = '';
        }
        _parent.textArea.text = t;
}
</pre>

here is the resulting swf 🙂

Leave a Reply