Generate a Web page menu with XSLT

Menu | page "Statement" This article has been published in the "Programmer" magazine. Reproduced in this site is purely personal learning and collection of the move, no infringement of copyright suspicion. If the author or the relevant publishers think the reprint is wrong, please write to inform, will immediately delete! In addition, some changes have been made to the typesetting format of the original text, but the original text has not been changed.
"Demo" to see the final results of this article demo page please Click here
Body
　　 I. Overview
A good navigation (navigation) system can increase the readability and aesthetics of the Web page, especially when the content of the site is rich, its logical structure needs to use a good navigation system to organize, so that the Web page readers know its location and the content can be browsed. A very important part of the navigation system is the Web page menu.
Ordinary Windows applications generally have a menu system, but the implementation of the menu in the Web page is more complicated. Because menus in the Windows operating system are standard user interface interfaces, when you are working on a Windows application, you only need to describe the menu, and the display and invocation of the menu are the responsibility of Windows. In the Web page, the situation is different, HTML does not have menu specifications, Web developers must use DHTML and JavaScript to implement the menu display and call functions. The preparation of such a program is still quite complicated. This, combined with the diversity of DHTML and JAVASCRIPT implementations of various browsers, makes the already complex web menu programs more complex.
This article will introduce the use of XML and XSLT to generate a Web page menu, it will allow the Web page developers only need to describe the menu, without worrying about the complex JavaScript programs, making the Web menu than the Windows program menu is simpler.

　　 second, the definition of the menu
Start with the logical concept of the menu. A menu that contains a set of menu items, each with a property caption and a connection, and a menu item that can contain a set of submenu items to form a nested tree structure
A tree-like menu
The structure shown in the figure is easy to describe in XML (menu.xml).

xml (extensible Markup Language, Extended Markup Language) is a data format [1], which is characterized by the fact that people can easily read the meaning, such as the menu structure shown above. Not only can people easily read XML, computers can easily read the meaning of the meaning of the process of XML processing is already very popular, windows under the Msxml[5],java has JAXP, that is, almost all platforms have XML handlers [7][8]. And there are standard ways to deal with XML, such as the XSLT (extensible Stylesheet Language transformation, extended style language conversion) that is used in this article, which is the standard way to convert XML-formatted data into another format [2][3] [4].
If we can transform the XML of the above menu into the menu on the Web page using XSLT, it is easier to make a web menu. Because the XML for the Edit menu is very easy, the normal text editor is OK.
The DHTML and JavaScript programs that implement the Web page menu are often made into library forms, called Web page menu engines. These engines provide the calling interface so that we can customize (Customize) our own menus, but the problem is that customizing the menus requires modifying these programs, making it more cumbersome and error prone.
What we need to solve is to use XSLT to generate the call interface automatically based on the XML of the menu.
Let's take a look at the out-of-the-box Web menu engines available.

