Extensible Stylesheet Language (XSL)

CS4244 - Prof. Abrams

References:

[AS] W3C, Style Sheets Activity Statement
[W3C] Bert Boss, CSS and XSL: Which Should I Use?
[XSL] Stepen Deach (ed), Extensible Stylesheet Language (XSL) Specification, Working Draft 21 April 1999
[XSLT] James Clark (ed), XSL Transformations (XSLT) Specification Version 1.0, Working Draft 21 April 1999
[XinA] William J. Pardi, XML in Action, Microsoft Press, 1999.

XSL Purpose

Formatting and transforming XML documents.
Note: IE5.0 implements the transformation part only.
"An XSL stylesheet specifies the presentation of a class of XML documents by describing how an instance of the class is transformed into an XML document that uses the formatting vocabulary." [XSL]

XSL Sample Uses (from [AS])

Transform an XML document into an XHTML document. That permits display in a Web browser.
Automatically create table of contents for Web page:

Given an XHTML document, create a new XHTML document (styled by CSS) by stripping out all the <h1> tags. Then format the body of the <h1> tags into a table of content

Automatically strip create mailing list from a Web page:

Given an XML document, compile all content of <name> and <address> tags into a table in a new XHTML document

XSL Compared to CSS

"...CSS will be used to display simply structured XML documents, and XSL will be used where more powerful formatting capabilities are required or for formatting highly structured information such as XML ... documents." [from "A Proposal for Extensible Style Language," Microsoft].

Can they both format docs?

Yes!

What would I use if I wanted to format an XML/XHTML document for printing, say to look like a magazine page?

However, CSS2 now adds a pagination model, too.

Which is suited to formating documents in any spoken language?

CSS2 assumes

words are laid out right-to-left (or left-to-right)
lines are laid out top to bottom

XSL also allows

words to go top-to-bottom
lines to go right-to-left (most common) or left-to-right

Can you transform one document to another?

CSS: no.
XSL: Yes!
XSL is the language for XML-to-XML transformation.
Example: Transform XML to XHTML for display in a Web browser.

Are they delarative or imperative languages?

CSS is delarative (saying what but not how)
XSL is imperative (saying how by providing algorithms to format/transform)

What does a rendering engine take as input?

annotates

two

HTML document
CSS

XSL transforms XML into something else (e.g., XHTML or a new XSL document).

two

XML document
XSL

Can Novices Learn to Use It?

CSS:

XSL: No! Experts are needed to write XSL. Novices will use tools that generate XSL.

Software needed:

CSS needs no extra software: Web browser reads CSS
XSL needs XSL processor.

Four Ways to Create a Displayable Document (from Bert Bos at W3C):

"Use CSS when you can, use XSL when you must."

Typical Uses of XSL (from [AS])

1. Map XML to XHTML (present in IE5.0):

Use XSL to write a style sheet. Style sheet transforms XML to XHTML.

2. Reformat XML to form that a formatting engine can output in Postscript, etc. (missing from IE5.0)

Step 1: Use XSL to write a style sheet. Style sheet transforms XML to an XSL formatting specification, which is a hierarchical sequence of

formatting objects (text blocks,images, text lines, ...) and
properties (font size, ...)

formatting engine

formatting objects...

add borders
add padding
set font family and size
add background image
hyphenate

...

Two Parts to XSL Specification

Two XML namespaces for the two parts:

xsl for transformation
fo for formating objects

Part 1: XSL Transformations (XSL-T) (included in IE5.0):

"A transformation expressed in XSLT (called a style sheet) describes rules for transforming a source tree into a result tree."

The transformation is achieved by associating patterns with templates:

A pattern is matched against elements in the source tree.
A template is instantiated to create part of the result tree.

a literal result element
instructions to create a result element

The result tree is separate from the source tree:

The structure of the result tree can be completely different from the structure of the source tree.
In constructing the result tree, elements from the source tree can be filtered and reordered, and arbitrary structure can be added.

Part 2: XSL Formatting Object Spec (XSL-FO) (missing from IE5.0):

"...designers use an XSL stylesheet to express their intentions about how that structured content should be presented; that is, how the source content should be styled, laid out and paginated onto some presentation medium such as a window in a Web browser or a set of physical pages in a book, report, pamphlet, or memo." [XSL]

Defines a vocabulary for specifying formatting semantics.

Over 90% of the properties in XSL are in CSS.
XSL adds

model for pagnation
way to extend layout vocabulary

formatting objects

Capture typographic abstractions
Examples: page, paragraph, rule.

formatting properties

Express fine control over presenation of formatting objects
Examples: indents and letter-spacing

Here is a picture illustrating one formatting object, a rectangle [from XSL]:

A Simple XSL Stylesheet to transform XML to HTML

Recall the Autos.xml file used in the presentation on XML:

<?xml version="1.0"?>

