Well, as it was the most productive part of my day today, I decided to go ahead and impart it to the web. I’m sure there are plenty of examples out there…but I might as well use it as a tutorial for those who might need it. Its not rocket-science, but for those who haven’t really used it before, its kind of foreign.
[*NOTE: for the code below, you may want to click the permalink link at the bottom of the article – I haven’t had time yet to set up my style sheets to have this look correct (i.e. some of the code is getting cut off on the right)…]
A co-worker had a friend who was looking to traverse hierarchical menu data and print it out in PHP and needed a quick thought-jump-start, so I gave him the following algorithm. The code I’ve included below is actually more in AS 2.0 format, but its just the syntax that differs from PHP.
The idea is that there is a heirarchical menu sort of like this:
Menu 1 Submenu 1 Subsubmenu 1 Subsubmenu 2 Submenu 2 Menu 2 Menu 3
…and this menu is currently bundled into an object array (for my example) that could have been parsed from XML. My example below gives each menu a “value,” which is the text of the menu, such as “File” and also gives each menu a menu of its own, called here by name as “children.”
An example of this menu in object syntax is as follows:
[
{value:"Menu1",children:
[
{value:"Submenu1",children:
[
{value:"Subsubmenu1",children:[]},
{value:"Subsubmenu2",children:[]}
]
},
{value:"Submenu2",children:[]}
]
},
{value:"Menu2",children:[]},
{value:"Menu3",children:[]}
]Basically, the challenge for most people is just making that leap to get their head around how to traverse any number of submenu levels, since in the structure above, any submenu item can have its own submenus. The key to doing this lies in using a recursive function call (if you are unfamiliar you can just look up “recursion” on Google or Wikipedia). What the recursion allows you to do is define a situation in which the function calls itself with a new set of data, which is perfect for our hierarchical menu object. Basically we want to print the menu values out, but if a menu has submenus, then we also want to print them out (and perhaps indent them). The AS 2.0 code for this is as follows:
// printMenus : recursive function for printing the menu
function printMenus (clist, prefixString) {
for (var n:Number=0;nlength;n++) {
print (prefixString + “•” + clist[n].value);
if (clist[n].children.length>0) {
printMenus( clist[n].children,(prefixString + ” “));
}
} // end for loop
}
// now print it
printMenus(myMenuList, “”);Please note that above I am using a hypothetical function called “print” to do the printing. In Flash, you could just use “trace” instead of “print” to see the results. Basically, the function is called, and the menu list (myMenuList here would be perhaps the object from above) and an initial indent of “” is passed in. As the menu is printed out, it checks to see if there are any menu children. If there are, the function calls itself again, this time with an augmented indention string. The function as it runs basically “drills down” the structure as far as it finds objects with children. I will say, however, that one needs to be careful how they use this in Flash, as I believe it still has a limit for the number of recursions that can be performed in a given period of time. Also, importantly, the variable “n” used as the index in the for loop must be scoped locally so that each time the function calls itself, a different local instance of a variable “n” gets used to do the loop. Hope this helps someone out there…