Microsoft XML SDK 2.6 - XSLT Developer's Guide

Creating and Populating an HTML Template

You can use XSLT to merge simple regular XML data with an HTML template for display. Consider the following example:

<?xml version="1.0"?>
<portfolio xmlns:dt="urn:schemas-microsoft-com:datatypes">
  <stock exchange="nyse">
    <name>zacx corp</name>
    <symbol>ZCXM</symbol>
    <price dt:dt="number">28.875</price>
  </stock>
  <stock exchange="nasdaq">
    <name>zaffymat inc</name>
    <symbol>ZFFX</symbol>
    <price dt:dt="number">92.250</price>
  </stock>
  <stock exchange="nasdaq">
    <name>zysmergy inc</name>
    <symbol>ZYSZ</symbol>
    <price dt:dt="number">20.313</price>
  </stock>
</portfolio>

The structure of this sample data is repetitive and regular—the stock element structure is repeated several times with the same subelements. For this example the stock information will be displayed in a table with a stock in each row, and cells containing the name, symbol, and price. First create a template of HTML elements to display such a table.

<HTML>
  <BODY>
    <TABLE BORDER="2">
      <TR>
        <TD>Symbol</TD>
        <TD>Name</TD>
        <TD>Price</TD>
      </TR>
      <!-- repeat the following row for each stock -->
      <TR>
        <TD><!-- symbol goes here --></TD>
        <TD><!-- name goes here --></TD>
        <TD><!-- price goes here --></TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

To populate this template with data from the XSLT file, you could manually replace the comments with data from the XML file. This is essentially the process that the XSLT performs. Elements from the XSLT namespace are used to locate data in the XML file, and insert it into the HTML template.

<HTML>
  <BODY>
    <TABLE BORDER="2">
      <TR>
        <TD>Symbol</TD>
        <TD>Name</TD>
        <TD>Price</TD>
      </TR>
      <xsl:for-each select="portfolio/stock">
        <TR>
          <TD><xsl:value-of select="symbol"/></TD>
          <TD><xsl:value-of select="name"/></TD>
          <TD><xsl:value-of select="price"/></TD>
        </TR>
      </xsl:for-each>
    </TABLE>
  </BODY>
</HTML>

The <xsl:for-each> element locates a set of elements in the XML data ("stock" elements inside the "portfolio" element) and repeats a portion of the template for each one. Because this sample contains three stock elements, three rows will be created.

The select attribute describes how to find a set of elements in the source document. The syntax for this attribute is called a pattern, and works much like navigating a file system hierarchy where a forward slash (/) selects subdirectories relative to the current directory. In an XSLT style sheet, the navigation starts at the current node and drills down into the XML data hierarchy, selecting all the nodes that match the pattern. In this case the pattern "portfolio/stock" starts at the document root and drills down through the "portfolio" element to select the three "stock" children.

For many style sheets, the use of element names and the / operator is sufficiently powerful to perform the desired transformation. Details of other XSLT operations are described in Introduction to the Syntax of XPath.

Within the <xsl:for-each> element, you can further drill down to select children of each "stock" element. The <xsl:value-of> element selects a specific child and then inserts the text content of that child into the template. The patterns inside the <xsl:value-of> element's select attribute do not require starting at the document root again but are relative to the element selected in the <xsl:for-each> element.

The preceding template can be made into a complete XSLT style sheet by placing it in an XML file and enclosing it within the <xsl:stylesheet> element.

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
    <HTML>
      <BODY>
        <TABLE BORDER="2">
          <TR>
            <TD>Symbol</TD>
            <TD>Name</TD>
            <TD>Price</TD>
          </TR>
          <xsl:for-each select="portfolio/stock">
            <TR>
              <TD><xsl:value-of select="symbol"/></TD>
              <TD><xsl:value-of select="name"/></TD>
              <TD><xsl:value-of select="price"/></TD>
            </TR>
          </xsl:for-each>
        </TABLE>
      </BODY>
    </HTML>
  </xsl:template>
</xsl:stylesheet>

Because a style sheet is an XML file itself, the file begins with the recommended xml declaration. The <xsl:stylesheet> element indicates that this document is a style sheet file, and provides a location for declaring the XSLT namespace. Microsoft® Internet Explorer 5 supports the XSL namespace URL http://www.w3.org/TR/WD-xsl. The current MSXML Parser supports both the XSL namespace URL http://www.w3.org/TR/WD-xsl and the XSLT namespace URL http://www.w3.org/1999/XSL/Transform.

You also must wrap the template with <xsl:template match="/"> to indicate that this template corresponds to the root (/) of the XML source document. For more information, see Advanced XSLT Features.

The entire file must be well-formed to comply with XML rules, including the HTML that comprises the template. For assistance in authoring or converting to well-formed HTML, see Authoring Well-Formed HTML.

You must add a processing instruction to the XML file to indicate that a style sheet is to be used. For instance, in the above example, if the name of the style sheet file is "stock.xsl", you would then add <?xml-stylesheet type="text/xsl" href="stock.xsl"?> to the XML document, immediately following the <?xml version="1.0"?> processing instruction.

The end result of running the portfolio document through the style sheet is this:

<HTML>
  <BODY>
    <TABLE BORDER="2">
      <TR>
        <TD>Symbol</TD>
        <TD>Name</TD>
        <TD>Price</TD>
      </TR>
      <TR>
        <TD>ZCXM</TD>
        <TD>zacx corp</TD>
        <TD>28.875</TD>
      </TR>
      <TR>
        <TD>ZFFX</TD>
        <TD>zaffymat inc</TD>
        <TD>92.250</TD>
      </TR>
      <TR>
        <TD>ZYSZ</TD>
        <TD>zysmergy inc</TD>
        <TD>20.313</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

This result illustrates how the basic transformation mechanism combines a template (defined in the style sheet) with data from the source document to create a final result.

Try it!   See the above example at work in the Portfolio Sample at XSLT Developer's Guide Samples. See the XSL version of this sample at XSL Developer's Guide Samples.

Note   To browse directly to this XML file, the sample file also contains a style sheet processing instruction pointing to the style sheet. For details, see Browsing XML Documents in Internet Explorer 5.