Using XSLT and XPath to Enhance HTML Documents

1
Using XSLT and XPath to Enhance HTML Documents

• Reference Roger L. Costello
• http//www.xfront.com)

2
Multiple Output Formats

• XSL may be used to generate either HTML, XML, or
  text

XSL
XSL Processor
XML
HTML (or XML or text)
3
HTML Generation

• We will first use XSL to generate HTML documents
• When generating HTML, XSL should be viewed as a
  tool to enhance HTML documents.
• That is, the HTML documents may be enhanced by
  extracting data out of XML documents
• XSL provides elements (tags) for extracting the
  XML data, thus allowing us to enhance HTML
  documents with data from an XML document

4
Enhancing HTML Documents with XML Data
HTML Document (with embedded XSL elements)
XML Document
XSL element
XSL Processor
XML data
XML data
5
Enhancing HTML Documents with the Following XML
Data
lt?xml version"1.0"?gt lt?xml-stylesheet
type"text/xsl" href"FitnessCenter.xsl"?gt ltFitnes
sCentergt ltMember level"platinum"gt
ltNamegtJefflt/Namegt ltPhone
type"home"gt555-1234lt/Phonegt
ltPhone type"work"gt555-4321lt/Phonegt
ltFavoriteColorgtlightgreylt/FavoriteColorgt
lt/Membergt lt/FitnessCentergt
FitnessCenter.xml
6
Embed HTML Document in an XSL Template
lt?xml version"1.0"?gt ltxslstylesheet
xmlnsxsl"http//www.w3.org/1999/XSL/Transform"
version"1.0"gt ltxsloutput
method"html"/gt ltxsltemplate match"/"gt
ltHTMLgt ltHEADgt
ltTITLEgtWelcomelt/TITLEgt lt/HEADgt
ltBODYgt Welcome!
lt/BODYgt lt/HTMLgt lt/xsltemplategt lt/xsl
stylesheetgt
Note how we have the HTML document embedded
within an XSL template
7
Note

• The HTML is embedded within an XSL template,
  which is an XML document
• Consequently, the HTML must be well formed, i.e.,
  every start tag must have an end tag
• Because the HTML is embedded within an XSL
  template, we are able to add XSL elements to the
  HTML, allowing us to extract data out of XML
  documents
• Let's customize the HTML welcome page by putting
  in the member's name. This is achieved by
  extracting the name from the XML document. We
  use an XSL element to do this.

8
Extracting the Member Name
lt?xml version"1.0"?gt ltxslstylesheet
xmlnsxsl"http//www.w3.org/1999/XSL/Transform"
version"1.0"gt ltxsloutput
method"html"/gt ltxsltemplate match"/"gt
ltHTMLgt ltHEADgt
ltTITLEgtWelcomelt/TITLEgt lt/HEADgt
ltBODYgt Welcome ltxslvalue-of
select"/FitnessCenter/Member/Name"/gt!
lt/BODYgt lt/HTMLgt lt/xsltemplategt lt/xs
lstylesheetgt
9
Extracting a Value from an XML Document,Navigatin
g the XML Document

• Extracting values
• use the ltxslvalue-of select""/gt XSL element
• Navigating
• The slash ("/") indicates parent/child
  relationship
• A slash at the beginning of the path indicates
  that it is an absolute path, starting from the
  top of the XML document

