To read the article online, visit http://www.4GuysFromRolla.com/webtech/072501-1.shtml

A Dynamic Tree Menu System

By Sam Reynoso


An Improved Version of the Dynamic Tree Menu System
Sam Reynoso has released an improved version of his Dynamic Tree Menu System. This improved version can be found at: Enhancing the Dynamic Tree Menu System. You are, however, strongly encouraged to read this first article in its entirety before attempting to "upgrade" to Sam's latest version.

Introduction
Navigation systems are one of the most important aspects of any application. When properly developed, a navigation system enables users to quickly find the information they are searching for. One of the most effective of these has been the tree-based model seen in applications like Windows Explorer, the Microsoft Management Console, and the Registry Editor. The information is displayed in a hierarchical order with the broadest topic displayed at the top and related items stored underneath. Users like this type of navigation because the organized layout of the menu helps them reach their information with a minimum number of mouse clicks.

Web-based applications brought with them the same requirement for a user-friendly and intuitive way of navigating through an application. Early navigation systems were nothing more than a series of HTML hyperlinks connecting all the pages on a site. Even with the addition of nice graphics, some applications had more links than they could neatly present on the page. To solve this problem, developers began to mimic the tree navigation structures seen in traditional windows applications.

The easiest solution to code was a hard-coded HTML page that displayed the different states of the tree - open, closed, etc. However, this required repeated calls to the server to retrieve the appropriate HTML page. Furthermore, this solution became a maintenance nightmare as more nodes were added to the tree.

Java applets were also developed to address this issue. While they were easy to add to the page, and easy to maintain, they still had the extra overhead of having to be downloaded into the user's browser.

To get around the applet problem, some developers turned to pure javascript as their solution. Two of the more popular javascript tree menus are freely-available ( Joust by Ivan Peters and Tree Menu by Morton Wang).

While javascript provides a method of displaying a quick-loading dynamic navigation system, the code can be difficult to maintain and enhance. Debugging can be particularly difficult since the developer cannot view the source code generated by javascript.

An Alternative Solution
I was working on a web application that required that the user be able to easily navigate a site with potentially hundreds of links. The tree navigation system met this requirement perfectly. We needed a tree menu that would expand and collapse very fast without repeated trips to the server. The page also needed to download fast, so that excluded java applets. We finally settled on a 100% javascript solution and proceeded to integrate it into our application. The code we chose worked but it was extremely difficult to fix the subtle javascript bugs we found, and it was almost impossible to add new features. After reviewing the other popular javascript solutions available, I became convinced that an easy to maintain dynamic navigation menu system could be developed with only a handful of javascript and ASP functions.

The final solution was completed using the following technologies:

  • XML - stores data used to build the tree
  • ASP - dynamically generates HTML and javascript code
  • Javascript - controls the expanding/collapsing of menu items

Figure 1 below shows an example menu generated with this solution (you can also view a live demo):

An expanded tree menu.

XML for Data Storage
The Dynamic Tree Menu System I created builds a tree using data stored in a properly structured XML file. Using an XML file to store the content of the menu gives developers the ability to easily update the tree menu by modifying the XML text file.

The XML file is first loaded into an instance of the Microsoft XML Parser object (MSXML 3.0 SP1). The XML parser is available as a free download from Microsoft. If there are any errors in the XML file, the user is notified with a detail message. A simple menu could be displayed in XML like this:

<country type="root" value="United States of America"
            url="content.asp?page=usa">
   <states type="folder" value="States" url="content.asp?page=states">
      <state type="document" url="content.asp?page=ca"
                value="California"/>
   </states>
   <hist_fig type="document" value="Historical Figures"
                url="content.asp?page=histfig"/>
</country>

XML resembles HTML in its use of tags and attributes. However, XML does not limit the developer to a set of pre-defined tags and attributes. Instead the developer is free to define their own to serve their unique needs.

Unlike the HTML parsers in most browsers, XML parsers are very strict. For example, all tags must be terminated properly and attribute values must be enclosed in quotes. For tags like the <country> tag in the example above, you should make sure to close it with an ending </country> tag. Tags without content should be terminated with a /> as seen in the <hist_fig /> tag above.

In the XML file used by my Dynamic Tree Menu System, each XML tag contains the attributes type, value, and url. Developers can add more attributes as necessary, but the current example requires only these attributes. The Type attribute can contain one of these values: root, folder, or document. This attribute determines the type of icon used for the data element in the tree. The Value attribute contains the text that will be displayed for the data element. The URL attribute contains a link to follow when that data element is clicked.

Once the XML file is successfully loaded into the parser, ASP code can manipulate the XML DOM (Document Object Model) to generate the HTML needed to display the elements of the navigation tree. (For more information on XML, be sure to check out the XML Article Index.)

In Part 2 we'll continue our examination of this tree-based navigation system by looking at the needed ASP, HTML, and client-side JavaScript.

  • Read Part 2!


  • Article Information
    Article Title: A Dynamic Tree Menu System
    Article Author: Sam Reynoso
    Published Date: Wednesday, July 25, 2001
    Article URL: http://www.4GuysFromRolla.com/webtech/072501-1.shtml


    Copyright 2017 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers