Home > Online Product Documentation > Table of Contents > Tutorial: Understanding How Templates Work

Tutorial: Understanding How Templates Work

When Stylus Studio creates a new stylesheet, it contains one template, which matches the root node. However, this template is empty. If you apply the new stylesheet as is, the result document has no contents. To generate a result document with contents, you need to add instructions to the template that matches the root node.

Default Templates

All stylesheets have two default templates that do not appear in the stylesheet itself. It is important for you to understand how the default templates work so that you can

When you can do this, you can write a stylesheet that generates a dynamic Web page that displays your information.

About This Tutorial

This tutorial provides step-by-step instructions for defining a stylesheet that generates a dynamic Web page from an XML document. The tutorial shows how the default templates work, and it provides instructions for defining templates that instantiate the default templates. It also provides instructions for adding HTML markup to the stylesheet. The result is a dynamic Web page that displays the particular information you choose.

Each of the following topics contains instructions for defining the stylesheet. You should perform the steps in each topic before you move on to the next topic. After the first topic, some steps depend on actions you performed in a previous topic. This section organizes the process as follows:

For a simpler tutorial that shows you how to define a stylesheet that generates a dynamic Web page from a static HTML document, see Working with Stylesheets - Getting Started.

This tutorial duplicates some of the information in subsequent sections. For complete information, see the following topics:

Creating a New Sample Stylesheet

To create a stylesheet to use in this tutorial, follow these instructions:

Stylus Studio displays a new untitled stylesheet and the Scenario Properties dialog box, and selects the text in the Scenario Name field.

Figure 194. Scenarios Let You Easily Test Different XSLT/XML Pairs

3. Click Browse to the right of the Source XML URL: field.

Stylus Studio displays the Open dialog box.

This creates a scenario with the name DynamicBookstoreScenario. This scenario associates the bookstore.xml document with the new stylesheet. If you want to apply the new stylesheet to other XML documents, you must create a new scenario or change the name of the XML document in this scenario.

Stylus Studio displays the new stylesheet in the XSLT editor. A tree representation of the bookstore.xml document appears to the right.

Figure 195. The XSLT Editor Shows XSLT Source on Left, Tree on Right

The default stylesheet that Stylus Studio creates contains one template, which matches the root node.

7. In the XSLT editor tool bar, click Preview Result .

Stylus Studio displays the Save As dialog box so you can save the XSLT you are composing.

Stylus Studio applies the new stylesheet to bookstore.xml and displays the result in the Preview window. The result, displayed in the Preview window, has no contents because the template that matches the root node is empty.

13. In the XSLT editor tool bar, click Preview Result . This time, the Preview window contains all text in bookstore.xml and none of the markup. This is because the xsl:apply-templates instruction instantiates the default templates.

Figure 196. Default Templates Contain No Formatting Instructions

14. In the Stylus Studio tool bar, click Save .

To create a Web page, you need to add HTML markup that displays the information the way you want. To make it easier to do that, you need to understand how the text is already being copied to the result document.

Understanding How the Default Templates Work

This topic is part of a sequence that starts with Creating a New Sample Stylesheet.

After you complete the steps in the previous section, you can see the bookstore.xsl stylesheet in the XSLT editor pane. It has the following contents:

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

              

                
<xsl:template match="/">
                   
<xsl:apply-templates/>
                   
</xsl:template>
                   

                
              
</xsl:stylesheet>
               

            

The stylesheet explicitly contains one template, which matches the root node. When the XSLT processor applies a stylesheet, the first thing it does is search for a template that matches the root node. If there is no template that explicitly matches the root node, the XSLT processor uses a built-in template.

There are two built-in templates, also called default templates. Every XSLT stylesheet contains these templates whether or not they are explicitly specified. This is part of the W3C XSLT Recommendation.

This section discusses the following topics:

Instantiating the Template That Matches the Root Node

The XSLT processor instantiates the template that matches the root node. The template that matches the root node contains only the xsl:apply-templates instruction. In this template, the xsl:apply-templates instruction does not specify a select attribute. Consequently, the XSLT processor operates on the children of the node for which the root template was instantiated. In the bookstore.xml document, the root node has three children:

Unless you specify otherwise, the XSLT processor operates on the children in document order. The first child is a processing instruction (the XML declaration). The XSLT processor ignores processing instructions.

The second child is the comment node, and the XSLT processor also ignores comment nodes.

The third child is the bookstore document element. The XSLT processor searches for a template that matches bookstore. Because there is no template that explicitly matches the bookstore element, the XSLT processor instantiates a built-in template that is not explicitly in the stylesheet.

Instantiating the Root/Element Default Template

One default template matches *|/. This means it matches every element in the source document, and it also matches the root node. This is the root/element default template.

The root/element default template contains only the xsl:apply-templates instruction. Like the template that matches the root node, the xsl:apply-templates instruction in the root/element default template does not specify a select attribute. That is, it does not identify the set of nodes for which templates should be applied. Consequently, the XSLT processor operates on the children of the node for which the root/element template was instantiated.

In this case, the root/element default template was instantiated for the bookstore element. The children of the bookstore element include four book elements, a magazine element, and a book element associated with the my namespace.

The XSLT processor operates on these children in document order. First, it searches for a template that matches book. Because there is no template that explicitly matches the book element, the XSLT processor instantiates the root/element default template for the first book element.

Again, by default, the xsl:apply-templates instruction in the root/element default template operates on the children of the current node in document order. That is, it operates on the children of the first book element.

In the first book element, the first child is the title element. The XSLT processor searches for a template that matches the title element. Because there is no template that explicitly matches the title element, the XSLT processor instantiates the root/element default template again.

At this point, the XSLT processor has initiated instantiation of the root template once, and the root/element default template several times:

