xslt for web developers
Post on 08-Jul-2015
458 Views
Preview:
DESCRIPTION
TRANSCRIPT
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>!
XSLT
😢 😎
Rhetorical Question #1: !
!
“Um, can’t I just use regular expressions
for this?”
Example: Converting <b> to <em> with
regex
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)
Rhetorical Question #2: !
!
“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)
Rhetorical Question #3: !
!
“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
<markup>! <!--Input-->!</markup>
Functional Paradigm in XSLT
<markup>! <!--Output-->!</markup>
<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>
Rhetorical Question #4: !
!
!
“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
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
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>!!</body>
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>!!</body>
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>!!</body>
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>!!</p>!</body>
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>!!</p>!</body>
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>!!</p>!</body>
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">!!</p>!</body>
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">!!</p>!</body>
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">!!</p>!</body>
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>
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>
Rhetorical Question #5: !
!
“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>! <!--Custom handling-->! <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”
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>!!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>!!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>!!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1>!! </h1>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1>!! </h1>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1>!! </h1>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">!! </h1>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">!! </h1>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">!! </h1>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">! Hello World! </h1>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">! Hello World! </h1>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">! Hello World! </h1>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">! Hello World! </h1>! <p></p>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">! Hello World! </h1>! <p></p>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">! Hello World! </h1>! <p></p>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<body>! <h1 class="greet">! Hello World! </h1>! <p>What’s up?</p>!</body>
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>
<body>! <p class="greet">! Hello World! </p>! <p>What’s up?</p>!</body>
Stylesheet Input XHTML Output XHTML
<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
<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>
Stylesheet Input XHTML Output XHTML
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p></p>
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p></p>
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p></p>
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning</p>
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning</p>
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning</p>
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning</p>
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<p>Learning is awesome!</p>
Pop Quiz #2 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:stylesheet>
<p>Learning !<strong>XSLT</strong> is awesome!</p>
Stylesheet Input XHTML Output XHTML
<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
<p>Learning !<strong>XSLT</strong> is awesome!</p>
DESIRED OUTPUT XHTML
<p>Learning XSLT is awesome!</p>
Pop Quiz #3
(Sandbox at: http://www.xsltcake.com/slices/8uJRj2)
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
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
top related