/FitnessCenter/Member/Name
"Start from the top of the XML document, go to
the FitnessCenter element, from there go to the
Member element, and from there go to the Name
element."
10
Document /
PI lt?xml version1.0?gt
Element FitnessCenter
Element Member
Element Phone
Element Name
Element FavoriteColor
Element Phone
Text Jeff
Text 555-4321
Text lightgrey
Text 555-1234
11
Extract the FavoriteColor and use it as the
bgcolor
lt?xml version"1.0"?gt ltxslstylesheet
xmlnsxsl"http//www.w3.org/1999/XSL/Transform"
version"1.0"gt ltxsloutput
method"html"/gt ltxsltemplate match"/"gt
ltHTMLgt ltHEADgt
ltTITLEgtWelcomelt/TITLEgt lt/HEADgt
ltBODY bgcolor"/FitnessCenter/Member/Favorit
eColor"gt Welcome ltxslvalue-of
select"/FitnessCenter/Member/Name"/gt!
lt/BODYgt lt/HTMLgt lt/xsltemplategt lt/xs
lstylesheetgt
12
Note
Attribute values cannot contain "lt" nor "gt" -
Consequently, the following is NOT valid
ltBody bgcolor"ltxslvalue-of
select'/FitnessCenter/Member/FavoriteColor'/gt"gt
To extract the value of an XML element and use it
as an attribute value you must use curly braces
ltBody bgcolor"/FitnessCenter/Member/
FavoriteColor"gt
Evaluate the expression within the curly braces.
Assign the value to the attribute.
13
Extract the Home Phone Number
lt?xml version"1.0"?gt ltxslstylesheet
xmlnsxsl"http//www.w3.org/1999/XSL/Transform"
version"1.0"gt ltxsloutput
method"html"/gt ltxsltemplate match"/"gt
ltHTMLgt ltHEADgt
ltTITLEgtWelcomelt/TITLEgt lt/HEADgt
ltBODY bgcolor"/FitnessCenter/Member/Favorit
eColor"gt Welcome ltxslvalue-of
select"/FitnessCenter/Member/Name"/gt!
ltBR/gt Your home phone number
is ltxslvalue-of
select"/FitnessCenter/Member/Phone_at_type'home'"
/gt lt/BODYgt lt/HTMLgt
lt/xsltemplategt lt/xslstylesheetgt
14
Note
In this example we want "the Phone element where
the value of its type attribute equals 'home' "
ltxslvalue-of select"/FitnessCenter/Member/Phone
_at_type'home'"/gt
The expression within is called a
"predicate". Its purpose is to filter. Note the
use of the single quotes within the double
quotes. select" ' ' "
15
Review - HTML Table
lttable border1 width100gt
ltthgt lt/thgt
ltthgt lt/thgt
ltthgt lt/thgt
lt/trgt
lttrgt
lttdgt lt/tdgt
lttdgt lt/tdgt
lttdgt lt/tdgt
lt/trgt
lttrgt
lttdgt lt/tdgt
lttdgt lt/tdgt
lttdgt lt/tdgt
lttrgt
lt/trgt
lt/tablegt
This will create a table with 3 rows - the first
row contains a header for each column. The next
two rows contains the table data.
16
lttable border1 width75gt lttrgt
ltthgtFruitlt/thgt ltthgtColorlt/thgt lt/trgt
lttrgt lttdgtPapayalt/tdgt
lttdgtRedlt/tdgt lt/trgt lttrgt
lttdgtBananalt/tdgt lttdgtYellowlt/tdgt
lt/trgt lt/tablegt
Fruit
Color
Red
Papaya
Yellow
Banana
17
Create a Table of Phone Numbers

• Suppose that a Member has an arbitrary number of
  phone numbers (home, work, cell, etc).
• Create an HTML table comprised of the phone
  numbers. On each row of the table put the type
  (home, work, cell, etc) in one column and the
  actual phone number in the next column.

18
lt?xml version"1.0"?gt ltxslstylesheet
xmlnsxsl"http//www.w3.org/1999/XSL/Transform"
version"1.0"gt ltxsloutput
method"html"/gt ltxsltemplate match"/"gt
ltHTMLgt ltHEADgt
ltTITLEgtWelcomelt/TITLEgt lt/HEADgt
ltBODY bgcolor"/FitnessCenter/Member/Favorit
eColor"gt Welcome ltxslvalue-of
select"/FitnessCenter/Member/Name"/gt!
ltBR/gt Your phone numbers
are ltTABLE border"1"
width"25"gt
ltTRgtltTHgtTypelt/THgtltTHgtNumberlt/THgtlt/TRgt
ltxslfor-each select"/FitnessCenter/Membe
r/Phone"gt ltTRgt
ltTDgtltxslvalue-of
select"_at_type"/gtlt/TDgt
ltTDgtltxslvalue-of select"."/gtlt/TDgt
lt/TRgt
lt/xslfor-eachgt lt/TABLEgt
lt/BODYgt lt/HTMLgt lt/xsltemplategt lt/
xslstylesheetgt
19
Iterating through XML Elements
ltxslfor-each select"/FitnessCenter/Member/Phone"
gt lt!- - Within here we are at one of the
Phone elements. Thus, in
ltxslvalue-of select"path", the value for
path is relative to where we are in the
XML document. The "." refers to the
Phone element that we are currently
positioned at. - -gt lt/xslfor-eachgt
20
Absolute Path versus Relative Path
ltxslvalue-of select"/FitnessCenter/Member/Phone
_at_type'home'"/gt
This is an absolute xPath expression (we start
from the top of the XML tree and navigate down
the tree)
ltxslvalue-of select"_at_type"/gt
This is a relative xPath expression (relative to
where we currently are located, give me the
value of the type attribute)
21
Special Offer to Platinum Members

