Lets explore how we can hide nodes beyond the predefined depth 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
[cc lang=”actionscript3″]
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 = limitByDepth (this, 2); }};sample_xml.load ('http://www.shockwave-india.com/blog/example/sample.xml');//function limitByDepth (x, limit, depth) { if (depth == undefined) { depth = 0; } for (var i = 0; i < x.childNodes.length; i++) { if (depth < limit) { if (x.childNodes[i].nodeType == 1) { arguments.callee (x.childNodes[i], limit, depth + 1); } } else { if (x._node == undefined) { x._node = x.cloneNode(true); } x.childNodes[i].removeNode (); i--; } } return x;}
[/cc]
then write the following on the tree
[cc lang=”actionscript3″]
on (change) { var n = this.selectedNode._node; if (n == undefined) { n = ''; } _parent.textArea.text = n;}
[/cc]
Try changing the depth and see the result yourself.
here is the resulting swf 🙂
Try changing the depth and see the result yourself.
