Tree Menu with ActionScript (AS3)

Last Updated on Sunday, 31 January 2010 23:36 Written by Nicholas Dunbar

An Example of How to Customize a Tree Component

I came across some open source code developed by Yahoo! called the Yahoo Atra components. VERY HARD TO CUSTOMIZE! I found the documentation to be particularly inadequate for the degree that I wanted to customize their components. But it is going to be much easier for you because I am am going to provide you with a template class to help you customize to your heart's content, or just simply use what I have provided because my version of the tree component meets all your needs. You may like the Astra Tree as it is but WARNING! The Astra Tree component's horizontal scroll bar does not work. This is particularly problematic if you are trying to do a resizable UI window where you cause the scroll bars to appear when the window is too small for the contents of the window. I spent days coding a custom calculateContentWidth function that would activate the horizontal scroll bar. This way, my code will always accommodate the contents of the tree window. To view a preview of the Tree scroll down:

If this is what you are looking for then proceed with the following directions:

go to http://developer.yahoo.com/flash/astra-flash/ . Here you will see more about the Tree component on which my component is based. It will provide you with ASDoc information for all the Astra Tree APIs which believe me will come in handy.

To get a hold of the components download the http://p.yimg.com/c/ycs/ydn/flash/pkg/astra-flash-1.4.zip file by clicking the large download button on the Astra page or by just clicking this link.

Unzip the entire .zip file

Install an MXP file using Adobe Extension Manager found under the build directory in the .zip file

Once this is done you can use the component panel and drag the tree component onto the stage or into the library of your FLA

If you dragged it on stage it is now in the library so you can delete it from the stage

Download my CustomTree.zip file and unzip the example files. You will find all the custom tree classes under the folder "classes\"

drag the classes into your project and make sure all class paths have been defined for it and you are using the correct packages. Also, remember the Astra classes rely on flashes 'fl' package. Some times the fl package from Adobe needs to be added as a class path for this to work (see this link about the fl package for more info on that)

For reference check out the CustomTreeExample.fla in the zip file to see how I have set up my file.

In your FLA or a class that has access to the stage you can use the following code whenever you want to call the tree up out of the Library:

import TreeCustom;

var mytree:TreeCustom = new TreeCustom();

mytree.setSize(500,200);
this.addChild(mytree);
mytree.init();

you will find Component Assets/TreeCellRenderSkins in my FLA's library. I have customized this component in a variety of ways by editing those assets. If they do not work for your purposes,
I encourage you to experiment with customizing them as you see fit. Remember this is just an example of how to customize the Yahoo! Astra Tree component to help get you started.

My implementation of the tree has a few functions that will demonstrate how to add a node to the tree and place more nodes under that node.

for the function call below addCustomItem we have the following parameters

//multi purpose add a node to the tree function
//param 1 - this is main text of the tree node
//param 2 - this is the class name of the symbol in the library to use as an icon _iconFunctionCustom in CustomTree is what determines the icon for the list element in the Tree if you use nothing it resumes to default operation
//param 3 - an array of lines that you might want to include under the item
//param 4 - text that right justifies its self to the end of the tree item it is a clickable link and will trigger the link in textFieldRight.htmlText = "<a href='test.html'>"+_data.data.endText+"</a>"; in TreeCellRenderCustom.as

mytree.addCustomItem( 
"This is example 1 of an item in the list",
"ThisIsASymbolInTheLibrary",
["this is sub node 1","this is sub node 2"],
"this is text on the end");
//this creates a closed parent node or branch node that
//encapsulates any subsequent nodes added under this node.
mytree.group("click to open group");
//this adds a leaf node or a node with leafs
mytree.addCustomItem(
"This is example 2 of an item in the list",
"",
["this is sub node 1","this is sub node 2"]);
//this close up the node "click to open group" and any subsequent
 //additions are added at the same level as the parent node "click to open group"
mytree.groupEnd();
mytree.addCustomItem(
"This is example 3 of an item in the list",
 "", 
["this is sub node 1","this is sub node 2"]); 
mytree.addLeaf("new item","");

Have fun, let me know if you have any questions by leaving a comment.

Set as favorite

Bookmark

Email This

Comments (11) add comment

Subscribe to this comment's feed

jagadheeswaran said:

	Hai thanks for your inf bout its not working in my system... and also i want to know how to edit text size and text color and text font.... can u help me?
	report abuse vote down vote up

December 09, 2009
Votes: +0

Nicholas said:

You will have to give me more specifics for me to help you to get it working on your system. I downloaded the files an retested it and it compiles fine for me as long as I have the class paths set correctly. You have to have your class paths set to the following:
1.) the location of the custom classes I provided in the .zip file
Example:
C : /Documents and Settings/Nick/Desktop/customTreeclasses
2.) the location of the Astra library
Example:
C : /Documents and Settings/Nick/Desktop/astra/Source