• Let's further enhance our example to provide a
  special offer to "platinum" members.
• We need to check to see if the "level" attribute
  on the Member element equals "platinum".

22
ltHTMLgt ltHEADgt
ltTITLEgtWelcomelt/TITLEgt lt/HEADgt
ltBODY bgcolor"/FitnessCenter/Member/Favorit
eColor"gt Welcome ltxslvalue-of
select"/FitnessCenter/Member/Name"/gt!
ltBR/gt ltxslif
test"/FitnessCenter/Member/_at_level'platinum'"gt
Our special offer to platinum
members today is ... ltBR/gt
lt/xslifgt Your phone
numbers are ltTABLE border"1"
width"25"gt
ltTRgtltTHgtTypelt/THgtltTHgtNumberlt/THgtlt/TRgt
ltxslfor-each select"/FitnessCenter/Membe
r/Phone"gt ltTRgt
ltTDgtltxslvalue-of
select"_at_type"/gtlt/TDgt
ltTDgtltxslvalue-of select"."/gtlt/TDgt
lt/TRgt
lt/xslfor-eachgt lt/TABLEgt
lt/BODYgt lt/HTMLgt
23
Conditional Processing

• Use the ltxslif test""/gt element to perform
  conditional processing.

24
Accessing Multiple Parts of the XML Document

• Let's enhance the table to contain three columns
  - the name of the Member, the type of the phone
  (home, work, cell, etc), and the actual phone
  number.

25
ltHTMLgt ltHEADgt
ltTITLEgtWelcomelt/TITLEgt lt/HEADgt
ltBODY bgcolor"/FitnessCenter/Member/Favorit
eColor"gt Welcome ltxslvalue-of
select"/FitnessCenter/Member/Name"/gt!
ltBR/gt ltxslif
test"/FitnessCenter/Member/_at_level'platinum'"gt
Our special offer to platinum
members today is ... ltBR/gt
lt/xslifgt Your phone
numbers are ltTABLE border"1"
width"25"gt
ltTRgtltTHgtNamelt/THgtltTHgtTypelt/THgtltTHgtNumberlt/THgtlt/TRgt
ltxslfor-each
select"/FitnessCenter/Member/Phone"gt
ltTRgt
ltTDgtltxslvalue-of select"../Name"/gtlt/TDgt
ltTDgtltxslvalue-of
select"_at_type"/gtlt/TDgt
ltTDgtltxslvalue-of select"."/gtlt/TDgt
lt/TRgt
lt/xslfor-eachgt lt/TABLEgt
lt/BODYgt lt/HTMLgt
26
Getting the Name when accessing the Phone
Member
Notice how when in the for-each loop we need to
access the Name which is "up and over" with
respect to the Phone element
Bottom line we can access elements in other
parts of the XML tree via the ../ operator.
27
Other ways to Access the XML Data
Note Assume that there are multiple Members
ltxslvalue-of select"/FitnessCenter/Member1/Nam
e"/gt "Select the Name of the first
Member" ltxslvalue-of select"/FitnessCenter/Memb
erposition()1/Name"/gt "Select the Name of the
first Member" ltxslvalue-of select"/FitnessCente
r/Memberlast()/Name"/gt "Select the Name of the
last Member" ltxslfor-each select"/FitnessCenter
/Membernot(position()last())"gt lt!- -
Process all Members but the last -
-gt lt/xslfor-eachgt
28
Other ways to Access the XML Data (cont.)
ltxslfor-each select"/FitnessCenter/Memberpositi
on() ! last())"gt lt!- - Process all
Members but the last - -gt lt/xslfor-eachgt ltxslfo
r-each select"/FitnessCenter/Memberposition()
gt1"gt lt!- - Process all Members but the
first - -gt lt/xslfor-eachgt ltxslfor-each
select"/FitnessCenter//Name"gt lt!- -
Process all Name elements which have
FitnessCenter as an ancestor -
-gt lt/xslfor-eachgt
29
Enhanced XML Document
lt?xml version"1.0"?gt ltFitnessCentergt
ltMember id"1" level"platinum"gt
ltNamegtJefflt/Namegt ltPhone
type"home"gt555-1234lt/Phonegt
ltPhone type"work"gt555-4321lt/Phonegt
ltFavoriteColorgtlightgreylt/FavoriteColorgt
lt/Membergt ltMember id"2" level"gold"gt
ltNamegtDavidlt/Namegt
ltPhone type"home"gt383-1234lt/Phonegt
ltPhone type"work"gt383-4321lt/Phonegt
ltFavoriteColorgtlightbluelt/FavoriteColorgt
lt/Membergt ltMember id"3"
level"platinum"gt
ltNamegtRogerlt/Namegt ltPhone
type"home"gt888-1234lt/Phonegt
ltPhone type"work"gt888-4321lt/Phonegt
ltFavoriteColorgtlightyellowlt/FavoriteColorgt
lt/Membergt lt/FitnessCentergt
Note that each Member now has a unique id (the id
attribute)
30
ltTABLE border"1" width"25"gt
ltTRgtltTHgtNamelt/THgtlt/TRgt
ltxslfor-each select"/FitnessCenter/Member"gt
ltTRgt
ltTDgt ltA
href"_at_id"gt
ltxslvalue-of select"Name"/gt
lt/Agt
lt/TDgt lt/TRgt
lt/xslfor-eachgt lt/TABLEgt
ltBR/gtltBR/gtltBR/gtltBR/gtltBR/gt
ltTABLE border"1" width"25"gt
ltTRgtltTHgtHome Phone Numberlt/THgtlt/TRgt
ltxslfor-each select"/FitnessCenter/M
ember"gt ltTRgt
ltTDgt
ltA name"_at_id"gt
ltxslvalue-of select"Phone_at_type'home'"/gt
lt/Agt
lt/TDgt
lt/TRgt lt/xslfor-eachgt
lt/TABLEgt
31
Numbering

