Week 12 – XML Part II

1. XHTML -- Introduction XSLT -- XSL Transforms Week 12 – XML Part II

2. HTML that is well-formed XML XHTML

3. COMP/DCOM 461 – CWB HTML Isn’t XML-Compatible Leaves HTML out of the burgeoning set of tools and other technology surrounding XML. Complicates the use of stylesheets and transforms.

4. COMP/DCOM 461 – CWB XHTML – An XML-Compatible Version of HTML Strategy: 3 flavors A Strict Flavor cleanly separates structural markup and layout markup For compatibility with some of the older browsers, a Transitional Flavor defines a minimal modification of HTML that is XML-compatible The Frameset Flavor has support for HTML frames Spec: http://www.w3.org/TR/xhtml1/ See Appendix C for guidelines for writing Transitional XHTML that works with many existing browsers (see next slide)

5. COMP/DCOM 461 – CWB Writing HTML That Is Well-Formed XML Empty elements: end the tag with /> but leave a space in front of the /. Example: <img src=“whatever” /> Don’t omit the closing tags where they are optional in HTML (But, use <p> </p> -- don’t use <p /> ) Use external style sheets and scripts because symbols like < and & are a problem if defined in-line – the <!– comment trick won’t always work Avoid line breaks inside attribute values. Use both name and id attributes to make identifiers Boolean attributes such as checked must have values equal to the attribute name (e.g., checked="checked") Use lower case tag names and attribute names. Watch &, especially in URLs: href="frobbly?id=345&amp;color=purple" Other details as listed in Appendix C of the XHTML spec: http://www.w3.org/TR/xhtml1/#guidelines Compatibility with old browsers

6. Templates XSL Files Generating Text and Attributes Includes Tips for the Homework XSLT: XML Stylesheet Language -Transforms

7. COMP/DCOM 461 – CWB XML Transforms Standard ways to transform XML files Into other XML files Into HTML or other visual presentation languages (for instance, for wireless and other handheld devices) What features would such a transform language have?

8. How Can We Define This Transformation? <table border="2"> <tr> <th>Course</th> <th>Day</th> <th>Time</th> </tr> <tr> <td>COMP 361</td> <td>Wed</td> <td>5:45</td> </tr> <tr> <td>COMP 360</td> <td>Wed</td> <td>5:45</td> </tr> </table> <schedule> <course name=“COMP 361”> <day>Wed</day> <time>5:45</time> </course> <course name=“COMP 360”> <day>Tue</day> <time>5:45</time> </course> </schedule> COMP/DCOM 461 – CWB

9. COMP/DCOM 461 – CWB The Transformation Defined in Words Wherever there is a <schedule> element, Generate a table with “Course”, “Day”, and “Time” as column headers Look at the content of <schedule> Wherever there is a <course> element Generate a table row Generate a cell, using the “name” attribute of the <course> Generate a cell, using a <day> element in the content Generate a cell, using a <time> element in the content Wherever there is a <day> element Output the text content of the <day> element Wherever there is a <time> element Output the text content of the <time> element

10. COMP/DCOM 461 – CWB XSLT – An XML Transform Language XSLT is itself an XML language (that is, it uses tags that meet the XML rules) XSLT is standardized by the W3C: http://www.w3.org/TR/xslt Stands for “XML Stylesheet Language – Transformations” It’s primary goal is to add presentation “style” to XML data For example, it can convert XML to HTML It has lots of other uses as well

11. COMP/DCOM 461 – CWB Templates Fundamental idea in XSLT: For each type of XML tag in the source document Provide a template consisting of the text to output Parameterize the templates to plug in tag attribute values, etc. Indicate in the templates where the text generated by contained tags goes

12. COMP/DCOM 461 – CWB Writing Our Transform Specification in XSLT - 1 For the top element (<schedule>), Generate a table with “Course”, “Day”, and “Time” as column headers Look at the content of <schedule> <xsl:template match=“schedule”> <table border="2"> <tr> <th>Course</th> <th>Day</th> <th>Time</th> </tr> <xsl:apply-templates/> </table> </xsl:template>

13. COMP/DCOM 461 – CWB Writing Our Transform Specification in XSLT - 2 For each <course> element Generate a table row Generate a cell, using the “name” attribute of the <course> Generate a cell, using a <day> element in the content Generate a cell, using a <time> element in the content <xsl:template match=“course”> <tr> <td> <xsl:value-of select=“@name” /> </td> <td> <xsl:apply-templates select=“day”/> </td> <td> <xsl:apply-templates select=“time”/> </td> </tr> </xsl:template>

