CSIT128 / CSIT828
XSLT
Joseph Tonien
XSL
EXtensible Stylesheet Language (XSL) is a family of languages used to transform
and render XML documents:
XSL Transformation (XSLT): a language for transforming XML documents
XML Path Language (XPath): a language for navigating in XML documents
XQuery: a language for querying XML documents
XSLT
EXtensible Stylesheet Language Transformation (XSLT) is an XML language for
transforming XML documents
file extension is .xsl
used to transform XML file into other file formats, such as HTML
describes how the XML elements should be displayed.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/1999/xhtml">
... xslt code here ...
</xsl:stylesheet>
XSLT
Have a look at the XML file
http://www.uow.edu.au/~dong/w3/example/XSLT/transaction.xml
<?xml version="1.0" encoding="UTF-8" ?>
<dailyTransaction date="24/02/2015">
<person staffDbId="103" operation="update">
<firstName>John</firstName>
<lastName>Smith</lastName>
<mobile>0211223344</mobile>
</person>
<person staffDbId="-1" operation="add">
<firstName>Mary</firstName>
<lastName>Jane</lastName>
<mobile>0244556677</mobile>
</person>
...
</dailyTransaction>
XSLT
Example 1: Now have a look at the XML file
http://www.uow.edu.au/~dong/w3/example/XSLT/transaction1.xml
http://www.uow.edu.au/~dong/w3/example/XSLT/transaction1.xml
XSLT
The content of transaction1.xml is exactly the same as transaction.xml,
except that it uses an xml stylesheet: transaction-style1.xsl
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="transaction-style1.xsl"?>
<dailyTransaction date="24/02/2015">
<person staffDbId="103" operation="update">
<firstName>John</firstName>
<lastName>Smith</lastName>
<mobile>0211223344</mobile>
</person>
<person staffDbId="-1" operation="add">
<firstName>Mary</firstName>
<lastName>Jane</lastName>
<mobile>0244556677</mobile>
</person>
...
</dailyTransaction>
XSLT
Let’s look at the xml stylesheet: transaction-style1.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/dailyTransaction">
<html>
<head>
<title>XSLT example</title>
</head>
<body>
<h1>Daily transaction <xsl:value-of select="@date" /> </h1>
<ul>
<xsl:for-each select="person">
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
<xsl:text>, </xsl:text>
<xsl:value-of select="mobile" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@staffDbId" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@operation" />
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
XSLT
Let’s look at the xml stylesheet: transaction-style1.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/dailyTransaction">
<html>
<head>
<title>XSLT example</title>
</head>
<body>
<h1>Daily transaction <xsl:value-of select="@date" /> </h1>
<ul>
<xsl:for-each select="person">
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
<xsl:text>, </xsl:text>
<xsl:value-of select="mobile" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@staffDbId" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@operation" />
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
XSLT
Let’s look at the xml stylesheet: transaction-style1.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/dailyTransaction">
<html>
<head>
<title>XSLT example</title>
</head>
<body>
<h1>Daily transaction <xsl:value-of select="@date" /> </h1>
<ul>
<xsl:for-each select="person">
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:text>, </xsl:text>
<dailyTransaction date="24/02/2015">
<xsl:value-of select="mobile" /> <person staffDbId="103" operation="update">
<xsl:text>, </xsl:text> <firstName>John</firstName>
<lastName>Smith</lastName>
<xsl:value-of select="@staffDbId" /> <mobile>0211223344</mobile>
<xsl:text>, </xsl:text> </person>
<person staffDbId="-1" operation="add">
<xsl:value-of select="@operation" /> <firstName>Mary</firstName>
</li> <lastName>Jane</lastName>
<mobile>0244556677</mobile>
</xsl:for-each> </person>
</ul> ...
</body> </dailyTransaction>
</html>
</xsl:template>
</xsl:stylesheet>
XSLT
Let’s look at the xml stylesheet: transaction-style1.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/dailyTransaction">
<html>
<head>
<title>XSLT example</title>
</head>
<body>
<h1>Daily transaction <xsl:value-of select="@date" /> </h1>
<ul>
<xsl:for-each select="person">
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:text>, </xsl:text>
<dailyTransaction date="24/02/2015">
<xsl:value-of select="mobile" /> <person staffDbId="103" operation="update">
<xsl:text>, </xsl:text> <firstName>John</firstName>
<lastName>Smith</lastName>
<xsl:value-of select="@staffDbId" /> <mobile>0211223344</mobile>
<xsl:text>, </xsl:text> </person>
<person staffDbId="-1" operation="add">
<xsl:value-of select="@operation" /> <firstName>Mary</firstName>
</li> <lastName>Jane</lastName>
<mobile>0244556677</mobile>
</xsl:for-each> </person>
</ul> ...
</body> </dailyTransaction>
</html>
</xsl:template>
</xsl:stylesheet>
XSLT
Let’s look at the xml stylesheet: transaction-style1.xsl
<h1>Daily transaction <xsl:value-of select="@date" /> </h1>
select="@date"
means the attribute
<?xml version="1.0" encoding="UTF-8" ?>
<dailyTransaction date="24/02/2015">
<person staffDbId="103" operation="update">
<firstName>John</firstName>
<lastName>Smith</lastName>
<mobile>0211223344</mobile>
</person>
<person staffDbId="-1" operation="add">
<firstName>Mary</firstName>
<lastName>Jane</lastName>
<mobile>0244556677</mobile>
</person>
...
</dailyTransaction>
XSLT
Let’s look at the xml stylesheet: transaction-style1.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/dailyTransaction">
<html>
<head>
<title>XSLT example</title>
</head>
<body>
<h1>Daily transaction <xsl:value-of select="@date" /> </h1>
<ul>
<xsl:for-each select="person">
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:text>, </xsl:text> <dailyTransaction date="24/02/2015">
<xsl:value-of select="mobile" /> <person staffDbId="103" operation="update">
<xsl:text>, </xsl:text> <firstName>John</firstName>
<xsl:value-of select="@staffDbId" /> <lastName>Smith</lastName>
<mobile>0211223344</mobile>
<xsl:text>, </xsl:text> </person>
<xsl:value-of select="@operation" /> <person staffDbId="-1" operation="add">
</li> <firstName>Mary</firstName>
</xsl:for-each>
<lastName>Jane</lastName>
<mobile>0244556677</mobile>
</person>
</ul> ...
</body> </dailyTransaction>
</html>
</xsl:template>
</xsl:stylesheet>
XSLT
Let’s look at the xml stylesheet: transaction-style1.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xml" indent="yes" encoding="UTF-8"/>
<xsl:template match="/dailyTransaction">
<html>
<head>
<title>XSLT example</title>
</head>
<body>
<h1>Daily transaction <xsl:value-of select="@date" /> </h1>
<ul>
<xsl:for-each select="person">
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" /> <?xml version="1.0" encoding="UTF-8" ?>
<xsl:text>, </xsl:text> <dailyTransaction date="24/02/2015">
<xsl:value-of select="mobile" /> <person staffDbId="103" operation="update">
<xsl:text>, </xsl:text> <firstName>John</firstName>
<xsl:value-of select="@staffDbId" /> <lastName>Smith</lastName>
<mobile>0211223344</mobile>
<xsl:text>, </xsl:text> </person>
<xsl:value-of select="@operation" /> <person staffDbId="-1" operation="add">
</li> <firstName>Mary</firstName>
</xsl:for-each>
<lastName>Jane</lastName>
<mobile>0244556677</mobile>
</person>
</ul> ...
</body> </dailyTransaction>
</html>
</xsl:template>
XSLT
<ul>
<xsl:for-each select="person">
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
<xsl:text>, </xsl:text>
<xsl:value-of select="mobile" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@staffDbId" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@operation" />
</li>
</xsl:for-each>
</ul>
<person staffDbId="103" operation="update">
<firstName>John</firstName>
<lastName>Smith</lastName>
<mobile>0211223344</mobile>
</person>
XSLT
<ul>
<xsl:for-each select="person"> this is an element
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
<xsl:text>, </xsl:text> this is an attribute
<xsl:value-of select="mobile" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@staffDbId" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@operation" />
</li>
</xsl:for-each>
</ul>
<person staffDbId="103" operation="update">
<firstName>John</firstName>
<lastName>Smith</lastName>
<mobile>0211223344</mobile>
</person>
XSLT
<ul>
<xsl:for-each select="person">
<li>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
<xsl:text>, </xsl:text>
<xsl:value-of select="mobile" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@staffDbId" />
<xsl:text>, </xsl:text>
<xsl:value-of select="@operation" />
</li>
</xsl:for-each>
</ul>
<person staffDbId="103" operation="update">
<firstName>John</firstName>
<lastName>Smith</lastName>
<mobile>0211223344</mobile>
</person>
XSLT
Example 2: Now look at transaction2.xml, it uses an xml stylesheet:
transaction-style2.xsl
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="transaction-style2.xsl"?>
<dailyTransaction date="24/02/2015">
<person staffDbId="103" operation="update">
<firstName>John</firstName>
<lastName>Smith</lastName>
<mobile>0211223344</mobile>
</person>
<person staffDbId="-1" operation="add">
<firstName>Mary</firstName>
<lastName>Jane</lastName>
<mobile>0244556677</mobile>
</person>
...
</dailyTransaction>
XSLT
View the source of the xml stylesheet: transaction-style2.xsl
we can see that it displays a table
http://www.uow.edu.au/~dong/w3/example/XSLT/transaction2.xml
XSLT
View the source of the xml stylesheet: transaction-style2.xsl
we can see that it displays a table
<xsl:for-each select="person">
<xsl:sort select="lastName"/>
<tr>
...
</tr>
</xsl:for-each>
XSLT
Example 3: Compare transaction-style2.xsl with transaction-style3.xsl
<table border="1">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Staff Id</th>
<th>Operation</th>
</tr>
<xsl:apply-templates select="person">
<xsl:sort select="lastName" />
</xsl:apply-templates>
</table>
https://www.w3schoo
ls.com/xml/xsl_apply
_templates.asp
XSLT
Now compare transaction-style2.xsl with transaction-style3.xsl
<xsl:template match="person">
<tr>
<td>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
</td>
<td>
<xsl:value-of select="mobile" />
</td>
<td>
<xsl:value-of select="@staffDbId" />
</td>
<td>
<xsl:value-of select="@operation" />
</td>
</tr>
</xsl:template>
XSLT
Example 4: Now look at transaction4.xml
http://www.uow.edu.au/~dong/w3/example/XSLT/transaction4.xml
XSLT
Now look at transaction-style4.xsl
<xsl:choose>
<xsl:when test="@operation = 'remove'">
<td bgcolor="#ffe6e6">
<xsl:value-of select="@operation" />
</td>
</xsl:when>
<xsl:when test="@operation = 'add'">
<td bgcolor="#ffffe6">
<xsl:value-of select="@operation" />
</td>
</xsl:when>
<xsl:otherwise>
<td bgcolor="#d6f5d6">
<xsl:value-of select="@operation" />
</td>
</xsl:otherwise>
</xsl:choose>
XSLT
Example 5: Now look at transaction5.xml
http://www.uow.edu.au/~dong/w3/example/XSLT/transaction5.xml
XSLT
Now look at transaction-style5.xsl
<xsl:choose>
<xsl:when test="mobile = ''">
<td bgcolor="#ffe6e6"> </td>
</xsl:when>
<xsl:otherwise>
<td> <xsl:value-of select="mobile" /> </td>
</xsl:otherwise>
</xsl:choose>
XSLT
Example 6: Now look at transaction6.xml
http://www.uow.edu.au/~dong/w3/example/XSLT/transaction6.xml
XSLT
Now look at transaction-style6.xsl
<xsl:for-each select="person[@operation='add']">
<xsl:sort select="lastName"/>
<tr>
<td>
<xsl:value-of select="firstName" />
<xsl:text> </xsl:text>
<xsl:value-of select="lastName" />
</td>
<td>
<xsl:value-of select="mobile" />
</td>
<td>
<xsl:value-of select="@staffDbId" />
</td>
<td>
<xsl:value-of select="@operation" />
</td>
</tr>
</xsl:for-each>
XSLT
Example 7: Now look at transaction7.xml
http://www.uow.edu.au/~dong/w3/example/XSLT/transaction7.xml
XSLT
Now look at transaction-style7.xsl
...
<td>
<xsl:value-of select="@staffDbId" />
</td>
<td align="center">
<img>
<xsl:attribute name="src">
<xsl:text>images/</xsl:text>
<xsl:value-of select="@operation"/>
<xsl:text>.png</xsl:text>
</xsl:attribute>
<xsl:attribute name="width">
<xsl:text>30px</xsl:text>
</xsl:attribute>
</img>
</td>
...
XSLT
Example 8: Now look at transaction8.xml
http://www.uow.edu.au/~dong/w3/example/XSLT/transaction8.xml
XSLT
Now look at transaction-style8.xsl
...
<td>
<xsl:choose>
<xsl:when test="number(@staffDbId) < 0">
<span style="color:red">
<xsl:value-of select="@staffDbId" />
</span>
</xsl:when>
<xsl:otherwise>
<span style="color:green">
<xsl:value-of select="@staffDbId" />
</span>
</xsl:otherwise>
</xsl:choose>
</td>
...
References
http://www.w3schools.com/xsl
Robert W. Sebesta, Programming the World Wide Web, Pearson.