Published: Wednesday, July 25, 2001
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):
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!
