XSL overview

Additional Requirements

Dreamweaver MX 2004 or later (Optional)

• Try
• Buy

• To complete the examples in this tutorial, it is recommended that you have Dreamweaver installed. However, you can use any other text editor, but you will not be able to take advantage of the native XSL support offered by Dreamweaver.
• Previous knowledge of XSL is not required. This article is intended to explain how you can use XSL to process XML data.
• Previous knowledge of HTML, WWW, and building web pages is recommended.

You have read my previous article: XML Overview.

As you might recall from my previous article, XML Overview, XML was designed to carry data. However, the majority of web applications are designed with the end user in mind. Therefore, information should be presented in a readable format. This is where XSL comes in: it takes the data from the XML trees and processes it to produce intelligible output. Of course, you can use Perl, Java, or PHP to work your way around transforming XML documents. However, as XML becomes more and more mainstream, you'll have to get a good grip of XSL and its functioning principles.

Fortunately, Dreamweaver 8 takes a visual approach to XSL transformations, helping you process XML-based data with no hand-coding at all. In order to understand how XML and XSL can be used together to process and display information, this article reviews XSL and some of its real-life applications. I will cover basic XSL syntax rules, give you some examples of how to use XSL to style your data, and explain the difference between a server-side and a client-side transformation.

XSL is for XML what CSS is for HTML. It stands for EXtensible Stylesheet Language. It is a language designed to present XML data in a readable format. XSL actually consists of two parts:

• XSLT – a language for transforming XML documents
• XPath – a language for navigating in XML documents

XSLT stands for XSL Transformations and is the most important part of XSL.

XSLT transforms an XML document into another XML document, into XHTML output, or into simple text. This is usually done by transforming each XML element into an HTML element. XSL is required because XML tags are user-defined, therefore browsers do not know how to interpret or render each tag. Their meaning is designed to be understood by humans, not machines.

XSLT can also perform the following operations on an XML tree:

• add and remove elements
• add and remove attributes
• rearrange and sort elements
• hide or display certain elements
• find or select specific elements

If you need to review the XML syntax, read the XML Syntax section of my previous article on XML.

XSL Syntax

As you might recall from XML Overview article, all XML documents start with an XML declaration. The same is true for XSL style sheets. The first line of any XSL document is actually an XML declaration:

Is XSL the Same as XML?

Yes and no. Yes, because they observe the same syntax rules (with a few differences, which I will talk about next). No, because they have different goals: XML carries data, XSL formats it.

After the XML declaration, there is an XSL declaration, such as:

or

However, in most real-world cases, the XSL declaration looks a bit more complex:

This is because it also includes the namespace and the version of the XSL specification, according to the recommendations of the W3 Consortium.

Unlike the XML declaration, which is written on a single line and has no closing tag, the XSL declaration must have a closing tag, which marks the end of the XSL stylesheet:

Notice how this does not violate the XML syntax rules: an XSL stylesheet is a perfectly valid XML document, since it has a single root element, specified by the <xsl:stylesheet> tag.

Where Should You Use XSL?

XSL was designed with a few goals in mind, which make it the perfect solution for some development cases, while rendering it totally useless for others.

• XSL was designed to process XML documents and to observe the XML syntax. Therefore,you should only use it in conjunction with XML in XML-aware applications. The perfect places to use XML and XSL are as follows: web portals, news aggregators, community websites, or any other web application that needs to deliver information to a variety of devices and a large number of clients.
• XSLT is a language based on pattern matching. It looks for nodes that match a particular condition, then it applies the corresponding rules. As a consequence, it lacks the computing power of most programming languages. For instance, XSL cannot change the value of variables at runtime. It shouldn't be used to compute values from dynamic data sources using complicated formulas (such as in an online store). Web programming languages are better for this goal.
• XSL was not designed to replace or to complement CSS. It shouldn't (and cannot) be used to style HTML. You can, however, use it for websites that need frequent visual redesigns, that change their layout often, and need to manipulate data in a flexible format.
• XSL is not a content management tool. It shouldn't (and cannot) be used to change the content of XML documents or to edit information. You can, however, use XML and XSL for a content management system that needs to handle documents in several different formats.

