Introduction to XSLT

Transcription

1 Introduction to XSLT Justin Tilton, Chief Executive Officer instructional media + magic, inc. at the JA-SIG Conference Destin, Florida December 2, 2001

2 The Abstract Looking for a methodology to quickly and effectively create Transformations? Interested in the basics of XSLT and Xpath, and a good way to get started? If so, this workshop is for you! We will be discussing the fundamental concepts of XSLT and Xpath, and the methodologies that have emerged from months of developing stylesheet transformations for the uportal 2.0 project. We will discuss the design aspects related to converting structured information in XML into device-dependent markup languages such as HTML, and WML, and the guidelines and best practices evolving from this experience. No prior XSLT experience is necessary.

3 Overview Introduction uportal Basic XPath Basic XSLT Markup: XHTML Cascading Style Sheets Tools The Creation Process Hands-on

4 Introduction

5 Background Who: W3C What: XPath and XSLT Specs. When: 11/16/1999 Why: A need arose for a specification to define the syntax and semantics for transforming XML documents.

6 References The definitive reference Michael Kay Wrox Press Inc ISBN:

7 References Great practical reference Jeni Tennison Hungry Minds ISBN:

8 References Practical use of transformations in Java code Eric Burke O'Reilly & Assoc. ISBN:

9 JA-SIG s uportal

10 What s new in 2.0? Abstraction of layout Structure/theme transformations Standard channel events Standard CSS classes More flexible publish/subscribe User profile management JNDI lookup service WebProxy channel

11 Basic Architecture

12 Basic Architecture Permissions authentication User preferences Channel registry Other uportal Data iplanet LDAP Oracle db2 mysql

13 Channel Elementary unit of presentation, defined by the IChannel interface User Interaction External Information Set Runtime Data () IChannel Channel Content (Presentation) Render XML ()

14 IChannel content must Be well-formed XML such as XHTML, RSS, SVG, SMIL, or a SOAP message (HTML is not well formed XML) Rendered by an XSL transformation using an XSL stylesheet

15 Framework Organization User Interaction Presentation uportal Framework Channel Channel Channel

16 User Layout User Layout is an abstract structure defining the overall content available to the user userlayout is a tree structure consisting of folders and channels, the later always being the leaf nodes

17 User Layout User Layout Folder Folder Channel Channel Channel Channel Folder Channel Folder Folder Channel Channel Folder Channel

18 Structure Transformation User Layout Folder Folder Folder Folder Channel Folder Channel Channel Channel Channel Channel Folder Channel Channel User Layout Tab Column Channel Channel Channel Channel Channel Tab Column Channel Channel Tab Channel

19 Theme Transformation Column Channel Dictionary.com Tab Jim Smith Channel Bookmarks Column User Layout Channel Cartoon Tab Financial Aid Channel Channel Tab Library Channel

20 Compiling the Presentation userlayout Channels XSLT Structure transformation setruntimedata() renderxml() XSLT structuredlayout Theme transformation HTML, WML VoiceML...

21 Content Transformation XML Stylesheet XSLT Processor XHTML: Web Browser HTML: PDA WML: Cell Phone

22 Flexible Layouts Structures Tab/ column Tree / column Themes Multi-column Multi-row Skins Matrix, Java

23 Multiple Target Devices

24 Tab / Column Layout

25 Tree / Column Layout

26 Theme: java

27 Theme: imm

28 Theme: matrix

29 User preferences Portal=rendering+customization User Preferences Channel Swappable layout and preference management modules Profile management module Tab-column specific UP module Skin Selection

30 User Preferences

31 Publish/Subscribe Channel publishing document Channel parameters Default values Modification permissions Descriptions Publish/Subscribe steps Step sequence Instructions, help Flexible channel publishing

32 Channel Types

33 Channel Settings

34 Channel Controls

35 Channel Classification

36 Basic XPath

37 Nodes and Node Trees When an application wants to operate on an XML document (such as an XSLT processor running an XSLT stylesheet on an XML document), it builds an internal model of what the document looks like. This model is known as a document object model or DOM. In XPath and XSLT, it's called a node tree.

38 Types of Nodes Root nodes The top of the node tree Element nodes XML elements Attribute nodes XML attributes Text nodes Textual content in XML elements Comment nodes XML comments Processing instruction nodes XML processing instructions Namespace nodes The in-scope namespaces on an element E E R E A E T

39 Node Tree Example <document> <para type= note > content </para> <para type= warning > content </para> <para type= warning > content </para> </document> -elementpara -rootdocument para note content document para warning content -textcontent -attributetype:note -textcontent -elementpara -attributetype:warning -textcontent -elementpara -attributetype:warning para warning content

