Creating and Populating an HTML Template

Important:
This is retired content. This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This content may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

A version of this page is also available for

Windows Embedded CE 6.0 R3

4/8/2010

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

	Copy Code
<?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>

Copy Code

<?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 child elements. 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.

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

Copy Code

<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 XML file, you can manually replace the comments with data from the XML file, which 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.

	Copy Code
<HTML> <BODY> <TABLE BORDER="2"> <TR> <TD>Symbol</TD> <TD>Name</TD> <TD>Price</TD> </TR> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> </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 selectattribute 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 selectattribute 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.

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

Copy Code

		 
<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 name space. Microsoft Internet Explorer for Windows Embedded CE supports the XSL name space URL http://www.w3.org/TR/WD-xsl. The current MSXML for Windows Embedded CE supports both the XSL namespace URL http://www.w3.org/TR/WD-xsland the XSLT name space 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 Functionality.

The entire file, including the HTML that comprises the template, must be well-formed. For more information about 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. In the preceding 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 as follows.

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

Copy Code

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