Recycled from Gill Windall’s notes

Recycled from Gill Windall’s notes
XML 3 XSLT Recycled from Gill Windall’s notes © 2004 the University of Greenwich

The need for style sheets with XML
XML defined tags describe document content but not presentation Presentation information can be added using of style sheets. XML document + style sheet = presentable document There are two main style sheet languages - both are W3C standards CSS - Cascading Style Sheets XSL - eXtensible Stylesheet Language (XML Stylesheet Language) CSS is a more mature (in Internet terms) standard XSL itself consists of two languages XSL Transformations (XSLT) can restructure an XML document - often used to convert XML into HTML or XHTML XSL Formatting Objects (XSL-FO) defines how elements are displayed. XSLT and XSL-FO can be used independently XSL-FO has some opponents XSLT is more stable and widely used and is what is covered here. © 2004 the University of Greenwich

The difference between CSS and XSL
XSL - can restructure an XML document and then format it for display Spot the difference? plain XML XML rendered XSL-FO or CSS XSLT XML transformed and rendered plain XML XML transformed

XSLT is a transformation language
XSLT is very different from CSS XSLT can transform an XML document into any other format (e.g. another XML document, HTML, PDF, plain text). For display in a browser it makes sense for the output document to be in HTML or XHTML format because that is what browsers can display. XML document XSLT processor HTML document XSLT style sheet © 2004 the University of Greenwich

the University of Greenwich
XSLT Processing Does the XSLT processing have to happen at the client side like CSS? No. It often makes sense to do the transformation at the server end and just deliver straight HTML across the web to a variety of browsers Sablotron from Ginger Alliance is an XSLT processor available with Perl and PHP language bindings Xalan from Apache is a Java XSLT processor © 2004 the University of Greenwich

XSLT Browsers Internet Explorer MSXML.dll shipped with IE 5 and 5.5 is non-standard IE6 uses MSXML3.dll is claimed to be 100% W3C compatible You can upgrade to MSXML3.dll by installing it Netscape 6 supports some XSLT 7 supports the official W3C XSLT recommendation Mozilla Uses the open source TransforMiiX module Opera 6+ supports some XML but not XSLT policy decision, see ‘Formatting Objects Considered Harmful’ The examples here are tested with IE6, Netscape 6+ and Mozilla (Firefox) © 2004 the University of Greenwich

goodBookseg1.xml link to XSLT style sheet default rating “ok”
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="eg1.xsl"?> <!DOCTYPE recommended_books SYSTEM "goodBooks.dtd"> <recommended_books> <book rating="good"> <author> <firstname>Stephen</firstname> <surname>Spainhour</surname> </author> <title>Webmaster in a Nutshell</title> <year_published>1999</year_published> <publisher>O'Reilly</publisher> <course>COMP1037</course> <recommended_by> <firstname>Gill</firstname> <surname>Windall</surname> </recommended_by> </book> <book> <firstname>Benoît</firstname> <surname>Marchal</surname> <title>Applied XML Solutions</title> <year_published>2000</year_published> <publisher>Sams</publisher> ...... link to XSLT style sheet default rating “ok” character reference goodBookseg1.xml

eg1.xsl xsl: namespace <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <h2>From eg1.xsl</h2> <i> <xsl:value-of select="."/> </i> </html> </xsl:template> </xsl:stylesheet> © 2004 the University of Greenwich

goodBooks.eg1.xml

eg1.xsl XML style sheets are written in XML Start with an XML declaration Must include a namespace declaration <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" XSLT elements have the form… name of the XSL element – in this case template xsl: namespace <xsl:template match="/"> element content </xsl:template> end tag empty elements are also possible, e.g. <xsl:value-of /> Attributes in normal XML format © 2004 the University of Greenwich

