We have seen how XML data is displayed in a browser from the examples that we have executed. While the data displayed is well formed and we can identify the various elements in the XML document, it really does not provide the type of data that we would want to display in a browser.
XSL helps solve this problem; it is an acronym for Extensible Stylesheet Language and describes the way that XML data should be formatted and displayed. Like XML, XSL also uses tags to describe and format the XML data. Each tag has a corresponding closing tag that begins with a forward slash (/). XSL, like XML, uses strict formatting standards to create well-formed documents.
Using XSL we can define a stylesheet. This can contain an entire HTML document within the XSL document. The HTML is intermixed with XSL elements and will be merged with the resulting XML data to form a completed HTML document that will be displayed in a browser.
An XSL file is like an XML file, but for stylesheets, and must begin with the XML declaration. The following code fragment shows the beginning of an XSL stylesheet:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match = "/">
The first line of code here is the XML declaration, which is included as the first line of every XML document.
The next line of code is the <xsl:stylesheet> element that defines this XML document as an XSL stylesheet. It should be noted here that your XSL stylesheets will have a .xsl file extension. Within the <xsl:stylesheet> element we have declared a namespace of xmlns:xsl=http://www.w3.org/TR/WD-xsl. This is the standard namespace supported by Microsoft Internet Explorer 5.0. A namespace allows you to declare elements of a certain namespace and differentiate these elements from others of the same name. In other words you can specify a collection of names that can be used as element or attribute names in your document.
At this point it is worth noting that, like XML, XSL is also case sensitive. This includes the elements themselves and their attributes.
Following the <xsl:stylesheet> element we declare the <xsl:template> element to indicate that the stylesheet template corresponds to the root element of the XML document. We are going to look at how to use templates in a little while.
These three lines of code are the standard beginning of every XSL stylesheet that you will create. Keep in mind that the <xsl:stylesheet> and <xsl:template> elements require a closing tag at the end of the stylesheet, as shown:
</xsl:template>
</xsl:stylesheet>
The XSL language provides many elements that help us to process and display XML data. We can even include VBScript or JScript/JavaScript in our XSL stylesheets, although that is beyond the scope of this chapter. At the core of XSL is the <xsl:for-each> element that sets up a loop for processing XML data.
This element accepts the select attribute, which specifies the XSL pattern for the node of XML data to be iterated. A node is an element in the XML tree structure that has links to one or more nodes below it. An example of this is shown in the next code fragment:
<xsl:for-each select="Employees/Employee_T">
The nodes that we have specified in the select attribute specify the root node of Employees and a sub node of Employee_T. Let's take a look again at the figure we saw earlier. The root node is listed as Employees and the sub-node under the root is listed as Employee_T, which is the name of our table. SQL Server placed this node name here automatically for us and derived the name from the table name.
Notice that for each Employee_T node there are several XML attributes that we want to process, such as Employee_ID, First_Name_VC, and Last_Name_VC. These are processed using the <xsl:value-of> element.
The code fragment below shows how we use the <xsl:value-of> element. The select attribute specifies the pattern to match and the data from this match is then inserted as a text string into your document. Because our data is being generated from SQL Server we must specify the 'at' sign (@) before the element name to be matched. After the pattern name we include a forward slash to indicate the closing of this element.
<xsl:value-of select="@Employee_ID "/>
<xsl:value-of select="@First_Name_VC"/>
<xsl:value-of select="@Last_Name_VC"/>
This demonstrates the point made earlier; remember that while all XML and XSL elements require a closing tag, we can sometimes specify a forward slash at the end of the element to indicate a closing tag for that element, such as we have done in the previous code fragment.
Try It Out - XSL Stylesheet
Now that we know the basic elements that make up an XSL stylesheet, let's create one to display the first and last name of all employees from the Employee_T table.
1. To create this stylesheet you can use any text editor you want; the complete code for this XSL stylesheet is listed below:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match = "/">
<HTML>
<HEAD>
<STYLE>
TH
{
background-color: #CCCCCC;
}
</STYLE>
</HEAD>
<BODY>
<TABLE Border="1">
<TR>
<TH ColSpan="2">Hardware Tracking Employees</TH>
</TR>
<TR>
<TH>First Name</TH>
<TH>Last Name</TH>
</TR>
<xsl:for-each select="Employees/Employee_T">
<TR>
<TD><xsl:value-of select="@First_Name_VC"/></TD>
<TD><xsl:value-of select="@Last_Name_VC"/></TD>
</TR>
</xsl:for-each>
</TABLE>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
2. Once you have entered the code save the stylesheet in the htData directory as Employee.xsl. On my machine I created the htData directory under the \Inetpub\wwwroot\ directory.
3. We can test this XSL stylesheet by running another query in the URL of our web browser. Enter the following URL in your browser and press the Enter key:
http://localhost/htData?SQL=SELECT+First_Name_VC,
+Last_Name_VC+FROM+Employee_T+FOR+XML+
AUTO&XSL=Employee.xsl&ContentType=Text/HTML&Root=Employees
You should now see results similar to those shown in the following screenshot:
Continued...
