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 Processor XSL 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 XML Document HTML Document (with embedded XSL elements) XSL element XML data XSL Processor XML data

5. Enhancing HTML Documents with the Following XML Data Jeff 555-1234 555-4321 lightgrey FitnessCenter.xml

6. Embed HTML Document in an XSL Template <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Welcome Welcome! 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 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Welcome Welcome !

9. Extracting a Value from an XML Document, Navigating the XML Document Extracting values: –use the 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 Element FitnessCenter Element Member Element Name Element Phone Element Phone Element FavoriteColor Text Jeff Text 555-1234 Text 555-4321 Text lightgrey

11. Extract the FavoriteColor and use it as the bgcolor <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Welcome Welcome !

12. Note Attribute values cannot contain " " - Consequently, the following is NOT valid: "> To extract the value of an XML element and use it as an attribute value you must use curly braces: Evaluate the expression within the curly braces. Assign the value to the attribute.

13. Extract the Home Phone Number <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Welcome Welcome ! Your home phone number is:

14. Note In this example we want "the Phone element where the value of its type attribute equals 'home' ": 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 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. Fruit Color Papaya Red Banana Yellow Fruit Color Papaya Red Banana Yellow

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. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Welcome Welcome ! Your phone numbers are: Type Number

19. Iterating through XML Elements <!- - Within here we are at one of the Phone elements. Thus, in <xsl:value-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. - ->

20. Absolute Path versus Relative Path This is an absolute xPath expression (we start from the top of the XML tree and navigate down the tree) 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. Welcome Welcome ! Our special offer to platinum members today is... Your phone numbers are: Type Number

23. Conditional Processing Use the 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. Welcome Welcome ! Our special offer to platinum members today is... Your phone numbers are: Name Type Number

26. Getting the Name when accessing the Phone Member Phone 555-1234 Phone 555-4321 Name Jeff 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 "Select the Name of the first Member" "Select the Name of the first Member" "Select the Name of the last Member" Note: Assume that there are multiple Members

28. Other ways to Access the XML Data (cont.) <!- - Process all Name elements which have FitnessCenter as an ancestor - ->

29. Enhanced XML Document Jeff 555-1234 555-4321 lightgrey David 383-1234 383-4321 lightblue Roger 888-1234 888-4321 lightyellow Note that each Member now has a unique id (the id attribute)

30. Name Home Phone Number

31. Numbering There is an XSL element that returns a number corresponding to the element's position in the set of selected nodes. Output: 1. Jeff 2. David 3. Roger

32. Start Numbering from 0 How would you start the numbering from zero, rather than one?

33. format attribute of xsl:number 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 … –format=“1” generates the sequence: 1, 2, 3, … –format=“01” generates: 01, 02, 03, … –format=“A” generates: A, B, C, … –format=“a” generates: a, b, c, … –format=“I” generates: I, II, III, … –format=“i” generates: i, ii, iii,...

34. format attribute of xsl:number. 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 "For each Member, sort the Name elements" Output: David Jeff Roger (see html-example10)

36. Sorting The set of Member elements selected by xsl:for-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.