Scribd
Upload
32 views

Csit884 L08a XSLT

The document describes how XSLT is used to transform XML documents into other formats like HTML. It provides an example of transforming an XML exam timetable into HTML. The key points are: 1) XSLT uses XSL stylesheet files with the .xsl extension to describe how to transform XML elements; 2) The example shows an XML exam timetable being transformed into HTML using <xsl:value-of> elements to extract values from the XML elements and attributes; 3) <xsl:value-of> can retrieve the value of an attribute using @attribute-name or an element's value using its name.

Uploaded by

harimessi619
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Csit884 L08a XSLT

The document describes how XSLT is used to transform XML documents into other formats like HTML. It provides an example of transforming an XML exam timetable into HTML. The key points are: 1) XSLT uses XSL stylesheet files with the .xsl extension to describe how to transform XML elements; 2) The example shows an XML exam timetable being transformed into HTML using <xsl:value-of> elements to extract values from the XML elements and attributes; 3) <xsl:value-of> can retrieve the value of an attribute using @attribute-name or an element's value using its name.

Uploaded by

harimessi619
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

CSIT884

Web Development
XSLT
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.

The content of the stylesheet XSL file looks like the following:
<?xml version="1.0"?>
<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> 2
Example: Exam timetable
This is an XML data representing exam information for a particular subject:
<exam subject="MATH 2113">
<title>Abstract Algebra</title>
<venue>20.G01</venue>
<date>15/11/2018</date>
<time>1PM-4PM</time>
<note>Closed book exam, calculator allowed</note>
</exam>

We would like to transform this XML content into the following HTML display:

3
Example: Exam timetable
exam.xml
<?xml version="1.0" ?>
<exam subject="MATH 2113">
<title>Abstract Algebra</title>
<venue>20.G01</venue>
<date>15/11/2018</date>
<time>1PM-4PM</time>
<note>Closed book exam, calculator allowed</note>
</exam>
exam-with-style.xml
<?xml version="1.0" ?>
<?xml-stylesheet type="text/xsl" href="style-exam.xsl"?>
<exam subject="MATH 2113">
<title>Abstract Algebra</title>
<venue>20.G01</venue>
<date>15/11/2018</date>
<time>1PM-4PM</time>
<note>Closed book exam, calculator allowed</note>
</exam>
These two XML files have almost the same content.
4
The 2nd one has a reference to a stylesheet. Let’s look at them on a browser.
Example: Exam timetable
exam.xml

exam-with-style.xml

On web browser, the two XML files display differently.

This is because the second XML uses a stylesheet.


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

5
Let’s have a look at the stylesheet file
Example: Exam timetable
Let’s have a look at the stylesheet file: style-exam.xsl
<?xml version="1.0"?>
<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="/exam">

<html>

<head>
<title>XSLT example</title>
</head>

<body> What do you see in this stylesheet file:


...
</body>
style-exam.xsl

</html>
</xsl:template>
6
</xsl:stylesheet>
Example: Exam timetable
Stylesheet file: style-exam.xsl
<?xml version="1.0"?>
<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="/exam">

<html> this is the root element


of the XML file
<head>
<title>XSLT example</title>
</head>

<body>
<?xml version="1.0" ?>
...
</body> < exam subject="MATH 2113">
<title>Abstract Algebra</title>
<venue>20.G01</venue>
</html> <date>15/11/2018</date>
<time>1PM-4PM</time>
</xsl:template> <note>Closed book exam, calculator allowed</note>
</xsl:stylesheet> </ exam> 7
Example: Exam timetable
Stylesheet file: style-exam.xsl
<?xml version="1.0"?>
<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="/exam">

<html> this looks like HTML code,


<head> that’s why the XML file is
<title>XSLT example</title> displayed on the browser
</head> as HTML
<body>
...
</body>

</html>
</xsl:template>
8
</xsl:stylesheet>
Example: Exam timetable
Stylesheet file: style-exam.xsl
<?xml version="1.0"?>
<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="/exam">

<html>

<head>
<title>XSLT example</title>
</head> Let’s have a look at this
code in more detail
<body>
...
</body>

