XSL

1
XSL

• eXtensible Stylesheet Language

2
What is XSL?

• XSL is a language that allows one to describe a
  browser how to process an XML file.
• XSL can convert an XML file into another XML with
  different format.
• XSL can convert an XML file into a non-XML file.

3
XSL

• The most common type of XSL processing is to
  convert XML file into HTML file which can be
  displayed by browsers. We will focus on this use
  of XSL.
• XSL is the bridge between XML and HTML.
• We can use XSL to have different HTML formats for
  the same data represented in XML.
• Separating data (contents) from style tags
  (display commands).
• XML example, class.xml

4
XML Tree (Logical Structure)
5
XSL Example for class.xml (XML?HTML)

• lt?xml version1.0 ?gt
• ltxslstylesheet xmlnsxslhttp//www.w3.org/TR/WD
  -xslgt
• ltxsltemplate match/gt
• ltHTMLgt
• ltHEADgtltTITLEgt Class.xml Stylesheetlt/TITLEgtlt/HEA
  Dgt
• ltBODY BGCOLORredgt
• The homepage of
• ltEMgt
• ltxslvalue-of selectclass/title/gt
• lt/EMgt
• lt/BODYgt
• lt/HTMLgt
• lt/xsltemplategt
• lt/xslstylesheetgt

6
Try it yourself

• Down load class.xml and class.xsl from homepage
  of the course.
• Save it on your machine.
• View the XML file with web browser.
• Add the line that instructs the browser which
  stylesheet to use to format the XML (add it to
  second line).
• View the XML file again.

7
XSL

• The first line of the XSL file shows that XSL
  itself is written in XML. (lt?xml version1.0
  ?gt).
• Line
• ltxslstylesheet xmlnsxslhttp//www.w3.org/TR
  /WD-xslgt
• tells the browser that this is a XSL stylesheet.
• The XSL tags specify the rules to be applied to
  elements or attributes of the XML. Any other tag,
  including HTML tags, or piece of text will be
  kept as it is.

8
XSL paths

• Using XSL paths we can display the content of the
  elements or values of the attributes.
• / by itself represents the root element.
• When / is used as separator between two
  elements it indicates a move one level down the
  hierarchy.
• Example / , class, class/title or
• class/students/student/name/first

9
XSL Paths

• The browser can also pick out and use attribute
  values. The syntax is _at_attributName
• Example
• class/students/student/major/_at_decided.

10
XSL template

• Each template contains rules to apply when an
  element is matched with the path specified as
  value of the match attribute.
• Thus, ltxsltemplate match/gt
• .
• lt/xsltemplategt
• means apply the rules within the start and end
  tags to the root element.

11
XSL value-of

• The ltxslvalue-of select.gt element is used to
  extract the value of the element or attribute
  specified in select attribute.
• Examples
• ltxslvalue-of selectclass/titlegt
• ltxslvalue-of selectclass/students/student
  /name/first gt
• ltxslvalue-of selectclass/students/studen
  t/major/_at_decidedgt

12
Do it yourself

• 1-Copy this piece of XML and save it as note.xml
• lt?xml version"1.0" ?gt
• ltnotegt
• ltfromgtJohnlt/fromgt
• lttogtMerrylt/togt
• ltmessage titleRemindergtDont forget
  merlt/messagegt
• lt/notegt
• 2- View it using an web browser.

13
Do it yourself

• 3- Write an XSL stylesheet for note which
  displays note as
• There was a message from John to Merry
• with title Reminder.
• 4- Note John is written in bold and Merry italic.
• 5- Name the stylesheet as note.xsl
• 5- Add the line which instructs the browser to
  style note.xml with note.xsl.
• 6- View note.xml with a web browser.

14
Do it yourself

• 3- Write an XSL stylesheet for note which
  displays note as
• There was a message from John to Merry
• with title Reminder.
• 4- Note John is written in bold and Merry italic.
• 5- Name the stylesheet as note.xsl
• 5- Add the line which instructs the browser to
  style note.xml with note.xsl.
• 6- View note.xml with a web browser.

15

• lt?xml version"1.0" ?gt
• ltxslstylesheet xmlnsxsl"http//www.w3.org/TR/WD
  -xsl"gt
• ltxsltemplate match"/"gt
• ltHTMLgt
• ltHEADgtltTITLEgt Note
  Stylesheetlt/TITLEgtlt/HEADgt
