Welcome to Advanced UI Design Using XML and XSL. Each article in my series will demonstrate the creation of a specific user interface (UI) component using eXtensible Markup Language (XML) and eXtensible Stylesheet Language (XSL).
This article explains how to create a custom, object-specific context menu of unlimited depth by using XML and XSLT. The context menu discussed here functions by taking an XML feed of a specific format and applying an XSLT style sheet to it. The resulting transformation is then printed to the client. The client handles all user requests to navigate the menu. The client used in this article is Internet Explorer 5.5+.
This context menu can be applied to any object within your specific Web page(s). For demonstration purposes within this article I am applying the context menu to objects within a folder tree.
The folder tree used is the same folder tree discussed in a previous 15 Seconds article (see http://www.15seconds.com/issue/010921.htm). As noted within the referenced article, I have added a special element to each entity within the tree's XML. This element is called "onContextMenu" and references a specific XML file that contains the makeup of the requested context menu.
The actual context menu demonstrated is available in the Download section below.
Context Menu Overview
Within Windows applications it is common to right click on objects and receive object-specific context menus. For instance, right clicking on rows within an SQL Server table, rows within an Excel spreadsheet, or simply right clicking on your computer's desktop produces custom context menus.
The options within these context menus are specific to the application being used, and the object within that application that was clicked on. Early Web browsers did not give developers the capability to create context menus for our specific objects. Recent advances within the Document Object Model (DOM) and our Web browsers now make this possible within Web applications.
Figure 1. An example of an object-specific context menu created within MS Internet Explorer
This screenshot uses a number system to illustrate the different levels of the menu.
XML Structure
The XML format I have chosen is good for a recursive XSLT style sheet that satisfies the requirement within this article for a context menu of unlimited depth.
The XML document I have constructed contains a root element named "menu" that can contain only "entity" elements. The structure of your context menu is implicitly defined here by nesting option elements within the "contents" element of other entity elements. Below is a listing of all elements or attributes that belong to the "option" element.
Name
Type
Description
id
Attribute
Unique string or integer used to identify the individual option
description
Element
Description of individual option. This is the text displayed to the user.
onClick
Element
Name of the client-side function fired upon the onClick event
image
Element
Image displayed when option is closed or not selected
imageOpen
Element
Image displayed when option is selected
contents
Element
Contains entity elements. The content element is used to determine whether or not an option has a submenu.
The following XML describes the context menu that is displayed when the user right clicks on a customer. For illustration purposes, all XML is contained in static XML documents instead of being retrieved by XML database queries.
I hope the contents of this article will help increase the quality of your Web applications' interface. If you have any questions, comments, or suggestions, please feel free to e-mail me at the address listed in the About the Author section.
On a side note, I would like to thank Lee McGraw for helping me proofread and validate this document.
The third article in this series expands upon the first article to illustrate how to insert, modify, delete, and rename items within the folder tree.
Stonebroom.ASP2XML(c) is an interface component designed to make building
applications that transport data in XML format much easier. It can be used
to automatically pass updates back to the original data source.
Right now the latest buzzword around town is AJAX. AJAX is an acronym for Asynchronous JavaScript and XML and is a method used to implement remote calling. The problem is that AJAX is only implemented in ASP.NET 2.0. This article will show you one way to implement remote calling without using AJAX or the XMLHttpRequest object. The technique outlined can even be used from classic ASP and is sufficient for most remote calling needs. [Read This Article][Top]
This article is the third and final installment of Alex Homer's series covering the new XML support in Microsoft SQL Server 2005. In it he covers updating the contents of xml columns, comparing traditional XML update techniques with XQuery, and using XQuery in a managed code stored procedure. [Read This Article][Top]
In the second part of his series on SQL Server 2005's new XML support, Alex Homer looks at extracting data from XML columns, comparing traditional XML data access approaches with XQuery, and combining XQuery and XSL-T.
[Read This Article][Top]
Microsoft SQL Server 2005 now offers great support for and close integration with XML as a data persistence format. In the first article of his series examining this new support, Alex Homer offers an overview of how SQL Server 2005 stores XML documents and schemas, examines how it supports querying and manipulating XML documents, and provides a simple test application that allows you to experiment with XQuery. [Read This Article][Top]
In the final article of his series on reading and writing XML in .NET 2.0, Alex Homer looks at how the updated XML document store objects XmlDocument, XmlDataDocument and PathDocument can be used to read, persist and write XML documents and fragments more easily and more efficiently than in .NET 1.x. [Read This Article][Top]
In the final article of his series on reading and writing XML in .NET 2.0, Alex Homer looks at how the updated XML document store objects XmlDocument, XmlDataDocument and PathDocument can be used to read, persist and write XML documents and fragments more easily and more efficiently than in .NET 1.x. [Read This Article][Top]
Alex Homer continues his series on reading and writing XML in .NET 2.0. In part one, we focused on the reading side of things, examining the XmlReader and XmlReaderSettings classes. In this article, we move on to look at the XmlWriter and XmlWriterSettings classes, and how they can be used to write XML documents and fragments more easily and more efficiently than in version 1.x of .NET.
[Read This Article][Top]
Alex Homer continues his series on reading and writing XML in .NET 2.0. In part one, we focused on the reading side of things, examining the XmlReader and XmlReaderSettings classes. In this article, we move on to look at the XmlWriter and XmlWriterSettings classes, and how they can be used to write XML documents and fragments more easily and more efficiently than in version 1.x of .NET. [Read This Article][Top]
In the first part of his series on reading and writing XML in .NET 2.0, Alex Homer discusses the XmlReader and XmlReaderSettings classes. The XmlReader exposes several useful new features and the all new XmlReaderSettings class makes it easy to generate single or multiple instances of an XmlReader with a range of useful properties. [Read This Article][Top]
In the first part of his series on reading and writing XML in .NET 2.0, Alex Homer discusses the XmlReader and XmlReaderSettings classes. The XmlReader exposes several useful new features and the all new XmlReaderSettings class makes it easy to generate single or multiple instances of an XmlReader with a range of useful properties. [Read This Article][Top]
Mailing List
Want to receive email when the next article is published? Just Click Here to sign up.
