5. Tree listeners

Now we need to create the callbacks for manage the tree behaviors, expecially for nodeOpen, nodeClose and change (using tree.addEventListener)

var treeListener:Object = new Object ();
treeListener.target = tree;
treeListener.opened = undefined;
treeListener.open_next = undefined;

/* a node in the tree has been selected */
treeListener.change = function (evt:Object) {
	var node = evt.target.selectedItem;
	var is_open = evt.target.getIsOpen (node);
	var is_branch = evt.target.getIsBranch (node);
	var node_to_close = node.getBrotherChilds (this.target);
	// close the opened node first
	if (this.target.getIsOpen (node_to_close) and this.target.getIsBranch (node_to_close)) {
		this.target.setIsOpen (node_to_close, false, true, true);
		this.open_next = node;
	} else {
		if (is_branch) {
			this.target.setIsOpen (node, true, true, true);
		} else {
			this.target.selectedNode = node;
			this.target.dispatchEvent ({type:"click", target:evt.target});
		}
		this.open_next = undefined;
	}
};

treeListener.closeNode = function (node:XMLNode) {
	for (var a in node.childNodes) {
		if (this.target.getIsOpen (node.childNodes[a])) {
			this.closeNode (node.childNodes[a]);
		}
	}
	this.target.setIsOpen (node, false, false);
};

treeListener.nodeClose = function (evt:Object) {
	this.closeNode (evt.node);
	if (this.open_next != undefined and evt.target.getIsBranch (this.open_next)) {
		evt.target.setIsOpen (this.open_next, true, true, true);
	} else {
		evt.target.selectedNode = this.open_next;
		this.target.dispatchEvent ({type:"click", target:evt.target});
		this.open_next = undefined;
	}
};
treeListener.nodeOpen = function (evt:Object) {
	evt.target.selectedNode = evt.node;
};


// set out listeners for the menu
tree.addEventListener ('change', treeListener);
tree.addEventListener ('nodeClose', treeListener);
tree.addEventListener ('nodeOpen', treeListener);


			

The treeListener object is used as receiver of the events sent by the tree component.
Pratically once you select an item in the tree component a "change" event will be sent to the treeListener object.
At this point this object check if there are nodes, at the same level of the selected node, already opened.
If it found that there is a node alreay opened it will register the current selected node in a variable ( open_next ) and tell to the tree component to close the opened node.
Once this node has been closed a "nodeClose" event will sent to the treeListener object from our tree component, which open the next node (the one you've selected previously).

As you can see in this code the treeListener calls node.getBrotherChilds (in order to get a list of brothers nodes of the selected one) which is not a XML node method. In fact I added this method as a prototype of the XMLNode class, in this way:

XMLNode.prototype.getBrotherChilds = function (cTree:mx.controls.Tree) {
	var parent = this.parentNode;
	for (var a = 0; a < parent.childNodes.length; a++) {
		if (parent.childNodes[a] != this and cTree.getIsOpen (parent.childNodes[a])) {
			return parent.childNodes[a];
		}
	}
	return undefined;
};

This method will return a list of nodes, at the same level of the selected node in the Tree component, which are opened. In this way our treeListener will know which node needs to close before it can open the next one

 

6. Download file source

Download files used in this tutorial