Create Tree Menus with XML

You may have seen complex multi-level tree menus on websites that have icons on the side and function as a category or link.

Such menus can be found on the MSDN site (and on the MSDN Help software interface). Both the database and data files can be created using XML. In order to do this, we have several choices, among which are: place the options in a database and compose the list from there through a server-side script or use data files and compose the menu from that. XML is the only cross-platform database file format, which frees us from having to use a particular server-side language (like ASP or PHP) or server software system (Apache or

IIS).

What We Need



We need to create the XML file itself that holds the XML menu items. The items in the file itself should be organized in the tree format. We also need an XML style sheet (with the "xsl" or "xslt" extension) that performs the translation from XML to HTML and displays it in a user-friendly form. Lastly, we need a few icons to make matters easy and the menu more comprehensible. The "XSLT" indicates an XSL Transform script–this is a XML-based, microprogramming language, with its own grammar, statements and functions.

Provided on this month's DVD is a zip file that contains all the relevant files. Unzip them in a folder and double-click the "menu.xml" file to run it in your web browser.

Designing the XML file



The XML file needs to be in a particular order and format for our XSL file to be able to read and translate (together called "parsing") it. We can also perform additional special processing like displaying external links with a different icon. The necessary icons are given in the ZIP file. Therefore, we shall put them in the following manner:

• A "
  
  " tag will enclose the set of tags.
• We will also place the JavaScript code within a spe cial tag and put the script itself in its CData (text) section.
• Each set of menus is placed in an "" (complex) tag.
• A "" tag will define every menu item. For sub- groups, the entire sub- group will be enclosed in a complex "…" sequence. For simple items, the will be closed inline (i.e. as "")
• Each will contain the following attributes:
• Type, either as "item" (denoting a simple item) or "group" (denoting a submenu) or "sep" indicating a separator node (denoted by a
  
  

  ---

  tag in HTML).
• Id, the "id" value of the node.
• Caption, the text that is displayed to the user
• Tooltip, tooltip text displayed on hovering the mouse over the item
• Url, the URL to navigate to when this item is clicked. A blank value here denotes that the item is not a link.
• Each group item will be represented by a book icon that may be opened or closed depending on the state of its sub-items
• A page icon represents the sub-items that are not groups.
  
  
  
  Thus, a section of the XML file that denotes a group item called "Group" and a sub-item called "Item" would be as:
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

Note that we are not specifying the image to be used in this XML file. The XSL file attaches the appropriate images.

Now to the XSL file



In the XSL file ("menu.xslt"), we use XSL transform scripts to modify the XML in the "menu.xml" file into browser-parsable HTML output. This is handled by a series of "template" sections in the XSL. Each template will handle one type of XML tag that we define. There will be three such groups - the main

XSL Transform Functions 



We have used some XSLT functions in our file and these are explained briefly below. For further help, please refer to XSLT documentation on MSDN. 

To combine the values of two attributes (like "picA" and the value of the ID attribute), we use the CONCAT function. The syntax is concat(A,B) where A and B are the two strings to combine in order. The value of the second (B) is combined with the value of the first (A). We can have other functions that return string values as A and B also. In that case, the sub functions are evaluated first.

When we have multiple nodes in an XML tree, we might find duplicated ID values every now and then. However, since we are using a client-script (JavaScript) based routine to perform our open/close operations, this scripting language requires a unique ID for every item it accesses. So we need to make sure that the ID from the XML file is rendered as a unique ID to the HTML file as well. This is accomplished with the generate-id() XSLT function. This function takes a single parameter, which we give as the ID from the XML node, and ensures that it is unique among the set already with it. If you examine the HTML output generated afterwards, you will see that random values have been appended to the original IDs to make them unique - for example

"imgAIDAJGYHB".

As predictable, the string-length() function returns the length of the given string. We are using the tags to add attribute values to HTML since this is more reliable across the board. This is especially so when we are dealing with multi-line or function-returned values for attributes. Other methods like directly placing the attributes in the relevant tag prove troublesome, even generating wrong HTML tags!

Fine-tuning



With some editing in the XLST file, we can easily re-orient the menu vertically and provide drop-down menus. We can also add a feature to integrate multiple-such XML files into one menu (like merging the menus of sub-sites) by adding appropriate tags and processing. For starters, try by adding another "" tag in our XML file.

Sujay V Sarma