XML and XSLT

(1)

XML and XSLT 9 February 2006 1

XML and XSLT

XML (Extensible Markup Language) has the following features.

• Not used to generate layout but to describe data.

• Uses tags to describe different items just as HTML,

• No predefined tags, just syntax rules for tags.

• XML uses a DTD (Document Type Definition) or an XSD (XML Schema Definition) to formally describe a document.

• Case sensitive.

• All tags must be closed and properly nested.

• All parameter values must be enclosed within apostrophes or quotation marks.

(2)

An XML document is well formed if it conforms to the XML syntax rules.

An XML document is valid if it is well formed and conforms to the rules in the corresponding DTD

(3)

Why use XML?

It is platform and vendor independent, thus can be easily transported between systems.

It is designed to describe data, therefore can be used to store documents of different kinds.

It can be translated into other representations such as HTML, PDF.

It can be converted into an internal tree structure.

Then you can extend and manipulate the tree and write it back to an XML file.

(4)

Why use XML in a web application?

It is suitable to describe data, i. e. you don’t need to do your own design.

It is platform independent.

When using XML and XSLT (Extendable Stylesheet Language for Transformation) your JSP’s merely manages the translations and the actual layout are described in the style sheets. This means that it is extremely easy to modify the layout, just edit the style sheet. No compilation is needed. Easy to do customized layouts.

It is also possible that your client isn’t a browser but something else. In that case data can still be translated into a suitable format.

(5)

Basic syntax rules

All tags must be closed,

<a> ... </a>

or

<a ... />

All elements must be properly nested

<a>

<b>

...

</b>

</a>

not

<a>

<b>

....

</a>

</b>

(6)

There must be a root/start tag.

<c>

<a>

bla bla

</a>

<b>

bla bla

</b>

</c>

not

<a>

bla bla

</a>

<b>

bla bla

</b>

(7)

An example with a proper header line

<?xml version=”1.0” encoding=”UTF-8” ?>

<!DOCTYPE person>

<person>

<firstname>

Fredrik

</firstname>

<lastname>

Ålund

</lastname>

<age>

32

</age>

</person>

The DOCTYPE is optional but can be used to specify the DTD that corresponds to the document type.

(8)

If you want to describe more than one person in the same way you cannot do,

<!DOCTYPE person>

<person>

<firstname>

Fredrik

</firstname>

<lastname>

Ålund

</lastname>

<age>

32

</age>

</person>

<person>

<firstname>

Annika

</firstname>

<lastname>

Ålund

</lastname>

<age>

28

(9)

You have to enclose this in an other document root like

<!DOCTYPE family>

<family>

<person>

<firstname>

Fredrik

</firstname>

<lastname>

Ålund

</lastname>

<age>

32

</age>

</person>

<person>

<firstname>

Annika

</firstname>

<lastname>

Ålund

</lastname>

<age>

28

</age>

</person>

</family>

(10)

Tags can have attributes, that is name/value pairs.

The values are enclosed within apostrophes or quotation marks.

<!DOCTYPE employee>

<employee department=”customer services”>

<firstname>

Fredrik

</firstname>

<lastname>

Ålund

</lastname>

<age>

32

</age>

</employee>

(11)

The CDATA sections

Sometimes you need to put binary data or special characters (such as >, &, <) in your document. The CDATA (Character Data) allows you to do that. This means that the data is passed through without inter- pretation.

E. g.

<element>

<! [CDATA [ 2 < 4 && 4 > 6]]>

</element>

(12)

To navigate in an XML document, you use XPath’s.

<!DOCTYPE employee>

<firstname>

Fredrik

</firstname>

<lastname>

Ålund

</lastname>

<age>

32

</age>

</employee>

The age here is referred as /employee/age

An attribute is referred as /employee/@department A predicate is something that is true or false. E. g employee[@department = “customer service”]

Valid ops are =, =!, < , <=, > , >=, and, or

(13)

To translate XML to HTML you use XSLT. You con- struct stylesheets that is used for translation.

Style sheets are valid XML files.

They describe the output and the transformation method.

(14)

Assume that we have the following XML-file:

<!DOCTYPE employees>

<employees>

<firstname>

Fredrik

</firstname>

<lastname>

Ålund

</lastname>

<age>

32

</age>

</employee>

<firstname>

Annika

</firstname>

<lastname>

Ålund

</lastname>

<age>

32

(15)

A style sheet to translate this can be

<xsl:stylesheet xmlns:xsl=”http://www.w3.org/1999/

XSL/Transform” version=”1.0”>

<xsl:output method=”html”/>

<xsl:template match=”/”>

<html><body>

<table border=”3” bgcolor=”yellow”>

<tr>

<th>Name</th>

<th>Department</th>

</tr>

<xsl:for-each select=”employees/employee”>

<tr>

<td><xsl:value-of-select=”firstname”/>,

<xsl:value-of-select=”lastname”/></td>

<td><xsl:value-of-select=”@department”/></td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

(16)

XSLT is a language that operates by matching different patterns to its input, thereby producing output.

This line matches the root element in an XML-file.

This is usually a virtual outer layer.

<xsl:template match=”/”>

Then we have the desired HTML-code that should be produced.

<html><body>

<table border=”3” bgcolor=”yellow”>

<tr>

<th>Name></th>

<th>Department</th>

</tr>

(17)

Then we have

<xsl:for-each select=”employees/employee”>

This will iterate through the file and select each employee.

Followed by

<tr>

<td><xsl:value-of-select=”firstname”/>,

<xsl:value-of-select=”lastname”/></td>

<td><xsl:value-of-select=”@department”/></td>

</tr>

These lines will get the value of the name tags and the parameter value for the current employee. Thus the iteration will walk through the file, and process all employees.

(18)

To use this, you setup a JSP like:

<c:set var=”employee_xslt”>

<c:import url=”employee.xsl”/>

</c:set>

<c:set var=”employee_xml”>

<c:import url=”employee.xml”/>

</c:set>

<x:transform xslt=”${employee_xslt}”

xml = “${employee_xml}”/>

This sets two variables and then calls the translator.

The result is written into the output.

(19)

Elements in XSLT

<xsl:template match=”XPath expression”>

....

</xsl:template>

Create an XSL template that later can be applied on the parts of the XML document that matches.

<xsl:apply-templates [select = “XPath expression”]/>

Apply the selected templates on all matching parts of your XML file. If the select parameter is omitted all templates will be applied.

(20)

<xsl:for-each select = “XPath expression”>

...

</xsl:for-each>

Iterates over the current scope and processes all matches for the XPath expression.

<xsl:if match = “XPath predicate”>

...

</xsl:if>

A conditional statement that test the predicate.

(21)

<xsl:value-of select=”name”/>

Returns the value of the name element

<xsl:value-of select=”@parameter”/>

Returns the value of the parameter. Must be in the current element, otherwise a full XPath must be given.

<xsl:text disable-output-escaping=”true|false”>

text, typical CDATA elements

</xsl:text>

Used to output text, mostly CDATA because this will allow special characters to pass through the translations unchanged.

(22)

XSL stylesheets must follow the XML rules therefore it can sometimes be difficult to output HTML

directly. This is because not all HTML tags have closing tags, or may be incorrectly nested.

In such cases you can use the XSL element tag.

<xsl:element name=”name”>

<xsl:attribute name=”blabla”>

value

</xsl:attribute>

...

</xsl:element>

(23)

JSTL contains the translators, in the XML tag library, usually prefixed with “x:”.

<x:transform xml=”xmlfile” xslt=”stylesheet”/>

or

<x:transform xslt=”stylesheet”>

xml document

<x:transform>

(24)

An example. Assume that we have our bookstore with our books. The JavaBean that loads the data from mySQL tables produces XML that describes my books. This is just a long string produced by the getXml method in the bean.

It goes like this:

<booklist>

<book>

<id>

1

</id>

<title>

