1. 1 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Using XSLT and XPath to Enhance HTML Documents Roger L. Costello XML Technologies

2. 2 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Acknowledgement I wish to thank David Jacobs for showing me a new way of looking at HTML and XSLT/XPath Many of the examples that I use in this tutorial come straight from David's excellent paper, Rescuing XSLT from Niche Status (see http://www.xfront.com)

3. 3 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. History XSL XSLT XPath XLink/ XPointer XQuery XML Schemas (high-precision graphics, e.g., PDF) (low-precision graphics, e.g.,HTML, text, XML)

4. 4 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Note For brevity, instead of using the term XSLT/XPath, I will simply call it XSL.

5. 5 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Multiple Output Formats XSL may be used to generate either HTML, XML, or text XSL Processor XSL XML HTML (or XML or text)

6. 6 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. xalan/xt/saxon xalan: A free XSL processor, implemented in Java, from Apache (http://www.apache.org/) xt: A free XSL processor, implemented in Java, from James Clark (http://www.jclark.com/) saxon: A free XSL processor, implemented in Java, from Michael Kay (http://users.iclway.co.uk/mhkay/saxon xalan/xt/saxon XML XSL HTML (or XML or text) Invoking from a DOS command line: run-xalan FitnessCenter.xml FitnessCenter.xsl FitnessCenter.html run-xt FitnessCenter.xml FitnessCenter.xsl FitnessCenter.html run-saxon FitnessCenter.xml FitnessCenter.xsl FitnessCenter.html

7. 7 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Styling XML Documents using IE6 or Netscape7 Put a stylesheet PI at the top of your XML document. Now you can simply drop the XML document into the browser and the XML will be automatically styled using the stylesheet referenced in the stylesheet PI. Jeff 555-1234 555-4321 lightgrey Add this stylesheet PI to the top of your XML document

8. 8 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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

9. 9 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Enhancing HTML Documents with XML Data XML Document HTML Document (with embedded XSL elements) XSL element XML data XSL Processor XML data

10. 10 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Enhancing HTML Documents with the Following XML Data Jeff 555-1234 555-4321 lightgrey FitnessCenter.xml

11. 11 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Embed HTML Document in an XSL Template <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Welcome Welcome! FitnessCenter.xsl (see html-example01) Note how we have the HTML document embedded within an XSL template

12. 12 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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.

13. 13 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Extracting the Member Name <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Welcome Welcome ! (see html-example02)

14. 14 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Note Notice how we have enhanced the HTML document by using data from the XML document!

15. 15 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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."

16. 16 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Document / PI Element FitnessCenter Element Member Element Name Element Phone Element Phone Element FavoriteColor Text Jeff Text 555-1234 Text 555-4321 Text lightgrey

17. 17 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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 ! (see html-example03)

18. 18 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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.

19. 19 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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: (see html-example04)

20. 20 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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=" … ' …' …"

21. 21 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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.

22. 22 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Fruit Color Papaya Red Banana Yellow Fruit Color Papaya Red Banana Yellow

23. 23 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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.

24. 24 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Welcome Welcome ! Your phone numbers are: Type Number (see html-example05)

25. 25 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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. - ->

26. 26 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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) Do Lab1, Parts 1-3

27. 27 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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".

28. 28 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Welcome Welcome ! Our special offer to platinum members today is... Your phone numbers are: Type Number (see html-example06)

29. 29 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Conditional Processing Use the element to perform conditional processing. Do Lab1, Part 4

30. 30 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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.

31. 31 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Welcome Welcome ! Our special offer to platinum members today is... Your phone numbers are: Name Type Number (see html-example07)

32. 32 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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.

33. 33 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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

34. 34 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Other ways to Access the XML Data (cont.) <!- - Process all Name elements which have FitnessCenter as an ancestor - ->

35. 35 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Other ways to Access the XML Data (cont.)

36. 36 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Nodelist This xPath expression: /FitnessCenter/Member selects a list of nodes (a list of Member nodes). This list of nodes is called a "nodelist".

37. 37 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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)

38. 38 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Review - HTML Hyperlinking … Click Here... This creates an internal hyperlink (the source "anchor" links to the target anchor).

39. 39 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Hyperlink Name to Home Phone Problem: create an HTML document that has two tables - a Member Name table, and a Member home Phone number table. Hyperlink the Member's Name to his/her Phone.

40. 40 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Name Home Phone Number (see html-example08) Do Lab1, Parts 5-6

41. 41 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Numbering There is an XSL element that returns a number corresponding to the element's position in the set of selected nodes (see html-example09). Output: 1. Jeff 2. David 3. Roger