XSLT language constructs
XSLT is a substantially declarative language as opposed to procedural In declarative languages you specify what you want as opposed to how you want to achieve it XSLT has more in common with languages such as SQL and Prolog than it does with procedural programming languages such as C or Java although XSLT does support conditional and iterative constructs XSLT consists of a series of rules that match with things in the source document specifies what should be output when the match occurs © 2004 the University of Greenwich

XSLT templates The view of the input document is a hierarchical tree consisting of nodes root node book recommended_books XSLT rules are specified as templates to be applied to nodes © 2004 the University of Greenwich

xsl:template XSLT stylesheets consist of one of more templates. The XSLT processor will attempt to match the templates against the elements in the XML document using a pattern specified by the match= attribute. If the template matches the action (content of the template) will take effect. pattern to match – in this case the root element <xsl:template match="/"> <html> <h2>From eg1.xsl</h2> <i> <xsl:value-of select="."/> </i> </html> </xsl:template> action of the template is inserted into the output document © 2004 the University of Greenwich

xsl:value-of An instruction to insert the value of something from the source document into the output document What gets inserted is determined by the select attribute <xsl:value-of select="."/> “.” means the current node of the input document in this case the whole document With client side processing you never see this HTML if you select "view source" you'll see the original XML document this can make debugging somewhat difficult <html><h2>From eg1.xsl</h2><i>Stephen Spainhour Webmaster in a Nutshell 1999 O'Reilly COMP1037 Gill Windall Benoît Marchal Applied XML Solutions 2000 Sams COMP1037 Kevin McManus Subrahmanyam Allamaraju Java Server Programming 2000 Wrox COMP1086 Liz Bacon Jennifer Neiderst Web Design in a Nutshell 1999 O'Reilly COMP1037 Gill Windall Daniel Berg Advanced Techniques for Java Developers 1999 Wiley COMP1030 Liz Bacon</i></html> © 2004 the University of Greenwich

eg2.xsl - xsl:apply-templates
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <h2>From eg2.xsl</h2> <xsl:apply-templates select="//author"/> </html> </xsl:template> <xsl:template match="author"> <p> <xsl:value-of select="."/> </p> <hr /> </xsl:stylesheet> apply a template matching author template matching author elements © 2004 the University of Greenwich

Note how you get both author/firstname and author/surname
author elements from goodBookseg2.xml © 2004 the University of Greenwich

xsl:apply-templates xsl:apply-templates is an instruction that tells the XSLT processor to look for templates that match the pattern specified by the select attribute <xsl:apply-templates select="pattern"/> In eg2.xsl the pattern is //author any elements called author that exist at any level below the root element in the source XML document The pattern is an XPath expression XPath A pattern matching language used to address specific parts of an XML document. Used within XSLT and other XML technologies such as XLink and XPointer © 2004 the University of Greenwich

xsl:apply-templates <xsl:apply-templates select="//author"/> select="//author" returns a set of nodes corresponding to all of the author nodes in the document xsl:apply-templates then looks for templates to apply to each of them in turn Match author elements <xsl:template match="author"> <p> <xsl:value-of select="."/> </p> <hr /> </xsl:template> action part of the template specifying what to output this template will match in turn with each of the author element selected by the previous xsl:apply-templates © 2004 the University of Greenwich

XPath Patterns are used by… the select= attribute of the xsl:apply-templates instruction <xsl:apply-templates select="//author"/> the match= attribute of the xsl:template element <xsl:template match="author"> Xpath nodes correspond to elements, attributes and text in the XML document XPath patterns are structured similarly to the paths to files and directories book/author/firstname would match with the “firstname” elements within “author” within “book” When processed Xpath expressions return a data object of one of the following types: Node set, String, Boolean, Number © 2004 the University of Greenwich

XPath abbreviated operators
Meaning Examples Meaning of example / child book/author author elements that are directly contained within book elements /book / at the start means the root node so this would match book elements directly below the root node // recursive descent // all elements anywhere below the root //author all author elements anywhere below the root . current node .//name all name elements anywhere below the current element @ attribute rating attributes of the book element * wildcard //* all elements anywhere below root © 2004 the University of Greenwich