To customize text size, text color and text font you can find everything you need in the file TreeCellRendererCustom.as

Check out the function drawTextFormat and play around with the code in there.

report abuse

vote down

vote up

January 05, 2010 | url
Votes: +1

bhjodokast11111 said:

	couple questions: any idea where the word "done" is coming from? also I noticed that the first icon is dark gray, but the other icons look correct ( /- on the button). thanks for the write up!
	report abuse vote down vote up

January 14, 2010
Votes: +1

ss777 said:

Hi, thanks for the info. Do you know if it's possible to 'grey' out nodes/sections if they are 'off limits'?

For example, I have a flash course with slides. The slides are accessible from the tree menu and all are visible in it. If the user has not yet completed a slide, then the relevant node/slide is not clickable from the tree menu and returns a text warning. Is it possible to 'grey' out the unavailable nodes/slides?

Many thanks
S

report abuse

vote down

vote up

February 01, 2010
Votes: +0

cisco exam questions said:

	thanks Nicholas for sharing this Example of How to Customize a Tree Component.is there any solution for die component.
	report abuse vote down vote up

February 17, 2010 | url
Votes: +0

Enrique said:

Hi Nicholas!
You have done a great work! Thanks!
I'm trying to add a checkbox to each node of the tree, something like these components:
http://www.sephiroth.it/file_detail.php?pageNum_comments=30&id=151
http://www.darronschall.com/weblog/2006/09/a-flex-2-checked-tree-control-component.cfm
But they are written in Flex and I need to use the Tree inside Flash smilies/sad.gif

Can you help me to add a checkbox to Astra Tree?
Thanks!

report abuse

vote down

vote up

February 25, 2010
Votes: +0

Nicholas said:

To answer the question about adding a check box to each node.

You will need to look at handleClickEvent in TreeCellRenderCustom.as that I have provided. There is an example in there of how the click events are registered on the tree node. You will have to change and record the state of the check box in this function. As for adding the check box to each node you can check out my example of how to add an element to each node. This can be demonstrated by checking out all the places textFieldRight appears which was a text field I added to the right of each node as one of my own customizations.

To answer the question about what the done is.

I customized the TreeCustom.as to have the functions group() and groupEnd() any nodes added between these two function calls get put one level lower and when the tree returns to a previous level it finishes out the node with the word done. This is my customization and you can remove it from groupEnd() in TreeCustom.as and/or you can find it in the component's graphic assets in the FLA Library and remove the fram with done on it in the cell linked graphic.

To answer the question about what the grey icon is about

This is an example of a custom alternate icon for special nodes. You can see an example of this code in _iconFunctionCustom on TreeCuystom.as You will see the node has a type of "ThisIsASymbolInTheLibrary" which then returns the name of the symbol that is in the library which is the grey icon and it places it in the Tree node.

Thank you for your questions, its good to see people read my blog.

report abuse

vote down

vote up

February 27, 2010 | url
Votes: +0

Nicholas said:

To ss777, you can store each nodes state by adding custom data to the nodes that have changed. You can see examples of _data.data.type in TreeCellRendererCustom.as under funcitons like drawLayout. _data.data is the object to which you can attach custom data or just change the node type by manipulating _data.data.type. Since data is an Object you can pass a reference out with an event from handleClickEvent in TreeCellRendererCustom.as which is triggered when a node is clicked.

Hope this helps

report abuse

vote down

vote up

February 27, 2010 | url
Votes: +0

Enrique said:

Hi Nicholas!
I'm working in my TreeCheckBox customization.
But there are things in your code that I can't understand, maybe you can help me with this function:

public function init():void{
var parentDp:TreeDataProvider = this.dataProvider as TreeDataProvider;
var rn:RootNode;
rn = parentDp.rootNode as RootNode;
_placeHolderNode1 = new LeafNode(parentDp);
_placeHolderNode1.label = "-";
_placeHolderNode1.data = {type:"Empty"};
rn.addChildNodeAt(_placeHolderNode1, rn.children.length);
_placeHolderNode = new LeafNode(parentDp);
_placeHolderNode.label = "";
_placeHolderNode.data = {type:"Empty"};
rn.addChildNodeAt(_placeHolderNode,rn.children.length);
}

it's inside "TreeCustom.as"

report abuse

vote down

vote up

March 01, 2010
Votes: +0

Nicholas said:

	This code adds two nodes at the bottom of the tree as a spacer to make sure you can always scroll to the bottom of the list. I added the two nodes because sometimes the component cuts off the last node when you are scrolled all the way down to the bottom.
	report abuse vote down vote up

March 01, 2010 | url
Votes: +0

Mark P said:

	Hi I love your work here !!! However the loading technique below no longer appears to work on the modified classes: mytree.dataProvider = new TreeDataProvider(myxml); Have I missed something ? The example seems to work ok for the astra example
	report abuse vote down vote up

March 10, 2010
Votes: +0

Write comment