XML and XSL Transforming your XML documents with eXtensible Stylesheet Language Transformations [Optional Lecture]

XML and XSL

Transforming your XML documents with eXtensible Stylesheet Language Transformations

[Optional Lecture]

XSL - Overview

XSL is the eXtensible Stylesheet Language XSL is an XML-based language, like WML; but

where WML is a content format, XSL is a way to to format content.

The process of applying XSL to an XML document is called transforming the document. You transform it from one language--XML--to another: HTML, or maybe WML, or text or who-knows-what; even to another XML language.

XSL is to XML as style sheets are to HTML; but XSL is actually much more powerful.

XSL - Overview

Where’s the action? XSL is a client-side technology. Unlike ASP or JSP, it does all its

work on the client’s PC. This means that speed of prsentation of your data depends on the

client’s speed. Most web pages don’t work that way! Since XSL transformations (“XSLT”) are run by the client, your client

needs to be capable of XSL.

• Not all clients are XSL-capable!– Internet Explorer 5.* or less are not XSL-capable.– Internet Explorer 6.0 or higher are XSL-capable.– Netscape 6 is mostly XSL-capable.– Your mobile phone is almost certainly not XSL-capable.

• Microsoft’s XML parser is named MSXML.

• MSXML 3.0 is MS’s first XSL-capable parser. 3.0 first shipped with Windows XP.

XSL - Overview

What’s it look like? Remember XML? This is a class about XML. Sample XML:

<?xml version="1.0"?>

<document>

<underlined>

Hello, world!

</underlined>

</document>

And how it looks in IE 6:

XSL - Overview

We’re going to use XSL to give visual meaning to those two new tags, document and underlined.

HTML defines a set of tags that specify formatting rules; <p>, <h1>, <u> and the like all specify visual formatting rules.

XSL allows us to define our own tags; just as <u> means underline in HTML, we can make an <underlined> tag of our own that will underline the XML content.

An XSL document defines a list of matchings from a tag and its content to a template expansion of HTML (or other) text.

XSL - Example One

Here’s a sample of XSL:


<xsl:stylesheet version="1.0”

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="document">

<html>

<body>

<xsl:apply-templates />

</body>

</html>

</xsl:template>

<xsl:template match="underlined">

<u> <xsl:apply-templates /> </u>

</xsl:template>

</xsl:stylesheet>

XSL - Example One

...and here’s the result of applying it to the XML:

XSL - Example One

So how’d that work? After I created the .xsl file, I added one line to the

.xml file:

<?xml-stylesheet type="text/xsl" href="sample1.xsl"?>

When Internet Explorer loaded the XML file, it found this XSL directive and loaded the XSL file to find the formatting transformation. Then it applied the XSL rules to the XML data, and transformed the XML into HTML.

XSL - Templates and Nodes

Remember, XML documents are trees :

The current node : The XSL processor walks the XML document tree, replacing

each node with its matching transformation. As it goes, it keeps track of the current node. In your XSL code you can reference the attributes, value, and children of the current node.

Root node

Child node Child node

Child node Child node Child node


A closer look at the XSL code: The standard XML header is followed by the stylesheet tag:


<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

...

</xsl:stylesheet>

The stylesheet lays out a series of template tags:<xsl:template match=”document"> ... </xsl:template><xsl:template match=”underlined"> ... </xsl:template>

Within each template, the XSL specifies the rules of replacement. For example,

<xsl:template match=”underlined">

<u> <xsl:apply-templates /> </u>

</xsl:template>

replaces all instances of the “underlined” tag with a bit of HTML formatting--the <u> tags--wrapped around the content.


The XSL template tags

<xsl:template match=”...”>

As each node of the source XML is processed, its tag is matched against the list of <template>’s in the XSL. The XSL processor searches for a <template> tage whose match field matches the XML tag name. If it finds one, it replaces the XML tag with the content specified in the body of the <template> tag.

match=“/” will match the root node of the document.


The <apply-templates> tag is XSL for “recurse within this tag”. When the XSL processor encounters this, it calls itself on the content within the current node.

XSL - Example Two

A slightly more complex example:<?xml version="1.0"?>

<?xml-stylesheet type="text/xsl" href="sample2.xsl"?>

<student>

<name>John Smith</name>

<degree>MSc</degree>

</student>

which would render as

if it weren’t for the XSL directive...

XSL - Example Two

The XSL code:


<xsl:stylesheet version="1.0”

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="student">

<html>

<body>


</body>

</html>

</xsl:template>

<xsl:template match="name">

<h1> <xsl:apply-templates /> </h1> <hr/>

</xsl:template>

<xsl:template match="degree">

<h2>Degree sought : <xsl:apply-templates /> </h2>

</xsl:template>

</xsl:stylesheet>

XSL - Example Two

And the resulting transformed document:

XSL - Node values and attributes

The <xsl:value-of select=”..." /> tag is used to extract values from fields in the XML data. The value of the select attribute contains an XPath

expression. XPath is a language--a part of XSL--that identifies nodes in the source XML so that you can refer to them in your XSL content.

Some XPath examples: select=“/document/frednode” would select a <frednode>

tag that was the immediate child of a <document> tag in the root of the XML tree.

select=“/document//frednode” would select a <frednode> tag that was a child, directly or indirectly, of a root <document> tag.


For example, if we add <birthdate>

<day>28</day>

<month>July</month>

<year>1973</year>