So how does XSL fit into the big picture? To produce the final HTML pages for your website's visitors, you need to apply an XSL stylesheet to your XML data source. The actual transformation can be performed either by your web server or by the client's browser. The final output can be a full HTML page or only a portion of it, used on separate pages.

Server-side vs. Client-side

Both the server-side and the client-side approach have their benefits and disadvantages. Server-side transformations let you process XML documents either from your server or from elsewhere, on the Internet. The server performs the actual work, which produces HTML output that any browser can load, no matter how old or new. On the other hand, to perform a server-side XSL transformation, you must have a properly configured application server, with support for XML and XSL. Not all hosting servers come prepared for this. That is why I will explain how to install and configure the necessary XML/XSL libraries for PHP servers in one of my next articles. The soon-to-be-released Dreamweaver 8 supports XSL transformations for ColdFusion, ASP, ASP.NET, and PHP pages.

The server-side transformation workflow is described in the diagram below:

Note that the XML document does not need to be located on the web server. It can also be placed on a remote website, in which case it will be loaded on your server upon request.

In a client-side transformation, the client's browser does all the work. The downside of this approach is that not all browsers have XML/XSL support, so some of your clients might not be able to see your pages. For a list of modern browsers that have XML/XSL features, visit this page on the W3 Consortium website. In addition, when using the client-side approach, you are restricted to processing local XML files only. If you need, for instance, to consume a RSS feed from another website, you have to download a copy of it and then upload it to your server. If the original RSS file on the remote website changes, you must download the file again, and re-post it to your web server.

To indicate to the browser which XSL stylesheet must be used to process the XML document, you must include the following declaration in the XML file, right after the XML declaration:

The href attribute specifies the path to the XSL stylesheet that must be used. The mechanism resembles the way an external CSS stylesheet is referred at the beginning of an HTML page. The following diagram explains the client-side workflow for XSL transformations:

I mentioned earlier that the XSL declaration also carries the namespace of the document. A namespace is literally what it reads: a space for names. It specifies the set of element names and attribute names that you are allowed to use in a certain document. The goal of a namespace is to avoid naming conflicts. Because XML and other XML-related languages are user-defined, naming conflicts may arise. For instance, <table> may refer to a database table, a layout table, a piece of furniture, or a place in a restaurant. Since most applications process more than one XML document at a time, it is not uncommon to mix different XML documents, where a certain element could have different meanings. Using the same namespace for several documents guarantees that the element means the same thing in each of them. Otherwise, using different namespaces is a guarantee that the elements have different meanings.

In XML, namespaces are specified by the xmlns attribute of the document declaration. They consist of a URI (Uniform Resource Identifier), that is, a website's address (such as http://www.w3.org/1999/XSL/Transform). The rationale behind it is that URIs are unique, therefore it is likely that the corresponding namespaces will also be unique.

Note: The URI in the document declaration is simply used as a name. It is not intended to be a link to any XML schema or an indication of the owner of the document (the company or the website where the documented originated from).

Now that you have some idea of what a namespace is, I will get back to the XSL syntax. Just as XML documents consist of a hierarchical collection of elements, XSL documents are made up of templates or rules. Each template defines the rules that apply to a specific XML node. An XSL template looks like this:

The match attribute associates an XSL template to an XML element. The corresponding node is indicated as an XPath expression. I will cover XPath in the next section.

XSL uses XPath to identify individual elements of the XML tree that need to be processed. Simply put, XPath is a navigation tool for locating XML elements. It uses the same syntax as file system paths in operating systems (for instance, C:\Program Files\Macromedia\, or /usr/bin/perl). In a similar way, company/department/employee is the XPath expression that points to the employee element in an XML document containing data about a company and its departments. Dreamweaver 8 offers a visual drag-and-drop user interface and creates XPath statements for you, but you should still understand the basic principles of XPath in order to be able to manipulate XML data from within XSL stylesheets.