• There is an XSL element that returns a number
  corresponding to the element's position in the
  set of selected nodes

ltxslfor-each select"/FitnessCenter/Member"gt
ltxslnumber value"position()" format"1"/gt
ltxsltextgt. lt/xsltextgt
ltxslvalue-of select"Name"/gt
ltBR/gt lt/xslfor-eachgt
Output 1. Jeff 2. David 3. Roger
32
Start Numbering from 0

• How would you start the numbering from zero,
  rather than one?

ltxslnumber value"position() - 1" format"1"gt
33
format attribute of xslnumber

• In the previous example we saw how to generate
  numbers, and we saw that the generated numbers
  were 1, 2, 3, etc.
• With the format attribute we can specify the
  format of the generated number, i.e., 1, 2, 3 or
  I, II, III, or A, B, C, or
• format1 generates the sequence 1, 2, 3,
• format01 generates 01, 02, 03,
• formatA generates A, B, C,
• formata generates a, b, c,
• formatI generates I, II, III,
• formati generates i, ii, iii, ...

34
format attribute of xslnumber
ltxslfor-each select"/FitnessCenter/Member"gt
ltxslnumber value"position()" format"A"/gt
ltxsltextgt. lt/xsltextgt
ltxslvalue-of select"Name"/gt
ltBR/gt lt/xslfor-eachgt
Output A. Jeff B. David C. Roger
35
Sorting

• There is an XSL element that sorts the elements
  that you extract from the XML document

ltxslfor-each select"/FitnessCenter/Member"gt
ltxslsort select"Name" order"ascending"/gt
ltxslvalue-of select"Name"/gt
ltBR/gt lt/xslfor-eachgt
Output David Jeff Roger
(see html-example10)
"For each Member, sort the Name elements"
36
Sorting
ltxslfor-each select"/FitnessCenter/Member"gt
ltxslsort select"Name" order"ascending"/gt
ltxslvalue-of select"Name"/gt
ltBR/gt lt/xslfor-eachgt
The set of Member elements selected by
xslfor-each is sorted using the Name child
element. This occurs prior to the first
iteration of the loop. After the set of
Member elements are sorted then the looping
begins.