N341 XSL include and call-template for Modularity

• Basics
• XSL Include
  • A Problem
  • A Solution
  • Exercise 1
• 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:

1. implement a standard look-and-feel to pages
2. create standard style sheet modules that can be reused
3. 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 many web site pages, Top-Left-Center (TLC). 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.

	111111 222222 333333
A B C	Content of the page goes here.

The following is the XSL to produce the TLC table.

Top

<table border="1" cellpadding="0" cellspacing="0"> <tr> <td><a href="syllabus.htm">111111</a></td> <td>222222</td> <td>333333</td> </tr> </table>

Left

<table border="1" cellpadding="0" cellspacing="0"> <tr> <td>A</td> </tr> <tr> <td>B</td> </tr> <tr> <td>C</td> </tr> </table>

Center

Content of the page goes here

 In the complete example, note there is no XML data 
so the XSL does nothing here except copy the HTML.

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

 <table border="1">
  <tr>
    <td></td>
    <td>

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

    </td>
    <td>

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

A Problem

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

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

1. Homepage.htm XSL that includes or copies in another file, Content.htm,
2. Content.htm XSL which produces some page content,
3. Homepage.xml XML which, when loaded by the browser, references the Homepage.htm file.

Key points:

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

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

<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>

<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>

A Solution

Modules support our implementation goals of consistent look-and-feel and reuse more easily than the monolithic solution.

The following is a general TLC user interface solution consisting of four files:

1. Homepage.htm that includes or copies in other files, Content.htm and Navigation.htm.
2. Navigation.htm which contains two templates, one for top navigation and one for left navigation.
3. Content.htm which produces some page content.
4. 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.

Note that it is the xsl:call-template that generates the HTML contained within the named template.

<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">
  <tr>
    <td></td>
    <td>

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

    </td>
    <td>

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

<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>

<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">
  <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">
  <tr>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>
</xsl:template>
</xsl:stylesheet>

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.

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>

<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">
     <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>

Note the function of each file is:

• Homepage.htm constructs the complete TLC user-interface from independent templates defined in Content.htm and Navigation.htm
• Employees.xml supplies data used in Content.htm and loads Homepage.htm
• Navigation.htm defines some static tables
• Content.htm constructs tables dynamically from Employees/Employee data; it just happens that the data is defined in Employees.xml file.

Server Side Includes

Another means of combining file is called server side includes, though much less powerful than XSL and XML.

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 from each of the four files named in the #include.

• 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:

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

<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>

<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>

<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>

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.