14. COMP/DCOM 461 – CWB Writing Our Transform Specification in XSLT - 3 For each <day> element Output the text content of the <day> element For each <time> element Output the text content of the <time> element <xsl:template match=“day”> <xsl:value-of select=“text()” /> </xsl:template> <xsl:template match=“time”> <xsl:value-of select=“text()” /> </xsl:template> Actually, these templates are not needed since there are built-in (default) templates that do the same thing. But it’s a good idea to define them anyway while learning XSLT.

15. COMP/DCOM 461 – CWB The Overall Structure of an XSL File <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:output method="html" /> <!-- the xsl:template elements go here --!> </xsl:stylesheet> Specifies that the xsl: prefix is used for XSL Transforms, Version 1.0 Turns on special rules for outputting HTML (because HTML does not follow the XML rules) The XSL file: http://cs.franklin.edu/~brownc/461/XML/scheduleTransform.xsl Demo: http://cs.franklin.edu/~brownc/461/XML/scheduleWithTransform.xml View Source to see the XML

16. COMP/DCOM 461 – CWB The HTML Output Method <xsl:output method="html" /> Tags in template must follow XML rules The HTML Output Method will convert the output to follow HTML rules <br></br>  <br> <img src="…"></img>  <img src="…">

17. COMP/DCOM 461 – CWB Assigning an XSL File to Your XML File Add the following tag to your XML file: <?xml-stylesheet href="scheduleTransform.xsl" type="text/xsl" ?> Your XSL file Tells the transform software that it is an XSL transform (There are other types of “stylesheets”) Note the ?

18. COMP/DCOM 461 – CWB More About the <xsl:template> Element <xsl:template match=“pattern”> The match attribute can be a pattern The pattern language is quite different from that for JavaScript/Perl Its Goal: Find nodes in a tree defined by XML Elements Attributes Text blocks Comments (yes, even comments)

19. COMP/DCOM 461 – CWB Patterns match=“abc” – finds all <abc> elements match=“abc/def” – finds all <def> elements that are children of <abc> elements match=“abc//def” – find all <def> that are descendantsof an <abc> The // means roughly “with anything in between” Somewhere under an <abc>, not necessarily direct child elements

20. COMP/DCOM 461 – CWB Patterns for Attributes Use @ to indicate an attribute value Use = to indicate equality (not ==) Use […] to "qualify" a match Example: match=“abc[@name=‘fred’]” Find all <abc> elements whose name attribute is equal to “fred”

21. COMP/DCOM 461 – CWB Matching a Specific Place in the Hierarchy match=“/aaa/bbb” Find any <bbb> tag that is under the top level <aaa> tag <aaa name="George"> <bbb option="5" /> <bbb option="8" > <ccc suboption="0"> <bbb option="9" /> </ccc> </aaa> Example: /aaa/bbb matches these, not this /aaa//bbb matches all the <bbb> tags somewhere under the <aaa> tag

22. COMP/DCOM 461 – CWB Patterns and XPath The patterns in XSLT follow the XPath standards It support lots of other pattern features See http://www.w3.org/TR/xpath

23. COMP/DCOM 461 – CWB Generating Text Output <xsl:template match="course"> <tr> <td> <xsl:value-of select="@name"/> </td> <td> <xsl:value-of select="day"/> </td> <td> <xsl:apply-templates select="time"/> </td> </tr> </xsl:template> Non xsl: tags are output as-is Inserts the value of the “name” attribute of <course> Select the child element <day> and insert it’s string value. The string value of an element is the text in its content. Because the template for <time> just outputs the value, xsl:value-of and xsl:apply-templates accomplish the same result in this case.

24. COMP/DCOM 461 – CWB Outputting Attributes <xsl:template match=“item”> <xsl:value-of select=“@itemID”/> <img src=“{@imageURL}” /> Price: <xsl:value-of select=“@price”/> </xsl:template> Tags are not allowed inside attributes in XML. Thus, <xsl:value-of> works only for generating text outside of a tag You cannot write <img src="<xsl:value-of …>" /> { … } allows you to put an expression inside the quotes in an attribute you are generating