<AUTOS year="2000">
<AUTO name="BMW M5">
    <DOORS>5</DOORS>
    <ENGINE displacement="4.9" horsepower="400"/>
    <PERFORMANCE>
      <ZEROTO60>4.7</ZEROTO60>
      <QUARTERMILE second="13.2" mph="107.4"/>
    </PERFORMANCE>
    <PRICE>69400</PRICE>
</AUTO>
<AUTO name="FIREBIRD-TRANSAM">
    <DOORS>2</DOORS>
    <ENGINE displacement="5.6" horsepower="320"/>
    <PERFORMANCE>
      <ZEROTO60>5.0</ZEROTO60>
      <QUARTERMILE second="13.5" mph="107.4"/>
    </PERFORMANCE>
    <PRICE>26630</PRICE>
</AUTO>
</AUTOS>

Let's say that we want to display this in a Web page:

So we would need to pick out these these elements from the XML document:

<AUTO name="BMW M5">
<DOORS>5</DOORS>
..
</AUTO>

We can refer to "BMW M5" by the following XSL syntax:

<xsl:value-of select="AUTOS/AUTO/@name"/>

The <xsl:value-of> tag is replaced by the string read from the xml file, namely "BMW M5".

We can refer to "5" by the following XSL:

<xsl:value-of select="AUTOS/AUTO/DOORS"/>

So the entire XSL document is this:

<?xml version="1.0"?>
<xsl:template xmlns:xsl="uri:xsl">
<H1>The <xsl:value-of select="AUTOS/AUTO/@name"/> has <xsl:value-of
select="AUTOS/AUTO/DOORS"/> doors.</H1>
</xsl:template>

We then need an html file which invokes the xsl translator on file Autos.xml with xsl document Autos1.xsl. The following HTML file (Autos1.htm) does this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
    <SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="onload">
      var source = new ActiveXObject("Microsoft.xmldom");
      source.load("Autos.xml");
      var style = new ActiveXObject("Microsoft.xmldom");
      style.load("Autos1.xsl");
      document.all.item("xslContainer").innerHTML =
        source.transformNode(style.documentElement);
    </SCRIPT>
    <TITLE>Test 1 of XSL for CS4544</TITLE>
</HEAD>
<BODY>
    <DIV ID="xslContainer"></DIV>
</BODY>
</HTML>

Exercise 1.

Start Internet Explorer 5 (IE5).
View file Autos1.xsl.
Click on the + and - symbols in the IE5 display to see what happens.
Note that IE5 nicely formats the xsl tags for you.

Exercise 2.

Create a folder on your desktop.
Download Autos.xml,Autos1.xsl, and Autos1.htm to the folder you just created.
Open Autos1.htm in IE5.0. It should look like the screen shot show above (reading "The BMW M5 has 5 doors").
Modify the example to say "The BMW M5 has 5 doors and ges from 0 to 60 in ? seconds", where ? is the proper value from the Autos.xml file (namely 4.7).

Hint: If the .xsl or .xml file contains a syntax error, then IE5 will give a simple error message saying that the html file is in error (which is wrong). To get a meaningful error message, try displayig the .xsl or .xml file n IE5, and you will see a parser message giving the line number and column at which the error really occurs!

A More Complex XSL Document

In our example, the HTML page created only describes the BMW M5. But the XML file contains info on a second car, a Firebird. So apparently the xsl:value-of tag only processes the "next" (or "first") tag it encounters in the XML file that matches.

Here's an XSL file (Autos2.xsl) that processes every such tag, using xsl:for-each:

<?xml version="1.0"?>
<xsl:template xmlns:xsl="uri:xsl">
<xsl:for-each select="AUTOS/AUTO">
<H1>The <xsl:value-of select="@name"/> has
<xsl:value-of select="DOORS"/> doors.</H1>
</xsl:for-each>
</xsl:template>

Here is the result, applied to file Autos2.htm:

Exercise 3.

Modify the XSL and HTML files you downloaded in exercise 2 to create a table listing features of each car as follows:

Car BMW M5

Engine 4.9 liter

0-60 4.7 seconds

... ...

Car FIREBIRD-TRANSAM

Engine 5.6 liter

... ...

Hint: Use the information from our last lecture on XML to help! Also use the "XML in Action" book if you have it with you (see Chapter 8).

Need help? Click here to see an xsl file suggesting how to solve this!

Another Example of XSLT Transformation

Here is a piece of a stylesheet in XSLT (from [XSLT, section C.1]):

<xsl:template match="title">
<fo:block font-weight="bold">
<xsl:apply-templates/>
</fo:block>
</xsl:template>

Here is a piece of a sample input XML document to which the XSLT is applied:

<title>An example</title>

Here is the result, which above 2 are put into an XSL processor:

<fo:block font-weight="bold">An example</fo:block>

Last modified on 17 November 99 by abrams@vt.edu

Car	BMW M5
Engine	4.9 liter
0-60	4.7 seconds
...	...
Car	FIREBIRD-TRANSAM
Engine	5.6 liter
...	...