Reusable XSL Stylesheets and Templates

By Tony Marston
2005-04-20

The structure of an XSL file

3.1 XSL file for a LIST screen

The following is a sample of an XSL file used to create a list screen as shown in figure 1.

XSL file 1 - std.list1.xsl

<?xml version='1.0'?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">



<xsl:output method='html'/>



<!-- param values may be changed during the XSL Transformation -->

<xsl:param name="script">script</xsl:param>

<xsl:param name="mode">read</xsl:param>



<!-- include common templates -->

<xsl:include href="std.actionbar.xsl"/>

<xsl:include href="std.column_hdg.xsl"/>

<xsl:include href="std.data_field.xsl"/>

<xsl:include href="std.head.xsl"/>

<xsl:include href="std.message.xsl"/>

<xsl:include href="std.menubar.xsl"/>

<xsl:include href="std.navbar.xsl"/>

<xsl:include href="std.pagination.xsl"/>



<!-- get the name of the MAIN table -->

<xsl:variable name="main" select="//structure/main/@id"/>



<xsl:template match="/"> <!-- standard match to include all child elements -->



  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <xsl:call-template name="head" />

  <body>

  

  <form method="post" action="{$script}">

  

    <center><div class="universe">

      

      <!-- create help button -->

      <xsl:call-template name="help" />

      

      <div class="body">

        

        <!-- create menu buttons -->

        <xsl:call-template name="menubar" />

        

        <h1><xsl:value-of select="$title"/></h1>

        

        <!-- create navigation buttons -->

        <xsl:call-template name="navbar" />

        

        <!-- this is the actual data -->

        <table class="main">

        

          <!-- set up column widths -->

          <xsl:call-template name="column_group">

            <xsl:with-param name="table" select="'main'"/>

          </xsl:call-template>

          

          <thead>

            <!-- set up column headings -->

            <xsl:call-template name="column_headings">

              <xsl:with-param name="table" select="'main'"/>

            </xsl:call-template>

          </thead>

          

          <tbody>

            <!-- process each non-empty row in the MAIN table of the XML file -->

            <xsl:for-each select="//•[name()=$main][count(•)>0]">

            

              <!-- display all the fields in the current row -->

              <xsl:call-template name="display_horizontal">

                <xsl:with-param name="zone" select="'main'"/>

              </xsl:call-template>

              

            </xsl:for-each>

          </tbody>

          

        </table>

        

        <!-- look for optional messages -->

        <xsl:call-template name="message"/>

        

        <!-- insert the page navigation links -->

        <xsl:call-template name="pagination" />

        

        <!-- create standard action buttons -->

        <xsl:call-template name="actbar"/>

        

      </div>

      

    </div></center>

  

  </form>

  </body>

  </html>



</xsl:template>



</xsl:stylesheet>

3.2 XSL file for a DETAIL screen

The following is a sample of an XSL file used to create a detail screen as shown in figure 2.

XSL file 2 - std.detail1.xsl

<?xml version='1.0'?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">



<xsl:output method='html'/>



<!-- param values may be changed during the XSL Transformation -->

<xsl:param name="script">script</xsl:param>

<xsl:param name="mode">update</xsl:param>



<!-- include common templates -->

<xsl:include href="std.actionbar.xsl"/>

<xsl:include href="std.column_hdg.xsl"/>

<xsl:include href="std.data_field.xsl"/>

<xsl:include href="std.head.xsl"/>

<xsl:include href="std.message.xsl"/>

<xsl:include href="std.menubar.xsl"/>

<xsl:include href="std.navbar.xsl"/>

<xsl:include href="std.scrolling.xsl"/>



<!-- get the name of the MAIN table -->

<xsl:variable name="main" select="//structure/main/@id"/>



