Week 6 - XSLT

Internet Technologies and Web

Services
 Aims of the lecture
• At the end of today’s lecture students should
be able to
– Understand what XSLT is
– Use XSLT to format an XML file
 XSLT
• XSL - describes how an XML file should be
displayed
– XSLT – Used to transform the XML file
– XPath – Used to locate sections and data in the
XML document

• XSLT is a language for transforming the

structure and content of an XML document.
 Why is transformation of the
XML document required?
• Store in one format, display in another.
• For example, Transforming XML to XHTML and
displaying in browser.
• Transforming into what?
– Other XML file (with different structure)
– HTML (XHTML)
– PDF
– Other format depending on XSLT file.
 XML/XSLT Tree
• Similar to the DOM
• Every item (element, attribute, processing
instructions) in an XML document is
represented as a node in the tree.
• XSLT processor navigates/manipulates these
nodes based on instruction supplied in the
XSLT file.
 XPath
• When writing code to process XML, often specific
parts of an XML document need to be accessed
for processing in a particular way.
• The XML Path Language, XPath, is used for this.
• XPath is a syntax for defining parts of an XML
document.
• XPath uses path expressions to navigate in XML
documents.
• XPath contains a library of standard functions.
 XPath Nodes
• In XPath 1.0 there are seven types of nodes:
• Root node – represents the document itself
• Element node - each element in an XML document is
represented as an element node
• Attribute node - each attribute in an XML document is
represented as an attribute node.
• Text node – represents the text content
• Namespace node – represents in-scope namespaces
• Comment node – represents a comment
• Processing Instruction node – represents any
processing instruction
 Xpath (2)
• XPath can be thought of as street directions around a
hierarchical tree of nodes that make up the XPath data
model
• Street directions can be given in 2 ways:
– Relative to a fixed point
– Relative to the current position
• In XPath,
– Absolute XPath expressions always start from a standard
point, the root node
– Relative node expressions start from any node which is
then called the context. The context indicates the node
where the processor start
 XPath Syntax
• XPath uses path expressions to select nodes in
an XML document. The node is selected by
following a path or steps. The most useful
path expressions are listed below:

Source:http://www.wschools.com
XSLT Tree Structure
 Feedback.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<feedback>
<module>Feedback for the module
<studentemail>s1@uom.ac.mu</studentemail>
<modulename code="CSE2041">Web Tech
II</modulename>
<moduleyear>2008</moduleyear>
<classsize>Adequate</classsize>
<deliverymode>yes</deliverymode>
<labs></labs>
</module>
 Feedback.xml (continued)

<module>
<studentemail>s3@uom.ac.mu</studentemail>
<modulename code="CSE1041">Web Tech I</modulename>
<moduleyear>2010</moduleyear>
<classsize>Adequate</classsize>
</module><module>
<studentemail>s3@uom.ac.mu</studentemail>
<modulename code="CSE2041">Web Tech II</modulename>
<moduleyear>2010</moduleyear>
<classsize>Adequate</classsize>
</module></feedback>
 Examples of Expressions

feedback
selects all child nodes of the feedback element
returns module
/feedback
Selects the root element, feedback
//module
Selects all module elements
 Xpath Expressions
• The primary syntactic construct in XPath is
the expression.
• These path expressions are to select nodes
or node-sets in an XML document.
• An expression is made of 3 parts:
An axis
A node test
An optional predicate
 XPath Expressions(2)
The node test is used to specify what type of
node in the axis should be selected.
For example, to select all child element nodes
of feedback element nodes that are module
element nodes, you could write the following:
/feedback/module
The initial / character indicates that the context
node is the root node.
 XPath Expressions(3)

/feedback/module
The next location step, feedback, selects all
feedback element nodes in the child axis.
The second location step is module, which
selects module element nodes in the child
axis.
The | can be used to select more than one path
in XPath
e.g. //module/studentemail | //module/classsize
Selects all the studentemail AND classsize elements of
all modules elements
 Predicates

XPath allows you to filter nodes selected from an axis

using predicates.
Predicates are used to find a specific node or a node
that contains a specific value.
A predicate consists of an expression, called a
predicate expression, enclosed in square brackets.
A predicate is optional in each location step of an
XPath expression, and there can be more than one
predicate in any one location step
XPath functions are used to find predicates.
 Xpath Functions

Boolean and String functions are

available
Most common Boolean functions are:
boolean(), false(), lang(), not(), true(), count(),
last(), name(), position(), id(), floor(), round(),
sum()
Most common String functions are:
concat(), contains(), string(), string-length(),
substring-after(), substring-before()
 Examples of Predicates

/feedback/module[1] - Selects the first module

element that is the child of the feedback element.
/feedback/module[last()] – selects the last module
element that is the child of the feedback element
//modulename[@code='CSE2041'] - Selects all the
modulename elements that have an attribute
named code with a value of 'CSE2041'
/feedback/module[moduleyear>2009] - Selects all
the module elements of the feedback element that
have a moduleyear element with a value greater
than 2009
Screenshot of the above
 Wildcards