</html>
</xsl:template>
9
</xsl:stylesheet>
Example: Exam timetable
Stylesheet file: style-exam.xsl
...
<body>
<div align="center" style="background-color:#f0371930">
<h1>
<xsl:value-of select="@subject" />
<xsl:text>: </xsl:text>
<xsl:value-of select="title" />
</h1>
<font size="6" color="green">
<xsl:value-of select="venue" />
<br />
<xsl:value-of select="date" />
<xsl:text>, </xsl:text>
<xsl:value-of select="time" />
</font>
<br />
<xsl:value-of select="note" />
</div>
</body> 10
...
Example: Exam timetable
Stylesheet file: style-exam.xsl
...
<body>
<div align="center" style="background-color:#f0371930">
<h1>
<xsl:value-of select="@subject" />
<xsl:text>: </xsl:text>
<xsl:value-of select="title" />
</h1>
<font size="6" color="green">
<xsl:value-of select="venue" />
<br />
<xsl:value-of select="date" />
<xsl:text>, </xsl:text>
<xsl:value-of select="time" />
</font>
<br />
<xsl:value-of select="note" />
</div>
</body> 11
...
Example: Exam timetable
Stylesheet file: style-exam.xsl
...
<xsl:value-of select="@subject" /> MATH 2113
<xsl:text>: </xsl:text>
<xsl:value-of select="title" />

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


Get value from attribute
<xsl:value-of select="date" />
<xsl:text>, </xsl:text>
<xsl:value-of select="time" />

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


...

<?xml version="1.0" ?>


<exam subject="MATH 2113">
<title>Abstract Algebra</title>
<venue>20.G01</venue>
<date>15/11/2018</date>
<time>1PM-4PM</time>
<note>Closed book exam, calculator allowed</note>
</exam>
12
Example: Exam timetable
Stylesheet file: style-exam.xsl
... Get value from element
<xsl:value-of select="@subject" />
<xsl:text>: </xsl:text>
<xsl:value-of select="title" /> Abstract Algebra

<xsl:value-of select="venue" /> 20.G01

<xsl:value-of select="date" /> 15/11/2018


<xsl:text>, </xsl:text>
<xsl:value-of select="time" /> 1PM-4PM

<xsl:value-of select="note" /> Closed book exam,


... calculator allowed

<?xml version="1.0" ?>


<exam subject="MATH 2113">
<title>Abstract Algebra</ title>
<venue>20.G01</venue>
<date>15/11/2018</ date>
<time>1PM-4PM</ time>
<note>Closed book exam, calculator allowed</ note>
</exam>
13
Example: Exam timetable
Stylesheet file: style-exam.xsl
...
<xsl:value-of select="@subject" />
<xsl:text>: </xsl:text>
Write literal text
<xsl:value-of select="title" />

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

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


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

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


...

<?xml version="1.0" ?>


<exam subject="MATH 2113">
<title>Abstract Algebra</title>
<venue>20.G01</venue>
<date>15/11/2018</date>
<time>1PM-4PM</time>
<note>Closed book exam, calculator allowed</note>
</exam>
14
Example: Exam timetable
Stylesheet file: style-exam.xsl
...
<body>
<div align="center" style="background-color:#f0371930">
<h1>
MATH 2113 select="@subject" />
<xsl:value-of
<xsl:text>:
: </xsl:text>
Abstract Algebra
<xsl:value-of select="title" />
</h1>
<font size="6" color="green">
20.G01
<xsl:value-of select="venue" />
<br />
15/11/2018 select="date" />
<xsl:value-of
,
<xsl:text>, </xsl:text>
<xsl:value-of
1PM-4PM select="time" />
</font>
<br />
<xsl:value-of select="note" />
Closed book...
</div>
</body> 15
...
Summary

Get attribute value:

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

Get element value:


<xsl:value-of select="element-name" />

Literal text:

<xsl:text>some text here ...</xsl:text>

16
Example: Transaction v0
transaction0.xml uses stylesheet transaction-style0.xsl

<?xml version="1.0" ?>


<?xml-stylesheet type="text/xsl" href="transaction-style0.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>

17
Example: Transaction v0
Have a look at the XML file transaction0.xml in the browser

http://www.uow.edu.au/~dong/w3/example/XSLT/transaction1.xml