<![CDATA[BUILDNING SCALABLE AND HIGH-PERFORMANCE JAVA WEB APPLICATIONS USING J2EE TECHNOLOGY]]>

</title>

<authorname>

<![CDATA[GREG]]>

</authorname>

<authorsurname>

<![CDATA[BARISH]]>

</authorsurname>

<price>

(25)

<![CDATA[A BOOK ABOUT BUILDNING SCALABLE AND

HIGH-PERFORMANCE JAVA WEB APPLICATIONS USING J2EE

TECHNOLOGY. THE BOOKS DESCRIBES HOW TO USE THE DIFFERENT PARTS OF J2EE TO BUILD A WEB APPLICATION]]>

</description>

</book>

<book>

... other books

</book>

</booklist>

(26)

This data should be presented like this:

(27)

The html for this goes like:

<html>

<head><title>BookShop::Shop</title></head>

<body>

<h2>Fredriks Book Shop</h2>

<table border=”0”>

<tr cellspacing=”0” bgcolor=”silver”>

<td>

<strong>Book</strong>

</td>

<td>

<strong>Author</strong>

</td>

<td>

<strong>Price</strong>

</td>

</tr>

<form action=”shop” method=”post”>

<tr bgcolor=”#FFDC75”>

<td>

BUILDNING SCALABLE AND HIGH-PERFORMANCE JAVA WEB APPLICATIONS USING J2EE TECHNOLOGY

</td>

<td>

BARISH, GREG

</td>

<td>

600

(28)

</td>

<td>

<input size=”2” type=”text”

value=”1” name=”quantity”>

</td>

<td><input value=”BUY”

type=”submit”>

<a href=”shop?action=

detail&bookid=1”>

Detail

</a>

</td>

</tr>

<input type=”hidden” value=”1”

name=”bookid”>

<input value=”add”

name=”action” type=”hidden”>

</form>

...

</table>

(29)

To translate this we have the following JSP

<%@page contentType=”text/html;charset=UTF-8”

pageEncoding=”ISO8859-1”

import=

”se.upright.education.uu.pvk.assignmen.two.beans.*, se.upright.education.uu.pvk.assignmenttwo.tags.*“

%>

<%@taglib prefix=”c”

uri=”http://java.sun.com/jsp/jstl/core”%>

<%@taglib prefix=”x”

uri=”http://java.sun.com/jstl/jsp/xml”%>

<%@taglib prefix=”bookshop” uri=”/bookshop”%>

<html>

<head><title>BookShop::Shop</title></head>

<body>

<h2>Fredriks Book Shop</h2>

<jsp:useBean id=”bookList”

class=”se.upright.education.uu.pvk.

assignmenttwo.beans.BookListBean”

scope=”application”>

Error, the bean should have been created in the servlet!

</jsp:useBean>

<c:set var=”booklist_xslt”>

<c:import url=”booklist_xslt.xsl”/>

</c:set>

<x:transform xslt=”${booklist_xslt}”>

<jsp:getProperty name=”bookList” property=”xml”/>

</x:transform>

</body>

</html>

(30)

And now all the fun, that is the style sheet.

<xsl:template match=”booklist”>

<table border=”0”>

<tr bgcolor=”silver” cellspacing=”0”>

<td>

<strong>Book</strong>

</td>

<td>

<strong>Author</strong>

</td>

<td>

<strong>Price</strong>

</td>

</tr>

<xsl:apply-templates/>

</table>

</xsl:template>

<xsl:template match=”book”>

<form method=”post” action=”shop”>

(31)

<xsl:value-of select=”authorsurname”/>,

<xsl:value-of select=”authorname”/>

</td>

<td>

<xsl:value-of select=”price”/>

</td>

<td>

<xsl:element name=”input”>

<xsl:attribute name=”size”>

2

</xsl:attribute>

<xsl:attribute name=”type”>

text

</xsl:attribute>

<xsl:attribute name=”value”>

1

</xsl:attribute>

<xsl:attribute name=”name”>

quantity</xsl:attribute>

</xsl:element>

</td>

<td>

<input type=”submit” value=”BUY”/>

