The XML Site Map

I l @ ve RuBoard

Let's take a few minutes to look closely at the structure of a sample site map. ^[1] We will see some examples of its use with navigation templates in an XSLT style sheet to combine XML pages into a cohesive site.

^[1] This section will be understood best by readers who have some familiarity with XSLT and XPATH. We explain how XSLT templates work, but readers who have had no exposure to XSLT will find it very useful to refer to a book on the topic.

Navigation

Navigation is a key element in all sites design because Web sites are organized into sections and subsections, each of which consists of any number of pages. Every Web site uses menus and links to allow the user to find and display the content he is looking for. Content and navigation are the two most important pieces of information on a Web page. There are many books that will teach you how to use an XSLT style sheet to transform a page of XML content into formatted HTML, but this is not enough to turn a collection of XML pages into an entire Web site. The most important knowledge is how to use XML and XSL to create the navigation components necessary to link the pages in an organized and systematic way.

We have developed a simple and elegant navigation scheme that with a few basic XSLT tricks, allows entire Web sites to be driven dynamically by XSLT. The steps to achieve this are as follows :

• Assign each page in your Web site a unique name . This includes dynamic code-driven pages.

• Create an XML site map.

• Create an XML file for each page. Each page should have a root element with a name attribute corresponding to its name in the site map. Dynamic pages should output XML with the same root <page> elementfor example, <page name="about_us"></page> .

• Create an XSLT style sheet with templates for formatting the various content types.

• Add navigation templates to the XSLT style sheet that read the site map and display menus and links appropriate for the current location in the Web site.

It is easy to create navigation templates in XSLT that are "context sensitive" in the sense that they can determine where the current page is in the site map and display local menus for the current subsection. A simple example of this is "Back" and "Next" buttons that you can create dynamically by having your XSLT template set up links to adjacent pages.

Site Map Structure

The XML site map is the backbone of your site. It defines the site structure and groups pages into a hierarchical set of menus, sections, and subsections. The site map uses a simple recursive nested structure, as shown here:

 <?xml version='1.0'?> <?xml-stylesheet type="text/xsl" ?> <sitemap>       <menu type="main">            <page name="products">                 <title>Products</title>                 <content src="/product_browse.asp"/>            </page>            <page name="store_locator">                 <title>Store Locator</title>                 <content src="/store_locator/default.xml"/>            <page name="store_details" hidden="true">                 <title>Store Details</title>                 <content src="/store_locator/default.xml"/>            </page>       </page>       <page name="about_us">            <title>About Us</title>            <content src="/about_us/default.xml"/ >            <page name="our_history">                 <title>Our History</title>                 <content src="/about_us/our_history.xml"/>            </page>            <page name="in_the_community">                 <title>In The Community</title>                 <content src="/about_us/                      in_the_community.xml"/>            </page>       </page>       <page name="our_partners">            <title>Our Partners</title>            <content src="/our_partners/default.xml"/>       </page>       <page name="flyers" hidden="true">            <title>Flyers</title>            <content src="/flyers/thanks.xml"/>       </page>  </menu>  <menu type="global">       <page name="privacy_policy">            <title>Privacy Policy</title>            <content src="/global/privacy_policy.xml"/>       </page>       <page name="contact_us">            <title>Contact Us</title>            <content src="/global/contact_us.xml"/>       </page>       <page name="career_opportunities">            <title>Career Opportunities</title>            <content src="/global/                          career_opportunities.xml"/>            </page>            <page name="feedback">                 <title>Feedback</title>                 <content src="/global/feedback.xml"/>            </page>       </menu> </sitemap> 

Notice that our site map consists of a number of menu definitions, denoted by <menu> elements each of which contains several pages. The first element has attribute type="main" and the second, smaller one has type="global" . The main menu is a basic tree structure, with some pages nested under the home page and additional pages and subpages nested under these. There are also a few important pages that appear as links on every page of the site and don't fit into any one place in the main hierarchical tree. These are organized in a global group separate from the main group. Many sites contain one main menu and one or two flat global menus that appear at the top or bottom of every page. The main menus often have a hierarchical structure a few levels deep, while the global menus usually contain a small number of links to important pages such as copyright information, legal disclaimers, and contact information.

Each menu contains <page> elements. Pages in the main menu contain nested <page> elements, which represent site sections or subsections. This recursive structure supports site map trees of arbitrary depth, although most moderate- sized sites are only a few levels deep.

Using the Site Map

In order to use the XML site map you need to read it into the XSLT style sheet by declaring a couple of XSLT variables called sitemap and current_page .

 <xsl:variable name="sitemap" select="document('../sitemap.xml')/sitemap"/> <xsl:variable name="current_page" select="$sitemap//page[@name=current()/page/@name]"/> 

The declaration reads the map by calling the XSLT document() function and sets its value as a reference to the map's root element, which is called sitemap . The current_page variable finds the page node within the site map whose name attribute is the same as that of the root "page element of the current page." Once these values have been initialized , it is easy to generate a simple menu like the one that follows.

XML creates order out of chaos.

 <xsl:template name="main_menu ">       <xsl:for-each select="$sitemap/menu[@type=main]/page >            <a class="menu">                <xsl:attribute name="href">                     <xsl:value-of select="content/@src"/>                </xsl:attribute>                <xsl:value-of select="title"/>            </a>            <xsl:if test="following-sibling::page">  </xsl:if>       </xsl:for-each> </xsl:template> 

The template loops through all of the top-level page elements that are children of the <menu type="main"> element. It prints out each page title with a link to the page in a horizontal row separated by a vertical bar. You can call this template from another template in the style sheet by writing

 <xsl:template match="/page">       <table name="main_menu">            <tr>                 <td>Main Menu:</td>            </tr>            <tr>                 <td><xsl:call-template name="main_menu"></td>            </tr>            </table> <xsl:apply-templates select="content"/> 

I l @ ve RuBoard