| Microsoft XML Core Services (MSXML) 5.0 for Microsoft Office - XSLT Developer's Guide |  |
Creating and Populating an HTML Template
Consider the XML data in portfolio.xml in the example below. The data structure has a repetitive pattern: the top-level element, <portfolio>, contains three <stock> elements of the same structure. We want to construct a template-driven XSLT style sheet to display all the stocks in a table, so that each row of this table shows the name, symbol, and price for one stock. To do this, we will first create a template of the table in HTML. Then we'll populate the resulting template with the appropriate XML data values.
The following is the table template in HTML.
<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 the above template, you could manually replace the comments with data from the XML file. You can also, however, perform this replacement with XSLT. To do so, use XSLT instructions (such as <xsl:value-of>) with XPath expressions to locate data in the XML file, and to insert the data into the HTML template. The following XSLT fragment provides an example.
<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> instruction sets up a loop that will iterate through all the <stock> nodes immediately under <portfolio> in the XML data source. For each stock, the <xsl:value-of> instructions extract the symbol, name, and price. The results are inserted into the <TD> cells of the HTML table. Because this sample contains three <stock> elements, the template will generate three rows.
The select attribute describes how to find a set of elements in the source document. It takes an XPath expression, which identifies the specified node in the source tree. An XPath expression is also called a pattern. Using an XPath expression is similar to navigating a file system, where a forward slash (/) selects subdirectories relative to the current directory. In an XSLT style sheet, a path can be relative (e.g., "name") or absolute (e.g., "/portfolio/stock/name"). With relative XPath expressions, the navigation starts at the current node and proceeds down into the XML data hierarchy, selecting all the nodes that match the pattern. In this example, 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, simple XPath expressions of concatenating node names and the / operators are sufficient. For others, more complex XPath expressions are needed. For more information, see Introduction to XPath Syntax.
Within the <xsl:for-each> element, further navigation and operations can proceed, relative to the selected element. When you drill down to select children of each <stock> element, you can use the relative pattern for those children. For example, in the XSLT fragment above, we used <xsl:value-of select="name">, instead of <xsl:value-of select="/portfolio/stock/name">.
To turn this HTML template into an XSLT template rule, we wrap the template under the <xsl:template match="/"> element. This template rule applies to the root node, which serves as the starting point (or the current context) for the enclosing template. For more information, see Defining Match Patterns in <xsl:template>.
To obtain the complete XSLT style sheet containing this HTML table template, we need to add an <xsl:stylesheet> element to hold the template rule. The complete listing of the XSLT style sheet is shown in portfolio.xsl, below. We also added the <?xml version="1.0"?> XML declaration to emphasize that the XSLT style sheet is also an XML document.
The entire XSLT file, including the HTML that comprises the template, must be well-formed. For more information about authoring or converting to well-formed HTML, see Generating Well-Formed HTML Using XSLT.
Example
To display the data from portfolio.xml in a Web browser using portfolio.xsl, add the following processing instruction to the XML file, so that the style sheet is linked when the XML file is opened in Internet Explorer.
<?xml-stylesheet type="text/xsl" href="portfolio.xsl"?>XML File (portfolio.xml)
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="portfolio.xsl"?>
<portfolio xmlns:dt="urn:schemas-microsoft-com:datatypes" xml:space="preserve">
<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>
XSLT File (portfolio.xsl)
<?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>
XSLT Processor Output
<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>
Formatted Output
