Implementing pop-up menus in XML

xml| Menu

XML has become the world language for a new generation of network computing, which has been gradually reflected in the products of major software companies. XML itself is not a computational language, but more of a format for data description. Compared with HTML, it has more characteristics of data definition, and it is more flexible and suitable for transmission over the network than the database. There are also a number of technologies surrounding XML, such as XSL, XSLT, and so on, which allow us to actually start doing some interesting tasks on XML.

This article is to implement a dynamic pop-up menu on a Web page in the context of an XML beginner. It should be helpful for readers who also want to understand the attributes that XML is not related to performance.

> Application Scenarios

We often see a variety of menu forms on some sites, most of which use some of the features of DHTML, but it's not easy to make good use of these existing menus to implement some of your own menus. First of all, it is necessary to "analyze" some code from their entire page, and then analyze the relationship between display and display content, and if your menu structure and display mode are different from those of other websites, you will have to spend more time to study new display methods.

And we want to implement a dynamically tuned menu structure that should be available for the entire site we're going to complete. Once our page page design has changed, we can flexibly change the menu display mode to adapt to the new page overall style.

The menu we want to implement starts with the following:

--> < /c14>
Figure 1: An appearance of the pop-up menu we want to implement

Implementation methods

After a lot of contact with HTML, today's Web page design we are more willing to direct the appearance of a page with WYSIWYG editing tools (such as FrontPage, Dreamweaver, etc.) "painting", and no longer accustomed to using the data structure to design a universal module. In order to achieve our goal, we again began to reconsider how to define a general menu data structure to describe a menu of information, and then use a display module to represent the data information, if you change the display module of some parameters, you can achieve the same menu content of different appearance and behavior.

After understanding the basic definition method of XML, we define the following model data:

Listing 1: A model menu data structure XML

　
<?xml version= "1.0" encoding= "gb2312"?>
<?xml:stylesheet type= "text/xsl" href= "menus.xsl"?>

<topiclist type= "dynamic Menu" >


<topics type= "Network good place" >
<TOPIC>
<TITLE> China XML Alliance </TITLE>
<URL>http://www.xml.org.cn</URL>
</TOPIC>
<TOPIC>
<TITLE> Easy software company </TITLE>
<URL>http://www.tangram.com.cn</URL>
</TOPIC>
<TOPIC>
<TITLE> Microsoft Msdn</title>
<URL>http://msdn.microsoft.com</URL>
</TOPIC>
</TOPICS>


<topics type= "Application Example of XML" >
<TOPIC>
<TITLE>biztalk</TITLE>
<URL>http://www.biztalk.org</URL>
</TOPIC>
</TOPICS>

<topics type= "XML Features" >
<TOPIC>
<TITLE> Streamlining </TITLE>
<URL>express.htm</URL>
</TOPIC>
<TOPIC>
<TITLE> Self-explanatory </TITLE>
<URL>description.htm</URL>
</TOPIC>
<TOPIC>
<TITLE> Interchangeable </TITLE>
<URL>exchange.htm</URL>
</TOPIC>
<TOPIC>
<TITLE> independent of Display </TITLE>
<URL>nopresentation.htm</URL>
</TOPIC>
<TOPIC>
<TITLE> Streamlining </TITLE>
<URL>express.htm</URL>
</TOPIC>
<TOPIC>
<TITLE> Self-explanatory </TITLE>
<URL>description.htm</URL>
</TOPIC>
<TOPIC>
<TITLE> Interchangeable </TITLE>
<URL>exchange.htm</URL>
</TOPIC>
<TOPIC>
<TITLE> independent of Display </TITLE>
<URL>nopresentation.htm</URL>
</TOPIC>
</TOPICS>

<topics type= "contact Author" >
<TOPIC>
&LT;TITLE&GT;ISAAC m.</title>
<URL>mailto:isaac@tangram.com.cn</URL>
</TOPIC>
</TOPICS>
<topics type= "small test" >
<TOPIC>
<TITLE> Red Sledgehammer </TITLE>
<URL>red.htm</URL>
</TOPIC>
<TOPIC>
<TITLE> White Sledgehammer </TITLE>
<URL>white.htm</URL>
</TOPIC>
<TOPIC>
<TITLE> Brown Sledgehammer </TITLE>
<URL>brown.htm</URL>
</TOPIC>
</TOPICS>
</TOPICLIST>

　


In this piece of data, the main items and subkeys of the menu are represented by <TOPICS> and <TOPIC> elements, at a glance. And as you can see, we've given this data a section of external XSL code that translates to DHTML:

<?xml:stylesheet type= "text/xsl" href= "menus.xsl"?>


This line of information allows IE to automatically combine the data structure of a menu with a particular XSL and translate it into DHTML for interpretation. In addition, in order to correctly interpret Chinese content in IE, the encoding= "gb2312" is added to the first part of the data structure.

Learning to define XSL is a bit of a hassle, because XSL is as much a DHTML description as a function of executable programs. If you are familiar with DHTML, it should be easy to master the essentials of XSL, but the process of your own definition should be in conjunction with XML, while testing one side of the definition is a good way. In our menu, we use <DIV> to parse the menu items into DHTML elements.

　

Listing 2: An XSL (menus.xsl) that can represent the menu data we have defined