25. COMP/DCOM 461 – CWB Variables and Parameters <xsl:variable name=“aName”>value</xsl:variable> <xsl:param name=“aName” /> <xsl:value-of select=“$aname”> Defining Using • xsl:variable defines a constant to be used in subsequent or subtending templates • xsl:param defines a parameter passed in from outside the stylesheet or a parameter passed into a template

26. COMP/DCOM 461 – CWB Using a Parameter to Select One Item from a List in XML <xsl:param name="itemid" /> <xsl:output method="html" /> <xsl:template match="item[@id={$itemid]}"> Description: <xsl:value-of select="./description"/> <br> Price: <xsl:value-of select="./price"/> <br><img src="{./imgUrl}"> </xsl:template>

27. COMP/DCOM 461 – CWB Including Other Templates <xsl:include href="url" /> Can only be placed as child of the <xsl:stylesheet> tag URL to another XSL file. The templates in it are merged into the main XSL file. Think of <xsl:include> as meaning "include some more templates" Don't think of <xsl:include> as meaning "include something in the output"

28. An alternative for certain types of problems and certain types of programmers The Pull Approach to XSL

29. COMP/DCOM 461 – CWB The Original, Template-oriented description Wherever there is a <schedule> element, Generate a table with “Course”, “Day”, and “Time” as column headers Look at the content of <schedule> Wherever there is a <course> element Generate a table row Generate a cell, using the “name” attribute of the <course> Generate a cell, using a <day> element in the content Generate a cell, using a <time> element in the content Wherever there is a <day> element Output the text content of the <day> element Wherever there is a <time> element Output the text content of the <time> element

30. COMP/DCOM 461 – CWB The “Pull” Approach to Writing XSLT Rewording the description of the transform … Generate a table with “Course”, “Day”, and “Time” as column headers For each <course> element under a <schedule> element Generate a table row Generate a cell, using the “name” attribute of the <course> Generate a cell, using the value of the <day> element in the content Generate a cell, using the value of the <time> element in the content More like the JSP approach Example: http://cs.franklin.edu/~brownc/461\XML\scheduleWithPullTransform.xml http://cs.franklin.edu/~brownc/461\XML\schedulePullTransform.xsl