Quick Quiz <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html><h2>From Quiz a)</h2> <xsl:apply-templates select="//firstname"/> </html> </xsl:template> <xsl:template match="firstname"> <p><xsl:value-of select="."/></p><hr/> </xsl:stylesheet> what will appear in a browser when these style sheets are applied to goodBooks.xml? <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html><h2>From Quiz b)</h2> <xsl:apply-templates select="//firstname"/> </html> </xsl:template> <xsl:template match="surname"> <p><xsl:value-of select="."/></p><hr/> </xsl:stylesheet> © 2004 the University of Greenwich

Quick Quiz <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html><h2> From Quiz c)</h2><ol> <xsl:apply-templates select="//title"/> </ol></html> </xsl:template> <xsl:template match="title"> <li><xsl:value-of select="." /></li> </xsl:stylesheet> …and with these style sheets? <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html><h2> From Quiz d)</h2><ul> <xsl:apply-templates select="//author/surname"/> </ul></html> </xsl:template> <xsl:template match="surname"> <li><xsl:value-of select="."/></li> </xsl:stylesheet> © 2004 the University of Greenwich

Quick Quiz <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html><h2>From Quiz e)</h2> <xsl:apply-templates select="//book"/> </html> </xsl:template> <xsl:template match="book"> <p> <xsl:apply-templates select="author"/> <xsl:apply-templates select="title"/> - rated as : <xsl:value-of </p> <xsl:template match="author"> <xsl:value-of select="."/> <xsl:template match="title"> - <i><xsl:value-of select="."/></i> </xsl:stylesheet> …and finally © 2004 the University of Greenwich

eg3.xsl start an HTML table for each book sort by title
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <body style="font-family:arial"> <h3>From eg3.xsl - books in title order</h3> <table border="1" cellpadding="3"> <thead> <tr><th>title</th> <th>author</th></tr> </thead><tbody> <xsl:for-each select="//book"> <xsl:sort order="ascending" select="title"/> <tr> <xsl:apply-templates select="title"/> <xsl:apply-templates select="author"/> </tr> </xsl:for-each> </tbody> </table> </body> </html> </xsl:template> <xsl:template match="*"> <td> <xsl:value-of select="."/> </td> </xsl:stylesheet> eg3.xsl start an HTML table for each book sort by title output title then author end of the table match anything output as a table column

eg3.xsl It's possible to do things with XSLT that aren't remotely possible with CSS! This example reorders the list of books and for each book changes the order of elements (author comes before title in the XML document) xsl:for-each is a loop construct much as you would expect in other procedural programming languages <xsl:for-each select="//book"> xsl:sort allows you to sort elements <xsl:sort order="ascending" select="title"/> Can also specify descending order pattern to match © 2004 the University of Greenwich

Quick Quiz What order would you expect the books to appear in if the code were changed to: <xsl:for-each select="//book"> <xsl:sort order="descending" select="author/surname"/> © 2004 the University of Greenwich

eg4.xsl This is much like the previous example
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html><body style="font-family:arial"> <h3>From eg4.xsl</h3><h4>List in title order</h4><ul> <xsl:for-each select="//book"> <xsl:sort order="ascending" select="title"/> <li><xsl:value-of select="title"/> / <xsl:value-of select="course"/></li> </xsl:for-each> </ul> <h4>List in course order</h4> <table border="1" cellpadding="3"> <thead><tr><th>course</th><th>title</th></tr></thead><tbody> <xsl:sort order="ascending" select="course"/> <tr><td><xsl:value-of select="course"/> </td><td><xsl:value-of select="title"/> </td></tr> </tbody></table> <h4>Full book details</h4> <xsl:apply-templates select="//book"/> </body></html> </xsl:template> <xsl:template match="book"> rating: <xsl:value-of <br /> <xsl:for-each select="*"> <xsl:value-of select="local-name()"/> : <xsl:value-of select="."/><br /> <hr /> </xsl:stylesheet> eg4.xsl This is much like the previous example output the rating attribute output the name of the element