</birthdate>

to the end of the content and <xsl:template match="birthdate">

Birth date : <b>

<xsl:value-of select="month" />

<xsl:value-of select="day" />,

<xsl:value-of select="year" />

</b>

</xsl:template>

to the XSL, we get

Birth date : July28, 1973

at the end of the output.


Perhaps more interesting, the <apply-templates> tag has a select=“...” attribute too. By specifying what to apply the template recursion to, we can

actually change the structure of the document: <xsl:template match="student">

<html>

<body>

<xsl:apply-templates select="/student/name" />

<xsl:apply-templates select="/student/degree" />

</body>

</html>

</xsl:template>

Here instead of mindlessly displaying the content inside the <student> tag in the order it’s entered, we’re displaying it in the order specified. We’re changing the actual tree structure of the XML document as we transform it.

XSL - Example Three

You can also use the select syntax to embed the XSL transformation of one node inside that of another: <xsl:template match="name">

<h1> <xsl:apply-templates /> </h1>

<li /> <xsl:apply-templates select="//birthdate" />

<hr/>

</xsl:template>

Now the <name> tag will be transformed to include a bullettedprintout of the <birthdate> tag. This works even though the <birthdate>

tag isn’t a child of the <name> tag in ouroriginal content!

XSL - Loops

XSL supports looping over all the similiar child nodes of a tag with the <xsl:for-each> element. This is handy for laying out tables or lists. For example, you

can open your <table> tag and then fill in all the rows. The select attribute of the for-each tag acts as a search.

You can specify the nodes you want to enumerate over, and they’ll be processed in the order in which they appear. You specify the nodes with an XPath path.

Again, this can change the fundamental structure of the document.

XSL - Example Four

For example, this code will create a table of all the <student> tags:

<xsl:template match="/">

<html><body>

<table border="1" cellpadding="1"

cellspacing="1">

<xsl:for-each select="//student">

<tr>

<td><xsl:apply-templates

select="name" /></td>

<td><xsl:apply-templates

select="degree" /></td>

</tr>

</xsl:for-each>

</table>

</body></html>

</xsl:template>

XSL - XPath paths

XPath is a complex and powerful way to identify the nodes in an XML document. The path you give is relative to the current node; the path structure is rather like a directory path. select=“*” : All the immediate children of the current node select=“bob” : All the immediate children of the current node that are <bob>

tags select=“fred/bob” : All the <bob> tags which are immediate children of the

<fred> tags immediately beneath the current node select=“fred//bob” : All the <bob> tags which are descendants--at any

depth--of the <fred> tags immediately beneath the current node select=“.//bob” : All the <bob> tags anywhere beneath the current node select=“../bob” : All the <bob> tags beneath the parent of the current node select=“/bob” : All the <bob> tags immediately beneath the root node select=“//bob” : All the <bob> tags anywhere beneath the root node

So in Example four, “//student” identified all the nodes anywhere beneath the root of the document that were <student> tags.

XSL - XPath paths (Example Five)

XPath recognizes the @ symbol as a shortcut to indicate that you’re referring to a node’s attributes instead of the tag name itself.

<xsl:template match="name">

<h1>

<font>

<xsl:attribute name="color">

<xsl:value-of select="../@textcolor" />

</xsl:attribute>


</font>

</h1>

<li /><xsl:apply-templates select="../birthdate" />

</xsl:template>

Adding a textcolor=“...” attribute to the <student> tag will now change the displayed color. (I use the <xsl:attribute> tag to set the value of the <font> tag’s color attribute.)

XSL - More tags to play with

<xsl:element> - insert a tag in the output stream <element> generates a named and parametrised tag:

<xsl:element name=“Bob”>

<xsl:text>This is text</xsl:text>

</xsl:element>

produces the output<Bob>This is text</Bob>

<xsl:include href=“url” /> - inlines another XSL file Replaces the <include/> tag with the contents of another

XSL file at the specified URL. Keep in mind that this may mean a new internet request,

which could take time.

XSL - More tags to play with

<xsl:if test=“...”> - conditionally select an element The body of the <if> tag is only added to the stream if the test condition

in the test attribute is true. Example:

<xsl:template math=“chapter/title”>


<xsl:if test=“not([last()])”>, </xsl:if>

</xsl:template>

...will match each instance of a <title> tag under a <chapter> tag and recurse on the title; but it will add a comma after every <title> tag which is not the last in its list.

See also: the <xsl:choose> tag, a more powerful form of conditional statement. Used in conjunction with <xsl:when> and <xsl:otherwise>.

Recap

XSL: Transforms documents from XML to another language Can transform the document’s structure, as well as content

XSL tags: <xsl:stylesheet ...> <xsl:template match=“...”> <xsl:apply-templates [select=“...”]/> <xsl:value-of select=“...” /> <xsl:for-each select=“...”> <xsl:attribute name=“...”> <xsl:element name=“...”> <xsl:include href=“...”> <xsl:if test=“...”>

XPath: *; node; node1/node2; node1//node2; //node; ./node; ../node @AttributeName

Bibliography

http://www.w3.org/Style/XSL/ http://www.w3schools.com/xsl/ O’Reilly’s XML Pocket Reference

Robert Eckstein and Michel Casabianca; (c) 2001 O’Reilly.

Documents

XML and XSL Transforming your XML documents with eXtensible Stylesheet Language Transformations [Optional Lecture]