<?xml version= "1.0"?>
<xsl:stylesheet xmlns:xsl= "Http://www.w3.org/TR/WD-xsl" >

<!--MENUS. XSL-->

<xsl:template match= "/" >
<HTML>
<HEAD>
<title><xsl:value-of select= "topiclist/@TYPE"/></title>
<link rel= "stylesheet" type= "Text/css" href= "Menus.css"/>
<script language= "JScript" src= "Menus.js" ></SCRIPT>
</HEAD>
<BODY>

<!--build MENUBAR-->

<div id= "Divmenubar" >
<table id= "Tblmenubar" border= "0" >
<TR>
<xsl:for-each select= "//topics[topic]" >
&LT;TD class= "Clsmenubaritem" >
<xsl:attribute name= "ID" >tdmenubaritem<xsl:value-of select= "@TYPE"/></xsl:attribute>
<xsl:value-of select= "@TYPE"/>
</TD>
<xsl:if test= "context () [Not (end ()]]" >
<TD>|</TD>
</xsl:if>
</xsl:for-each>
</TR>
</TABLE>
</DIV>

<!--build individual MENUS-->

<xsl:for-each select= "//topics[topic]" >
<div class= "Clsmenu" >
<xsl:attribute name= "ID" >divmenu<xsl:value-of select= "@TYPE"/></xsl:attribute>
<div class= "Clsmenuspacer" ></DIV>
<xsl:for-each select= "TOPIC" >
<DIV>
<a target= "Main" >
<xsl:attribute name= "HREF" ><xsl:value-of select= "URL"/></xsl:attribute>
<xsl:value-of select= "TITLE"/>
</A>
</DIV>
</xsl:for-each>
</DIV>
</xsl:for-each>

</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
　


In the earliest menu.xsl definition, we combine the way menus interact (that is, how they respond to the mouse), and style elements such as color and font are combined with XSL. But we have found that we can still separate, while retaining greater flexibility. So we've also defined menus.css and menus.js files, defining features such as the appearance of menu items and subkeys, and how to respond to the user's actions, so we get further flexibility.

Listing 3: Format tables that can be adjusted in XSL Stylesheet (MENUS.CSS)

/* MENUS. CSS */

body {font-family:verdana; font-size:60%; background-color:ffffff;}
H1 {font-size:120%; font-style:italic;}

Div#divmenubar {background-color: #6699cc;}
Table#tblmenubar TD {font-size:60%; color:white; padding:0px 5px 0px 5px; cursor:default;}
Table#tblmenubar Td.clsmenubaritem {font-weight:bold; cursor:hand;}

Div.clsmenu {
font-size:100%; Background-color: #000000;
Position:absolute; Visibility:hidden; width:130px;
padding:5px 5px 5px 8px; Border-top:1 white solid;
}
Div.clsmenu A {text-decoration:none; color:white; font-weight:bold;}
Div.clsmenu a:hover {color:blue;}

The menu parsing code menus.xsl also contains an external JavaScript code file, so that the various modules of our dynamic menu can work together.

Listing 4: Code to implement menu interaction (menus.js)

/* MENUS. JS */

var eopenmenu = null;

function Openmenu (esrc,emenu)
{
EMenu.style.left = Esrc.offsetleft + divmenubar.offsetleft;
EMenu.style.top = Divmenubar.offsetheight + divmenubar.offsettop;
eMenu.style.visibility = "visible";
Eopenmenu = Emenu;
}

function Closemenu (emenu)
{
eMenu.style.visibility = "hidden";
Eopenmenu = null;
}

function Document.onmouseover ()
{
var eSrc = window.event.srcElement;
if ("clsmenubaritem" = = Esrc.classname)
{
ESrc.style.color = "Moccasin";
var emenu = document.all[esrc.id.replace ("Tdmenubaritem", "Divmenu")];
if (eopenmenu && eopenmenu!= emenu)
{
Closemenu (Eopenmenu);
}
if (Emenu)
{
Openmenu (Esrc,emenu);
}
}
else if (Eopenmenu &&!eopenmenu.contains (ESRC) &&!divmenubar.contains (ESRC))
{
Closemenu (Eopenmenu);
}
}

function Document.onmouseout ()
{
var eSrc = window.event.srcElement;
if ("clsmenubaritem" = = Esrc.classname)
{
ESrc.style.color = "";
}
}


Below, we can change the behavior and performance of the menu module as long as we make some parameter modification on the above data, interaction style and styles. Modify Menu.xml can dynamically increase the content information of the menu, modify menu.xsl can change the pattern of the menu, modify Menus.js can change the menu of interactive mode, modify MENUS.CSS can change the color of the menu, font and so on.

For example, simply modifying very little code in Menu.xsl and Menu.js allows the above menu information to show a completely different interaction style and become a vertical pop-up menu. If you are interested, modify it yourself in the sample code to become your own menu code (in the download code we provide, menus2.xsl and menus2.js are all modified instances).

Figure 2: Another appearance of the pop-up menu after changing the XSL file parameters

Summarize

With such a simple but interesting programming experience, we find that XML is indeed a very flexible network information representation language, and its display-independent features allow us to add more features to it on the basis of this initial exploration. For example, our next goal is to replace the menus.xml with an ASP program, dynamically extract the menu content needed for the current page in our website database, and then write more complex menu modules with enhanced XSL and JavaScript.