Basically, the XPath specification observes the same rules as file system addressing:

• If the XPath expression starts with a slash (/), then it represents the absolute path to the XML element (starting from the root of the XML document).
• If the XPath expression starts with a double slash (//), then all elements from the current document which fulfill the specified criteria will be selected, irrespective of their position in the XML document. For instance, //employee looks up all the employee nodes from the XML document.
• The asterisk (*) selects all XML elements located by the preceding path. For instance /company/department/* selects all the child nodes of a department, that is, all its employees.
• The dot (.) selects the current node, and two dots (..) select the parent node. For instance, the XPath expression that selects the department where an employee works is ../employee.
• To select attributes, use the @ character. For instance, /company/department/employee[@retired] selects all the employees that have the retired attribute specified.

The content of the <xsl:template> element is the actual rule that must be applied. It is usually some HTML code that will be output to the browser.

Remember the company.xml document from my previous article? Suppose you need to apply a rule to the employee node, to display employees in a table like this one:

The XSL rule would look like this:

Notice that the content between the table tags is pure HTML code. It tells the browser that the employees will be displayed as a table, having the following column headers: Name, Job, and Salary.

The <xsl:template> is used to define the way a node will look in the browser. However, in order to display the actual contents of the node, you need to use another XSL construct: <xsl:value-of>. Its name is pretty intuitive. The node whose value will be displayed is specified by the select attribute, which takes as a value an XPath expression. Suppose you need to display the name of an employee from the company.xml document. The code will look like this:

Getting back to the previous example—displaying the company.xml document as a table—in order to display the values of the <name>, <job>, and <salary> nodes in the defined XSL template, you need to write the following code:

To see the code working in your browser, use these steps:

1. Download and unzip the xsl_overview_samples.zip sample files linked at the beginning of this article.
2. Open the company.xml file and locate the document declaration at the top of the file:
   <?xml version="1.0" encoding="iso-8859-1"?>
3. Create a new empty line after it and paste the following code on that line:

Note: I covered what this code does in the client-side transformation section earlier in this article. It indicates to the browser which XSL stylesheet must be used to process the XML document. The href attribute specifies the path to the XSL stylesheet that must be used.

4. Save the file and press F12 (Windows) or Option+F12 (Macintosh) to preview it in your browser. Notice that only the first employee displays:

To display all the employees in the table, you must use another popular XSL construct:

The value of the select attribute is an XPath expression that specifies the set of nodes that must be displayed. If you're familiar with other programming languages, the <xsl:for-each> construct does the job of a typical for loop.

Let's display all the employees of the company:

Notice how the XPath expressions for the name, job, and salary do not need to include the parent nodes or start from the document root. This is because the path to these elements will be calculated based on the XPath expression specified in the <xsl:for-each> construct. To see the code working your browser, open the company.xml file again and change the href attribute value to ex_02.xsl. Then preview it in your browser. You should see the following HTML table:

XSL gives you the ability to filter and sort items as well as to display content based on conditions.

Filtering Items

Using the <xsl:for-each> construct, you can also filter the output, based on a condition. Suppose you want to display only the employees that work as programmers.

To see the code working your browser, open the company.xml file again and change the href attribute value to ex_03.xsl. Then, preview it in your browser. Notice that only the employees that are programmers from company.xml document are listed in a HTML table:

To define conditions on XML nodes, you can use any of the following operators:

• equal (=)
• not equal (!=). For instance, name!='Ben Walker'
• less than (<). For instance, salary<2750
• less than or equal to (<=)
• greater than (>)
• greater than or equal to (>=)

Sorting Items

Sorting items alphabetically is also possible. Just use the <xsl:sort /> construct and specify the node to sort by. The <xsl:sort /> element must be nested inside an <xsl:for-each> element, to make sure the application loops through all the items. Here is how you can display employees in alphabetical order:

Notice that the sort element does not have a corresponding closing tag. To see the code working your browser, open the company.xml file again and change the href attribute value to ex_04.xsl. Then preview it in your browser. Notice that all the employees from company.xml document are sorted alphabetically in an HTML table:

Of course, you can easily switch between ascending and descending order by simply adding an extra attribute to the <xsl:sort /> element:

Please note that the above XSL code does not modify the actual structure of the initial XML document. Employees are only listed alphabetically in the generated HTML that is sent to the browser, after the XSL transformation.

Simple and Multiple Conditions

As most languages, XSL also gives you the ability to display content based on conditions.

A simple condition is defined using the following syntax:

To run the condition test on several items, in order to display only the ones that satisfy it, the xsl:if construct needs to be nested inside an xsl:for-each element. The following example shows how you can list only the employees whose salary is greater than $2700:

Notice that the less than (<) and greater than (>) characters are replaced by their corresponding HTML escape sequences (&lt and &gt ). Otherwise, they would be easily confused with the start or the end of a tag. To see the code working in your browser, open the company.xml file again and change the href attribute value to ex_05.xsl. Then, preview it in your browser. Notice that only the employees from the company.xml document that have a salary greater than $2700 are in the HTML table:

The operators you can use in the test expression are the typical conditional operators:

• &lt (less than)
• &gt (greater than)
• = (equal)
• != (not equal)

When you need to compare a value to a string, you need to enclose the string between single quotes (for instance <xsl:if test="job = 'Software Analyst'">).

You can also define more complex conditions, similar to the IF-ELSE construct in most programming languages. The syntax is self-explanatory:

In order to test the conditions on multiple XML nodes, the <xsl:choose> construct must be nested inside an <xsl:for-each> loop.

Suppose you want to highlight in green all the employees who earn less than $2700, and highlight in blue all those who earn more than $2700 in:

The <xsl:otherwise> element specifies the rules to be applied by default, if the initial test condition fails to be satisfied by the XML node.

To see the code working your browser, open the company.xml file again and change the href attribute value to ex_06.xsl. Then preview it in your browser. You should see the following HTML table:

Notice that employees who make less than $2700 are highlighted in green and those who make more than $2700 are highlighted in blue.

The <xsl:choose> construct can easily be extended for testing multiple conditions, by adding one or more <xsl:when> elements. No matter how many <xsl:when> elements it will have, there must always be a single <xsl:otherwise> element, which handles all the other cases not covered by the initial test conditions. As an exercise, try to display the list of employees using the following highlights:

• Yellow, for employees who earn less than $2,500.
• Green for employees who earn between $2,500 and $3,000.
• Blue for employees who earn more than $3,000.

Sneak Preview of Dreamweaver 8: Code Hints

One of the new features in Dreamweaver 8 that can make coding faster and easier is the code hints. When you start typing <xsl: Dreamweaver displays a list, suggesting options to complete your entry:

To select the node or function you want, select it and press Enter (Windows) or Return (Macintosh). You can scroll in the list of suggestions using the arrow keys. Code hints help you write or edit code without mistakes.

Where to Go from Here

In this article, I presented a brief overview of XSL, offering you some guidelines to where and how to use it in your web development projects. The article also contains some sneak previews of the XML authoring features in Dreamweaver 8, which you will certainly find a valuable development tool for your XML-based applications. Feel free to explore the many possibilities that XML and XSL can offer.

• To learn more about the new XML/XSL features in Dreamweaver 8, check out Alexandru Costin's MAX session preview: Using the Power of XML with Dreamweaver. You can join him and other developers at MAX 2005 to get some hands-on practice with the new Macromedia Studio 8.
• Learn how to master XPath expressions in this tutorial from W3 Schools.
• To practice your XSL skills, check out this interactive tutorial on ZVON.org.

In my next two articles, I'll show you how to consume an RSS feed in your site using Dreamweaver 8 and how to configure your server for server-side XSL transformations. Dreamweaver 8 is already available for pre-order.