40 XPath Definition XPath is a language for addressing parts of an XML document, designed to be used by XSLT. Example XPath: child::para[attribute::type='warning'][position()=2] In English: select the second para child of the context node that has a type attribute with a value of warning.

41 Dissecting the Example Axis child::para[attribute::type='warning'][position()=2] Axis: child::para Filter: [attribute::type='warning'] Filter: [position()=2] document para para para type:note type:warning type:warning Context node

42 Dissecting the Example Axis child::para[attribute::type='warning'][position()=2] Axis: child::para Filter: [attribute::type='warning'] Filter: [position()=2] document para para para type:note type:warning type:warning Filtered Context node

43 Dissecting the Example Axis child::para[attribute::type='warning'][position()=2] Axis: child::para Filter: [attribute::type='warning'] Filter: [position()=2] document para para para type:note type:warning type:warning Filtered Filtered Context node

44 Dissecting the Example Axis child::para[attribute::type='warning'][position()=2] Axis: child::para Filter: [attribute::type='warning'] Filter: [position()=2] document para para para type:note type:warning type:warning Filtered Filtered Selected Context node

45 Types of XPaths Expressions: Return a value, which might be a node set that is processed or a string that is output. <xsl:when test="@type= warning "> Patterns: Either match a particular node or don't match that node. <xsl:template match="para">

46 XPath Expressions Select Nodes <xsl:for-each select= child::z > Conditional <xsl:if test= position()=2 > Calculation <xsl:value-of select= position()+4"> Z C C Z

47 Node Set Expressions The most common way that XSLT uses XPaths is to select node sets. These XPaths usually occur within a select attribute, for example on xsl:for each or xsl:apply templates, and are known as location paths. <xsl:for-each select= child::para > <xsl:apply-templates select="paragraph"/>

48 Location Paths The purpose of location paths is to select node sets from a node tree. Location paths can be absolute or relative Absolute location paths start from a known location such as the root node <xsl:for-each select= /R/N > Relative location paths start from the context node. <xsl:for-each select= N > note: same as child::n N N X X R Y R Y N N C ontext Z

49 Steps A location path is made up of a number of steps. Each step takes you from a node to a node set. Each step is separated from the one before it with a /.

50 Steps Every step is made up of an axis and a node test. The axis specifies the direction that the child :: para step is taken in The node test specifies the kinds of nodes that should be collected in that direction. Within a step, the axis and the node test are separated by a double colon ::.

51 Some Shorthand Notation If no axis is specified in a step, the default axis is the child axis. Longhand select= child::para/child::sentence Shorthand select= para/sentence Another important axis is the attribute axis, which takes you from the context node to the attributes of that node. Longhand select= attribute::type Shorthand Another essential axis is the parent axis. This takes you from the context node to the parent of that node. Longhand select= parent::node()/child::xyz Shorthand select=../xyz

52 Axes ancestor :: node() Takes you up the tree to the ancestors of the context node in reverse document order. 1 2

53 Axes ancestor-or-self :: node() Takes you up the tree to the ancestors of the context node in reverse document order starting with the context node

54 Axes child :: node() Takes you to the children of the context node in document order. This is the default axis. 1 2

55 Axes descendant :: node() Takes you to the descendants of the context node. The resulting nodes are in document order

56 Axes descendant-or-self :: node() Takes you to the descendants of the context node, starting with the context node, in document order

57 Axes following :: node() Takes you to the nodes that occur after the context node in document order, but that are not the context node s descendants

58 Axes following-sibling :: node() Takes you to the siblings of the context node that occur after the context node in document order. 1 2

59 Axes parent :: node() Selects a single node the parent of the context node. 1

60 Axes preceding :: node() Takes you to the nodes that occur before the context node in reverse document order, excluding the context node s ancestors

61 Axes preceding-sibling :: node() Takes you to the siblings (children of the same parent) of the context node that occur before it, in reverse document order. 2 1

62 Axes self :: node() Takes you to the context node itself. 1

63 Predicates (filters) Predicates are placed in square brackets either: at the end of a step select= para[position()=3]/sentence or at the end of a location path select= para/sentence[position()=3] Predicates act as filters on node sets. When predicate expressions test false, the node is filtered out.

64 Predicates (filters) You can have any number of predicates following each other. select= The context node list for each predicate contains the nodes that are still in the node set after it's been filtered by the previous predicates. Predicates can be used at any point in a location path, but they only apply to the immediately preceding step.