42. 42 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Start Numbering from 0 How would you start the numbering from zero, rather than one?

43. 43 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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,...

44. 44 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. format attribute of xsl:number. Output: A. Jeff B. David C. Roger

45. 45 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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)

46. 46 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. 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.

47. 47 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. concat() function concat(destination string, string to add) Note: if you want to concatenate more than one string to the destination string then simply add more arguments

48. 48 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Output: Welcome Jeff! Welcome David! Welcome Roger!

49. 49 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Hello World xsl:variable This XSL element allows you to create a variable to hold a value (which could be a string or a subtree of the XML document). The variable is referenced by $variable-name This creates a variable called hello, that has a value which is the literal string, ‘Hello World’. We could use this variable as follows: Value = This will output: Value = Hello World hello

50. 50 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Member's Phone Numbers: Name Type Number (see html-example12)

51. 51 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. xsl:variable This creates a variable called member, that has a value which is a subtree. We could use this variable as follows: Name = Home Phone = This will result in generating: Name = Jeff Home Phone = 555-1234 Member... Name Phone Jeff 555-1234 555-4321

52. 52 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. xsl:variable A variable is “write once, read many”. – That is, you can assign a variable a value only once, but then you can retrieve the value of the variable many times. A variable has a scope limited to the XSL element that it is nested within. Its scope starts where it is defined and extends to the end of the XSL element that it is nested within.

53. 53 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Member's Phone Numbers: Name Type Number The name variable's life ends here Do Lab2, Part 1

54. 54 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Global Variables You can create a variable outside of. Then, the variable is global. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Value of Pi The value of pi =

55. 55 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Problem Suppose that we want to create a variable, names, and we want this variable to contain a list of the Member Names, with each name separated by a slash. How would you create such a variable? Here’s what you might attempt to do: Member's Names: Output: Jeff (see html-example13)

56. 56 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Let’s add some statements to trace this example Output: Jeff Jeff/ Jeff/David Jeff/ <--- Why did we loose the previous Name? That name went out of scope. Jeff/Roger Jeff Obviously, this approach doesn’t work. So how do we do it? (see html-example14)

57. 57 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Here’s what we would like to do names Open up the names box Add this iteration’s Name and a slash to the open names box Iterate through each name, adding into the open box Jeff/David/Roger Close the box names Jeff … / … David … / … Roger

58. 58 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Problem - Solution In all previous examples of creating a variable we declared the name of the variable and then had a select attribute which gave the variable its value. We can omit the select attribute: - Do stuff in here. All output will go into the names “box”.

59. 59 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Problem - Solution Member's Names: / (see html-example15) Output: Member's Names: Jeff/David/Roger

60. 60 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. contains() function contains(string to be tested, test string) returns true if string to be tested contains test string $greeting contains ‘welcome’ Do Lab2, Part 2

61. 61 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. xsl:choose xsl:choose allows you to elegantly express multiple conditional tests. Here’s the structure: [action] [action] [action] The first xsl:when statement that evaluates to true is executed. If none evaluates to true then the xsl:otherwise statement is executed.

62. 62 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Implementing an if-then-else There is no if-then-else element in XSL. However, there is an elegant way to do it: Jeff is a member No member by the name Jeff

63. 63 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. substring-before() String Function Here’s the form of this string function: substring-before(string, pattern) Example: “Get the contents of Phone and put it into the variable called ‘phone’. Then extract from the content of ‘phone’ the string before the '-' (i.e., the telephone exchange)”. 555-1234 substring-before($phone, ‘-’) 555 phone

64. 64 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. substring-after() String Function Here’s the form of this string function: substring-after(string, pattern) Example: “Get the contents of Phone and put it into the variable called ‘phone’. Then extract from the content of ‘phone’ the string after the '-'”. 555-1234 substring-after($phone, ‘-’) 1234 phone

65. 65 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. starts-with() String Function Here’s the form of this string function: starts-with(string, pattern) Example: [action] “If the Phone starts with the string, ‘555’ then do [action]”.

66. 66 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. substring() function substring(string, i, len?) returns the substring of string that starts at the ith position and has length, len. The length argument (len) is optional. If not present then this function returns the substring starting at the ith position all the way to the end of the string. Note: the first character is at position 1 (not 0 as with some languages) substring(‘1234567890’, 2, 5) returns ‘23456’

67. 67 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. string-length() function string-length(string) returns the length of the string string-length(‘1234567890’) returns 10

68. 68 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. translate() function translate(string, from-pattern, to-pattern) Example. translate(“Hello”, “ABCDEFGHIJKLMNOPQRSTUVWXYZ”, “abcdefghijklmnopqrstuvwxyz”); this will convert Hello to hello (i.e., convert to lower case) A better approach to the above problem is: translate(“Hello”, $upperCaseChars, $lowerCaseChars) Note: need to put the string within (single) quotes, otherwise the XSL Processor will try to interpret it as an XML element. Do Lab2, Part 3

