Part two of the tutorial briefly outlines the eXtensible Style Language and then explains how to actually create an XML stylesheet. The stylesheet will be used to display the data in the XML document that will be created in step three of this tutorial. The stylesheet can be created in a simple text editor or an XML editor can be used. Advantages of using XML editors include providing assistance in creating well formed, valid XSL stylesheets.
eXtensible Style Language (XSL) is used as a companion to XML documents in the display of information to a browser. As a language, XSL includes both a transformation language (XSLT) and a formatting language, which can function independently of each other.
According to the XML Bible, "...the transformation language provides elements that define rules for how one XML Document is transformed into another XML document. The transformed XML document may use the markup and DTD of the original document or it may use a completely different set of tags, such as the formatting objects used in the XSL formatting language" (p. 435). The bottom line is that XSLT defines a standard way to convert XML documents from one format or schema into another, changing XML tag names and tree structures as needed.
The XSL formatting language is an application used to describe how the content of an XML document should be presented to the user. XSL formatting language includes 51 formatting objects, which are mostly containers for rectangular areas and spaces.
For the purposes of this tutorial, however, we will stay away from the specifics of XSLT and XSL formatting objects, and concentrate more closely on the task of translating the XML document to be readable by a web browser, done by creating an XSL Stylesheet. The XSL Stylesheet transforms the document into an application that the client can understand. In this case, we are using it to transform the document into HTML, although it could transform it into XML formatting objects instead.
When XSL is applied to an XML document, XSL goes through two main steps in formatting the data. First it produces a source tree by matching specified patterns with XML elements. This tree is then processed to produce a results tree, based on actions specified in template rules. An XML parser then takes the XML data and the XSL formatting instructions and transforms the results tree into an HTML document for display in a Web client. XSL is capable of data reordering, so the results tree can look entirely different from the source tree (source: ZDNet DevHead).
XSL Stylesheets are similar to Cascading Stylesheets (CSS), widely used as with HTML. They are separate files that are called upon by the HTML or XML document for the purposes of presenting the document to the user.
XSL documents must conform to the rules of any other XML document, in that the syntax of the document must be well-formed, such as the proper nesting of tags, no empty tags, etc. The stylesheet can contain text that will be reflected exactly in the output document, in addition to XSL instructions that copy the data from the XML document the stylesheet is being applied to.
For this tutorial we are going to go over just the minimum requirements for building an XSL stylesheet. Please keep in mind that XSL can do MUCH more than is outlined in this tutorial: I just wanted to introduce the basics here.
<?xml version="1.0"?>
< xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
What this line is doing is declaring the element an xsl:stylesheet element and calling for the XSL elements that are in the http://www.w3.org/TR/WD-xsl namespace. Of course, for the document to be well formed, this tag must be closed at the very end of the document with the close tag:
</xsl:stylesheet>
xsl:templatetag (which of course needs to be closed in order for the document to be well-formed). The template element associates output with each node, including the root. Since the output document needs to be well-formed, we need to start with the document's root element, and we use a rule that applies to the document's root node. When the root node is read, the children of the root node are processed as well. The tag will have the value "/", so the tag will look like this:
< xsl:template match="/">
Stylesheets can have rules for each node, but for the XSL stylesheet used in this tutorial we will use one rule, applied to the root node.
HTML tags are inserted after the declaration of the template rule, and are also inerspersed among the XML tags for the rest of the document. So far, our code looks like this:
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <html> <head> <title>Apartment Directory </title> </head> <body bgcolor="#8FACC7" text="#ffffff" link="#808040">
xsl:for-eachand
xsl:value-ofelements that will take the value of the data in the XML document and reflect it in the output document. Each element in the XML document (defined by the DTD) is specified with the
selectattribute. That is, in our example we want to display the apartment complex information and information about each type of unit available. So, we need to put the following into our stylesheet:
<xsl:for-each select="_______">(the _____ being each node that contains data in the XML document). Of course, these elements need to be properly nested according to the DTD and each must have an end tag so that the XSL document is well-formed. Combined with the
xml:for-eachtags the
<xsl:value-of select="_____">tags actually display the data in the XML document.
It is very important to remember here that for the XSL stylesheet to be valid against the DTD, the xml:for-each and xml:value-of tags must contain elements that are properly nested according to the structure that is declared by the DTD.
so we add to our code:
<xsl:for-each select="Directory"> <h1> <center>Apartment Directory Listing>/center> </h1> <hr/> <xsl:for-each select="City"> <xsl:for-each select="Apartment">
The resulting XML document will use tables to display the data, so we need to add the HTML table tags and start displaying the Apartment Information. So we'll add the following code to our stylesheet, which will display the headings for the Apartment Information table, and will call for the actual data from the XML document. Remember that the XSL stylesheet must conform to the rules of XML that require all tags to be closed.
<!--apartment info--> <h2 align="center">Apartment Complex Information</h2> <table border="1" align="center"> <thead> <tr> <th> <font face="arial" color="purple">Apartment Complex Name</font> </th> <th> <font face="arial" color="purple">Address</font> </th> <th> <font face="arial" color="purple">Office Phone Number</font> </th> <th> <font face="arial" color="purple">Utilities Paid</font> </th> <th> <font face="arial" color="purple">Features/Amenities</font> </th> <th> <font face="arial" color="purple">Pet Policy</font> </th> </tr> </thead> <tbody> <h3> <tr> <td> <xsl:value-of select="Name"/> </td> <td> <xsl:value-of select="Address"/> </td> <td> <xsl:value-of select="Office_phone"/> </td> <td> <xsl:value-of select="Utilities"/> </td> <td> <xsl:value-of select="Features"/> </td> <td> <xsl:value-of select="Pets"/> </td> </tr> </h3> </tbody> </table>
Next, we'll add the code that will display the information about each unit.
<!--unit info--> <br/> <h2 align="center">Apartment Unit Information</h2> <table border="1" align="center"> <thead> <tr> <th> <font face="arial" color="purple">Bedrooms</font> </th> <th> <font face="arial" color="purple">Bathrooms</font> </th> <th> <font face="arial" color="purple">Square Feet</font> </th> <th> <font face="arial" color="purple">Rent</font> </th> </tr> </thead> <tbody> <h3> <xsl:for-each select="Unit"> <tr> <td> <xsl:value-of select="Bedroom"/> </td> <td> <xsl:value-of select="Bathroom"/> </td> <td> <xsl:value-of select="Sq_feet"/> </td> <td> <xsl:value-of select="Rent"/> </td> </tr> </xsl:for-each> </h3> </tbody> </table>
Finally, we must be sure to close all the tags:
<hr/> </xsl:for-each> </xsl:for-each> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
There are various tools available for creating XSL documents and stylesheets. Since XSL is such a new language, new tools are being developed and existing tools are being improved.