XPath wildcards can be used to select unknown

XML elements.

Path Expression Result

/feedback/* Selects all the child nodes of the feedback element
//* Selects all elements in the document
//modulename[@*] Selects all modulename elements which have any attribute
Source:http://www.wschools.com
 Examples of Predicates

@* selects all the attributes of the context

node
text() selects all text node children of the
context node
.. selects the parent of the context node
../@code selects the code attribute of the
parent of the context node
 XSLT
• XSLT is a declarative programming language, written in
XML, for converting XML to some other output.
• An XSLT processor is a piece of software that accepts an
XML document (the source document), applies an XSLT
stylesheet to it, and produces another document called
the result document, which can be XML, HTML, or plain
text.
• XSLT stylesheet is an XML document by itself
• It consists of a set of rules that match patterns in input
XML document
• The rules declare what output should be produced when
a pattern in the XML document is matched
 Feedback.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="feedback.xslt"?>
<feedback>
<module>Feedback for the module
<studentemail>s1@uom.ac.mu</studentemail>
<modulename code="CSE2041">Web Tech
II</modulename>
<moduleyear>2008</moduleyear>
<classsize>Adequate</classsize>
<deliverymode>yes</deliverymode>
<labs></labs>
</module>…</feedback>
 Simple XSLT – displaying
simple HTML tags
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html> <body> <h2>Feedback provided</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Student Email</th> <th>Module Name</th> </tr>
<tr> <td>.</td> <td>.</td> </tr>
</table> </body> </html>
</xsl:template>
</xsl:stylesheet>
Viewing feedback.xml in firefox
 XSLT – displaying one piece of
info
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html> <body> <h2>Feedback provided</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Student Email</th> <th>Module Name</th> </tr>
<tr> <td><xsl:value-of
select="feedback/module/studentemail/text()"/></td>
<td><xsl:value-of
select="feedback/module/modulename/text()"/></td>
</tr>
</table> </body> </html>
</xsl:template>
Viewing feedback.xml in firefox
 Predicates and Position
• To retrieve values for the all the modules, a select instruction needs
to be executed after the first selection for Web Tech II.
• The following code would achieve this:
<tr> <td><xsl:value-of
select="feedback/module[1]/studentemail/text()"/></td> <td><xsl:value-
of select="feedback/module[1]/modulename/text()"/></td> </tr>
<tr> <td><xsl:value-of
select="feedback/module[2]/studentemail/text()"/></td> <td><xsl:value-
of select="feedback/module[2]/modulename/text()"/></td> </tr>
• Predicate [1] and [2] (position in the tree) are added to the module
element to get the required result.
• What if there was 1k modules? Would you duplicate the codes 1000
times?
 Loop

• Instead of using predicates, an easier way of displaying the modules

is via a loop. The following 2 pieces of code achieve the same result
as the previous codes.
• <xsl:for-each select=“feedback/module">
• <xsl:for-each select=“//module">
• The for-each provides the looping mechanism. The value of the
select indicate the nodes to recur. Since it has the //, the Xpath will
match the module element anywhere in the XML tree, even if
<module> elements were found under an <oldmodule> element.
• If you want to match only module nodes that are under the root
Modules, use the value /feedback/module in the select attribute
 The XSLT file – looping through
the whole doc to display info
<?xml version="1.0" <xsl:for-each
encoding="ISO-8859-1"?> select=“feedback/module">
<xsl:stylesheet version="1.0" <tr>
xmlns:xsl="http://www.w3.or
g/1999/XSL/Transform"> <td><xsl:value-of
<xsl:template match="/"> select=“studentemail/text()"/
<html> <body> <h2>Feedback ></td>
provided</h2> <td><xsl:value-of
<table border="1"> select=“modulename/text()"
<tr bgcolor="#9acd32"> /></td>
<th>Student Email</th> </tr>
<th>Module Name</th> </xsl:for-each>
</tr> </table> </body> </html>
</xsl:template>
</xsl:stylesheet>
Viewing feedback.xml in firefox
 Filtering the output
…
<table border="1">
<tr bgcolor="#9acd32">
<th>Student Email</th> <th>Module Name</th> </tr>
<xsl:for-each
select="feedback/module[modulename='Web Tech
II']">
<tr><td><xsl:value-of
select=“studentemail/text()"/></td>
<td><xsl:value-of select=“modulename/text()"/></td>
</tr> </xsl:for-each> </table> </body> </html>
</xsl:template></xsl:stylesheet>
Viewing feedback.xml in firefox
Sorting the data
…
<xsl:for-each select="feedback/module">
<xsl:sort select="modulename"/>
<tr><td><xsl:value-of
select="studentemail"/></td>
<td><xsl:value-of select="modulename"/></td>
</tr>
</xsl:for-each> </table> </body> </html>
</xsl:template>
</xsl:stylesheet>
Viewing feedback.xml in firefox
Conditional testing

The <xsl:if> and the <xsl:choose> can be

used to perform conditional testing
<xsl:choose> is used with <xsl:when>
and <xsl:otherwise> for multiple
conditional testing
The <xsl:if> Element

The syntax:
<xsl:if test="expression">
... ...
some output if the expression is true
... ...
</xsl:if>
 Using a condition with the data
…
<table><tr bgcolor="#9acd32">
<th>Student Email</th> <th>Module Name</th>
<th>Year</th></tr>
<xsl:for-each select="feedback/module">
<xsl:if test="moduleyear &gt; 2009">
<tr> <td><xsl:value-of select="studentemail"></td>
<td><xsl:value-of select="modulename"/></td>
<td><xsl:value-of select="moduleyear"/></td>
</tr></xsl:if></xsl:for-each></table>…
Viewing feedback.xml in firefox
The <xsl:choose> Element
The syntax:
<xsl:choose>
<xsl:when test="expression">
... some output ...
</xsl:when>
<xsl:otherwise>
... some output ....
</xsl:otherwise>
</xsl:choose>
 Using multiple conditions with
the data
<xsl:for-each select="feedback/module">
<tr><td><xsl:value-of select="studentemail/."/></td>
<td><xsl:value-of select="modulename/."/></td>
<xsl:choose>
<xsl:when test="moduleyear &gt; 2009">
<td bgcolor="#ff00ff"><xsl:value-of
select="moduleyear/text()"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="moduleyear/."/></td>
</xsl:otherwise>
</xsl:choose> </tr></xsl:for-each> </table>
Viewing feedback.xml in firefox
 Multiple <xsl:when> tags
<xsl:choose>
<xsl:when test="moduleyear &gt; 2009">
<td bgcolor="#ff00ff"><xsl:value-of
select="moduleyear"/></td>
</xsl:when>
<xsl:when test="moduleyear &gt; 2007">
<td bgcolor="#cccccc"><xsl:value-of
select="moduleyear"/></td>
</xsl:when>
<xsl:otherwise>
<td><xsl:value-of select="moduleyear"/></td>
</xsl:otherwise> </xsl:choose>
Viewing feedback.xml in firefox
 Default or fixed values

 Attributes can have a default value OR a

fixed value specified.
 The default value is used when no other
value has been used.
<xsd:attribute name="lang"
type="xsd:string" default="EN"/>
 The fixed value is the only value that the
attribute can take.
<xsd:attribute name="lang"
type="xsd:string" fixed="EN"/>
Optional or Required values

 Attributes are optional by default

 But they can be explicitly declared as
optional
<xsd:attribute name="lang"
type="xsd:string" use="optional"/>
 Attributes can also be required
<xsd:attribute name="lang"
type="xsd:string" use=" required"/>
 Variables in XSLT
• The <xsl:variable> element is used to declare a
local or global variable.
• The variable is global if it is declared as a top-level
element, and local if it is declared within a
template.
• Once you have set a variable's value, you cannot
change or modify that value!
• You can add a value to a variable by the content
of the <xsl:variable> element OR by the select
attribute.
 Syntax and Attributes
• <xsl:variable
name="name"
select="expression">
<!-- Content:template -->
</xsl:variable>
Attribute Value Description
Required. Specifies the name of the
name name
variable
Optional. Defines the value of the
select expression
variable
 Example using variables in XSLT
• You want to display the
percentage of departmental
credit completed as shown in
the figure.
• No of departmental credits
required: 99
• According to the previous
example, you have completed 12
credits (the 3 modules are all
departmental)
• You would need to use a variable
to hold the no. of departmental
credits required.
 The XSLT
• The following lines are added before the <xsl:template
match="/">:
<xsl:variable name="deptCredit" select="99"/>
1. The following lines are added after the retrieval of the
modules data (i.e., after the </xsl:for-each>)
<tr><td colspan="3">Departmental credits needed:
<xsl:value-of select="$deptCredit"/></td></tr>
<tr><td colspan="3">Percentage cleared: <strong>
<xsl:value-of select="format-
number(sum(Modules/module/credit/text()) div
$deptCredit,'##.##%')"/></strong>
</td></tr>
 Exercise 1
• Given the xml below, produce the output.
<Modules>
<module code="CSE2041">
<name>Web Technologies II</name>
<credit>3</credit>
<level>2</level>
</module>
<module code="CSE2031Y">
<name>Object Oriented Software Development</name>
<credit>6</credit>
<level>2</level>
</module>
<module code="CSE1041">
<name>Web Technologies I</name>
<credit>3</credit>
<level>1</level>
</module>
</Modules>
 References
• Examples come from:
http://www.learn-xml-schema-
tutorial.com/Complex-Type-Elements.cfm
• http://www.w3schools.com/
• http://www.liquid-technologies.com/
• http://www.w3.org
• http://www.liquid-technologies.com/
• XML Unleashed
• Beginning XML