<xsl:template match="/">





  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <xsl:call-template name="head" />

  <body>

  

  <form method="post" action="{$script}">

  

    <center>

      <div class="universe">

      

        <!-- create help button -->

        <xsl:call-template name="help" />

        

        <div class="body">

        

          <!-- create menu buttons -->

          <xsl:call-template name="menubar" />

          

          <h1><xsl:value-of select="$title"/></h1>

          

          <!-- create navigation buttons -->

          <xsl:call-template name="navbar_detail" />

          

          <!-- table contains a row for each database field -->

          <table class="main">

          

            <!-- set up column widths -->

            <xsl:call-template name="column_group">

              <xsl:with-param name="table" select="'main'"/>

            </xsl:call-template>

            

            <!-- process the first row in the MAIN table of the XML file -->

            <xsl:for-each select="//•[name()=$main][1]">

            

              <!-- display all the fields in the current row -->

              <xsl:call-template name="display_vertical">

                <xsl:with-param name="zone" select="'main'"/>

              </xsl:call-template>

              

            </xsl:for-each>

            

          </table>

          

          <!-- look for optional messages -->

          <xsl:call-template name="message"/>

          

          <!-- insert the scrolling links for MAIN table -->

          <xsl:call-template name="scrolling" >

            <xsl:with-param name="object" select="$main"/>

          </xsl:call-template>

          

          <!-- create standard action buttons -->

          <xsl:call-template name="actbar"/>

          

        </div>

        

      </div>

    </center>

    

  </form>

  </body>

  </html>



</xsl:template>



</xsl:stylesheet>

These XSL stylesheets can be broken down into the following component parts:

<?xml version='1.0'?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">



<xsl:output method='html'/>



......



</xsl:stylesheet>

The first line contains the XML declaration. The second line and last lines identify the contents as an XSL stylesheet. The third line specifies the output format required by the transformation process.

The next set of lines perform various functions before the main template is executed.

<!-- param values may be changed during the XSL Transformation -->

<xsl:param name="script">script</xsl:param>

<xsl:param name="mode">update</xsl:param>



<!-- include common templates -->

<xsl:include href="std.actionbar.xsl"/>

<xsl:include href="std.column_hdg.xsl"/>

<xsl:include href="std.data_field.xsl"/>

<xsl:include href="std.head.xsl"/>

<xsl:include href="std.message.xsl"/>

<xsl:include href="std.menubar.xsl"/>

<xsl:include href="std.navbar.xsl"/>

<xsl:include href="std.scrolling.xsl"/>



<!-- get the name of the MAIN table -->

<xsl:variable name="main" select="//structure/main/@id"/>

The

<xsl:param>

statements identify values that are expected to be passed to the transformation process as arguments or parameters. These can then be referred to using the names

$script

and

$mode

. If a named parameter is not supplied at runtime then a default value can be used instead.

The

<xsl:include>

statements make the contents of those files available to the transformation process. Each of these files may contain any number of XSL templates.

The

<xsl:variable>

statement extracts a value from the current XML file. This can then be referred to using the name $main.

The remainder of the code performs the actual transformation.

<xsl:template match="/">



  <html>

  <body>

  

  <form method="post" action="{$script}">

  

  ......

    

  </form>

  </body>

  </html>



</xsl:template>

Note here that every XSL transformation requires a template which matches "/" - this path expression includes everything which is subordinate to the root node of the XML document. The lines within this template are then scanned and processed sequentially. Anything beginning with

<xsl:

is treated as an XSL instruction. Everything else, such as ordinary HTML tags, is output as is.

Individual parts of the XML document are then processed using different named XSL templates. These are called using code similar to the following if no parameters are required:

<xsl:call-template name="head"/>

If parameter values are to be passed they must be specified by name, as in the following example:

<xsl:call-template name="display_vertical">

  <xsl:with-param name="zone" select="'main'"/>

</xsl:call-template>

Each template definition must specify any parameter it needs by name, as in the following example:

<xsl:template name="display_vertical">

  <xsl:param name="zone"/>

  <xsl:param name="noedit"/>

  

  ......

  

</xsl:template>

Note that the order in which the parameters are specified is irrelevant as they are all matched by name. If any parameter is not supplied it is treated as having a null value.

In those sample XSL stylesheets there are references to numerous templates. Most of these have already been described in another document and can be viewed using the following links: std.actionbar.xsl, std.column_hdg.xsl, std.data_field.xsl, std.head.xsl, std.message.xsl, std.navbar.xsl, std.pagination.xsl and std.scrolling.xsl.

Tutorial Pages:
» Introduction
» The structure of an XML file
» The structure of an XSL file
» Levels of Reusability
» Summary

Related Tutorials:
» Starting with XML
» Performing Client-Side XSL Transformations
» Create a Google Sitemap for your Web Site
» XML and Scripting Languages
» Parsing Comma-Separated Values
» XML Security Suite: Increasing the Security of E-Business