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) Class.xml Stylesheet The homepage of

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. ( ). Line: 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 @attributName Example: class/students/student/major/@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, …. means apply the rules within the start and end tags to the root element.

11. XSL value-of The element is used to extract the value of the element or attribute specified in select attribute. Examples:

12. Do it yourself 1-Copy this piece of XML and save it as note.xml: John Merry Don’t forget mer 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. Note Stylesheet There was a message from (Sample Solution) to with title.

16. Redo it. Write an XSL stylesheet which displays the note.xml in the following form (HTML table):

17. Note Stylesheet From To Message Title (Sample Solution)

18. HW2 I posted assignment #2. Let’s review it together.

19. More XML Create your own XML file for a Lunch Menu. The root element should be. The sub elements of are corresponding to each food in the menu. Then each 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. Cheese Burger $5.95 650 Macaroni and Cheese $7.95 900 (Sample Solution) Hot Dog $3.95 500

21. Repetition Using 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. … 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 Student Names

25. Exercise 1.Download and save class-names.xml into your machines. 2.Download and save XSL-EX-1.xsl into your machines in the same folder. 3.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: … ) 4.View the classView.xml with a web browser.

26. Sample Solution Student Majors

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 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 is yet another xsl tag which instructs the XSL to apply the rules within start tag and end tag if the value of the specified element or attribute matches with the value specified at the right hand side of “=”. Put it another way, 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 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 o “.” in XSL is shorthand for “the current node”. o Select the current element IF its sub-element, majorName has value MGT. <xsl:if match=“.[major/@decided = ‘y’] o Select the current element if the value of “decided” attribute of its sub-element, major is ‘y’.] o 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 suggested by W3C is:

32. With the standard syntax for, the tag should be: <xsl:stylesheet version="1.0“ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> Instead of: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> 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 to avoid empty items.

34. Major Names (Sample Solution 1)

35. Do it yourself I.Download and save the file XSL-EX-3.xsl. II.Change the appropriate line in class- names.xml to be styled with XSL-EX-3.xsl. III.View class.xml with a browser. IV.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 : header … data …. You need to use and two within it.