XSLT for Web Developers

1. XSLT for Web Developers (in 30 minutes or less) Sanders Kleinfeld

2. Pop Quiz #1: XSLT is… ! A: An acronym for “Extensible Stylesheet Language Transformations” ! B: A programming language written in XML syntax ! C: An official W3C Specification ! D: All of the above

3. Pop Quiz #1: XSLT is… ! A: An acronym for “Extensible Stylesheet Language Transformations” ! B: A programming language written in XML syntax ! C: An official W3C Specification ! (http://www.w3.org/TR/xslt-30) D: All of the above

4. XSLT is a tool for global, programmatic markup manipulation

5.  XSLT  <body>! <div class="section">! <p><b>Chapter 1</b></p>! HTML5 is really great, ! because there are lots of new elements to facilitate meaningful! tagging of content.! <br/><br/>! Also, they deprecated a lot of yucky <font color="green">non-semantic stuff.</font>! </div>! </body>! <body>! <section>! <h1>Chapter 1<h1>! <p>HTML5 is really great, ! because there are lots of new elements to facilitate meaningful tagging of content.</p>! <p>Also, they deprecated a lot of yucky <span style="color: green;">non-semantic stuff.</span></p>! </section>! </body>!

6. Rhetorical Question #1: ! ! “Um, can’t I just use regular expressions for this?”

7. Example: Converting <b> to <em> with regex your_markup.replace(/<b>/, '<em>')

8. But what about: ! • Closing tags (</b>) • Attributes (<b class="term">) • Extra Whitespace (<b >) your_markup.replace(/<(/)?b(s*[^>]*)>/g, '<$1em$2>')

9. A Stack Overflow Classic: “You can’t parse [X]HTML with regex” (http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags)

10. Rhetorical Question #2: ! ! “OK, how about a library like jQuery?”

11. This jQuery WILL NOT work: $('b').tag.prop("tagName") = "em" because tagName is read-only