18
Example: Transaction v0
Let’s look at the xml stylesheet: transaction-style0.xsl
...
<xsl:template match="/dailyTransaction">
<html>
<head>
<title>XSLT example</title>
</head>
<dailyTransaction date="24/02/2015">
<body>
... <person staffDbId="103" operation="update">
<firstName>John</firstName>
</body> <lastName>Smith</lastName>
</html> <mobile>0211223344</mobile>
</person>
</xsl:template> <person staffDbId="-1" operation="add">
<firstName>Mary</firstName>
...
<lastName>Jane</lastName>
<mobile>0244556677</mobile>
</person>
...
</dailyTransaction>

19
Example: Transaction v0
Let’s look at the xml stylesheet: transaction-style0.xsl
...
<body>
<xsl:value-of select="@date" /> <br /><br />

<xsl:for-each select="person">

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


<br />

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


<br />

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


<br /> <dailyTransaction date="24/02/2015">
<person staffDbId="103" operation="up
<xsl:value-of select="@staffDbId" /> <firstName>John</firstName>
<br /> <lastName>Smith</lastName>
<mobile>0211223344</mobile>
<xsl:value-of select="@operation" /> </person>
<br /> <person staffDbId="-1" operation="add
<br /> <firstName>Mary</firstName>
<lastName>Jane</lastName>
</xsl:for-each> <mobile>0244556677</mobile>
</body> </person>
... ... 20
</dailyTransaction>
Example: Transaction v0
Let’s look at the xml stylesheet: transaction-style0.xsl
...
<body>
<xsl:value-of select="@date" /> <br /><br />

<xsl:for-each select="person"> FOR LOOP


<xsl:value-of select="firstName" />
<br />

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


<br />

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


<br /> <dailyTransaction date="24/02/2015">
< person staffDbId="103" operation="u
<xsl:value-of select="@staffDbId" /> <firstName>John</firstName>
<br /> <lastName>Smith</lastName>
<mobile>0211223344</mobile>
<xsl:value-of select="@operation" /> </person>
<br /> < person staffDbId="-1" operation="ad
<br /> <firstName>Mary</firstName>
<lastName>Jane</lastName>
</xsl:for-each> <mobile>0244556677</mobile>
</body> </person>
...
... 21
</dailyTransaction>
Example: Transaction v0
Let’s look at the xml stylesheet: transaction-style0.xsl
...
<body>
<xsl:value-of select="@date" /> <br /><br />

<xsl:for-each select="person">

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


<br />

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


<br />

<xsl:value-of select="mobile" /> <dailyTransaction date="24/02/2015">


<br /> <person staffDbId="103" operation="up
< firstName>John</firstName>
<xsl:value-of select="@staffDbId" />
< lastName>Smith</lastName>
<br />
< mobile>0211223344</mobile>
<xsl:value-of select="@operation" /> </person>
<br /> <person staffDbId="-1" operation="add
<br /> <firstName>Mary</firstName>
<lastName>Jane</lastName>
</xsl:for-each> <mobile>0244556677</mobile>
</body> </person>
22
... ...
</dailyTransaction>
Example: Transaction v0
Let’s look at the xml stylesheet: transaction-style0.xsl
...
<body>
<xsl:value-of select="@date" /> <br /><br />

<xsl:for-each select="person">

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


<br />

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


<br />

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


<br /> <dailyTransaction date="24/02/2015">
<person staffDbId="103" operation
<xsl:value-of select="@staffDbId" /> <firstName>John</firstName>
<br /> <lastName>Smith</lastName>
<mobile>0211223344</mobile>
<xsl:value-of select="@operation" /> </person>
<br /> <person staffDbId="-1" operation="add"
<br /> <firstName>Mary</firstName>
<lastName>Jane</lastName>
</xsl:for-each> <mobile>0244556677</mobile>
</body> </person>
... ... 23
</dailyTransaction>
Example: Transaction v1
transaction1.xml uses 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>

24
Example: Transaction v1
Have a look at the XML file in the browser

http://www.uow.edu.au/~dong/w3/example/XSLT/transaction1.xml

25
Example: Transaction v1
Let’s look at the xml stylesheet: transaction-style1.xsl
...
<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>
...

26
Example: Transaction v2
Version 2 is exactly like version 1 except that we only display staffDbId if it is a
positive number.

…
<xsl:if test="@staffDbId &gt; 0"> IF statement
<xsl:text>, </xsl:text>
<xsl:value-of select="@staffDbId" />
</xsl:if>
…

27
Example: Transaction v2