69. 69 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Boolean and Relational Operators Boolean operators: not, and, or Relational operators:, =, =, != The less than and greater than signs are reserved symbols, so they need to be escaped when you use them. Thus, the relational operators will appear in your XSL code like this: = = != < > = <= >= != Want this: Use this:

70. 70 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Arithmetic The arithmetic operators available: +, -, *, div, mod (remainder from doing a division) –Note: recall that an XML element can have a dash in the name. So, if you want to indicate subtraction, be sure to surround “-” with blank spaces.

71. 71 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Arithmetic functions sum(node set) this function sums up all the values in the set of nodes floor(number) returns the largest integer that is not greater than number –Example. floor(2.5) returns 2 ceiling(number) returns the smallest integer that is not less than number –Example. Ceiling(2.5) returns 3 round(number) returns the integer closest to number –Example. round(2.3) returns 2

72. 72 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Enhanced XML Document Jeff 555-1234 555-4321 lightgrey 340 David 383-1234 383-4321 lightblue 500 Roger 888-1234 888-4321 lightyellow 340 Note that each Member now has MembershipFee element

73. 73 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Compute Membership Revenue Membership Fee Revenue: (see html-example16)

74. 74 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. xsl:attribute This XSL element is used by nesting it within an output element. It enables you to create an attribute for the output element

75. 75 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Coloring alternate rows Member Names: yellow (see html-example17) For each even row of the table, the TR value will be:

76. 76 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. count() function count(set of node) returns an integer representing the number of nodes (i.e., XML elements) in the set. Example. Number of members = Output: Number of members = 5 Do Lab2, Part 4

77. 77 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Selecting all Elements/Attributes...... For each attribute do... For each child element do...

78. 78 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Getting the Name of the Element/Attribute using the name() Function Attribute = Element = (see html-example19) name(node) returns the name of "node"

79. 79 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. When to use Curly Braces? “When I assign an attribute a value, when do I use curly braces and when do I not use them?” Use curly braces for these attributes: - the attribute of a literal result element (where you literally type what should be output) Example: - the name attribute of xsl:attribute Example: - the name attribute of xsl:pi Example: - the name attribute of xsl:element Example: - the optional attributes of xsl:sort: Example: lang =“{@value}”> data-type =“{@value}”> case-order =“{@value}”>

80. 80 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. document( ) Function This function enables you to access other XML documents (besides the XML document that you specify when you invoke the XSL Processor). The format for using the document() function is: document(url), where url is a URL to another XML document

81. 81 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Fitness Centers Merger Another fitness center has just merged with us. They have an xml document (FitnessCenter2.xml) containing their Members. You are to create an XSL-enhanced HTML document that creates a single table comprised of all the Members from both fitness clubs.

82. 82 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Name Phone(home)... <xsl:variable name="fitnessCenter2" select="document('file://localhost/xml-course/.../FitnessCenter2.xml')"/> (see html-example20) Do Lab3, Part 1

83. 83 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Parameterized Processing You can create a subroutine (called a named template), and you can pass to it parameters.

84. 84 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Fitness Center <xsl:with-param name="name" select="/FitnessCenter/Member[1]/Name"/>... (see html-example21)

85. 85 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Call by Reference How do we create a named template that returns a value? Example: create a named template which, when passed a number, it returns the number div 2.

86. 86 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Fitness Center 16 / 2 = (see html-example22)

87. 87 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Problem: Determine if all values are <= 100 23 41 70 103 99 6 (see html-example22-1)

88. 88 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. All numbers in the list are less than or equal to 100: true false Do Lab3, Part 2 Pass to the named template a list of nodes, i.e., a nodelist. This is a recursive routine If the nodelist is empty then return true Check the first node on the list. If it's greater than 100, then return false (and we're done). Otherwise, recurse over the remaining nodes.

89. 89 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. generate-id() Use this function to generate a unique string for a node Example. generate-id(/FitnessCenter/Member[1]) will return a unique id for the first Member

90. 90 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Using generate-id() to Uniquely Identify Elements In html-example08 we created two tables - a table containing the Members Names, and a separate table containing home Phone numbers. Each Name was hyperlinked to his/her home Phone. We used the id attribute on each Member element to link the two tables together. Suppose there is no id attribute. We can use generate-id() to create a unique identifier.

91. 91 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Name Home Phone Number (see html-example23)

