XPath and XSLT

Lecture 4

XPath video: https://www.youtube.com/watch?v=SDCEvn6NfLA&list=PLTnQNmqSbDI2TYciziQiGGxVsFbd__keg&index=23

Part 1 XPath
XPath
 XPath is a means to search a specific XML elements in a
document.
 Each element, attribute, comment, etc is considered a
node in the XML tree.
 Start with root node
 Descend by element/attribute/text to each child
 XPath uses "path like" syntax to identify and navigate
nodes in an XML document.
 XPath is a major element in XSLT.

XPath Tester :
1) http://www.freeformatter.com/xpath-tester.html
2) http://xpath.online-toolz.com/tools/xpath-editor.php
 XML Example (Notebook)
<?xml version="1.0" encoding="UTF-8"?> attribute node
root element
<Notebook code="A205" color="pink">
<Processor>Intel Core i7-2710QE</Processor>
element node <Memory>DDR3L 1600</Memory>
</Notebook>
<!-- simple XML document --> comment node
XPath Tree for XML Example (Notebook)
/ root node /document node

Notebook element node / root element node

code attribute node
color attribute node
Processor element node
Intel Core i7-2710QE text node
Memory element node
DDR3L 1600 text node
simple XML document comment node
Node Terminology
Node Type Description
root node / It represents the root of an XML document.
document node It exist only at the top of the tree.
It may contain element or comment.
root element node It is the first XML element in the document.
element node It represents an XML element.
attribute node It represents an attribute of an element.
text node It represents the character data content of an element.
comment node It represents an XML comment.
XML Example (Report)
<report>
<book price = "56.70">
<title> Java Programming </title>
<author> Steven Kok </author>
<author> <first-name> Mary </first-name>
<last-name> Lee </last-name>
</author>
<author> Watty Piper</author>
</book>
<book price="109.60">
<title id = "234"> Database Advanced</title>
<author> Dara Goldman</author>
</book>
<book>
<title id = "236"> Database Basic</title>
<author> David Tan</author>
<title> C++ Programming </title>
<author> Jordan Ong </author>
</book>
</report>
 /

XPath Tree for

XML Example Java Programming

Steven Kok
(Report)
Mary

 The individual elements of Lee

an XPath tree structure are
Watty Piper
referred to as nodes.
 The root node is /
 The root element node is report Database Advanced

Dara Goldman

Database Basic

David Tan

C++ Programming

Jordan Ong
Path Expression

Expression Description
/ Selects the root node (absolute path)
node name Selects all nodes with the specified node name
(relative path)
// Selects all descendent nodes of the current node
that match the selection
. Selects the current node
.. Selects the parent of the current node
@ Selects attribute nodes

• "absolute path" refers to descriptions that made from the root node
• "relative path" refers to descriptions that made relative to the current node
Path Expression
/

Example:
Java Programming
 Current node: book
Steven Kok
 Destination place: first-name
Mary  Absolute path: /report/book/author/first-name
Lee  Relative path: //author/first-name
Watty Piper

 Current node: book

Database Advanced  Destination place: id
Dara Goldman  Absolute path: /report/book/title/@id
 Relative path: //title/@id
Database Basic

David Tan

C++ Programming

Jordan Ong
 Path Expression
/

Java Programming
Question Path Expression
Steven Kok
Selects the root node /

Mary
Selects the root element node /report

Lee
Selects all book element nodes 1. /report/book
2. //book
Watty Piper
Selects all title element nodes 1. /report/book/title
2. //book/title
3. //title
Database Advanced Selects all id attribute nodes 1. /report/book/title/@id
2. //@id
Dara Goldman
Select all first-name element 1. /report/book/author/first-name
nodes 2. //author/first-name
Database Basic 3. //first-name

David Tan

C++ Programming

Jordan Ong
 Brackets and Asterisk
/
 A number in brackets selects a particular matching child
 An asterisk - “all the elements at this level”