65 Expressions - Union You can combine node sets by creating a union using the operator. If there are any nodes that occur in both node sets, the union only holds one copy of them. You can use predicates on the result of a union, just as you can on any node set.

66 Expressions - Operators Logical Operators and, or and not() Comparative Operators =,!=, <, <=, >, >= Remember to escape: < to < Mathematical Operators +, -, *, div, mod

67 XPath Examples select= presidents/president/[position()=3]/name select= //president[count(vicepresident)=0]/name select= < 1800]/name select= descendant::president/ [count(vicepresident)>1]/name select= //president/name[child::first= John ] select= presidents/president[(term/@from > 1800) and (term/@from < 1850)/name

68 Basic XSLT

69 Background XSLT is part of a larger initiative within the World Wide Web Consortium (W3C) to define a way of presenting XML documents. This initiative is known as XSL (Extensible Stylesheet Language). XSLT is an XML vocabulary that's used to define a transformation between an XML document and a result document, which might be in XML, in HTML, or a text document.

70 What is an XSLT Stylesheet? The XSLT processor uses a stylesheet to transform an XML document. The stylesheet contains instructions for generating a new document based on information in the source document. This can involve adding, removing, or rearranging nodes, as well as presenting the nodes in a new way.

71 The XSL Processing sequence source document XSL stylesheet Result file or stream XML parser rules base write result to output result tree source tree apply templates

72 Differentiating Stylesheets XSLT stylesheets do not perform the same function as Cascading Style Sheets (CSS) CSS is used to apply style elements to markup languages to affect formatting in a single pass, top down, fashion. XSLT produces a separate result tree and can iterate and perform conditional logic. XSLT and CSS are most powerful when used together. More later

73 Example of a Stylesheet When you work with a stylesheet, three documents are involved: Source document in XML Desired output: the result document, which can be HTML, XML, or text XSLT stylesheet, which is also an XML document

74 Hello World! XML Document: <?xml version="1.0"?> <greeting>hello, World!</greeting> Desired Output: <html> <head><title>greeting</title></head> <body><p>hello, World!</p></body> </html> XSLT Stylesheet: <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:template match="/"> <html> <head><title>greeting</title></head> root greeting Hello World! <body><p><xsl:value-of select="greeting"/></p></body> </html> </xsl:template> </xsl:stylesheet>

75 Dissecting the XSLT XSLT stylesheets are XML Documents <?xml version="1.0"?> Standard XSLT heading/namespace <xsl:stylesheet version="1.0" xmlns:xsl=" The template rule to be triggered when a particular part of the source document is being processed. / is XPath for root node <xsl:template match="/">

76 Dissecting the XSLT Once the rule is triggered the body of the template defines what output to generate. <html> <head><title>greeting</title></head> <body><p><xsl:value-of select="greeting"/></p></body> </html> Most of the template is HTML except the value-of element which is an XSL instruction. The XPath in the select statement is asking for the contents of the child of the context node with an element name of greeting. root greeting Hello World!

77 Dissecting the XSLT All that s left to do is close (finish) the template and the stylesheet. </xsl:template> </xsl:stylesheet>

78 Some XSL Top Level Elements <xsl:decimal-format> Declares a decimal format. <xsl:import> Imports another stylesheet into this stylesheet. <xsl:key> provides a way to work with documents that contain an implicit cross-reference structure <xsl:output> This instruction specifies how you want the result tree to be output

79 Some XSL Top Level Elements <xsl:param> Declares a parameter for a stylesheet or template, and specifies a default value for the parameter <xsl:template> Specifies a template rule. <xsl:variable> Declares a variable and binds a value to that variable. The difference between the xsl:param and xsl:variable instructions is that xsl:param defines a default value while xsl:variable defines a fixed value. If used as a top level element the scope is global otherwise the scope is local to a specific template

80 What Is a Template? A template defines what the XSLT processor should do when it processes a particular node in the XML source document. The XSLT processor populates the result document by instantiating a sequence of templates. Instantiation of a template means that the XSLT processor Copies any literal data from the template to the result document Executes the XSLT instructions in the template

81 Contents of a Template To define a template, you specify the xsl:template instruction. In thexsl:template tag, the value of the match attribute is an XPath pattern. This pattern matches (identifies) nodes in the source XML document. The value of the match attribute is the template rule.

82 The Template Body The template body defines actions you want the XSLT processor to perform each time it instantiates the template. It contains XSLT instructions you want the XSLT processor to follow Elements that specify literal output you want the XSLT processor to insert in the result document. For example: <table align="center" cellpadding="5">