…
<xsl:if test="@staffDbId &gt; 0">
<xsl:text>, </xsl:text>
<xsl:value-of select="@staffDbId" />
</xsl:if> Danger Stranger!!!
… There is no IF-ELSE

IF statement will be applied when a specified condition is true.


Use CHOOSE-WHEN-OTHERWISE statement to express multiple conditional tests.

28
Conditional statement examples
Mark = 49: <xsl:if test="@staffDbId &gt; 0">
mark = 49 <xsl:text>, </xsl:text>
Mark not equal to 49: <xsl:value-of select="@staffDbId" />
mark != 49 </xsl:if>

Student type = ‘U’:


type = 'U'
Student type not equal to ‘U’:
type != 'U'

Mark > 35:


mark &gt; 35 Mark NOT equal to 49:
Mark >= 85: not(mark = 49)
mark &gt;= 85
Student type = ‘U’ or ‘P’:
Mark < 35: (type = 'U') or (type = 'P')
mark &lt; 35
Mark <= 85: Mark >= 75 and mark < 85:
mark &lt;= 85 (mark &gt;= 75) and (mark &lt; 85)
29
Example: Transaction v3
Now look at transaction3.xml, it uses an xml stylesheet:
transaction-style3.xsl

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="transaction-style3.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>

30
Example: Transaction v3
View the source of the xml stylesheet: transaction-style3.xsl
we can see that it displays a table and the data is sorted.

31
Example: Transaction v3
<xsl:for-each select="person">
<xsl:sort select="lastName"/>
...
</xsl:for-each>

32
Example: Transaction v3
<xsl:for-each select="person">
<xsl:sort select="@operation"/>
...
</xsl:for-each>

33
Example: Transaction v3
<xsl:for-each select="person">
<xsl:sort select="@staffDbId"/>
...
</xsl:for-each>

<xsl:for-each select="person">
<xsl:sort select="@staffDbId" data-type="number"/>
...
</xsl:for-each>

34
Example: Transaction v4
Now look at transaction4.xml

35
Example: Transaction v4
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> 36
Example: Transaction v5
Now look at transaction5.xml

37
Example: Transaction v5
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>

38
Example: Transaction v6
Now look at transaction6.xml

39
Example: Transaction v6
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> 40

</xsl:for-each>
Example: Transaction v7
Now look at transaction7.xml

41
Example: Transaction v7
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> 42

...
Example: Transaction v8
Now look at transaction8.xml

43
Example: Transaction v8
Now look at transaction-style8.xsl

...
<td>
<xsl:choose>
<xsl:when test="@staffDbId &lt; 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>
...
44
Summary

Get attribute value:

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

Get element value:


<xsl:value-of select="element-name" />

Literal text:

<xsl:text>some text here ...</xsl:text>

45
Summary
FOR loop:

<xsl:for-each select="element-name">
...
</xsl:for-each>

FOR loop with sort:


<xsl:for-each select="element-name">
<xsl:sort select="field-to-be-sorted"/>
...
</xsl:for-each>

FOR loop with filter:


<xsl:for-each select="element-name[filter-condition]">
...
</xsl:for-each>
46
Summary

IF statement: (note, there is no IF-ELSE)

<xsl:if test="the-if-condition">
...
</xsl:if>

47
Summary

CHOOSE-WHEN-OTHERWISE statement:

<xsl:choose>

<xsl:when test="condition1">
...
</xsl:when>

<xsl:when test="condition2">
...
</xsl:when>

...

<xsl:otherwise>
...
</xsl:otherwise>
48
</xsl:choose>
Summary
Mark = 49:
mark = 49
Mark not equal to 49:
mark != 49
Student type = ‘U’:
type = 'U'
Student type not equal to ‘U’:
type != 'U'

Mark > 35:


mark &gt; 35 Mark NOT equal to 49:
Mark >= 85: not(mark = 49)
mark &gt;= 85
Student type = ‘U’ or ‘P’:
Mark < 35: (type = 'U') or (type = 'P')
mark &lt; 35
Mark <= 85: Mark >= 75 and mark < 85:
mark &lt;= 85 (mark &gt;= 75) and (mark &lt; 85)
49
References

● https://www.w3schools.com/xml/xsl_intro.asp

● https://developer.mozilla.org/en-US/docs/Web/XSLT

50

You might also like