　　 Third, Web page menu engine
There are many JavaScript resource sites on the Internet, and dynamicdrive.com is one of the best. There are a number of good JavaScript programs available for download, especially in its "Menus and navigation Systems" category, which collects a number of web menu engines. After comparison, we chose to use "HV menu" (http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm). The advantage of the HV menu is that it can be done horizontally, with a menu that can be arranged vertically, a multi-level submenu structure, a custom menu font, color, alignment, and a variety of browsers that support ie4+, NS4, ns6+, and so on.
The Library of "HV menu" is a menu_com.js file. Its interface specification is:
menux=new Array (Text to show, Link, background image (optional), number of sub elements, height, width);
So the JavaScript functions that use this menu engine in a Web page are called:
<script>
menu1=new Array (' Forum home ', ' http://www.delphibbs.com ', ', ', 4, 20, 120);
menu2=new Array (' Forum classification ', ', ', ', ', 8, 20, 120);
menu3=new Array (' My Forum ', ', ', ', 5, 20, 120);
menu4=new Array (' rich user ', ', ', ', ', 3, 20, 120);
menu5=new Array (' Monopoly series ', ', ', ', 3, 20, 120);
menu6=new Array (' Help ', ', ', ', 4, 20, 120);
menu6_1=new Array (' Use instructions ', ' tutorial.htm ', ', ', 0, 20, 120);
menu6_2=new Array (' FAQ ', ' faq.htm ', ', ', 0, 20, 120);
menu6_3=new Array (' About Us ', ' aboutus.htm ', ', ', 0, 20, 120);
menu6_4=new Array (' Contact us ', ' contactus.htm ', ' ", 0, 20, 120);
</script>
Here we will use XSLT to convert the XML of the menu into the function call above.

　　 Four, XSLT
The XSLT (menu.xsl) for the Transformation menu's XML (menu.xsl) is:
<?xml version= "1.0" encoding= "gb2312"?>
<xsl:stylesheet xmlns:xsl= "Http://www.w3.org/1999/XSL/Transform" version= "1.0" >
<xsl:template match= "/" >
<HTML>
<HEAD>
<title>menu test</title>
</HEAD>
<body leftmargin= "0" topmargin= "0" >
<xsl:apply-templates select= "Menus"/>
</BODY>
</HTML>
</xsl:template>
<xsl:template match= "Menus" >
<script>
var noofffirstlinemenus=<xsl:value-of select= "Count (Child::*)"/>;
var starttop=<xsl:value-of select= "@top"/>;
var startleft=<xsl:value-of select= "@left"/>;
var firstlinehorizontal=<xsl:value-of select= "@style"/>;
<xsl:apply-templates select= "Menu" >
<xsl:with-param name= "PR" select= "" "/>
</xsl:apply-templates>
</script>
<script type= "Text/javascript" src= "Menu_com.js"/>
</xsl:template>
<xsl:template match= "Menu" >
<xsl:param name= "PR"/>
menu<xsl:value-of select= ""/><xsl:value-of select= "position ()"/>=new Array (' <xsl:value-of select= "@caption"/> ', ' <xsl:value-of select= "@url"/> ', ", <xsl:value-of select=" count (Child::*) "/&GT;, 20, 120) ;
<xsl:if test= "Count (Child::*) > 0" >
<xsl:apply-templates select= "Menu" >
<xsl:with-param name= "PR" select= "concat (, Position (), ' _ ')"/>
</xsl:apply-templates>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
Here XSLT has altogether three templates.
The first template <xsl:template match= "/" > it generates a simple HTML frame and a blank Web page, except to invoke the second template to insert the menu, there is no other function. The actual application can expand this template to join the content of the Web page.
The second template <xsl:template match= "menus" > Read top, left, and style control page menu locations and types (Style=0 is a vertical menu, style=1 is a horizontal menu), which is stored as the Menus property. and call the third template to draw the menu item.
The third template <xsl:template match= "menu" > generates individual menu items that can recursively handle the case of nested submenu items. There are three XSLT functions [4]:position () used to monitor the order number of menus, and count (child::*) is used to determine whether a submenu is available, concat (, Position (), ' _ ') eventually generating the menu variable name required for HV menu.

　　 v. Examples
We use a piece of Javascript (test _menu.htm) to implement the XSLT transformation, and to show the effect of the transformation.
<script>
Load_xml ("Menu.xml", "menu.xsl");
function Load_xml (XMLF, XSLF) {
try {
var myxml = new ActiveXObject ("MSXML2. Freethreadeddomdocument ");
myxml.async = false;
myxml.load (XMLF);
//alert (Myxml.xml);
var myxsl = new ActiveXObject ("MSXML2. Freethreadeddomdocument ");
myxsl.async = false;
myxsl.load (XSLF);
html = Myxml.transformnode (myxsl);
document.write (HTML);
£}
catch (Exception) {
alert (exception.description);
£}
}
</script>
This program creates the Msxml[5 object in IE Browser, and then outputs the resulting HTML. The reader can try downloading the sample program [8] of this article to actually experience the effect of the Web menu.

　

Because Netscape browsers do not support creating MSXML objects, we can return html[6 after the IIS server-side conversion. The page menu described in this article can be displayed and run in Netscape browser.

　　Vi. Conclusion
The use of XML to express the menu structure is very convenient and easy to understand, when the XSLT introduced in this article to transform the menu XML into the Web page menu engine call interface, it is very easy to create a menu for the Web page, only to use a normal text editor to edit the XML file. This article uses the HV menu engine, and if you use a different engine, you can also develop an interface that resembles XSLT to match the calling engine. Finally, XML and XSLT are platform-independent standards, and we can also use this article in Apache Server [7] and JSP server [8].
"Learning experience"
This article is a good example of learning about XML and XSL technology. But using XML and XSL to make web menus is just one of their very small applications, and the use of XML and XSL has more and more extensive applications that are worth learning and exploring.
The menu effect produced in this article is excellent, but it still has some disadvantages. For example, the position control of the menu, the expansion of the style, when the submenu is too long (more than the length of the browser portrait) can not correctly display the Invisible submenu items, and so on. However, the JS script used in this paper gives us a lot of extension function interface functions. In the 25KB, 600 lines of JS files, we can make further changes to the menu effect.
In addition, Microsoft's website as well as MSDN's website navigation bar also uses the XML and the XSL technology, I wrote "Imitate XP style navigation bar Production Tutorial" in the article is based on the Microsoft website navigation bar to write, the interested friend may refer to.