83 Determining Templates to Instantiate When the XSLT processor applies a stylesheet to an XML document, it begins processing with the root node of the XML source document Every stylesheet includes default templates Whether or not you explicitly define a template rule that matches the root node, the XSLT processor always instantiates a template that matches the root node.

84 The Example Handout

85 Dissected XSLT Stylesheet

86 Dissecting a sample In the sample stylesheet, the template rule in the first template matches the root node: <xsl:template match="/"> The XSLT processor instantiates this template to start generating the result document. It copies the first few lines from the template to the result document.

87 Dissecting a sample Then the XSLT processor reaches the following XSLT instruction: <xsl:apply-templates select="/bookstore/book"/> When the XSLT processor reaches the select attribute, it creates a list of all source nodes that match the specified pattern. In this example, the list contains book elements. The processor then processes each node in the list in turn by instantiating its matching template.

88 Dissecting a sample First, the XSLT processor searches for a template that matches the first book element. The template rule in the second template matches the book element: <xsl:template match="book"> After instantiating this template for the first book element, the XSLT processor searches for a template that matches the second book element

89 Dissecting a sample The XSLT processor instantiates the book template again, and then repeats the process for the third book element. After three instantiations of the book template, the XSLT processor returns to the first template (the template that matches the root node) and continues with the line after the xsl:apply-templates instruction.

90 Built-in Templates When the XSLT processor cannot find a template that matches a selected node, it uses built-in templates. Every stylesheet includes built-in templates whether or not you explicitly define them.

91 Built-in Templates The following template matches the root node and element nodes and selects all attributes and child nodes for further processing: <xsl:template match="* /"> <xsl:apply-templates / > </xsl:template> The following template matches text and attribute nodes. This template copies the value of the text or attribute node to the result document: <xsl:template match="@* text()"> <xsl:value-of select="." / > </xsl:template>

92 Major XSL Instructions xsl:apply-imports xsl:apply-templates xsl:attribute xsl:attribute-set xsl:call-template xsl:choose xsl:comment xsl:copy xsl:copy-of xsl:decimal-format xsl:element xsl:fallback xsl:for-each xsl:if xsl:import xsl:include xsl:key xsl:message xsl:namespace-alias xsl:number xsl:otherwise xsl:output xsl:param xsl:preserve-space xsl:processing-instruction xsl:sort xsl:strip-space xsl:stylesheet xsl:template xsl:text xsl:transform xsl:value-of xsl:variable xsl:when xsl:with-param

93 XHTML

94 Why XHTML? XSLT Stylesheets are XML documents If you plan to output HTML, it will reside in the template bodies of the XSLT Stylesheet, and the markup will be output as literal output. When the XSLT Stylesheet contains Markup, it has to be well formed

95 Differences with HTML 4 Due to the fact that XHTML is an XML application, certain practices that were perfectly legal in HTML 4 must be changed. Documents must be well-formed Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must either have closing tags or be written in a special form (as described below), and that all the elements must nest. CORRECT: nested elements. <p>here is an emphasized <em>paragraph</em>.</p> INCORRECT: overlapping elements <p>here is an emphasized <em>paragraph.</p></em>

96 Differences with HTML 4 Element and attribute names must be in lower case XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. <li> and <LI> are different tags.

97 Differences with HTML 4 In HTML 4 certain elements were permitted to omit the end tag; with the elements that followed implying closure. This omission is not permitted in XML-based XHTML. All elements must have an end tag. CORRECT: terminated elements <p>here is a paragraph.</p> <p>here is another paragraph.</p> INCORRECT: unterminated elements <p>here is a paragraph. <p>here is another paragraph.

98 Differences with HTML 4 All attribute values must be quoted, even those which appear to be numeric. CORRECT: quoted attribute values <table rows="3"> INCORRECT: unquoted attribute values <table rows=3>

99 Differences with HTML 4 XML does not support attribute minimization. Attribute-value pairs must be written in full. Attribute names such as nowrap and checked cannot occur in elements without their value being specified. CORRECT: unminimized attributes <td nowrap= nowrap"> INCORRECT: minimized attributes <td nowrap>

100 Differences with HTML 4 Empty elements must either have an end tag or the start tag must end with />. For instance, <br/> or <hr></hr>. CORRECT: terminated empty tags <br/><hr/> INCORRECT: unterminated empty tags <br><hr>

101 Cascading Style Sheets

102 CSS uportal and Skins uportal uses Cascading Style Sheets to Skin the portal and content. These CSS files are optimized for a particular structure. For consistency channel developers should become familiar with the CSS classes that are defined for a particular structure and apply them to the markup language in their XSLT transformations.

103 The CSS Classes There is a sample developer channel in uportal that describes and gives examples of the CSS classes for the Tab/Column Theme.

104 The CSS Channel

105 The Tools

106 The Applications These are the applications I am familiar with -- this is not an endorsement -- and no testing was done on animals XML Document Development IDE: Excelon Stylus Studio XML Spy Cooktop (open source) HTML Markup IDE: Macromedia Dreamweaver Adobe GoLive HTML to XHTML Conversion/Cleanup HTML Tidy (open source) XSLT Development IDE Excelon Stylus Studio XML Spy Cooktop (open source)

107 The Creation Process

108 Creating an XSLT Stylesheet Step One get or develop one of the following: A representative XML Document A DTD (a whole different seminar) A Schema (a whole different seminar) Step two Analyze the data Think about the best way to present and interact with it. The data is your friend. Step three Develop sample markup Design mocks for each markup language & device that you plan to support. Don t try to paint the canvas without a sketch. Step four Convert the markup to XML The stylesheet will only eat tasty markup. Poorly formed markup will be regurgitated. Step five copy markup into XSLT editor Match on a root element and start cooking XSLT.

109 Hands - on

110 Hands on Convert RSS (Rich Site Summary) Syndicated Content XML Documents into HTML using an XSLT Stylesheet.

111 Source XML <?xml version="1.0"?> <bookstore> <book> <author>w. Shakespeare</author> <title>hamlet</title> <published>1997</published> <price>2.95</price> </book> <book> <author>w. Shakespeare</author> <title>macbeth</title> <published>1989</published> <price>9.95</price> </book> <book> <author>d. Alighieri</author> <title>the Divine Comedy</title> <published>1321</published> <price>5.95</price> </book> </bookstore> XSLT Stylesheet <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:output method="html" /> <xsl:template match="/"> <html><head><title>stylesheet Example</title></head> <body> <table align="center" cellpadding="5"> <tr> <th>title</th> <th>author</th> <th>price</th> </tr> <xsl:apply-templates select="/bookstore/book"> <xsl:sort select="author" /> </xsl:apply-templates> </table> </body> </html> </xsl:template> <xsl:template match="book"> <tr> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="author" /></td> <td align="right"><xsl:value-of select="price" /></td> </tr> </xsl:template> </xsl:stylesheet>

112 Dissected XSLT Stylesheet Standard XML declaration xsl:stylesheet is an XSLT instruction. xsl:template is an XSLT instruction. It contains literal data to be copied to the result document and XSLT instructions to be followed by the XSLT processor. The processor performs these steps for the source nodes identified by the match attribute value. In this template, the match attribute identifies the root node of the source document. This template matches book elements in the source document. In this stylesheet, the XSLT processor performs the actions in this template three times, once for each book element in the source document. <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <xsl:output method="html" /> <xsl:template match="/"> <html><head><title>stylesheet Example</title></head> <body> <table align="center" cellpadding="5"> <tr> <th>title</th> <th>author</th> <th>price</th> </tr> <xsl:apply-templates select="/bookstore/book"> <xsl:sort select="author" /> </xsl:apply-templates> </table> </body> </html> </xsl:template> <xsl:template match="book"> <tr> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="author" /></td> <td align="right"> <xsl:value-of select="price" /> </td> </tr> </xsl:template> </xsl:stylesheet> Namespace declaration for W3C XSLT namespace. xsl:output is an XSLT instruction. In this stylesheet, it specifies that the result document will be in HTML format. xsl:apply-templates is an XSLT instruction. For each node identified by this instruction s select attribute, the XSLT processor goes to another template in this stylesheet, and performs the actions defined in that template. When done, the processor returns here, and moves to the next line in this template. In this template, the select attribute identifies all book elements in the source document. xsl:sort is an XSLT instruction. The XSLT processor processes the book nodes in alphabetical order by author. xsl:value-of is an XSLT instruction. The XSLT processor extracts the contents of the source node specified in the select attribute and copies it into the result document.

113 HTML Output Browser Representation <html> <head> <META http-equiv="content-type" content="text/html"> <title>stylesheet Example</title> </head> <body> <table align="center" cellpadding="5"> <tr> <th>title</th> <th>author</th> <th>price</th> </tr> <tr> <td>the Divine Comedy</td> <td>d. Alighieri</td> <td align="right">5.95</td> </tr> <tr> <td>hamlet</td> <td>w. Shakespeare</td> <td align="right">2.95</td> </tr> <tr> <td>macbeth</td> <td>w. Shakespeare</td> <td align="right">9.95</td> </tr> </table> </body> </html>