• ltBODYgt
• There was a message from
• ltBgt
• ltxslvalue-of
  select"note/from"/gt
• lt/Bgt
  (Sample
  Solution)
• to
• ltIgt
• ltxslvalue-of
  select"note/to"/gt
• lt/Igt
• with title
• ltxslvalue-of select"note/message
  /_at_title"/gt.
• lt/BODYgt
• lt/HTMLgt
• lt/xsltemplategt

16
Redo it.

• Write an XSL stylesheet which displays the
• note.xml in the following form (HTML table)

17

• lt?xml version"1.0" ?gt
• ltxslstylesheet xmlnsxsl"http//www.w3.org/TR/WD
  -xsl"gt
• ltxsltemplate match"/"gt
• ltHTMLgt
• ltHEADgtltTITLEgt Note Stylesheet lt/TITLEgtlt/HEADgt
• ltBODYgt
• ltTABLE BORDER"5" CELLPADDING"5"gt
• ltTRgt
• ltTHgtFromlt/THgt
• ltTHgtTolt/THgt
• ltTHgtMessage Titlelt/THgt
• lt/TRgt
• ltTRgt
• ltTDgt
  
  (Sample Solution)
• ltxslvalue-of select"note/from"/gt
• lt/TDgt
• ltTDgt
• ltxslvalue-of select"note/to"/gt
• lt/TDgt

18
HW2

• I posted assignment 2.
• Lets review it together.

19
More XML

• Create your own XML file for a Lunch Menu. The
  root element should be ltlunch_menugt. The sub
  elements of ltlunch_menugt are ltfoodgt corresponding
  to each food in the menu.
• Then each ltfoodgt element has a number of
  attributes or child elements (your choice) such
  as name, price, calories,.
• Add at least two entries to your XML tree.
• View the result using a web browser. (Make sure
  it is well-formed).

20

• lt?xml version"1.0" ?gt
• ltlunch_menugt
• ltfoodgt
• ltnamegtCheese Burgerlt/namegt
• ltpricegt5.95lt/pricegt
• ltcaloriesgt650lt/caloriesgt
• lt/foodgt
• ltfoodgt
• ltnamegtMacaroni and Cheeselt/namegt
• ltpricegt7.95lt/pricegt
• ltcaloriesgt900lt/caloriesgt
  (Sample Solution)
• lt/foodgt
• ltfoodgt
• ltnamegtHot Doglt/namegt
• ltpricegt3.95lt/pricegt
• ltcaloriesgt500lt/caloriesgt
• lt/foodgt
• lt/lunch_menugt

21
Repetition

• Using ltxslvalue-of selectgt we can retrieve
  the value of element or attribute which matches
  the XSL path specified by the select attribute.
• But what if there are more than one element or
  attribute which matches with the specified path
  and we want to apply some formatting rules on all
  these matched entities?

22
Example

• In class.xml we have couple of student elements
  which match with the XSL path
• class/students/student
• Assume we want to create an style-sheet which
  lists the name of all students in class.
• We need an XSL instruction to apply a set of
  rules on each student element.

23
ltxslfor-eachgt

• ltxslfor-each selectgt lt/xslfor-eachgt
  allows us to specify a set of styling rules
  within the start and end tags to be applied to
  all elements or attributes which match the
  specific path in select attribute.
• Example Write an XSL stylesheet for class.xml
  where each student name is in a separate line and
  with bold face.

24
Example of ltxslfor-eachgt

• lt?xml version"1.0" ?gt
• ltxslstylesheet xmlnsxsl"http//www.w3.org/TR/WD
  -xsl"gt
• ltxsltemplate match"/"gt
• ltHTMLgt
• ltHEADgt ltTITLEgt Student Names lt/TITLEgt lt/HEADgt
• ltBODYgt
• ltxslfor-each select"class/students/student"gt
  
• ltBgt
• ltxslvalue-of select"name/first"/gt
• ltxslvalue-of select"name/last"/gt
• ltBR/gt
• lt/Bgt
• lt/xslfor-eachgt
• lt/BODYgt
• lt/HTMLgt
• lt/xsltemplategt
• lt/xslstylesheetgt

25
Exercise

• Download and save class-names.xml into your
  machines.
• Download and save XSL-EX-1.xsl into your machines
  in the same folder.
• Modify the style-sheet, so instead of name of
  students you have an unordered list of majors of
  students of the class. (Remember, the HTML syntax
  for unordered list
• ltULgt
• ltLIgt lt/LIgt
• ltLIgt lt/LIgt
• lt/ULgt )
• View the classView.xml with a web browser.