eg4.xsl Spot the difference?

eg4.xsl Elements in the XML document are repeated with different formatting in the output document Reading element attribute values using xsl:value-of <xsl:value-of Using local_name() to return the element name from xsl:value-of <xsl:value-of select="local-name()"/>: Is that all? No - there are many more features included in XSLT. The next example demonstrates some A detailed explanation is omitted for brevity but you should have little difficulty figuring out how it works. © 2004 the University of Greenwich

eg5.xsl book rating attribute value converted to a * rating
anchor tags link to the full book details book titles in bold

eg5.xsl <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html><body style="font-family:arial"> <h2>From eg5.xsl</h2> <h3>List in title order</h3> <ul> <xsl:for-each select="//book"> <xsl:sort order="ascending" select="title"/> <li> <xsl:apply-templates select="title"/> / <xsl:apply-templates select="course"/> / <xsl:apply-templates select="publisher"/> / <span style="color:#FF9900;font-weight:bold;font-size:20pt"> <xsl:apply-templates </span> </li> </xsl:for-each> </ul> © 2004 the University of Greenwich

eg5.xsl assign the value of the course element to a variable
<h3>List in course order</h3> <table border="1" cellpadding="3"> <thead> <tr> <th>course</th> <th>title</th> <th>stars</th> </tr> </thead> <tbody> <xsl:for-each select="//book"> <xsl:sort order="ascending" select="course"/> <td> <xsl:variable name="courseCode" select="course"/> <xsl:value-of select="$courseCode"/> <xsl:if test="$courseCode = 'COMP1037'"> WAT</xsl:if> </td> <xsl:apply-templates select="title"/> <xsl:apply-templates </xsl:for-each> </tbody> </table> assign the value of the course element to a variable test the value of the variable

eg5.xsl call a named template
<h3>Full book details</h3> <xsl:for-each select="//book"> <xsl:call-template name="full-details"/> </xsl:for-each> </body></html> </xsl:template>  <xsl:template match="title"> <xsl:element name="a"> <xsl:attribute name="href">#<xsl:value-of select="."/></xsl:attribute> <xsl:value-of select="."/> </xsl:element>  <xsl:template <xsl:choose> <xsl:when test=". = 'ok'"> * </xsl:when> <xsl:when test=". = 'good'"> ** <xsl:when test=". = 'excellent'"> *** <xsl:otherwise> </xsl:otherwise> </xsl:choose> eg5.xsl call a named template form an anchor tag linking to a named anchor in the output document convert the value of the book rating attribute to stars

eg5.xsl create a named anchor with the name of the book
 <xsl:template match="book" name="full-details"> <p>  <xsl:element name="a"> <xsl:attribute name="name"> <xsl:value-of select="title"/> </xsl:attribute> <b> </b> </xsl:element> <br /> rating : <xsl:value-of <xsl:for-each select="*"> <xsl:choose> <xsl:when test="self::title"/> <xsl:otherwise> <br/> <xsl:value-of select="local-name()"/> : <xsl:value-of select="."/> </xsl:otherwise> </xsl:choose> </xsl:for-each> </p> </xsl:template> </xsl:stylesheet> create a named anchor with the name of the book output the title in bold don’t output the title again unabbreviated XPath relative location path

eg5.xsl The links (anchors) take the reader to internal named targets e.g. <a href="Webmaster in a Nutshell"/> could just as easily reference external URLs these could be provided in the XML Two different conditional constructs are used xsl:if xsl:choose xsl:when xsl:otherwise forms a case statement Named template full-details operates like a function xsl:param can be used to pass parameters to named templates xsl:variable is used to store the course code value xsl:variable is more like a constant in that it can be assigned only once except in this example! <xsl:value-of select="$courseCode"/> outputs the value of the variable $courseCode rather like an echo statement Unabbreviated XPath location self::title No template is provided for course! the default template is <xsl:value-of select="."/> Combination of XSLT and CSS technologies © 2004 the University of Greenwich

