Enhancing the Dynamic Tree Menu System, Part 2By Sam M. Reynoso
In Part 1 we examined the changes tothe Dynamic Tree Menu System to allow for browser compatibility (in the 6.x browser versions, at least). In this part we'll look at some UI features that were added, as well as the added feature to allow for loading data from a database table (as opposed to just from an XML file).
One of the simplest enhancements added to the sample was what I call a "Hover Highlight". This handy feature changes the color of menu items as the mouse moves over them. Not only does this look cool, but it also helps users stay focused as they decide which item to click. Unfortunately, this feature does not work in non-IE browsers, but I'd love to hear if anyone finds a work-around.
To achieve the hover effect, simply add this single line to the "node" class in the Cascading Style Sheet definition:
Selected Menu Item
In the Windows Explorer you will notice that clicking a folder causes the folder's text to change to white and take on a bold background color. I liked this feature and decided to mimic it in the tree menu. The effect provides a visual clue that helps the user remember which item they last clicked. Unfortunately, like the Hover Highlights described above, this is also an IE-specific feature.
This feature is a little more complicated to implement than the Hover Highlights feature
Each hyperlink in the menu has an onClick event that calls the
When this event fires, it causes the following three things to happen:
- Removes selection indicator from the previously selected menu item
- Applies dark blue background and white text to the currently selected menu item
- Returns an object reference to the item that was clicked and stores it in
To make these things happen, the
while loop to traverse the structure of the menu's HTML code, storing a reference
to the current object and stopping when the first
<TD> tag is found. It
is this tag that we need to alter in order to achieve a selected effect.
while loop finds the
<TD> tag, it applies a new style
class to the tag:
selected style is defined in the Cascading Style Sheet.
fnDeselectItem() to return the style
of the previously selected menu item to normal. These two functions generally
work in the same way, except that they apply different styles.
Data Load from DB
Many developers wrote in requesting a way to load the tree dynamically with data pulled from a database instead of from an XML file. It turns out this is relatively simple, requiring the use of a few methods provided by the MSXML parser. To put an XML tree together manually instead of from an existing XML file, we start like we did before by creating an instance of the MSXML parser with the following line:
Once we have our XML document object, we create a root node using the
method like this:
Attributes are added to the new node with the
setAttribute() method. In our example,
we add three attributes to the root node:
The root node is now complete, but it is lacking child nodes. Child nodes are
created using the same technique we used for the root node. In this example,
we create a child node called
When the child node is complete, we attach it to its parent by calling the
appendChild() method like this:
If we were to print out the contents of the XML document object at this point, it would resemble the following:
Additional child nodes can be added by repeating this process. Once you are comfortable
with the use of these methods, it becomes easy to imagine how they could be used
in conjunction with ADO recordsets and a simple loop.
The following chunk of code shows how we can populate our new
States node with a list
of state names pulled from a database table:
Using code like this, the navigation tree can be rebuilt dynamically using data pulled from a database instead of a static XML file. This would enable the content of the tree to be changed based on user actions.
Now that we've examined how to load data into the tree menu system, you may be wanting to conditionally load the data. That is, you don't want to load the data for a node in the tree until the user clicks on it. In Part 3 we'll examine how to accomplish this.