26
Sample Solution

• lt?xml version"1.0" ?gt
• ltxslstylesheet xmlnsxsl"http//www.w3.org/TR/WD
  -xsl"gt
• ltxsltemplate match"/"gt
• ltHTMLgt
• ltHEADgt ltTITLEgt Student Majors lt/TITLEgt lt/HEADgt
• ltBODYgt
• ltULgt
• ltxslfor-each select"class/students/student"gt
  
• ltLIgtltxslvalue-of select"major/majorName"/gtlt/LIgt
  
• lt/xslfor-eachgt
• lt/ULgt
• lt/BODYgt
• lt/HTMLgt
• lt/xsltemplategt
• lt/xslstylesheetgt

27
Problem

• Some students have not yet decided their majors.
  For these students the value of decided attribute
  is n.
• But the formatting rules inside the
• ltxslfor-eachgt will be applied to all
  students regardless of having a major or not.
• We want a way to instruct the XSL to apply the
  rules when the value of decided attribute is y
  (decided y).

28
Selection Filtering Data

• ltxslif match.namevaluegt is yet another
  xsl tag which instructs the XSL to apply the
  rules within start tag ltxslif gt and end tag
  lt/xslifgt if the value of the specified element
  or attribute matches with the value specified at
  the right hand side of .
• Put it another way, ltxslifgt conditionally
  retrieves the value of the specified element or
  attribute.
• This condition is specified as value of match
  attribute.

29
Specifying the Condition inside match attribute

• ltxslif match. XSL test path value gt
• Test path XSL path which specifies the element
  or attribute we want to perform the test on its
  value.
• Value The conditional value. That is if the
  value of the specified element or attribute
  matches this value the rules or instructions
  within start and end tags will be executed.
  

30
Examples

• ltxslif match . majorName MGT gt
• . in XSL is shorthand for the current node.
• Select the current element IF its sub-element,
  majorName has value MGT.
• ltxslif match.major/_at_decided y
• Select the current element if the value of
  decided attribute of its sub-element, major is
  y.
• ltxslif match.major/submajor Financegt
• Select the current element IF the value of the
  child, submajor of its child, major is Finance.
  

31
Different Web Browsers

• Note that the standard syntax for ltxslifgt
  suggested by W3C is
• ltxslif test "major/_at_decided 'n'"gt

32

• With the standard syntax for ltxslifgt , the
  ltxslstylesheetgt tag should be
• ltxslstylesheet version"1.0
• xmlnsxsl"http//www.w3.org/1999/XSL/Transform"gt
• Instead of
• ltxslstylesheet
• xmlnsxsl"http//www.w3.org/TR/WD-xsl"gt
• You can use any of them, but the second case
  works
• only with Internet Explorer.

33
Example

• List the name of the majors of all students in
  the class. Use ltxslifgt to avoid empty items.

34

• lt?xml version"1.0" ?gt
• ltxslstylesheet xmlnsxsl"http//www.w3.org/TR/WD
  -xsl"gt
• ltxsltemplate match"/"gt
• ltHTMLgt
• ltHEADgt ltTITLEgt Major Names lt/TITLEgt lt/HEADgt
• ltBODYgt
• ltULgt
• ltxslfor-each select"class/students/student"gt
  
• ltxslif match".major/_at_decided'y'"gt
  
• ltLIgtltxslvalue-of select"major/majorName"/gtlt/
  LIgt
• lt/xslifgt
• lt/xslfor-eachgt
• lt/ULgt
  (Sample Solution 1)
• lt/BODYgt
• lt/HTMLgt
• lt/xsltemplategt
• lt/xslstylesheetgt

35
Do it yourself

• Download and save the file XSL-EX-3.xsl.
• Change the appropriate line in class-names.xml to
  be styled with XSL-EX-3.xsl.
• View class.xml with a browser.
• Change the XSL-EX-3.xsl to present the class.xml
  as a table with a column for student names and
  another column for their major. If the student
  has no major, the phrase N/A should appear in
  major column.

36
Things to remember

• HTML table tags
• ltTABLE BORDER ngt
• ltTRgt
• ltTHgt header lt/THgt
• lt/TRgt
• ltTRgt
• ltTDgt datalt/TDgt .
• lt/TRgt
• lt/TABLEgt
• You need to use ltxslfor-eachgt and two ltxslifgt
  within it.