Instantiate root template for root node.
               

              

                
Instantiate root/element template for 
                  bookstore element.
                   
Instantiate root/element template for first 
                  book element.
                   
	Instantiate root/element template for 
                  title in first 
                  book element.
                   

                
              

            

It is important to understand that these instantiations are not yet complete. Each subsequent instantiation of the root/element default template is inside the previous instantiations.

Instantiating the Text/Attribute Default Template

When the XSLT processor instantiates the root/element default template for the title element, the xsl:apply-templates instruction operates on the children of the title element. The title element has one child, which is a text node. The XSLT processor searches for a template that matches this text node. The second default template in the stylesheet matches this text node. This template matches text()|@*, meaning that it matches every text node and every attribute in the source document. This is the text/attribute template.

The XSLT processor instantiates the text/attribute default template for the title element's text node. This template contains only the xsl:value-of instruction. Its select attribute identifies the current node, which is the node for which the template was instantiated. This template copies the text contained in the current text node to the result document.

Now the result document contains the following text:

Seven Years in Trenton
               

            

The XSLT processor is finished with the title element, and it next processes the author element in the first book element. There is no template that explicitly matches author, so the XSLT processor instantiates the root/element default template. The first child of the author element is the first-name element, and again, there is no template that explicitly matches the first-name element. The XSLT processor instantiates the root/element default template for the first-name element. The only child of the first-name element is a text node. The XSLT processor instantiates the text/attribute default template for this text node, and this template copies the text to the result document. Now the result document contains the following text:

Seven Years in Trenton Joe
               

            

The XSLT processor is finished with the first-name element, and it next processes the last-name element, which is the second child of the author element.

Illustration of Template Instantiations

As you can see from the description in the previous section, the XSLT processor iterates through the process of searching for a matching template, instantiating one of the default templates, and operating on the children of the node for which the template was instantiated. The following figure shows the template instantiations through the second book element. In the figure, each bracket encloses the instantiations that together compose a complete instantiation for a particular element.

Instantiate root template for root node.   Instantiate root/element template for bookstore element. Instantiate root/element template for first book element. Instantiate root/element template for title element. Instantiate text/attribute template for text node. Instantiate root/element template for author element. Instantiate root/element template for first-name element. Instantiate text/attribute template for text node. Instantiate root/element template for last-name element. Instantiate text/attribute template for text node. Instantiate root/element template for award element. Instantiate text/attribute template for text node. Instantiate root/element template for price element. Instantiate text/attribute template for text node.   Instantiate root/element template for second book element. Instantiate root/element template for title element. Instantiate text/attribute template for text node. Instantiate root/element template for author element. Instantiate root/element template for first-name element. Instantiate text/attribute template for text node. Instantiate root/element template for last-name element. Instantiate text/attribute template for text node. Instantiate root/element template for publication element. Instantiate text/attribute template for text node. Instantiate root/element template for first-name element. Instantiate text/attribute template for text node. Instantiate root/element template for last-name element. Instantiate text/attribute template for text node. Instantiate root/element template for price element. Instantiate text/attribute template for text node. Instantiate root/element template for price element. Instantiate text/attribute template for text node.   Instantiate root/element template for magazine element.     And so on.

Editing the Template That Matches the Root Node

This topic is part of a sequence that starts with Creating a New Sample Stylesheet.

Begin writing your stylesheet by adding instructions to the template that explicitly matches the root node in your source document:

In the XSLT editor, edit the contents of the root template so that it contains only the following contents. As you type, Stylus Studio displays a pop-up menu that lists possible instructions. You can scroll the list and double-click the entry you want, or you can continue typing. If you want, you can copy the text from here and paste it into the Templates view.

<html>
               
<body>
               
<h3><center>Books in Stock</center></h3>
               
<table align="center" cellpadding="5">
               
<tr>
               
<th>Title</th>
               
<th>Author</th>
               
<th>Price</th>
               
</tr>
               
<xsl:apply-templates select="bookstore/book"/>
               
</table>
               
</body>
               
</html>
               

            

Ensure that you do one of the following:

Creating a Template That Matches the book Element

This topic is part of a sequence that starts with Creating a New Sample Stylesheet.

The template that matches the root node includes an xsl:apply-templates instruction that selects book nodes for processing.

To define the template that matches the book element:

Stylus Studio creates a template that matches the book element. The new template is near the end of the stylesheet and has the form <xsl:template match="book">. In the tree pane, the yellow check next to the book element indicates that there is a template that matches this element.

<tr>
               
<td><xsl:apply-templates select="title"/></td>
               
<td><xsl:apply-templates select="author"/></td>
               
<td align="right"> 
               

            

<xsl:apply-templates select="price"/>
               

              

                
</td>
                   
</tr>
                   

                
              

            

Press F5 to see the results. The result document looks like that shown in Figure 198:

Figure 198. Result of Applying XSLT

In the book template, the xsl:apply-templates instructions cause the XSLT processor to instantiate the default templates. For the title and price elements, this works correctly because those elements include only a text node. But for the author element, the use of the default templates copies too much information to the result table. You need to explicitly define a template for the author element.

Creating a Template That Matches the author Element

This topic is part of a sequence that starts with Creating a New Sample Stylesheet.

To define a template that matches the author element:

Stylus Studio creates a template that matches the author element, and places it near the end of the stylesheet.

<xsl:value-of select="first-name"/>
               
&nbsp;
               
<xsl:value-of select="last-name"/>
               

            

If you do not include the nonbreaking space entity, the first name and the last name have no space between them. Press F5 to see the results of this change, as shown in Figure 199.

Figure 199. Result of XSLT with an Author Template

4. Save the stylesheet by clicking Save .