Exploring XMLHierMenus (1/4) - exploring XML
Exploring XMLHierMenus When XML and DHTML unite to form the Web's New Dream Team
Welcome back. In this tools section of the column we are going to explore actual solutions to real-world Web problems, putting to work our newly acquainted knowledge from the preceeding XML tutorials and standards articles. At the end of my last article I demonstrated the use of the W3C standards X-Link and XSL to render a collection of Web links in different ways. Today we take an in-depth look at how it all works, so after reading this article you will be in a position to start your own projects based on X-Link and XSL.
The solution consists of three components:
- The source document, containing the links in the form of X-Link elements
- The XSL style sheet for transorming the source document into a list of plain HTML links
- The XSL style sheet for transforming the source document into a Hierarchical Menu
The source documentHere is a listing of the source document, containing some text and a number of links specified in X-Link syntax. The listing is broken down into several paragraphs that contain some inline comments and explanations.
<?xml version="1.0"?> <page xmlns:xlink="http://www.w3.org/XML/XLink/0.9">The first line identifies this document as an XML document. The second defines a self-invented root element page and maps the prefix xlink to the X-Link namespace. Namespaces allow to mix different XML vocabularies in one document, so that for instance <stock:quote> can be reliably distinguished from <speech:quote>. There are no requirements for the given URL or the location it points to, in fact it can be any kind of identifier as long as it is unique.
Follow this simple link to our <xlink:simple href="/" role="Homepage" title="Home" show="replace" actuate="user"> WebReference Home Page </xlink:simple> or use this menuHere comes the first simple link, specified by the simple element of X-Link. As mentioned in the previous article it looks suspiciously like an HTML anchor, with some additional attributes that a user agent can make use of.
But now the flexibility of XML poses a challenge: How do I turn an arbitrary XML tag into a linking element? In HTML, with its fixed set of well-defined tags this is not a problem. But in XML, we could choose to define our own tag named menuitem for instance to point to a target URL just like this:
<menu title="WebReference"> <menuitem xlink:href="/" xlink:role="Homepage" xlink:title="Home"/> <menu title="XML"> <menuitem xlink:href="/xml" xlink:role="Homepage" xlink:title="Home"/> <menuitem xlink:href="/xml/about" xlink:role="About" xlink:title="About"/> </menu> <menu title="DHTML"> <menuitem xlink:href="/dhtml" xlink:role="Homepage" xlink:title="Home"/> <menuitem xlink:href="/dhtml/about" xlink:role="About" xlink:title="About"/> </menu> </menu>The above defines a collection of links using custom elements menu and menuitem, grouped into a top level for WebReference and two sub-levels for the XML and DHTML columns. X-Link not only defines elements, but also attributes like href and role that can be attached to any self-defined element and should be treated accordingly by the user agent, no matter with which XML element they appear. This way we can turn any element of a document into a link!
if you want to jump directly to a particular section of DHTML or XML. </page>Finally we need to close the root element so that we end up with a well-formed XML document.
Created: Dec. 31, 1999
Revised: Jan. 06, 2000