<xsl:element name=”a”>

<xsl:attribute name=”href”>

<xsl:text disable-output-escaping=

”yes”>

<![CDATA[shop?action=detail&bookid=]]>

</xsl:text>

<xsl:value-of select=”id”/>

(32)

</xsl:attribute>

<xsl:text>Detail</xsl:text>

</xsl:element>

</td>

</tr>

hidden

</xsl:attribute>

<xsl:value-of select=”id”/>

</xsl:attribute>

bookid

</xsl:attribute>

</xsl:element>

<input type=”hidden” name=”action”

value=”add”/>

</form>

</xsl:template>

</xsl:stylesheet>

(33)

We start with the outermost <xsl:template> element.

That is implicitly applied. This means that it will search for a <booklist> element in the XML data, and that will set my current XPath.

Since we have a booklist tag in the XML data we will get a match and XSLT will start processing this tag.

It will output the html statements that it finds here.

Then there is a <xsl:apply-templates/>

This will cause XSLT to look for all other templates in the style sheet and apply them at the current posi- tion.

It will find the book template, so it will try to apply this. Since we are in <booklist> it will search for

<booklist/book>.

(34)

It will apply the template on the first book item.

That is, output the HTML form header.

Then it will build the table, first inserting the value of booklist/book/title then the rest. To produce an input tag that depends on variable data you need to use a xsl:element tag with the proper parameters, if your input tag is only constants you can output it in HTML.

When all of the book template is finished, XLST will iterate to see if there are more matches for booklist/

book. So the template will be applied for all books.

When no more matches are found, XLST will con- tinue in the booklist template again. This will just output the </table> tag and the finish up.

(35)

Another example is based on the following input

<shoppingcart>

<order>

<book>

book data

</book>

<quantity>

number of books ordered

</quantity>

</order>

<order>

....

</order

</shoppingcart>

(36)

We want do produce the following output

(37)

The producing HTML for this is

<table cellspacing=”0” border=”0”>

<tr bgcolor=”silver”>

<td colspan=”4”>

<strong>Shoppingcart</strong></td>

<td>Title</td>

<td>Quantity</td>

<td colspan=”2”>Remove</td>

</tr>

<form action=”shop” method=”post”>

<tr>

<td>

BUILDNING SCALABLE AND HIGH-PER- FORMANCE JAVA WEB APPLICATIONS USING J2EE TECHNOLOGY

</td>

<td align=”right”>

3

</td>

<td>

<input size=”2” type=”text” value=”1”

name=”quantity”>

</td>

<td>

<input value=”Remove” type=”submit”>

(38)

</td>

<input type=”hidden” value=”1”

name=”bookid”><input type=”hidden”

value=”remove” name=”action”>

</tr>

</form>

</table>

(39)

To produce this we have the following style sheet

<xsl:template match=”shoppingcart”>

<br /> <br />

<table border=”0” cellspacing=”0”>

<strong>Shoppingcart</strong>

</td>

</tr>

<td>Title</td>

<td>Quantity</td>

<td colspan=”2”>Remove</td>

</tr>

<xsl:apply-templates/>

<tr>

<a href=”shop?action=checkout”>

Checkout

</a>

</td>

(40)

</tr>

</table>

</xsl:template>

<xsl:template match=”order”>

<form method=”post” action=”shop”>

<tr>

<td>

<xsl:value-of select=”book/title”/>

</td>

<td align=”right”>

<xsl:value-of select=”quantity”/>

</td>

<td>

<xsl:attribute name=”size”>

2

</xsl:attribute>

text

</xsl:attribute>

1

</xsl:attribute>

(41)

<td>

<input type=”submit” value=”Remove”/>

</td>

hidden

</xsl:attribute>

<xsl:value-of select=”book/id”/>

</xsl:attribute>

bookid

</xsl:attribute>

</xsl:element>

hidden

</xsl:attribute>

remove

</xsl:attribute>

action

</xsl:attribute>

</xsl:element>

</tr>

</form>

</xsl:template>

</xsl:stylesheet>