One of my clients recently needed a Tree component for their site navigation, which needed a transparent background (so you could see an image behind it), and had to run in FP7. I was most bummed about the FP7 part, as it meant i couldnt use flex 2, but had to go back to Flash Studio. Anyhow, digging through some archives on FlashCoders, I came across a working solution from Éric Thibault from June 2005. Tweaking that a bit, and combining it with some code I previously wrote to automatically open all nodes of a tree, I came up with this solution, which works quite nicely...
import mx.controls.Tree;
import mx.utils.Delegate;
class com.tappernimer.navigation.NavTree extends MovieClip{
private var navTree:Tree;
private var myTreeDP:XML
private var interval_config:Number;
private function NavTree(){
// create xml object
myTreeDP = new XML();
myTreeDP.ignoreWhite = true;
// load xml file
myTreeDP.load("nav.xml");
// let this.xmlDataLoad handle load results
myTreeDP.onLoad = Delegate.create(this,xmlDataLoad);
}
private function xmlDataLoad(success:Boolean):Void{
if(success){
navTree.dataProvider = myTreeDP.firstChild;
openTree(navTree);
} else {
trace("error loading data");
}
}
private function onLoad():Void{
// after visual components are instantiated, set event listeners and styles
setTheStyles();
navTree.addEventListener("change",this);
}
function setTheStyles():Void{
_global.styles.ScrollSelectList.setStyle("backgroundColor", 0x993333);
navTree.setStyle("fontFamily", "arial");
navTree.setStyle("fontSize", 12);
navTree.setStyle("fontWeight", "bold");
navTree.setStyle("color", 0xFFFFFF);
navTree.setStyle("textRollOverColor", 0xffff00);
navTree.setStyle("textSelectedColor",0xffffff);
navTree.setStyle("borderStyle", "none");
navTree.hScrollPolicy = "off";
navTree.vScrollPolicy = "off";
}
private function handleEvent(event:Object):Void{
// central switch for all events
switch(event.type){
case "change":
// any change events routed to handleTreeChange
handleTreeChange(event);
break;
}
}
private function handleTreeChange(event):Void{
// what to do when a tree row is clicked
var node:XML = event.target.selectedNode;
if(navTree.getIsBranch(node)){
// if the node is a branch, toggle the branch open/closed
navTree.setIsOpen(node, !navTree.getIsOpen(node),false,true);
// redraw transparent background after open/close
interval_config = setInterval(setTransparent, 100, this );
}
var url:String = node.attributes.url;
if(url != null){
// if the node has a url, navigate to that url
this.getURL(url);
}
}
function openTree(t:mx.controls.Tree) {
// toggle tree fully open
var i:Number=0;
var node:XML=t.getTreeNodeAt(i);
node.backGround._alpha = 50;
node.highlight._alpha = 50;
while (node != undefined){
if (t.getIsBranch(node) && ! t.getIsOpen(node)){
t.setIsOpen(node,true);
}
i++;
node=t.getNodeDisplayedAt(i);
}
interval_config = setInterval(setTransparent, 100, this );
}
function setTransparent(owner){
// facade to make transparent to keep scoping straight
clearInterval(owner.interval_config);
owner.makeTransparent();
}
function makeTransparent() {
// loop over all rows
for (var i:Number = 0; i < navTree.rows.length; ++i) {
//set the background and highlight alphas to 0
navTree.rows[i].backGround._alpha = 0;
navTree.rows[i].highlight._alpha = 0;
}
navTree._visible = true;
navTree.border_mc.backgroundColorName = "";
navTree.border_mc.drawBorder();
}
}
The trick is to call the makeTransparent method after each time the tree is rendered. I followed Eric Thibault's lead, and called it with a setInterval, but since there are UIComponents (ie, the tree) in use, i suspect it would have worked just as well with a doLater(). Each time i need to hack around in AS2, I remind myself how much more i like AS3.
links: digg this del.icio.us technorati reddit