12. However, there are jQuery workarounds… (http://stackoverflow.com/questions/3435871/jquery-how-to-change-tag-name)

13. …And other JS XML parsers (https://github.com/nfarina/xmldoc)

14. Rhetorical Question #3: ! ! “But for complex transforms, why not go ahead and learn XSLT?”

15. XSLT leverages a functional* paradigm * Many folks have salient objections to calling XSLT a functional programming language (e.g., http://www.snoyman.com/blog/2012/04/xslt-rant.html), but document processing with XSLT still embodies the spirit of functional programming, and it feels pedantic to me to deny that.

16. Functional Paradigm var input; in JS function(input) {! // Some stuff! // happens here! return output;! } output

17. Functional Paradigm <markup>! ! </markup> in XSLT <markup>! ! </markup> <xsl:stylesheet>! ! <xsl:template match="...">! <!—Stuff happens here-->! </xsl:template>! ! <xsl:template match="...">! <!—Stuff happens here-->! </xsl:template>! ! </xsl:stylesheet>

18. Identity Function* in JS function(a) {! return a;! } * Output of function is identical to input

19. Identity Stylesheet* in XSLT <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/ XSL/Transform" version="1.0">! ! <xsl:template match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*|node()"/>! </xsl:copy>! </xsl:template>! ! </xsl:stylesheet> * Output of stylesheet is identical to input

20. Rhetorical Question #4: ! ! ! “Say What?”

21. Identity Stylesheet in XSLT: Explained <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/ XSL/Transform" version="1.0">! ! <xsl:template match="@*|node()">! BEGIN matching function Match any node (element, attribute, text) <xsl:copy>! <xsl:apply-templates select="@*|node()"/>! </xsl:copy>! </xsl:template>! ! </xsl:stylesheet> BEGIN stylesheet BEGIN copy matched node (OPEN elem) END Copy matched node (CLOSE elem) END stylesheet Select any node END matching function Run stylesheet against specified children of matched node

22. Identity Stylesheet in XSLT: How it Works Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! ! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! </body>

23. Identity Stylesheet in XSLT: How it Works Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! ! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! </body>

24. Identity Stylesheet in XSLT: How it Works Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! ! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! </body> <body>! ! </body>

27. Identity Stylesheet in XSLT: How it Works Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! ! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! </body> <body>! <p>! ! </p>! </body>

30. Identity Stylesheet in XSLT: How it Works Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! ! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! </body> <body>! <p class="greet">! ! </p>! </body>

33. Identity Stylesheet in XSLT: How it Works Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! ! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! </body> <body>! <p class="greet">! Hello World! </p>! </body>

34. Identity Stylesheet in XSLT: How it Works Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! ! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! </body> <body>! <p class="greet">! Hello World! </p>! </body>

35. Rhetorical Question #5: ! ! “OK, so how do you actually transform the output”

36. You can override the identity templates with other, more specific matching templates (just as you override rules with other rules in CSS) CSS XSLT * {! font-size: 10px;! }! ! h1 {! /* Custom Handling */! font-size: 20px;! } <xsl:template match="@*| node()">! <xsl:copy>! <xsl:apply-templates select="@*|node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match="h1">! <xsl:copy>! ! <xsl:apply-templates/>! </xsl:copy>! </xsl:template>! !

37. Our first transform: Convert all <p class="greet"> elements to <h1>s <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/ XSL/Transform" version="1.0">! <xsl:template match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*|node()"/>! </xsl:copy>! </xsl:template>! XPath matching all p elements with a class of “greet” ! <xsl:template match="p[@class='greet']">! <h1>! <xsl:apply-templates select="@*|node()"/>! </h1>! </xsl:template>! </xsl:stylesheet>

38. Our first transform: Convert all <p class="greet"> elements to <h1>s Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match=“p[@class=‘greet’] ”>! <h1>! <xsl:apply-templates select=“@*| node()"/>! </h1>! </xsl:template>! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>! </body>

39. Our first transform: Convert all <p class="greet"> elements to <h1>s Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match=“p[@class=‘greet’] ”>! <h1>! <xsl:apply-templates select=“@*| node()"/>! </h1>! </xsl:template>! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>! </body>

40. Our first transform: Convert all <p class="greet"> elements to <h1>s Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match=“p[@class=‘greet’] ”>! <h1>! <xsl:apply-templates select=“@*| node()"/>! </h1>! </xsl:template>! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>! </body> <body>! ! </body>

43. Our first transform: Convert all <p class="greet"> elements to <h1>s Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match=“p[@class=‘greet’] ”>! <h1>! <xsl:apply-templates select=“@*| node()"/>! </h1>! </xsl:template>! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>! </body> <body>! <h1>! ! </h1>! </body>

46. Our first transform: Convert all <p class="greet"> elements to <h1>s Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match=“p[@class=‘greet’] ”>! <h1>! <xsl:apply-templates select=“@*| node()"/>! </h1>! </xsl:template>! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>! </body> <body>! <h1 class="greet">! ! </h1>! </body>

49. Our first transform: Convert all <p class="greet"> elements to <h1>s Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match=“p[@class=‘greet’] ”>! <h1>! <xsl:apply-templates select=“@*| node()"/>! </h1>! </xsl:template>! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>! </body> <body>! <h1 class="greet">! Hello World! </h1>! </body>

52. Our first transform: Convert all <p class="greet"> elements to <h1>s Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match=“p[@class=‘greet’] ”>! <h1>! <xsl:apply-templates select=“@*| node()"/>! </h1>! </xsl:template>! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>! </body> <body>! <h1 class="greet">! Hello World! </h1>! <p></p>! </body>

55. Our first transform: Convert all <p class="greet"> elements to <h1>s Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match=“p[@class=‘greet’] ”>! <h1>! <xsl:apply-templates select=“@*| node()"/>! </h1>! </xsl:template>! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>! </body> <body>! <h1 class="greet">! Hello World! </h1>! <p>What’s up?</p>! </body>

56. Our first transform: Convert all <p class="greet"> elements to <h1>s Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match=“p[@class=‘greet’] ”>! <h1>! <xsl:apply-templates select=“@*| node()"/>! </h1>! </xsl:template>! </xsl:stylesheet> <body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>! </body> <body>! <h1 class="greet">! Hello World! </h1>! <p>What’s up?</p>! </body>

57. Pop Quiz #2: What does this transform do? XSLT INPUT XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*|node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match="strong"/>! </xsl:stylesheet> <p>Learning ! <strong>XSLT</strong> is awesome!</p>

58. Pop Quiz #2 Solution Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match="strong"/>! </xsl:stylesheet> <p>Learning ! <strong>XSLT</strong> is awesome!</p>

59. Pop Quiz #2 Solution Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match="strong"/>! </xsl:stylesheet> <p>Learning ! <strong>XSLT</strong> is awesome!</p>

60. Pop Quiz #2 Solution Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match="strong"/>! </xsl:stylesheet> <p>Learning ! <strong>XSLT</strong> is awesome!</p> <p></p>

63. Pop Quiz #2 Solution Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match="strong"/>! </xsl:stylesheet> <p>Learning ! <strong>XSLT</strong> is awesome!</p> <p>Learning</p>

67. Pop Quiz #2 Solution Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match="strong"/>! </xsl:stylesheet> <p>Learning ! <strong>XSLT</strong> is awesome!</p> <p>Learning is awesome!</p>

68. Pop Quiz #2 Solution Stylesheet Input XHTML Output XHTML <xsl:stylesheet xmlns:xsl="http:// www.w3.org/1999/XSL/ Transform" version="1.0">! <xsl:template ! match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*| node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match="strong"/>! </xsl:stylesheet> <p>Learning ! <strong>XSLT</strong> is awesome!</p> <p>Learning is awesome!</p>

69. Pop Quiz #3: Write XSLT that drops <strong> tags from the HTML below, but preserves the text content inside the tags INPUT XHTML <p>Learning ! <strong>XSLT</strong> is awesome!</p> DESIRED OUTPUT XHTML <p>Learning XSLT is awesome!</p>

70. Pop Quiz #3 (Sandbox at: http://www.xsltcake.com/slices/8uJRj2)

71. Pop Quiz #3 Solution <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/ XSL/Transform" version="1.0">! ! <xsl:template match="@*|node()">! <xsl:copy>! <xsl:apply-templates select="@*|node()"/>! </xsl:copy>! </xsl:template>! ! <xsl:template match="strong">! <xsl:apply-templates/>! </xsl:template>! ! </xsl:stylesheet> BEGIN match “strong” element Select child nodes (except attributes) of matched “strong” element End match “strong” element

72. Next Steps: Intermediate Topics •XPath expressions ! •Conditionals (xsl:if, xsl:choose/xsl:when/xsl:otherwise) ! •Looping/Grouping (xsl:for-each, xsl:for-each-group) ! •Numbering/Labeling (xsl:number) ! •Includes/Imports (xsl:include/xsl:import)

73. My Favorite XSLT Reference Book

74. Thank You! ! Contact Me: @sandersk

XSLT for Web Developers

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to XSLT for Web Developers

Similar to XSLT for Web Developers (20)

Recently uploaded

Recently uploaded (20)

XSLT for Web Developers