RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


XmlTransform—A General-Purpose XSLT Pre-Processor : Page 3

Use this XmlTransform application to generate sets of HTML pages, SQL documentation, or apply it to your own particular needs.

Connecting the Dots
Assume, for example, that you have a series of web pages that have a natural order, perhaps a set of pages that make up a tutorial. Each web page has navigational buttons to advance to the next page, return to the previous page, go up to the contents page, and so forth. When you want to add a new page, remove a page, or re-order the material, using static pages, you would typically have to manually edit all the linkages, a time-consuming and error-prone process. Figure 3 shows a representation of four such related pages. Each page has buttons that navigate to the first and last pages, the previous and next pages, and the parent page. By using an appropriate XSLT transformation mapping, XmlTransform can generate such navigational connections automatically.

Figure 3. Connecting Neighboring Pages: XmlTransform generates a web info.html contents parent file, reachable via the middle ("go-up") navigational button on each page. The other buttons provide side-to-side and end-to-end navigational control for the child pages.
If you look closely at Figure 3, you'll notice that every page displays the go-to-first-page and go-to-last-page buttons, but the three buttons in the middle—previous, parent, and next—are conditional. For example, you don't want the previous-page button to display on the first page or the next-page button to appear on the last page. Also, in some cases, two buttons may point to the same page. For example, on page two the go-to-first-page button and the previous-page button both point to page one.

The parent button is quite useful, particularly if you have a deep directory structure. Consider the automatic contents generation discussed in the previous section. A widely used convention is that the index.html file for a directory resides within that same directory. Using that convention, the generated navigation buttons treat index.html as just another page to be reached with the previous and next buttons, and not by the parent button. In order to have the contents as a "proper" parent, it needs to be physically located one directory above its children. What if you have several directories that you want to generate contents for? You obviously cannot use multiple different files all named index.html. The solution used by XmlTransform is to instead name the contents file the same as the directory. Thus a directory called stuff spawns a contents file called stuff.html.

Given the conflicting requirements of these two approaches, XmlTransform allows you to generate the contents page either in the same directory as index.html if you prefer that widely used convention, or in the directory above as <dir>.html if you want to use the more natural hierarchical model and take advantage of the parent navigation button.

Listing 1 shows the fragment of XSLT code used to generate the navigational buttons on each web page. This XSLT fragment—along with a lot more code to display a search box, a logo, menus, etc.—is incorporated into each web page automatically when you use the <cc:body> element rather than just the regular <body> element. Here's a portion of the XHTML output for the navigational controls from one page. Careful observation reveals that this code is from the first page in Figure 3 (access.html) because the previous-page link shows a spacer instead of an arrow and contains no active link.

   <span style="margin-left:10px" class="headerFont"
       title="Shortcut keys in Internet Explorer:
       1=First, 2=Previous, 3=Next, 4=Last, 5=Up">NAVIGATION:</span>
        <a href="accessibility.html">
          <img src="/image/firstButton.gif" alt="first page in section"
            width="14" height="14" />
        <img src="/image/dot_clear.gif" alt=""
          width="14" height="14" />
       <a href="../webRules.html">
           <img src="/image/upButton.gif" alt="up one level"
               width="14" height="14" />
       <a href="antispam.html">
           <img src="/image/nextButton.gif" alt="next page"
               width="14" height="14" />
       <a href="style.html">
           <img src="/image/finalButton.gif" alt="final page in section"
               width="14" height="14" />
At this point, you've seen the basics of how XmlTransform works, how to create contents pages, and how to automate navigation between files. Those latter two features are very useful when transforming XML to HTML, but you may not need them to target other XML dialects.

Close Icon