Java Programming
Path Expression Description Result
Steven Kok
/report/book/author[1] element of first <author>Steven Kok</author>
author of every <author>Dara Goldman</author>
Mary
book <author>David Tan</author>
Lee
//book[3]/author[2]/text() name of second Jordan Ong
Watty Piper
author of third
book element
/report/book/author/* all child of every <first-name>Mary</first-name>
Database Advanced author for every <last-name>Lee</last-name>
book
Dara Goldman

/*/*/*/last-name element of every <last-name>Lee</last-name>

last-name that
Database Basic has three
ancestors
David Tan
//* every element in Entire XML document
C++ Programming
the entire
Jordan Ong document
Path Function
Command Description
node() It returns node value.
text() It returns text value of specific node.
comment() It returns specific comment node.
last() It returns the last matching child node
position() It returns the element node at the specified
position of the specified node type.
 Path Function Example
/

Path Expression Description Result

Java Programming
/report/book/author[last()] element of last <author>Watty Piper</author>
Steven Kok author of every book <author>Dara Goldman</author>
<author>Jordan Ong </author>
Mary
//book/author[last()-1] element of second <author>
Lee last author of every <first-name>Mary</first-name>
book <last-name>Lee</last-name>
Watty Piper
</author>
<author> David Tan</author>
//title[position()=2] element of second <title> C++ Programming </title>
Database Advanced or title of every book
//title[2]
Dara Goldman
//title[2]/text() name of second title C++ Programming
of every book

Database Basic

David Tan

C++ Programming

Jordan Ong
Attributes
 You can select attributes by themselves, or elements that have
certain attributes
 Remember: an attribute consists of a name-value pair, for example in
< book price = "56.70" >, the attribute is named price
 To choose the attribute itself, prefix the name with @
 Example: /report/book/@price will choose attribute named price
Result: price="56.70"
price="109.60"

 To choose elements that have a given attribute, put the

attribute name in square brackets
 Example: //book[@price='56.70’]
-> select book element that has attribute price with value 56.70.
 * Matches any element
Attributes Example 1 @* Matches any attribute
/
Path Description Result
Expression
Java Programming
//book[@price] book element that <book price="56.70">
Steven Kok has an attribute <title> Java Programming </title>
named price <author> Steven Kok </author>
<author> <first-name> Mary </first-name>
Mary <last-name> Lee </last-name></author>
<author> Watty Piper</author>
Lee
</book>
Watty Piper
<book price="109.60">
<title id="234"> Database Advanced</title>
<author> Dara Goldman</author>
</book>
Database Advanced
//@* All attribute in the price="56.70"
Dara Goldman
document price="109.60"
id="234"
id="236"
Database Basic //book[not(@*)] book element that <book>
does not have <title id="236"> Database Basic </title>
David Tan <author> David Tan </author>
attribute
<title> C++ Programming </title>
C++ Programming
<author> Jordan Ong </author>
</book>
Jordan Ong
 Attributes Example 2
/

Path Expression Description Result

Java Programming

//title[@id='234'] title element with an <title id="234"> Database Advanced

Steven Kok
attribute id of value </title>
234
Mary

Lee
//title[not(@id)] title element that does <title> Java Programming </title>
Watty Piper not have id attribute <title> C++ Programming </title>

//book[@price > 100] book element with <book price="109.60">

Database Advanced attribute price more <title id="234"> Database
than 100 Advanced</title>
Dara Goldman
<author> Dara Goldman</author>
</book>

Database Basic

David Tan

C++ Programming

Jordan Ong
Text() vs Node()
 node() matches any node (= * or @* or text())
 text() matches the text value
Text() Node()
/report/book/author/text() /report/book/author/node()
Steven Kok Steven Kok
Watty Piper <first-name> Mary </first-name>
Dara Goldman <last-name> Lee </last-name>
David Tan Watty Piper
Jordan Ong Dara Goldman
David Tan
Jordan Ong
 Part 2 XSLT Part I

XSLT transformer: https://www.online-toolz.com/tools/xslt-transformation.php

http://www.freeformatter.com/xsl-transformer.html
Extensible Stylesheet Language (XSL)
 XSL is a styling language for XML.
 An XSL style sheet describes how to display an XML
document.
 similar to CSS that style the display of HTML
 XSL is divided into three parts:
 XSLT – to transform XML document.
 XPATH – to navigate XML document.
 XSL-FO – to format XML document.
XSL Transformations (XSLT)
 XSLT is used to transform an XML documents into other
kinds of documents (XML, html, text)
 XSLT uses two input files:
 XML document containing the actual data
 XSL document containing “framework” and XSLT commands
 XSL specifies a language definition for XML data presentation
and data transformations
 XSLT Diagram

Components involved in the

XSLT process XML
– XML document of original data source
– XSL stylesheet consist of
transform rule XML, text,
– XSLT processor uses XPath to XSLT HTML and
define the matched parts, then processor other
applies the rules from the XSL output
style sheet to the XML
document XSL
– Output as XML, text, HTML or style sheet
other format
Starting an XSLT stylesheet
 An XSL stylesheet begins with the XML declaration
<?xml version="1.0"?>
 The first element of XSL stylesheet can be either
<xsl:stylesheet> or <xsl:transform> using version=“1.0”
<?xml version="1.0"?>
<xsl:stylesheet version=“1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
...
</xsl:stylesheet>

XSLT element use a standardized namespace to avoid conflict with other element

<?xml version="1.0"?>
<xsl:transform version=“1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
...
</xsl:transform>
Starting an XSLT stylesheet
Output element:
 The output element specifies the desired output, such as
text or html.
<xsl:output method="xml" />
<xsl:output method="text" />
<xsl:output method="html" />

 The method attribute specifies the desired output.

 The output element immediately follows the xsl:stylesheet
element.
Applying XSL Stylesheets to XML Documents
Three ways of applying XSL stylesheet to XML documents:
 Directly applying an XSLT processor to the XML document and
the XSLT stylesheet
 Online XSLT processor:
 http://www.freeformatter.com/xsl-transformer.html
 https://www.online-toolz.com/tools/xslt-transformation.php
 Offline XSLT processor:
 XML Notepad
 Calling an XSLT processor from a Java program
 Parse the XML and transform the XML into another form
 The Java program need to import javax.xml.transform
 XSLT processor in the web browser
 Linking a stylesheet to an XML document and letting the browser do
the transformation
 xampp server is needed for browser to do the transform
Example of Online XSLT Processor

Picture source: https://www.online-toolz.com/tools/xslt-transformation.php

Example of Offline XSLT Processor
Example of Calling an XSLT processor
 Convert an XML to another format:
 HTML output, text, another type of XML format

 XML content can be extracted and displayed in the

command prompt by parsing XML data using Java

 Example:
 https://www.youtube.com/watch?v=w3WibDOie1Y
Example of XSLT Processor in Web Browser
The stylesheet is specified for an XML document using the
xml-stylesheet element.

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

 href attribute: it specifies where to find the stylesheet.

 type attribute: it specifies the MIME type for the stylesheet file.

 The xml-stylesheet declaration is placed immediately after the

XML declaration <?xml?> in the XML file.
 Example of XSLT Processor in Web Browser cont..
test.xsl
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="text"/>

<xsl:template match="/">
<xsl:text>Article - </xsl:text>
<xsl:value-of select="/Article/Title"/>
<xsl:text>&#xa;Authors: </xsl:text>
<xsl:apply-templates select="/Article/Authors/Author"/>
</xsl:template> test.xml
<?xml version="1.0"?>
<xsl:template match="Author">
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<xsl:text>&#xa;- </xsl:text>
<Article>
<xsl:value-of select="." />
<Title>Programming Article</Title>
</xsl:template>
<Authors>
</xsl:stylesheet>
<Author>Mr. John</Author>
<Author>Mr. Bar</Author>
<Author>Mr. Peter</Author>
<?xml-stylesheet type="text/xsl" href="test.xsl"?> </Authors>
<Body>This is my article text.</Body>
</Article>
Example of XSLT Processor in Web Browser cont..
Setup of the Xampp Server
 Open the xampp server, press the “Start” of the Apache.

 Press “Explorer” to open the directory of C:\xampp, then open

the “htdocs”.
 Place the XML and XSL file into the folder of htdocs.
Example of XSLT Processor in Web Browser cont..
Setup of the Xampp Server

 Example, the file is test.xml and test.xsl.

 Press the “Admin”, the browser will prompt up, type the
http://localhost/test.xml to view the transformed output.
Template Rule
 Template serves as translation rule in the XSLT.

 xsl:template create a template

 match attribute (XPath expression) identify which element the
template should be invoked

 xsl:apply-templates process children of the current node

 <xsl:apply-templates /> process all children of the current node
 <xsl:apply-templates select=“student”/> process only student
node
XML and XSLT Example 2
test.xsl
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"/>

<xsl:template match="staff">
staff.xml
<b> <?xml version="1.0"?>
<xsl:apply-templates select="firstName"/> <record>
</b> <staff>
<b> <firstName>Alan</firstName>
<xsl:apply-templates select="lastName"/> <lastName>Tan</lastName>
</b> </staff>
</xsl:template> </record>

<xsl:template match="lastName">
<i>
<xsl:value-of select="."/> Output
</i>
</xsl:template>
<?xml version="1.0"?>
</xsl:stylesheet>
<b>Alan</b>
<b><i>Tan</i></b>
XML and XSLT Example 3
<?xml version="1.0"?> XSL
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="text"/>

<xsl:template match="class"> <xsl:template match="class">

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

<xsl:template match="student"> XML

<xsl:text>Found a learner! </xsl:text>
</xsl:template> <?xml version="1.0"?>
<class>
</xsl:stylesheet> <student>Jack</student>
<student>Harry</student>
<student>Rebecca</student>
Output (text) <teacher>Mr. Bean</teacher>
</class>
Output (text)
Found a learner! Found a learner! Found a learner! Found a learner!
Found a learner!
Found a learner!
Mr. Bean
XML and XSLT Example 3
xsl:template match="class"
 The XSLT processor begins at the root element when looking for
template matches.
 Because class match for the root element, the code added here is
used fist.

xsl:apply-templates
 In template that matched class, xsl:apply-templates check for
template matches on all the element of class.
 The element of class in the XML document are student and teacher.
XML and XSLT Example 3
xsl:apply-templates select="student"
 The select attribute of xsl:apply templates specify only student element,
indirectly remove the teacher element ("Mr. Bean").
 The XSLT processor then searching templates that only match student
elements.

xsl:template match="student"
 The processor finds the only template in the XSLT - prints "Found a
learner!" for each student element in the XML document.
 XSLT finds three student elements, so "Found a learner!" is displayed
three times.
Template Rule
select XML element to
<xsl:template match="XPath expression"> transform
content to produce A mix of contents to produce
… further instruction + further instruction
</xsl:template>

XML source: HTML output:

<name>Hello World</name> <title>Hello World</title>

Rule applies to “title”

<xsl:template match="name">
<title> Another HTML element produced,
i.e. the translation !
<xsl:apply-templates/>
Means “move on”; find another
</title>
rule/template that matches on all the
</xsl:template> element of name or copy contents
hello.xsl
XML and XSLT Example 4
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
XSLT start
<xsl:template match="/"> Rule dealing with
<html>
<head> the document’s
<title> <xsl:value-of select="page/name"/> </title> root element
</head>
<body>
<xsl:apply-templates/> find another rule
</body> or copy contents
</html>
</xsl:template>

<xsl:template match="name">
<h2 align="center"> <xsl:apply-templates/> </h2>
</xsl:template>

<xsl:template match="content">
<p align="center"> <xsl:apply-templates/> </p> hello.xml
</xsl:template> <?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="hello.xsl"?>
<xsl:template match="remark"> <page>
<hr/> <i><xsl:apply-templates/> </i> <hr/> <name>Welcome from FIST</name>
</xsl:template> <content>Content of the website</content>
<remark>This is the backup website</remark>
</xsl:stylesheet> </page>
 XML and XSLT Example 4

• <xsl:apply-templates> invoke the <xsl:template> defined in the XSLT.

• <xsl:apply-templates> calls a matching template for each node in the set.
• You can specify the child element by adding a select attribute on apply-templates.