October 25, 2016
Hot Topics:

Building Modular Stylesheet Components

  • October 7, 2002
  • By Jeff Ryan
  • Send Email »
  • More Articles »

The Header.xsl and Footer.xsl stylesheet components are included into this stylesheet at compile time. This means that it is just as if the doHeader and doFooter templates were part of this stylesheet.

The doPage template defines the structure for the page. It uses <xsl:call-template/> to call the doHeader, doBody, and doFooter templates in the appropriate part of the layout. If we ever want to change the "frame" structure for our pages, we'll be able to make a global change to the site by changing this single component.

The title variable defined for the stylesheet is passed to doHeader via the <xsl:with-param/> element. We'll be overriding this variable and the doBody template in our main page.

Main Page

Now that we've built our reusable components, our main page is going to seem trivial. This is how it should be. We've invested some time in building reusable components. Now we can leverage this investment over and over again.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  <xsl:import href="PageTemplate.xsl"/>
  <xsl:output method="html" indent="yes"/>
  <xsl:variable name="title" select="//Title"/>

  <xsl:template match="/">
    <xsl:call-template name="doPage"/>

  <xsl:template name="doBody">
    <p align="center">
      Apply templates to your Source document here...

First, we import the page template stylesheet. Then, we override the title variable by selecting the Title element from our XML document.

The root template simply calls the doPage template in the imported stylesheet. Remember that the inherited doPage template creates our standard layout and calls doHeader, doBody, and doFooter at the appropriate time.

When doHeader is called, it will be passed our overridden title variable.

Because we overrode the doBody template, our specialized version of the template will be invoked by doPage. Object-oriented programmers will recognize this as polymorphism. It is also an implementation of the template method design pattern.

The resulting HTML from our transformation will look something like this when rendered in a browser:

Not much of a page, but the frame, header, body, and footer structure provides a nice foundation to build upon. The idea here is that any given page on our site will share a common page layout, but can override the header title and the body. Speed of development and maintenance of the site will be greatly enhanced through the use of common components.


XSL provides excellent facilities for building modular and reusable components. We covered examples of the following features of the language:

  • Including stylesheets at compile time
  • Calling named and parameterized templates
  • Inheriting variables and templates from imported stylesheets
  • Overriding variables and templates from imported stylesheets

We built reusable page template, header, and footer components to demonstrate how to build modular components using XSL. This could be the start of your library of reusable stylesheet components. But the rest is up to you.

Code Examples

To download the example stylesheets, click here.

About the Author

Jeff Ryan is an architect for Hartford Financial Services. He has eighteen years of experience designing and developing automated solutions to business problems.
His current focus is on Java, XML, and Web Services technology. He may be reached at jryan@thehartford.com.

Other Articles Written by Jeff Ryan

Page 2 of 2

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel