A346 XSL include and call-template for Modularity

Modified:

Basics
XSL Include
Server Side Includes
- Another Solution
- Exercise 2

Basics

Modular programming is a powerful tool that implements functions when there are portions of programs used repeatedly. XSL supports modular implementation of style sheets where a central style sheet file is the combination of several other style sheets.

Our goals for using modular style sheets is three-fold:

implement a standard look-and-feel to pages
create standard style sheet modules that can be reused
allow testing of small modules at the unit-level

XSL include

We have implemented monolithic XSL style sheets successfully so why change? Consider implementing a standard navigation layout common to most web site pages. The top and left are defined for navigation and the center is defined for page content. Something similar to that below where the numbers 111111, etc. are top navigation, the letters A, B, ... are left navigation surrounding a middle area for content.

The following lists the XSL that produces the table:

Homepage.htm

<xsl:stylesheet version="2.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns="http://www.w3.org/1999/xhtml">
<xsl:template match="/">
<html>
<body>
<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
    <td>

    </td>
  </tr>
  <tr>
    <td>

    </td>
    <td>

Content of the page goes here

    </td>
  </tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

111111

222222

333333

Content of the page goes
here.

A Problem

While this approach works for one page, creating other pages with the same navigation requires cloning the navigation elements and editing in the content for each page. This approach propagates the details of a standard navigation to each page, any changes may require editing each page of the Web site!

Before solving the navigation problem consider how to combine two separate XSL files. The following defines three files:

Homepage.htm that includes or copies in another, Content.htm file.
Content.htm which produces some page content
Homepage.xml which, when loaded by the browser, references the Homepage.htm file to display results. This is useful later for testing the modules without a Web server or ASP program.

Key points:

<xsl:include href="Content.htm" /> - includes the file Content.htm
<xsl:call-template name="Content" /> - calls the template "Content"
<xsl:template name="Content"> - names the template "Content" so that it can be called.

You'll probably recognize that the xsl:template name is somewhat similar to defining a function and the xsl:call-template is similar to invoking a function.

Homepage.htm

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

<xsl:include href="Content.htm" />

  <xsl:template match="/">
     Homepage<br/>
     <xsl:call-template name="Content" />
  </xsl:template>
</xsl:stylesheet>

Content.htm

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


<xsl:template name="Content">
    Content of the page goes here
</xsl:template>
</xsl:stylesheet>

Homepage.xml

<?xml-stylesheet type="text/xsl"
href="homepage.htm"?>
<top>
</top>

Browser output

Homepage
Content of the page goes here

A Solution

Modules support our implementation goals better than the monolithic solution. The following consists of four files:

Homepage.htm that includes or copies in other files, Content.htm and Navigation.htm.
Navigation.htm which contains two templates, one for top navigation and one for left navigation.
Content.htm which produces some page content.
Homepage.xml which, when loaded by the browser, references the Homepage.htm file to display results. This is useful for testing the modules without a Web server or ASP program since IE does not process the xsl:include.

The xsl:call-template generates the HTML from the named template.

Homepage.htm

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

<xsl:include href="Navigation.htm" />
<xsl:include href="Content.htm" />

<xsl:template match="/">
<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
    <td>

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

    </td>
  </tr>
  <tr>
    <td>

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

    </td>
    <td>

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

    </td>
  </tr>
</table>
</xsl:template>
</xsl:stylesheet>

Content.htm

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

  <xsl:template name="Content">
     Content of the page goes here.
  </xsl:template>
</xsl:stylesheet>

Navigation.htm

<xsl:stylesheet version="2.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns="http://www.w3.org/1999/xhtml">
    
<xsl:template name="topNavigation">
<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="syllabus.htm">111111</a></td>
    <td>222222</td>
    <td>333333</td>
  </tr>
</table>
</xsl:template>

<xsl:template name="leftNavigation">
<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>
</xsl:template>
</xsl:stylesheet>

Homepage.xml

<?xml-stylesheet type="text/xsl"
href="homepage.htm"?>
<top>
</top>

Browser output

111111

222222

333333

Content of the page goes
here.

FrontPage and Visual Studio

Note that FrontPage and Visual Studio cannot render in design view files that include other files. All can render the HTML of files that are included (e.g. Content.htm and Navigation.htm.

Exercise 1

Copy and paste the above four files.
- Test by loading Homepage.XML into the browser.
Copy and paste the files below: Employees.XML and Content.htm; deliberately over-writing Content.htm.
- Test by loading Employees.XML into the browser.
Create another file named Me.htm similar to Content.htm.
- Define a xsl:template named your first name.
- The template should contain HTML to display your name at <H1> level.
- Modify the Homepage.htm file:
  - <xsl:include href="Me.htm" />
  - call the template so that your name appears immediately above the top navigation bar.

Employees.XML

<?xml-stylesheet type="text/xsl" 
               href="homepage.htm"?>
<Employees>
  <Employee> 
	<First>James</First> 
	<Last>Borg</Last> 
	<Salary>38000</Salary>
  </Employee>  
  <Employee>    
	<First>Joyce</First>   
	<Last>English</Last>
	<Salary>45000</Salary>
  </Employee>
  <Employee>    
	<First>Fred</First>   
	<Last>Flintstone</Last>
	<Salary>25000</Salary>
  </Employee>
</Employees>

Content.htm

<xsl:stylesheet version="2.0" 
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
     xmlns="http://www.w3.org/1999/xhtml">
<xsl:template name="Content">
   <table border="1" cellpadding="0" cellspacing="0">
     <tr>
	<td>First</td>
	<td>Last</td>
     </tr>
     <xsl:for-each select="Employees/Employee">
	<tr>
	   <td><xsl:value-of select="First" /></td>
	   <td><xsl:value-of select="Last" /></td>
	</tr>
     </xsl:for-each>
   </table>
</xsl:template>
</xsl:stylesheet>

Server Side Includes

Another means of combining file is called server side includes, though much less powerful than XSL. The files end with extensions of stm, shtml, etc. to signal the server to examine the file for include directives before sending to the browser. Server side includes are useful when pages can be assembled from static content located in several files.

The following example would be a file named HW1-4.stm and would display:

Homeworks 1-4

followed by the HTML code of the four files named in the #include.

<H3>Homeworks 1-4</H3>

Warnings
- HTML pages have <head> ... </head> and <body>...</body> sections. The <title>, <style> and other tags must be in the <head> section to have an effect on the page rendering. Including complete HTML pages with <head> into other HTML pages with <head> is problematic.
- Server side includes increase the processing time for the Web server to produce a page, since it must assemble the page on the fly by including other pages.

The following server side file, Homepage.stm, contains includes for the topNavigation.htm and Content.htm files. Note that these are the much the same files used for the XSL include. There are several key differences:

XSL allows calling named templates to select those needed from among several in file.
Server side includes merely copy the entire file at the point of inclusion.
Includes requires a server to assemble the included files.

Homepage.stm

<html>
  <body>
   <center>
     <table border="1" cellpadding="0" cellspacing="0">
       <tr>
	<td></td>
	<td>
	  <center>
	    <!-- #include file="topNavigation.htm"-->
	  </center>
	</td>
        </tr>
        <tr>
	<td>
	  <!-- Left Navigation -->
	  <table border="1" cellpadding="0" cellspacing="0">
	     <tr>
		<td>A</td>
	     </tr>
	     <tr>
		<td>B</td>
	     </tr>
	     <tr>
		<td>C</td>
	     </tr>
	  </table>
	</td>
	<td>
	   <!-- #include file="Content.htm" -->
	</td>
         </tr>
       </table>
    </center>
  </body>
</html>

topNavigation.htm

<xsl:stylesheet version="2.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns="http://www.w3.org/1999/xhtml">
    
<xsl:template name="topNavigation">
<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="syllabus.htm">111111</a></td>
    <td>222222</td>
    <td>333333</td>
  </tr>
</table>
</xsl:template>
</xsl:stylesheet>

Content.htm

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

  <xsl:template name="Content">
     Content of the page goes here.
  </xsl:template>
</xsl:stylesheet>

Browser output

111111

222222

333333

Content of the page goes
here.

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) function within XSL as normal in HTML. This makes sense because the XSL transformations produce the HTML before the CSS are applied. CSS will be discussed in more detail later in the course.