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:
