Introduction to XSL - W3

1 LIntroduction to XSLlXML DocumentslStyling XML DocumentslXSLlExample I: HamletlExample II: Mixed Writing ModeslExample III: databaselOther ExampleslHow do they do that?lThe XSL Process(es)lServer-Side/Client-Side XSLlXSL and other W3C specslTransformations: XSLTlGeneral-purpose XSLTlTemplateslXSLT statementsl"Play" to HTMLlXPathlFormatting Objects basicslPageslThe area modellBlock/inline areasIntroduction to XSLMax Froumentin - W3 ClFormatting Objects:lPropertieslExample: Play to FOlTop-level TemplatelI18N Formatting Objects andPropertieslOther Formatting ObjectslExample: mixed writing modeslIf you are still to XSLMax Froumentin - W3 CIn a nutshell: XSL is a W3 Cspecificationthat describes a methodfor visually presenting XML tutorial will cover.

2 LAn overview of the XSL spec (including xslt and XPath)lExamples of various use caseslRelationship with other XML technologieslA detailed exampleThese slides are available to XSLI ntroduction to XSLMax Froumentin - W3C1 of 30lXML (eXtensible Markup Language) adds information to textfiles, usingtagsandattributes[example1], [example2]lTag names are defined for a specificdocument the Unicode character setlDesigned to be easily processed by machine while DocumentsIntroduction to XSLMax Froumentin - W3C2 of 30lXML documents are ideally semantic. For example, this bit ofHTML is wrong:Do not <strong>smoke</strong>, <it>eat</it> or<blink>drink</blink> in this data should be separatelTwo solutions for styling: CSS (Cascading Style Sheets) andXSL (eXtensible Stylesheet Language).

3 CSSTITLE {display: block;font-family: Helvetica;font-size: 18pt}Simple model: properties are associated to tags or XML DocumentsIntroduction to XSLMax Froumentin - W3C3 of 30 Introduction to XSLMax Froumentin - W3C3 of 30 XSL is an alternative to CSS that allows greater control over thepresentation of the XML can it do?l[like CSS] allow changing presentation without changing theXML source, and display documents on various media,lalso: I18N features (writing modes, text alignment,hyphenation), complex page layout, footnotes, automaticgeneration of content (index)Who is it for?Applications that require high-level quality formatting:lPublishing industry (books, technical documentation)XSLI ntroduction to XSLMax Froumentin - W3C4 of 30lPublication on different media: paper, web, mobile devices.

4 But is it not meant to be used where presentation is deeply tied tothe contents (like graphic design). Introduction to XSLMax Froumentin - W3C4 of 30<ACT> <SCENE> <TITLE>A room in the castle.</TITLE> <STAGEDIR>Enter KING CLAUDIUS, QUEEN GERTRUDE,POLONIUS, OPHELIA, ROSENCRANTZ, andGUILDENSTERN</STAGEDIR> <SPEECH speaker="King Claudius"> <LINE>And can you, by no drift of circumstance,</LINE> <LINE>Get from him why he puts on this confusion,</LINE> <LINE>Grating so harshly all his days of quiet</LINE> <LINE>With turbulent and dangerous lunacy?</LINE> </SPEECH>..Formatted forpaper output(PDF), formatted for theWeb(XHTML)Example I: HamletIntroduction to XSLMax Froumentin - W3C5 of 30 Example II: Mixed Writing ModesIntroduction to XSLMax Froumentin - W3C6 of <record year="1992"> <artist>Sundays, The</artist> <title>Blind</title> </record> <record year="1994"> <artist>(Various)</artist> <title>The Glory of Gershwin</title> <note>Compilation</note> </record> <record type="soundtrack" year="1992"> <artist>Kamen, Michael</artist> <title>Brazil</title> <location folder="3" page="20"/> </record>.

5 PDFE xample III: databaseIntroduction to XSLMax Froumentin - W3C7 of 30lW3C specs (one DTD, output formats: HTML, sliced HTML,text, PDF), , XML slideshowOther ExamplesIntroduction to XSLMax Froumentin - W3C8 of 30lAnXSL stylesheetis an XML FilelIt is associated to an XML document with aStylesheetProcessing Instruction(like CSS)<?xml-stylesheet ref=" " type="text/xsl"?> <ACT> <SCENE> <TITLE>A room in the castle.</TITLE>lThe actual formatting is performed either off-line or on thebrowserHow do they do that? Introduction to XSLMax Froumentin - W3C9 of 30 The result tree is an XML document in which the markup hasinformation about how to display the document: what font to use,the size of a page, etc.

6 This markup is calledFormatting ObjectsThe XSL Process(es) Introduction to XSLMax Froumentin - W3C10 of 30(elements) andProperties(attributes). For example:<block font-family="Helvetica">ACT III</block> <block font-size="10pt">Scene 1: A room in the castle</block> <block space-before="10mm" font-style="italic">Enter KING CLAUDIUS, QUEEN GERTRUDE, POLONIUS,OPHELIA, ROSENCRANTZ, and GUILDENSTERN</block>..Generated from:<ACT> <SCENE> <TITLE>A room in the castle.</TITLE> <STAGEDIR>Enter KING CLAUDIUS, QUEEN GERTRUDE,POLONIUS, OPHELIA, ROSENCRANTZ, andGUILDENSTERN</STAGEDIR>.. Introduction to XSLMax Froumentin - W3C10 of 30lOff-line ( for printing)lServer-side:server transforms, client renders (not recommended)lClient-side:client transforms and renders (allows user styles)Server-Side/Client-Side XSLI ntroduction to XSLMax Froumentin - W3C11 of 30 XSL uses CSS properties to express formattinginformation, and uses the CSS inheritance :TITLE {display: block;font-family: Helvetica;font-size: 14pt;}lXSL:<xsl:template match="TITLE"> <fo:block font-family="Helvetica" font-size="14pt">[.]

7 ]</fo:block> </xsl:template>XSL and SVG, MathMLlXSL can import images and other types of known XMLXSL and other W3C specsIntroduction to XSLMax Froumentin - W3C12 of 30documents: SVG and to the renderer to handle other namespacesIntroduction to XSLMax Froumentin - W3C12 of 30 xslt is a transformation language originally designed to transformany XML document into another XML document containingformatting objects: pages, blocks, graphics, text, : XSLTI ntroduction to XSLMax Froumentin - W3C13 of 30 xslt has evolved to become a general-purpose transformationlanguage from XML to users use it to transform their own XML document type toHTML for viewing within a browserlXSLT stylesheets use XML syntaxlA stylesheet is a list oftemplates<?

8 Xml version=" " encoding="utf-8"?> <xsl:stylesheet xmlns:xsl=" "version=" "> <xsl:template match="/">..</xsl:template> <xsl:template match="/html">..</xsl:template> </xsl:stylesheet>General-purpose XSLTI ntroduction to XSLMax Froumentin - W3C14 of 30lEach template applies to a type of nodes in the inputdocumentlWhen matches are made, the templates contains desiredoutput.<xsl:template match="TITLE"> <fo:block font-family="Helvetica" font-size="14pt"> <xsl:apply-templates/> </fo:block> </xsl:templates>So this will transform:<TITLE>Hamlet</TITLE>into<fo:block font-family="Helvetica" font-size="14pt">Hamlet</fo:block>TemplatesIntroduction to XSLMax Froumentin - W3C15 of 30 HTML can also be generated very simply in the template, using forinstance<h1>instead of<fo:block> <xsl:apply-templates/>means: apply other templates rule: text is copied from input to output.

9 A style sheet with norules will only return the character data of the to XSLMax Froumentin - W3C15 of 30 Allow navigation and iteration within the input document treel<xsl:value-of select=".."/>Gets a value (node contents or attribute) from the input <xsl:for-each select="..">Loops over the nodes in the select expressionl<xsl:if test="..">..</xsl:if>ConditionalXSLT statementsIntroduction to XSLMax Froumentin - W3C16 of 30 Very simple one-template example using the 'pull' method:<?xml version=" " encoding="utf-8"?> <html xmlns=" "xmlns:xsl=" "xsl:version=" "> <head> <title> <xsl:value-of select="PLAY/TITLE"/> </title> </head> <body> <h1> <xsl:value-of select="PLAY/TITLE"/> </h1> <xsl:for-each select="PLAY/ACT"> <xsl:for-each select="SCENE"> <xsl:if test="TITLE"> <h2> <xsl:value-of select="TITLE"/> </h2> </xsl:if> <xsl:for-each select="SPEECH"> <h3 style="color: red"> <xsl:value-of select="SPEAKER"/> </h3> <xsl:for-each select="LINE"> <p> <xsl:value-of select=".

10 "/> </p> </xsl:for-each> </xsl:for-each> </xsl:for-each> </xsl:for-each>"Play" to HTMLI ntroduction to XSLMax Froumentin - W3C17 of 30</body> </html>Result:<?xml version=" " encoding="utf-8"?> <html xmlns=" "> <head> <title>The Tragedy of Hamlet, Prince of Denmark</title> </head> <body> <h1>The Tragedy of Hamlet, Prince of Denmark</h1> <h2>Elsinore. A platform beforethe castle.</h2> <h3 style="color: red">BERNARDO</h3> <p>Who's there?</p> <h3 style="color: red">FRANCISCO</h3> <p>Nay, answer me: stand, and unfold yourself.</p>..Extended, output: numbering, TOC, uses the 'push' method where structure follows the to XSLMax Froumentin - W3C17 of 30 Roughly there is one template for each tag type in the input"Play" to HTMLI ntroduction to XSLMax Froumentin - W3C17 of is anotherW3C specification;lan expression language to selects parts of an XML documenttree;lis used in<xsl:template match=".