How It Works - XSL Stylesheet
As we mentioned earlier, the first three lines of our stylesheet are standard. The first line is the XML declaration and is required to identify this as an XML document so it can be parsed correctly by the browser. The second line is the <xsl:stylesheet> element that defines this XML document as an XSL stylesheet. The third line contains the <xsl:template> element and specifies that the stylesheet should match all elements starting at the root element of the XML document:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match = "/">
Now we start defining an HTML document within our XSL stylesheet. This will cause an HTML document to be generated using HTML elements and XML data. The first thing we do here is to specify the <HTML> tag, which signifies the beginning of an HTML document. Then we specify the <HEAD> tag, which specifies information about the HTML document:
<HTML>
<HEAD>
The <STYLE> element defines an in-line cascading stylesheet within the HTML document. A cascading stylesheet is a set of styles (such as font size, font color) that are defined in the HTML document and that can be applied to any HTML element. So we can use the styles we define here throughout our HTML document.
<STYLE>
The first style that is defined is one that is automatically applied to the table header, <TH>, element. The style object is given a name of TH and the properties of this style are enclosed in curly brackets ({}). Here we have set the background-color property to a color of #CCCCCC, a light shade of gray. This property has been terminated with a semicolon. Each property that we set in our style object must be terminated with a semicolon.
When setting properties that change the color of the background or text, we can specify the RGB (Red-Blue-Green) value, as we have done here, or specify the color name. However, be aware that not all browsers recognize color names, while they should recognize all the RGB value for a color, so it is a good habit to specify the RGB value.
TH
{
background-color: #CCCCCC;
}
Since this is the only style that we want to define we specify the closing tags for the <STYLE> and <HEAD> elements. Then we begin the body of the HTML document by specifying the <BODY> tag:
</STYLE>
</HEAD>
<BODY>
The first thing that we specify in the body of our HTML document is a table. Using a table helps keep the data that we want to display aligned correctly in rows and columns. Using the <TABLE> element we specify that a table should be drawn and we set the Border attribute to a value of 1. This specifies that a one-pixel border is to be drawn in and around the table.
We define a row in a table by specifying the <TR> tag, which begins a row of data in a table. Then we specify that a column header be placed in this row by specifying the <TH> tag. We set the ColSpan attribute to a value of 2, which indicates that this column header will span two columns of the table. Then we place the text to be displayed in the column header and close the column header by specifying the closing tag for the <TH> element. Next we specify the closing tag for the table row:
<TABLE Border="1">
<TR>
<TH ColSpan="2">Hardware Tracking Employees</TH>
</TR>
The next row in our table specifies the column headers for each column. The first column in our table will contain the employee's first name and the second column in our table will contain the employee's last name:
<TR>
<TH>First Name</TH>
<TH>Last Name</TH>
</TR>
Now we want to iterate through the nodes in our XML data. Using the XSL <xsl:for-each> element we iterate through the Employees/Employee_T node of our XML data. For each iteration through the Employees/Employee_T node we specify that a row of HTML data be built, by specifying the opening <TR> tag:
<xsl:for-each select="Employees/Employee_T">
<TR>
Within the table row we want to specify two columns as indicated by the <TD> element. This HTML element specifies that a cell in the table be built. Within this cell we have specified the XSL <xsl:value-of> element to select the data in the First_Name_VC element of our XML data. The <xsl:value-of> element will place the data contained in the element that it selects in the table cell. Then we close the table cell using the closing tag of the <TD> element.
We end the row of data in our table by specifying the closing tag of the table row and the closing tag of the XSL <xsl:for-each> element, which defines the end of the code within the loop:
<TD><xsl:value-of select="@First_Name_VC"/></TD>
<TD><xsl:value-of select="@Last_Name_VC"/></TD>
</TR>
</xsl:for-each>
Next, we end the table and the body of our HTML document and then the HTML document itself. We have done this by specifying the appropriate closing tags:
</TABLE>
</BODY>
</HTML>
Finally, we end our XSL stylesheet by specifying the closing tags for the XSL </xsl:template> element and the </xsl:stylesheet> element. It should be noted that the <?xml> element is the only element that does not have a corresponding closing tag.
</xsl:template>
</xsl:stylesheet>
Let's take a look at the URL that we entered to produce the results shown earlier. The first part of this URL should look familiar as it is the same data that we that we entered before, except that we have not included the Employee_ID column in the SELECT statement:
http://localhost/htData?SQL=SELECT+First_Name_VC,
+Last_Name_VC+FROM+Employee_T+FOR+XML+AUTO
The last part of this URL is new, as we have specified the XSL keyword and the XSL stylesheet that we created. We have also specified the ContentType keyword and specified that our results should be displayed as Text/HTML. The Root keyword is the same that we used in the last URL.
&XSL=Employee.xsl&ContentType=Text/HTML&Root=Employees
If you are curious, you can right-click in the browser window and choose View Source from the context menu to view the HTML that was generated by the XSL stylesheet.
Sorting Data Using XSL
The results that were displayed in the last example were not sorted. They were displayed in the same order as they were entered in the Employee_T table. We have a choice when sorting data; either use the ORDER BY clause in our SELECT statement, or use the order-by attribute of the <xsl:for-each> element.
Since we are already familiar with the ORDER BY clause in SQL Server let's examine the order-by attribute of the XSL <xsl:for-each> element. Using this attribute allows us to sort the XML data that has been returned by SQL Server in our XSL stylesheet.
The order-by attribute allows us to specify the sort criteria using one or more XSL patterns, in other words nodes in our XML data. An XSL pattern provides a mechanism to identify nodes in our XML document based on their type, name or values. The sort criterion is a string value enclosed by quotes and each XSL pattern to be sorted is separated by a semicolon. To indicate the direction of the sort, ascending or descending, you must include a plus sign (+) or a minus sign (-) respectively. Like most sorts that you have dealt with, ascending is the default and need not be specified if this is the sort order required.
Suppose we want to sort our data by ascending order of first names, and then by descending order of last names. We could specify the order-by attribute as shown in the code fragment below. The first names would be sorted first in ascending order and then, if there were two identical first names, the last names for the identical first name would be sorted in descending order:
<xsl:for-each select="Employees/Employee_T"
order-by="+@First_Name_VC; -@Last_Name_VC">
It should be noted that the order-by attribute is set to become an obsolete standard, although it will still be supported. Future releases of XSL by the W3C (World Wide Web Consortium) will supply the <xsl:sort> element in its place. Until the next release of XSL we should continue to use the order-by attribute of the <xsl:for-each> element.
Using XSL Templates
We used a template in the last section, and we are going to look at templates in more detail here. XSL templates provide a convenient method that allows us to provide any special formatting of the data that is returned by an XML node. That is, we can select the data for a specific node and apply any special formatting or manipulation of the data before we display it.
We define templates in XSL using the <xsl:template> element. If you are going to use scripting functions in the template to manipulate the data you can specify the language attribute and the scripting language (JScript or VBScript). Using the match attribute we specify the node in the XML data to be matched. Let's look at the following example:
<xsl:template match="@Last_Name_VC">
<TD><B><xsl:value-of/></B></TD>
</xsl:template>
In this example we have specified that the template should match the Last_Name_VC node in the XML data. When a match has been found and applied, the data in that node will be placed inside a table cell as specified by the <TD> HTML element and the XSL <xsl:value-of/> element. We have also specified that the data should be rendered in bold text as indicated by the <B> HTML element. The <xsl:value-of/> element inserts the value of the selected node as text.
Just because we have specified a template to format our data doesn't mean that the formatting will be applied to our document. In order to apply the formatting supplied by the template we must use the XSL <xsl:apply-templates> element. This element will apply the template that matches the node in the select attribute. The following example demonstrates this:
<xsl:apply-templates select="@Last_Name_VC"/>
What happens here is that we select the data in the Last_Name_VC node of our XML data and the <xsl:apply-templates> element will apply the template that we have defined for this node. The text that is produced by the template will be inserted at this point.
Assuming the Last_Name_VC node in our XML data contains a value of Willis, the template, when applied, would produce the following line of data:
<TD><B>Willis</B></TD>
Continued...
