A Dynamic Tree Menu SystemBy 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.|
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.
An Alternative Solution
The final solution was completed using the following technologies:
- XML - stores data used to build the tree
Figure 1 below shows an example menu generated with this solution (you can also view a live demo):
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:
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
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:
document. This attribute
determines the type of icon used for the data element in the tree. The
contains the text that will be displayed for the data element. The
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.)