92. 92 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Same (XML) Data, Multiple Views In html-example24 I show how to create an HTML document that allows a client to view an XML document in different forms. Look at html-example24. With the buttons on the left side of the screen we can select which view is desired.

93. 93 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Multiple Stylesheets to provide the different views FitnessCenter.xml ShowMembers.xsl ShowPlatinumMembers.xslShowGoldMembers.xslShowAll.xsl

94. 94 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. FitnessCenter.html - comprised of two frames FitnessCenter.html Controls.html Body.html ShowMembers ShowPlatinumMembers ShowGoldMembers ShowAll RawXML

95. 95 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. FitnessCenter.html Welcome FitnessCenter.html Two columns. The first column is 20% of the width of the screen. The second column is 80% of the width of the screen. NOTE: do NOT have a element (it won't work if you do)

96. 96 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Body.html Fitness Center Body.html This document is very simple - it's empty! The body will be filled in with the HTML that is generated by styling the XML document

97. 97 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Controls.html (tracing through the actions that occur when a user selects "ShowGoldMembers") Press Show Gold Members button Load ShowGoldMembers.xsl Invoke the Javascript function, ShowGoldMembers() Transform (the previously loaded) FitnessCenter.xml using ShowGoldMembers.xsl Set the body of Body.html to the generated html

98. 98 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Controls.html (code to ShowGoldMembers) <INPUT type="button" value="Show Gold Members" onclick="ShowGoldMembers var xml = new ActiveXObject("Msxml2.DOMDocument.3.0"); xml.async = false; xml.load("FitnessCenter.xml"); function ShowGoldMembers() { var xsl = new ActiveXObject("Msxml2.DOMDocument.3.0"); xsl.async = false; xsl.load("ShowGoldMembers.xsl"); parent.bodyFrame.document.body.innerHTML = xml.transformNode(xsl); } This is preloading the XML document Load the XSL document Transform the XML document using the stylesheet, and assign the body of Body.html to the generated html.

99. 99 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Using SAXON in a Browser (rather the XSL Processor built into IE) The last example utilized the XSL Processor built into IE (msxml) to do the transformations. Suppose the you would like to use a different XSL Processor, e.g., SAXON? –Why would you want to do this? Answer: SAXON has several capabilities that msxml does not have. SAXON comes with a Java applet that you can use to do XSL processing within a browser. See html-example-24-a for details on how to use SAXON's Java applet to implement the multi-button example. See html-example-24-b for an example of how to use SAXON as the XSL Processor within a browser.

100. 100 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Inserting spaces into HTML output Put one character references for each space required

101. 101 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Debugging your Stylesheets using xsl:message xsl:message is used to display a message, and (optionally) terminate execution of the stylesheet. The message is sent to the screen, not to the output file. This provides a very nice way to monitor the flow of your stylesheet, without impacting the output file.

102. 102 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Example using xsl:message <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Invalid MembershipFee All the MembershipFee elements are valid Two possible values for terminate - yes, or no. terminate="yes" means that you want the message output to the screen and then the program stopped. terminate="no" means that you want the message output to the screen and the program to continue executing. See html-example26

103. 103 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. system-property() function The system-property(property name) function enables you to obtain information about the XSL Processor that you are using: –xsl:vendor - if you specify this as the value for property name then it will return the name of the XSL Processor vendor –xsl:vendor - this provides the URL to the vendor's web site –xsl:version - this indicates what version of the XSL spec is implemented.

104. 104 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Recommended Practice <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> XSLT Processor: Welcome Welcome! It is very good practice to add this to the start of every stylesheet. This will give you a message indicating which XSL Processor you are using. When might you be uncertain which XSL Processor is being used? Java comes bundled with xalan. Suppose that you want to write a Java program which uses Saxon instead. You will definitely want to use the above to ensure that you are invoking Saxon and not the built-in xalan. (I know. I have made the mistake of thinking that I was using Saxon when in fact I was using xalan.) See html-example27

105. 105 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Embedded Stylesheets You can embed a stylesheet within an XML document. <!DOCTYPE FitnessCenter [ ]> Jeff 555-1234 555-4321 lightgrey... <xsl:stylesheet id="embed" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">... Stylesheet embedded within the XML document

106. 106 Copyright (c) [2001]. Roger L. Costello. All Rights Reserved. Embedded Stylesheets <!DOCTYPE FitnessCenter [ ]> Jeff 555-1234 555-4321 lightgrey... <xsl:stylesheet id="embed" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">... Add an id attribute to the xsl:stylesheet element. The stylesheet PI references the embeded stylesheet (as indicated by the"#" sign) You must indicate that the id attribute is of type ID. See html-example28 (Note: not all XSL Processors support embedded stylesheets)