xslt for web developers

XSLT for Web Developers

Sanders Kleinfeld

(in 30 minutes or less)

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

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

(http://www.w3.org/TR/xslt-30)

XSLT is a tool for global, programmatic markup

manipulation

<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>!

😢 😎

Rhetorical Question #1: !

“Um, can’t I just use regular expressions

for this?”

Example: Converting <b> to <em> with

your_markup.replace(/<b>/, '<em>')

But what about: !

• Closing tags (</b>)

• Attributes (<b class="term">)

• Extra Whitespace (<b >)

your_markup.replace(/<(\/)?b(\s*[^>]*)>/g, '<$1em$2>')

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)

“OK, how about a library like jQuery?”

This jQuery WILL NOT work:

$('b').tag.prop("tagName") = "em"

because tagName is read-only

However, there are jQuery workarounds…

(http://stackoverflow.com/questions/3435871/jquery-how-to-change-tag-name)

…And other JS XML parsers

(https://github.com/nfarina/xmldoc)

“But for complex transforms, why not go ahead and learn

XSLT?”

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.

var input;

function(input) {! // Some stuff! // happens here! return output;!}

Functional Paradigm in JS

output

Functional Paradigm in XSLT

<xsl:stylesheet>!! <xsl:template match="...">! <!—Stuff happens here-->! </xsl:template>!! <xsl:template match="...">! <!—Stuff happens here-->! </xsl:template>!!</xsl:stylesheet>

function(a) {! return a;!}

Identity Function* in JS

* Output of function is identical to input

Identity Stylesheet* in XSLT

* Output of stylesheet is identical to input

<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>

“Say What?”

Identity Stylesheet in XSLT: Explained

<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>

BEGIN stylesheet

END stylesheet

BEGIN matching function Match any node (element, attribute, text)

BEGIN copy matched node (OPEN elem)

END Copy matched node (CLOSE elem)

Select any node

END matching function

Run stylesheet against specified children of matched node

Identity Stylesheet in XSLT: How it Works

<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>

Stylesheet Input XHTML Output XHTML

<body>!<p class="greet">! Hello World!</p>!</body>

“OK, so how do you actually transform

the output”

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>!!

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>!! <xsl:template match="p[@class='greet']">! <h1>! <xsl:apply-templates select="@*|node()"/>! </h1>! </xsl:template>!</xsl:stylesheet>

XPath matching all p elements with a class of “greet”

<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>

<body>! <h1 class="greet">! Hello World! </h1>! <p></p>!</body>

<body>! <h1 class="greet">! Hello World! </h1>! <p>What’s up?</p>!</body>

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>

Pop Quiz #2 Solution

<p></p>

<p>Learning</p>

<p>Learning is awesome!</p>

Pop Quiz #3: Write XSLT that drops <strong> tags from the HTML below, but

preserves the text content inside the tags

INPUT XHTML

DESIRED OUTPUT XHTML

<p>Learning XSLT is awesome!</p>

Pop Quiz #3

(Sandbox at: http://www.xsltcake.com/slices/8uJRj2)

<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

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)

My Favorite XSLT Reference Book

Thank You! !

Contact Me: @sandersk

xslt for web developers

Software