XSLT server side processing
XSL processing on the server means that plain HTML (XHTML) is returned to the browser Browser compatibility problems are avoided. A number of server side XSL processing possibilities are available: Java Perl ASP PHP PHP uses the Sablotron XSLT processor from Ginger Alliance. Sablotron is an open source multi-platform XSLT, DOM and Xpath processor built on James Clark’s expat XML parser. © 2004 the University of Greenwich

XSLT processing with PHP
Requires that PHP is configured to support XSLT

eg6.php create an XSLT processor Set a path to the XML and XSLT <?php error_reporting(15); $xh = xslt_create(); xslt_set_base($xh, 'file:///home/mk05/public_html/web/XML/XSLT/'); $result=xslt_process($xh, 'goodBooks.xml', 'eg6.xsl'); if ($result) { echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; echo $result; } else { echo "There is an error in the XSL transformation...\n"; echo "\tError number: " . xslt_errno($xh) . "\n"; echo "\tError string: " . xslt_error($xh) . "\n"; exit; } xslt_free($xh); ?> apply the XSLT to the XML output the resulting XHTML free resources after use © 2004 the University of Greenwich

eg6.php See the PHP documentation for details the current version of Sablotron is 1.0.3 Begin by creating an XSLT processor $xh = xslt_create(); Then pass the XSLT processor and XML containers with the source XML and the XSLT to xslt_process() $result=xslt_process($xh, 'goodBooks.xml', 'eg6.xsl'); The results of processing $result is returned to the browser and the processor resources liberated xslt_free(); The XSLT is the same as Example 3 © 2004 the University of Greenwich

eg7.xsl <?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <body style="font-family:arial"> <h3>Server side transform from eg7.xsl - data entered intro a form</h3> <xsl:for-each select="//book"> <form action="insert.php" method="post"> <input type="text" size="40" name="txtTitle"> <xsl:attribute name="value"> <xsl:value-of select="title"/> </xsl:attribute> </input> <input type="text" name="txtFirstname"> <xsl:value-of select="author/firstname"/> <input type="text" name="txtSurname"> <xsl:value-of select="author/surname"/> <input type="submit" value="Insert into db" /> </form> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet> eg7.xsl

eg7.xsl This example creates an XHTML form for each book in the XML allows the user to choose which book is to be inserted into the MySQL database <xsl:for-each select="//book"> <form action="insert.php" method="post"> <input type="text" size="40" name="txtTitle"> <xsl:attribute name="value"> <xsl:value-of select="title"/> </xsl:attribute> </input> ...... <xsl:for-each> xsl:attribute passes the value of the XML element into an attribute enclosing HTML element The form action is a simple PHP script insert.php that inserts and displays the POST data from the form This XSLT transformation could take place at either the client or the server © 2004 the University of Greenwich

Summary CSS and XSL can be used to add presentation details to XML documents. XSL consists of XSLT (transforms) and XSL-FO (formatting objects) We've only looked at XSLT here. XSL is more powerful than CSS it can transform the structure of a document and add CSS styling information XSLT is itself an XML language and uses XML syntax XSLT can transform an XML document into any other text based format e.g. another XML document. For display by a browser XSLT is often used to transform XML into XHTML Transformation may take place at the browser side or the server side so that XHTML is delivered to the browser. XSLT works by matching elements in the source document and specifying the output to generate when a match occurs uses XPath pattern matching © 2004 the University of Greenwich

Recycled from Gill Windall’s notes

Similar presentations

Presentation on theme: "Recycled from Gill Windall’s notes"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Recycled from Gill Windall’s notes

Similar presentations

Presentation on theme: "Recycled from Gill Windall’s notes"— Presentation transcript:

Similar presentations

About project

Feedback