Making Treeviews look good

Just adding the finishing touches to our Flash based CMS named FlashPublish. One of the most important components is a treeview allowing you to drag and drop documents to reorganize your website quickly. I first used the Macromedia Treeview Component, but that really lacks a lot of the features I need. I then turned to my favorite component set from Ghostwire. It has a treeview that is really easy to use, but it doesn’t support drag and drop operations and it’s AS1 only. Finally I bought the dndTreeview for $29. Concidering that fairly low price and the possibilities it offers, it’s amazing.

As opposed to the Ghostwire components, the dndTreeview is just a class that extends the built in Treeview from Macromedia, adding all the stuff you’d need. The docs are a bit sketchy, but the email support is excellent. Just for future reference and for others to use. Here’s some tricks learned when working with it.

Being a coder, I have very limited drawing skills. FireWheel Design and their site IconBuffet can do wonders for the look of any application.

Adding Custom icons - Don’t use setIcon unless you need many different looking icons. Using styles are much easier and will set default styles for a full tree.

tree.setStyle('defaultLeafIcon', 'someIdentifier');

If you’re making something using special icons for each node, you may need this code:

private function setTreeIcons(x:XML,tree:Object) {
		for (var aNode:XMLNode = x.firstChild; aNode != null; aNode = aNode.nextSibling) {
			tree.setIcon(aNode,aNode.attributes.icon); // Sets the icon
			setIcons(aNode,tree); // Recurses into subnodes
		}
	}

This script will look for an “icon” attribute in the XML nodes and use this to attach linked symbols from your library as icons. Place this in your onLoad handler to start parsing:

setTreeIcons(this.firstChild,this.parent.imagetree);

Re-opening a treeview - Refreshing the datasource will collapse your treeview. I recently found a neat way to do this provided that the nodes have unique identifiers.

Instatiating the dndTreeview - The default way of instantiating a treeview is using createClassObject(dndTree,“my_tree”,this.getNextHighestDepth()); createClassObject is a method of mx.core.UIObject, so make sure your class extends this and not just the MovieClip class or you’ll get the error: “There is no method with the name ‘createClassObject’.” This is the clean way to do it since UIObject extends MovieClip.