31. COMP/DCOM 461 – CWB Summary of the Pull Approach There is one template (match=“/”) Its content defines the entire HTML output For substitutions <xsl:value-of select=“patn”/> Analogous to <%= … %> in JSP For repeats (iterations) <xsl:for-each select=“patn2”> stuff to repeat </xsl:for-each> Analogous to <% for(k=0; k<N; k++){%> “Pulls” the value to substitute “Pulls” the set of elements to iterate over http://cs.franklin.edu/~brownc/461\XML\schedulePullTransform.xsl

32. COMP/DCOM 461 – CWB Choosing Your XSL Design Approach Many times, it’s just a matter of personal coding preference Use the “pull” approach When your XML file’s structure does not match well the structure of the desire HTML When you prefer a “JSP like” coding style When you want to use XML information more than once in the output (pull it in multiple times) Use the template-per-element-type approach When particular type of XML information is formatted the same regardless of context

33. COMP/DCOM 461 – CWB Implicit Stylesheets –XHTML Files with XSLT Embedded May be used when there is just one <xsl:template> tag, as in the “pull” approach Instead of <xsl:stylesheet> and <xsl:template> tags, use XSL attributes in the top-level HTML tag <html xmlns:xsl=http://www.w3.org/1999/XSL/Transform xsl:version="1.0"> And <xsl:for-each> tags to pull in the XML data Supplemental information for COMP 461: used in the on-line tutorial Example: http://www.xml.com/pub/a/2000/08/holman/s2_1.html?page=2 (mid-page)

34. COMP/DCOM 461 – CWB Advanced XSLT – For You to Explore Expressions: arithmetic, Boolean, and string operations Advanced Patterns: complex conditionals on values and position within the tree Conditionals Sorting Modes: switching to a different set of templates for a sub-tree of XML elements Lots more

35. COMP/DCOM 461 – CWB Formatting – The Companion to XSLT (for you to explore) Formerly known as XSL-FO Tags that specify user output at a higher level than HTML Can be used to generate HTML or other language for creating user output Used to permit one transform to generate output for multiple types of devices or uses (e.g., printer friendly alternative pages) http://www.w3.org/TR/xsl/

36. COMP/DCOM 461 – CWB XSLT References W3C Specification for XSLT http://www.w3.org/TR/xslt W3C Specification for Xpath, the patterns used in XSLT: http://www.w3.org/TR/xpath Online tutorial http://www.xml.com/pub/a/2000/08/holman/index.html Note: some examples use the implicit form of stylesheet

37. Using Jakarta XTags to Perform XSL Transforms in JSP

38. COMP/DCOM 461 – CWB XSL in JSP Browser Controller Servlet JSP XSL Transform XML XSL

39. COMP/DCOM 461 – CWB XTags for XSL in JSP <%@ taglib uri="http://jakarta.apache.org/taglibs/xtags-1.0" prefix="xtags" %> <% String item= (String)request.getAttribute("itemid"); %> Stuff before the transform<br> <xtags:style xml="xml/scheduleWithTransform.xml" xsl="xml/scheduleTransformWithParam.xsl" outputMethod="html" > <xtags:param name="itemid" value="<%=item%>" /> </xtags:style> <br>Stuff after the transform. Declare use of XTags Invoke style tag to get transformed XML Pass a parameter to the transform

40. COMP/DCOM 461 – CWB XSL for Catalog Detail <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:param name="itemid" /> <xsl:output method="html" /> <xsl:template match="catalog"> <xsl:apply-templates /> </xsl:template> <xsl:template match='item[@id=$itemid]'> Description : <xsl:value-of select="./description"/> <br></br> Price: <xsl:value-of select="./price"/> <br></br><img src="{./imgUrl}"></img> </xsl:template> <xsl:template match="item"> </xsl:template> </xsl:stylesheet> Declare parameter itemid, passed in from tag Apply templates to contents of <catalog> Match on desired <item> element Since output method is "html", this will become just <br> Empty template to suppress default behavior for other <item> elements Template to generate detailed description

41. COMP/DCOM 461 – CWB XSL in JSP XSL Parameter Browser JSP itemid Controller Servlet xtags:style tag XSL Transform Request Context XML XSL itemid

42. COMP/DCOM 461 – CWB XSL Tips Including Javascript: Use the src attribute of the <script> tag to avoid potential problems Or you may embed the script in the CDATA quotes: <![CDATA[ function f() { if(a < b ) c = d; } ]]> These are standard XML quoting tags. The < would otherwise look like the start of a tag.

43. COMP/DCOM 461 – CWB XSL Tips Including HTML from another file: Use <xsl:import> or <xsl:include> tag The included material is an XSL file defining a named template containing the desired HTML Use the import/include tags only at the top level: not inside a template Call the imported, named template within another template using <xsl:call-template> Be sure the included HTML is well-formed XML! Example: http://cs.franklin.edu/~brownc/461/XML/scheduleWithInclude.xml Recall: XSL included files must contain templates

44. COMP/DCOM 461 – CWB XSL Tip Note regarding previous slide: When invoking XSL from JSP, it is better to include untransformed HTML from JSP than from within the XSL file.

45. COMP/DCOM 461 – CWB HTML Code in XSLT HTML code in XSLT templates must be well-formed XML Use the XHTML rules …

46. COMP/DCOM 461 – CWB Writing HTML That Is Well-Formed XML Empty elements: end the tag with /> but leave a space in front of the /. Example: <img src=“whatever” /> Don’t omit the closing tags where they are optional in HTML (But, use <p> </p> -- don’t use <p /> ) Use external style sheets and scripts because symbols like < and & are a problem if defined in-line – the <!– comment trick won’t always work Avoid line breaks inside attribute values. Use both name and id attributes to make identifiers Boolean attributes such as checked must have values equal to the attribute name (e.g., checked="checked") Use lower case tag names and attribute names. Watch &, especially in URLs: href="frobbly?id=345&amp;color=purple" Other details as listed in Appendix C of the XHTML spec: http://www.w3.org/TR/xhtml1/#guidelines Compatibility with old browsers

47. COMP/DCOM 461 – CWB Homework Assignment XML Part II http://cs.franklin.edu/Syllabus/comp461/assignments.html#xml2 Write JSP pages and XSL transforms for The catalog index page The catalog detail pages (one template for all) The JSP should contain all stuff not dependent on the XML data The stuff that is dependent on XML should be inserted by using the <xtags:style> tag For a detail page, use the <xtags:param> tag to pass the item ID to the transform Submit printouts of the XSL files only