home page

Content management with XML: the table of contents

In this article : 3 XSL transformations of a single XML file to produce a site navigation device, a sitemap, and a browser-based editing tool.

In the first of a series of articles about XML, David Jones shows how describing a website's table of contents (TOC) in XML helps with the website navigation, the sitemap, and site maintenance.

Many websites have a navigation tree of some sort on one side (usually the left) of each page. The tree generally consists of nested links to pages in the website, grouped by subject.

XML immediately suggests itself as a storage format for a website's structure because it works well with nested data, it's meaningful and readable, it's easily extended and, using XSL, the same content can be displayed in a number of ways. It's this last feature in particular that makes it extremely useful.

The TOC XML

Devising the XML representation of a website hierarchy, or table of contents, is straightforward. Here's one way to do it (this is a rather simplified website):

<menu>
	<section>
		<caption>Site</caption>
		<menuitems>
			<menuitem href="index.asp">
				<caption>Home</caption>
			</menuitem>
			<menuitem href="feedback.asp">
				<caption>Feedback</caption>
			</menuitem>
			<menuitem href="contacts.asp">
				<caption>Home</caption>
			</menuitem>
		</menuitems>		
	</section>
	<section>
		<caption>Products</caption>
		<menuitems>	
			<menuitem href="xpose.asp">
				<caption>xpose</caption>
			</menuitem>
			<menuitem href="bfs.asp">
				<caption>
				Borderware
				Firewall Server
				</caption>
			</menuitem>
			<menuitem href="mg.asp">
				<caption>
				Mail Gateway
				</caption>
			</menuitem>
			<menuitem href="dg.asp">
				<caption>
				Document Gateway
				</caption>
			</menuitem>	
		</menuitems>		
	</section>
</menu>

The XML Table of Contents

XSL transformation 1 : the Navigator

Using a very simple XSLT transformation on the XML we can generate HTML that looks like a conventional site navigation column.

This transformation can be made in real time, using the MSXML.DOMDocument object on the server.

The TOC XML itself could be held in a database, or generated dynamically from a database.

XSL transformation 2 : the Site Map

A sitemap (based on CDNow

A second XSLT transforms the XML into a sitemap as an alternative navigation method (for an interesting view of their usability, see Site Map Usability on Jakob Nielsen's Alertbox).

XSL transformation 3 : the TOC Editor

The editor (screenshot from a live implementation)

The editor (snapshot from a live implementation)

The third XSL file is used to create a browser-base editing environment.

This XSL is considerably more complicated than the previous two - largely because of the client-side javascript functions that cope with event handling and file updates.

The update is done using XMLHttp, Microsoft's extremely useful means of passing XML documents between servers and clients, or servers and servers.

I'll be writing a little about XMLHttp in a later article.

David Jones
David Jones is a Senior Software Development Engineer at ecomment with particular interests in XML and website content management. david.jones@ecommnet.co.uk