X-Informatics: I-400 and I-590 Style Sheets for XML: CSS & XSLT Spring Semester 2002 MW 6:00 pm – 7:15 pm Indiana Time Geoffrey Fox and Bryan Carpenter PTLIU Laboratory for Community Grids Informatics, (Computer Science , Physics) Indiana University Bloomington IN 47404 gcf@indiana.edu 2/28/2019 xmlstylespring02

Style Sheets and XML In its early days, most people envisaged XML as a more structured replacement for HTML, for authoring Web pages. Since then XML has found many completely unrelated applications as a portable data representation. Can still expect XML will gradually displace HTML for Web authoring (as one application of XML amongst many), but this begs the question of how browsers will display XML documents, with their unstandardized, customizable tags. Trivial answer is that people may use XHTML, but this is only an incremental improvement. We need some way to tell the browser how to display custom tags, etc. This is likely to be done through style sheets. 2/28/2019 xmlstylespring02

CSS and XSL We will discuss two approaches to XML style sheets: Cascading Style Sheets (CSS) and the Extensible Style Language, XSL. XSL incorporates a general framework for converting an XML file to another format, in particular to a format such as XHTML that a Web browser can interpret directly. Cascading Style Sheets (CSS) is an older specification that provides an alternative, simpler, approach to displaying XML in a browser. 2/28/2019 xmlstylespring02

Cascading Style Sheets 2/28/2019 xmlstylespring02

Cascading Style Sheets In a following lecture we will be discussing the Extensible Style Language, XSL. Cascading Style Sheets (CSS) is an older specification that provides an alternative, simpler, approach to displaying XML in a browser. CSS is less general than XSL. It was designed as a way to control the display of HTML documents, but it can also be used with other SGML-based languages, including XML. 2/28/2019 xmlstylespring02

Overview The structure of a CSS style sheet is a plain list of rules. A rule consists of a selector—typically a tag name, perhaps with some qualifiers—and a list of declarations that apply to elements matching the selector. A declaration is just a property-value pair. For example the declaration color: blue sets the text color to blue in the selected elements. Style sheets cascade in the sense that if more than one style sheet is in effect for a document (this is regarded as the normal situation), declarations from some sheets may cascade through declarations in other sheets, conditional on some conflict resolution rules. This can be thought of as a kind of inheritance. 2/28/2019 xmlstylespring02

Example Here is an XML source file that uses a CSS style sheet: <?xml-stylesheet type="text/css" href="emptable.css" version="1.0"?> <EMPLOYEE> <PERSON> <EMPNO>100</EMPNO> <ENAME>JAMES </ENAME> <JOB>PRESIDENT</JOB> </PERSON> <EMPNO>201</EMPNO> <ENAME>KELLY </ENAME> <JOB>CLERK</JOB> . . . </EMPLOYEE> 2/28/2019 xmlstylespring02

Style Sheet emptable.css with Display PERSON {display : block} EMPNO {color : red} ENAME {color : blue ; font-weight : bold} JOB {color : green ; font-style : italic} 2/28/2019 xmlstylespring02

Remarks The example style sheet has four rules. The selectors are just element names. The declaration display : block causes the PERSON element to be treated as a block—it starts and ends with a new line. By default the other elements are inline. The declarations for these elements specify color, font-weight, and font-style properties for the enclosed text, in an obvious way. 2/28/2019 xmlstylespring02

CSS1 vs CSS2 W3C distinguishes two separate specifications: CSS level 1 and CSS level 2. Level 1 is a subset of Level 2. Level 2 adds media-specific style sheets that can support different kinds of display technology: Visual browsers, Aural devices, Handheld devices, etc. Level 2 also adds interesting features like content positioning, table layout, and so on. CSS1 specification is about 70 pages long. CSS2 is 300+ pages long. Neither specification is fully supported by any browser, but Netscape 6 probably comes closest. 2/28/2019 xmlstylespring02

Basics An example rule taken from the CSS1 specification: H1 { color : blue } This rule contains a selector “H1” and a single declaration: “color : blue”. The declaration sets the property “color” to the value “blue”. CSS1 defines about 50 properties. The selector links the style sheet rules to elements in the source file. Any element name is a valid selector. In this example we are specifying properties for level 1 headers. Any user agent (i.e. Web browser) is considered to have a default style sheet. Properties need only be specified for elements where the author wishes to override the default values. 2/28/2019 xmlstylespring02

Linking HTML to Style Sheet Rules In XML, one uses the xml-stylesheet processing instruction to specify a style sheet for a document. In plain HTML there are several approaches. Here is an example taken from the CSS1 specification: <HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE=“text/css” HREF=“http://style.com/cool” TITLE=“Cool”> <STYLE TYPE=“text/css”> @import url(http://style.com/basic) ; H1 { color : blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=“color:green”>While the paragraph is green.</P> </BODY> </HTML> 2/28/2019 xmlstylespring02

Remarks link element with STLYSHEET relation to main document. style element in HTML head element gives style declarations for whole document. In particular you may include a style file here. Note however that style.com is the actually the online home of Vogue, and doesn’t have cool or basic CSS documents! style attribute on individual element of document. 2/28/2019 xmlstylespring02

Grouping To give identical declarations for a group of selectors, a rule may start with a comma-separated group of selectors: H1, H2, H3 { font-family: helvetica } This sets the same font for headers at all levels. Several declarations applying to the same selector can be grouped, separated by semicolons: H1 {font-weight: bold font-size: 12pt ; font-height: 14pt ; font-family: helvetica} Certain properties group together, e.g. there is a font property whose value is a fixed-order list of font-related properties: H1 {font: bold 12pt/14pt helvetica} by definition, equivalent to the preceding example. 2/28/2019 xmlstylespring02

Inheritance Suppose the style rule: H1 { color : blue } is in effect. In this example: <H1>The headline <EM>is</EM> important</H1> the EM element inherits the color attribute from its parent element, although no color declaration has been given for EM. Many properties may be inherited in this way. Thus one can set a default property for the whole document by giving a rule for the BODY element. 2/28/2019 xmlstylespring02

Contextual Selectors If we specifically want EM elements inside H1 elements to turn a different color, we can use a contextual selector: H1 EM {color: red} The juxtaposed list of selectors “H1 EM” means: this declaration applies only to EM elements immediately nested inside H1 elements. Behaves something like an Xpath selection, as we will see in later lecture on XLST. Although not immediately relevant to XML, here is a useful style sheet using contextual selectors: OL LI {list-style: upper-roman} OL LI LI {list-style: upper-alpha} OL LI LI LI {list-style: decimal} 2/28/2019 xmlstylespring02

HTML lists with contextual selectors 2/28/2019 xmlstylespring02

Pseudo-elements In CSS1 there are two kinds of pseudo elements: first-line and first-letter. These keywords can be attached to selectors as qualifiers, separated by a colon. Example: P:first-line {font-variant: small-caps} P:first-letter {color: red} 2/28/2019 xmlstylespring02

Classes Selectors in CSS style sheets can also be based on the value of an attribute called CLASS. For this to work, the elements in the source document must be annotated with this attribute. In the CSS rule, the class is attached as a qualifier to the (otherwise possibly empty) selector, separated by period. H1.PASTORAL {color: green} .RED {color: red} The rules might be exploited as follows <h1 CLASS="PASTORAL">6th Symphony</h1> <p> First movement. <p CLASS="RED"> Second movement. <p> Other movements. 2/28/2019 xmlstylespring02

Miscellaneous Properties The display property controls, in particular, whether an element is displayed as a standalone block, or as an inline element in the ordinary flow of text. There are may properties that control text style and layout. These properties include: float Describes how text should flow around an element. font-family The font face font-size font-weight line-height text-align Can be left, right, center, justify text-decoration Can be underline, etc. vertical-align Supports subscripts, superscripts, etc. 2/28/2019 xmlstylespring02

Miscellaneous Properties Setting colors and backgrounds: color background-color background-image A URL background-attachment Does background scroll? Margins and alignments line-height Sets any value margin-right, margin-left, . . . text-indent Of first line of block elements. Borders border-style May be dotted, dashed, solid, etc. 2/28/2019 xmlstylespring02

References Inside XML, Chapter 9: “Cascading Style Sheets”. Cascading Style Sheets: The Definitive Guide, Eric Meyer, O’Reilly, 2000. “Cascading Style Sheets, level 1”, http://www.w3.org/TR/REC-CSS1 “Cascading Style Sheets, level 2”, http://www.w3.org/TR/REC-CSS2 2/28/2019 xmlstylespring02

Extensible Stylesheet Language for Transformations 2/28/2019 xmlstylespring02

XSL Transformations XSL is the Extensible Stylesheet Language. It has two parts: the transformation language and the formatting language (XSL-FO). In these lectures we are most concerned with XSL transformations, or XSLT. The formatting language may be discussed... XSLT provides a syntax for defining rules that transform an XML document to another document. For example, to an HTML document. An XSLT “style sheet” consists primarily of a set of template rules that are used to transform nodes matching some patterns. 2/28/2019 xmlstylespring02

Transforming XML Consider the important application of transforming an XML document to HTML, for display purposes. This could happen in various places: In a Web server. A JSP page, for example, might convert XML documents stored on the server to HTML documents that are sent to the client via HTTP. In a Web browser. An XSL-enabled browser may convert XML downloaded from the server to HTML, prior to display. Currently Internet Explorer supports a subset of XSLT. In a standalone program. XML stored in or generated from a database, say, may be “manually” converted to HTML before placing it in the server’s document directory. In any case, a suitable program takes an XML document as input, together with an XSLT “style-sheet”. 2/28/2019 xmlstylespring02

Example Here is an XML source file that includes a “stylesheet” declaration: <?xml-stylesheet type="text/xsl" href="emptable.xsl" version="1.0"?> <EMPLOYEE> <PERSON> <EMPNO>100</EMPNO> <ENAME>JAMES </ENAME> <JOB>PRESIDENT</JOB> </PERSON> <EMPNO>201</EMPNO> <ENAME>KELLY </ENAME> <JOB>CLERK</JOB> . . . </EMPLOYEE> 2/28/2019 xmlstylespring02

Style sheet emptable.xsl <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match="/"> <HTML> <BODY> <TABLE WIDTH="100%" ALIGN="center" BORDER="1"> <TR> <TH>Number</TH> <TH>Name</TH> <TH>Job</TH> </TR> <xsl:for-each select="EMPLOYEE/PERSON"> <TR> <TD> <xsl:value-of select="EMPNO" /> </TD> <TD> <xsl:value-of select="ENAME" /> </TD> <TD> <xsl:value-of select="JOB" /> </TD> </TR> </xsl:for-each> </TABLE> </BODY> </HTML> </xsl:template> </xsl:stylesheet> 2/28/2019 xmlstylespring02

Remarks The xml-stylesheet element in the XML instance references an XSL style sheet. In general, children of the stylesheet element in a stylesheet are templates. A template specifies a pattern; the template is applied to nodes in the XML source document that match this pattern. In this example the only pattern is trivial: the pattern “/” matches the root node of the document. In the transformed document, the body of the template element replaces the matched node in the source document. In addition to text, the body may contain further XSL terms, e.g.: xsl:foreach repeats the enclosing template text for each member of a selected set of sub-nodes. xsl:value-of extracts data from selected sub-nodes. 2/28/2019 xmlstylespring02

Viewing Example With Internet Explorer 2/28/2019 xmlstylespring02

References Inside XML, Chapter 13: “XSL Transformations”. XSLT, Doug Tidwell, O’Reilly, 2001. “XSL Transformations (XSLT)”, version 1.0: http://www.w3.org/TR/xslt “XML Path Language (XPath)”, version 1.0: http://www.w3.org/TR/xpath 2/28/2019 xmlstylespring02

Simple Examples 2/28/2019 xmlstylespring02

Motivating Examples XSL is quite sophisticated and in detail depends on a separate specification called XPath. Before diving into technical details, we will go through a few simple examples, taken from Inside XML. 2/28/2019 xmlstylespring02

An Input Document Simplified version of example from the <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="eg.xsl"?> <planets> <planet> <name>Mercury</name> <mass>0.0553</mass> <day units="days">58.65</day> <radius units="miles">1516</radius> <density>0.983</density> </planet> <name>Venus</name> <mass>0.815</mass> <day units="days">116.75</day> <radius units="miles">3716</radius> <density>0.943</density> <name>Earth</name> <mass>1</mass> <day units="days">1</day> <radius units="miles">2107</radius> <density>1</density> </planets> An Input Document Simplified version of example from the “Inside XML” book (complete with astronomical errors). 2/28/2019 xmlstylespring02

Possible Style Sheet eg.xsl <?xml version="1.0" ?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"> <xsl:template match=“planets”> <HTML> <xsl:apply-templates /> </HTML> </xsl:template> <xsl:template match=“planet”> <P> <xsl:value-of select=“NAME” /> </P> </xsl:stylesheet> 2/28/2019 xmlstylespring02

Remarks There are two template rules: one matches elements called PLANETS and the other matches elements called PLANET. The rule for PLANETS matches the document root of the input XML data. The body of the rule is emitted as output. The <xsl:apply-templates /> instruction in the body of the rule causes the processing to continue on all children of the current node. The rule for PLANET matches the child nodes. For each, the body of the rule is emitted as output. This output includes the result of the <xsl:value-of select=“NAME” /> processing instruction, which yields the text of the nested NAME element. 2/28/2019 xmlstylespring02

Output So the resulting document should be: <HTML> <P>Mercury</P> <P>Venus</P> <P>Earth</P> </HTML> If you visited the original XML page using Internet Explorer, you would expect to see something like: 2/28/2019 xmlstylespring02

Processing Model for Templates The formal “processing model” for template rules is given in the XSLT specification. For our purposes the following simplified interpretation should do: Start at the document root node. Search through all the template rules in the style sheet, looking for any that match the current node. If more than one rule applies, choose the most specific match. If a match is found, replace the body of the current node with the body of the template, following any embedded processing instructions. Recurse to embedded nodes only as specified in processing instructions embedded in the template rule. In no match is found, apply the procedure starting at 2 recursively, to all children of “the current node”. 2/28/2019 xmlstylespring02

XSL in Internet Explorer That is how it is supposed to work. Microsoft have thus far only implemented a subset in Internet Explorer. In particular (in my version of IE) step 4 doesn’t happen automatically. To make the example to work, I had to add an extra explicit rule to get the processing started: <xsl:template match="/"> <xsl:apply-templates/> </xsl:template> The pattern “/” matches the root node of the document. In other words (apparently, at the time of writing) IE doesn’t automatically recurse in through the document. You have to be very explicit (“procedural”), and give a rule for each step down through the hierarchical structure of the document. XML Spy, on the other hand, works “correctly”. 2/28/2019 xmlstylespring02

Other Examples The O’Reilly book gives a nice “Hello World” example: <?xml version=“1.0”?> <greeting> Hello, World! </greeting> with several different XSL style sheets to convert this XML source file into interesting output formats: SVG, PDF (via XSL-FO), an executable Java program, and a VRML file. Note this particular example doesn’t have an xsl:stylesheet element: it is intended for conversion by a standalone program that takes XML source and style sheet as separate arguments, rather than for display in a Web browser. The style sheets are too longwinded to reproduce here, due to verbose output formats, but logic is no more complicated (simpler, in fact) than preceding example. 2/28/2019 xmlstylespring02

XPath 2/28/2019 xmlstylespring02

XML Path Language The XML Path Language, or XPath, is a language for addressing parts of an XML document. It is an essential part of XSLT, and also XPointer (as well as being used in XML schema). The patterns and other node selections appearing in XSLT rules are represented using XPath syntax. In simple cases an XPath expression looks like a UNIX path name, with nested directory names replaced by nested element names: “/” is the root element of a document. Expressions may be absolute (relative to the root) or relative to some context node. 2/28/2019 xmlstylespring02

Simple Examples The XPath: /planets/planet represents the set of all elements named planet directly nested in a root element called planets. /planets/planet/density represents the set of all elements named density that are directly nested in any element named planet, which directly nested in a root element called planets. /planets/planet/* represents the set of all elements that are directly nested in any element named planet, which is directly nested in a root element called planets. 2/28/2019 xmlstylespring02

Nodes Recognized by XPath XPath views a document as a tree of nodes—generally each node has a parent node enclosing it, and some children nodes nested within it. Technically XPath recognizes 7 kinds of node: element nodes attribute nodes text nodes (plain text children of some element) the root node (representing the whole document) namespace nodes processing instruction nodes comment nodes We will only be particularly interested in the first 4 kinds. 2/28/2019 xmlstylespring02

Types of XPath Expressions In full generality, XPath expressions evaluate to one of four possible types of thing: A node-set—a collection of nodes in the XML document. The nodes that can appear in a node-set include any of the 7 kinds of node mentioned on the preview slide. A boolean value—true or false. A number—internally a double-precision floating point, although they may be written and used as an integer. A string. In the end we are most interested in XPath expressions that evaluate to a node-set, although other the expression types can appear in some contexts. 2/28/2019 xmlstylespring02

Location Paths and Location Steps The most important kind of XPath expression is the location path. In general a location path consists of a series of location steps separated by the slash “/”. Compare to a UNIX path, where the individual “step” is the name of an immediately nested subdirectory or file, or a wildcard (*), or a move up into the parent directory (..), etc. 2/28/2019 xmlstylespring02

Steps and Context Nodes While a UNIX path may be relative to some current directory, an XPath expression is generally evaluated relative to some context node. Starting from this context node of the path, the location path takes a series of steps in various possible “directions”, e.g. into the set of child elements of the current element, into the set of attributes of the current element, into the set of siblings of the current element, etc. Each individual step has its own context node, determined by preceding steps in the path. 2/28/2019 xmlstylespring02

Syntax for Location Steps The commonest example of a location step—analogous to a UNIX directory name—is an XML element name. Implicitly this should be the name of an element that is an immediate child of the context node. Example: the XPath: /planets/planet has two steps. It references all elements named planet directly nested in a root element called planets. Actually this common case is an example of what is called abbreviated syntax. To be systematic, we will first describe the general, unabbreviated syntax for location paths. 2/28/2019 xmlstylespring02

Parts of Unabbreviated Location Step In general an individual location step is divided into three parts: The axis—a keyword which, loosely speaking, describes the “direction” this location step takes us in. Common examples are child and attribute axes, which, respectively, say that this step enters the set of children or the set of attributes of an element. The node test—this is typically an element or attribute name, selecting within the chosen axis. It may also be less specific: a node type or wildcard. Optionally, one or more predicates, which use arbitrary tests (boolean expressions) to further refine the set of selected nodes. 2/28/2019 xmlstylespring02

Syntax for a Location Step The unabbreviated syntax for a location step is: axis :: node-test [predicate1] [predicate2] . . . For example: child :: para [position() > 1] axis = child node test = para predicate = position() > 1 2/28/2019 xmlstylespring02

Axes Any location step starts from some context node; the axis is relative to this node. The available axes are: child—contains the child elements of the context node. attribute—contains the attributes of the context node. descendent—contains children and all descendents of children. parent—contains the parent element of the context node. ancestor—contains parent and ancestors of parent. following—all following element nodes, in document order. preceding—all preceding element nodes, in document order. following-sibling, preceding-sibling—elements at the same syntactic level. namespace—contains namespace nodes of context node. self, descendent-or-self, ancestor-or-self 2/28/2019 xmlstylespring02

The Node Test After choosing the axis, we refine the selection with a node test. The most common cases for a the node-test field are: an element or attribute name, selecting nodes in the axis with the given name, or the wildcard, “*”, selecting all nodes of the “principal type” for this axis (typically, all element nodes, or all attribute nodes if axis is attribute). The node-test field may also be a node type expression: comment(), text(), processing-instruction(), node() Optionally, the processing-instruction() function may include a literal string specifying a particular type of instruction. 2/28/2019 xmlstylespring02

Example Location Steps child :: para Child elements of of the context node, named para child :: * All element children of the context node child :: text() All text node children of the context node child :: node() All children, regardless of node type attribute :: name The attribute of the context node named name attribute :: * All attributes of the context node decendent :: para Descendent elements of the context node named para ancestor :: div Ancestor elements of the context node named div 2/28/2019 xmlstylespring02

Location Paths, Using Unabbreviated Syntax child :: chapter/descendent :: para para element descendents of chapter element children of the context node. child :: */child :: para All para element grandchildren of the context node. /descendent :: para All para elements in this document. 2/28/2019 xmlstylespring02

Predicates The node test is optionally followed by a series of predicate expressions. Each expression appears in []s. The predicates are computed successively to further filter the set of selected nodes. After each predicate is applied, the selected node set excludes those elements for which the expression evaluates to false. In the next slide we give some examples. Technical details of how these examples work are in following slides. 2/28/2019 xmlstylespring02

Examples with Predicates child :: para [position() = 1] First para element child of the context node. child :: para [position() = last()] Last para element child of the context node. child :: para [position() > 1] All para element children of the context node, except the first. /child :: doc/child :: chapter [position() = 5]/child :: section section elements of 5th chapter element of root doc element. child :: para [attribute :: type = ‘warning’] [position() = 5] 5th para child of context node having type attribute value “warning”. 2/28/2019 xmlstylespring02

Context Size and Position Various functions are available in predicate expressions. They include: last() returns the current context size. position(), the current context position. The definition of size and position is slightly subtle: they are relative to the set of nodes generated by starting at the initial context node for this location step, following the axis, and applying any earlier filters in the step (node test and preceding predicates, if any). Positions are labelled beginning at 1, and ordered according to proximity in the text to (the start of) the context node. 2/28/2019 xmlstylespring02

Subscripting Notation If the Xpath expression that appears in the predicate of a path step has numeric type, it is treated as true if its value is equal to position() and false otherwise. This is a slightly perverse way of saying that the syntax: child :: para [5] is equivalent to: child :: para [position() = 5] or in other words, that numeric expressions appearing in predicates behave like subscripts (relative to the node set described on the previous slide). 2/28/2019 xmlstylespring02

Subscripting Examples This convention allows us to simplify some of the examples given earlier, e.g.: child :: para [1] First para element child of the context node. child :: para [last()] Last para element child of the context node. /child :: doc/child :: chapter [5]/child :: section All section elements of 5th chapter element of root doc element. 2/28/2019 xmlstylespring02

Booleans In general, an Xpath expression is converted to a boolean—if context demands—by the following rules: A number (if not a top level predicate expression) converts to true if non-zero, false if zero. A non-empty string converts to true true, empty to false. A non-empty node converts to true, empty to false. According to the third rule, in: child :: section [child :: para] the predicate is true if the context node for the predicate—the section element—has a non-empty set of para children. This is a common idiom. Operators and, or, not() are available. 2/28/2019 xmlstylespring02

Comparisons Numeric and string comparisons in Xpath predicates follows fairly obvious rules. Comparisons involving node sets are defined to be true if the comparison would hold true for the string-value of any elements of the sets involved. Note, the string value of an element node is a concatenation of the string values of its children. For example, in child :: para [attribute :: type = ‘warning’] the predicate is true iff the node set attribute :: type includes an element with string-value “warning”. So this location step extracts all para children decorated with the attribute type=“warning”. 2/28/2019 xmlstylespring02

Unions The operator “|” forms the union of two node sets. e.g. child :: chapter [child :: section | child :: para] selects chapters that directly contain a section or a para. 2/28/2019 xmlstylespring02

Abbreviated Syntax for Paths Together, the following abbreviations allow the UNIX-like path syntax seen earlier: The axis selector child :: can always be omitted: a node test alone implicitly refers to the child axis. The location step “.” is short for self :: node(). The location step “..” is short for parent :: node(). Other useful abbreviations are: The axis selector attribute :: can be abbreviated to @. // is short for /descendent-or-self :: node()/ e.g //para is short for any para element in the document. 2/28/2019 xmlstylespring02

Summary In its full generality, XPath is a fairly complex (but powerful) language for addressing subsets of the nodes of an XML document. The generality of the underlying language should not be too intimidating. The most common idioms (which have special abbreviated syntax) do “what you expect”. If you take the time to understand XPath well, the rest of XSLT is relatively straightforward. 2/28/2019 xmlstylespring02

XSLT 2/28/2019 xmlstylespring02

Format of a Style Sheet Not surprisingly, an XSLT style sheet is itself an XML document. In this lecture we will be using the XSLT elements from the namespace: http://www.w3.org/1999/XSL/Transform. As a matter of convention we use the prefix xsl: for this namespace. 2/28/2019 xmlstylespring02

The Style Sheet Document The document root in an XSLT style sheet is an xsl:stylesheet element, e.g.: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > . . . </xsl:stylesheet> A synonym for xsl:stylesheet is xsl:transform. Several kinds of element can be nested inside xsl:stylesheet, but by far the most important is the xsl:template element. 2/28/2019 xmlstylespring02

The xsl:template Element The xsl:template element has a few possible attributes, but the only one we will consider is the match attribute, which is generally required unless this template element is a reference to an actual template defined elsewhere. So all our templates will have the form: <xsl:template match=“pattern”> template body </xsl:template> The pattern is an Xpath expression describing the nodes to which the template can be applied. Informally speaking, the processor scans the input document for nodes matching this pattern, and outputs the text included in the template body. In a nutshell, this explains the whole operation of XSLT. 2/28/2019 xmlstylespring02

Patterns The value of the match attribute of xsl:template is a (slightly restricted) XPath expression. As explained in the previous lecture XPath is a notation for selecting a particular set of nodes in an XML document. In general XPath works by starting at a particular context node, and following all paths from that node that match the XPath expression. 2/28/2019 xmlstylespring02

Restrictions for Pattern Expressions Fairly naturally, the expression in the match attribute must evaluate to a node set. Recall that general XPath expressions can evaluate to a few other kinds of thing (numbers, booleans, strings). The top-level of the expression should normally be a location path. A few other cases are allowed, e.g. unions of location paths (eg. path1 | path2). General XPath expressions can appear—but nested in filter predicates. Most notably, the location steps in the top-level location paths may only use the child or attribute axes. The unabbreviated descendant axis cannot be used. However, the special case syntax “//” is allowed. 2/28/2019 xmlstylespring02

Matching Patterns Formally, a pattern matches a node if there is some ancestor node from which you can reach the matched node by following the XPath expression (with the ancestor as context). In practice the rules are fairly obvious, e.g.: para Matches all elements named para in the search space. text() Matches all text nodes in the search space. @attrname All attrname attributes of all elements in the search space. para [position() = 1] All para elements that are first children of their parent element. chapter [5]//section All section elements in any chapter element that is in position 5. 2/28/2019 xmlstylespring02

Pattern Matching Examples Following examples use a simplified version of example in the Inside XML text. 2/28/2019 xmlstylespring02

Pattern Matching Example. 1 <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xml" href="eg.xsl"?> <planets> <planet> <name>Mercury</name> <mass>0.0553</mass> <day units="days">58.65</day> <radius units="miles">1516</radius> <density>0.983</density> </planet> <name>Venus</name> <mass>0.815</mass> <day units="days">116.75</day> <radius units="miles">3716</radius> <density>0.943</density> <name>Earth</name> <mass>1</mass> <day units="days">1</day> <radius units="miles">2107</radius> <density>1</density> </planets> Pattern Matching Example. 1 Pattern: name matches all elements called name. 2/28/2019 xmlstylespring02

Pattern Matching Example. 2 <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xml" href="eg.xsl"?> <planets> <planet> <name>Mercury</name> <mass>0.0553</mass> <day units="days">58.65</day> <radius units="miles">1516</radius> <density>0.983</density> </planet> <name>Venus</name> <mass>0.815</mass> <day units="days">116.75</day> <radius units="miles">3716</radius> <density>0.943</density> <name>Earth</name> <mass>1</mass> <day units="days">1</day> <radius units="miles">2107</radius> <density>1</density> </planets> Pattern Matching Example. 2 Pattern: day/@units would match attributes called units on all elements called day. (Not useful in xsl:template, though.) 2/28/2019 xmlstylespring02

Pattern Matching Example. 3 <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xml" href="eg.xsl"?> <planets> <planet> <name>Mercury</name> <mass>0.0553</mass> <day units="days">58.65</day> <radius units="miles">1516</radius> <density>0.983</density> </planet> <name>Venus</name> <mass>0.815</mass> <day units="days">116.75</day> <radius units="miles">3716</radius> <density>0.943</density> <name>Earth</name> <mass>1</mass> <day units="days">1</day> <radius units="miles">2107</radius> <density>1</density> </planets> Pattern Matching Example. 3 Pattern: planet [2]/radius matches elements called radius directly nested in planet elements in second position in their immediate parent. 2/28/2019 xmlstylespring02

Pattern Matching Example. 4 <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xml" href="eg.xsl"?> <planets> <planet> <name>Mercury</name> <mass>0.0553</mass> <day units="days">58.65</day> <radius units="miles">1516</radius> <density>0.983</density> </planet> <name>Venus</name> <mass>0.815</mass> <day units="days">116.75</day> <radius units="miles">3716</radius> <density>0.943</density> <name>Earth</name> <mass>1</mass> <day units="days">1</day> <radius units="miles">2107</radius> <density>1</density> </planets> Pattern Matching Example. 4 Pattern: planet [name=‘Earth’] matches elements called planet, having a non-empty set of directly nested name elements with value (concatenated text content) equal to “Earth”. 2/28/2019 xmlstylespring02

The Template Body When a node is matched, the body of the xsl:template element is evaluated, and the resulting text placed in the output document. The template body may include plain text, which is copied straight to the output document. It may also include nested XSLT elements that need to be further processed. These will be evaluated in the context of the matched node. Important examples of XSLT elements that may appear in the body of a template: The xsl:value-of element. The xsl:apply-templates element. The xsl:element and xsl:attribute elements. More “procedural” elements, like xsl:for-each, xsl:if. 2/28/2019 xmlstylespring02

Using an Empty Style Sheet Consider the example where there are no templates explicitly specified, eg.xsl has the form: <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > </xsl:stylesheet> The transformation of the input document is: Mercury0.055358.6515160.983Venus0.815116.7537160.943Earth1121071 i.e. just the concatenated string values in all text nodes. This happens because there is a default template rule: <xsl:template match=“text()”> <xsl:value-of select=“.”/> </xsl:template> 2/28/2019 xmlstylespring02

Templates Without Embedded XSLT Now consider a single template, with no embedded XSLT commands: <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0” xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="planet"> <p>planet discovered</p> </xsl:template> </xsl:stylesheet> The transformation of the input document is: <?xml version="1.0" encoding="UTF-16"?><p>planet discovered</p><p>planet discovered</p><p>planet discovered</p> This is valid HTML, but not very readable (as text). We can add the command: <xsl:output indent="yes"/> to the xsl:stylesheet element to get prettier output formatting. 2/28/2019 xmlstylespring02

The xsl:apply-templates element Suppose a second template matching the planets element is added: <xsl:template match="planet"> <p>planet discovered</p> </xsl:template> <xsl:template match="planets"> <h1>All Known Planets</h1> The output now only contains the header: not the “planet discovered” messages from processing the nested planet elements. Once a match is found, nested elements are not processed unless there is an explicit <xsl:apply-templates> instruction: <xsl:apply-templates/> 2/28/2019 xmlstylespring02

The xsl:value-of element We can now match arbitrary nodes in the source document, but we don’t yet have a way to extract data from those nodes. To do this we need the xsl:value-of element, e.g.: <xsl:template match="planet"> <p>planet <xsl:value-of select="name"/> discovered</p> </xsl:template> <xsl:template match="planets"> <h1>All Known Planets</h1> <xsl:apply-templates/> We now get the more interesting output: <p>planet Mercury discovered</p> <p>planet Venus discovered</p> <p>planet Earth discovered</p> 2/28/2019 xmlstylespring02

Selections The select attribute of the xsl:value-of element is a general XPath expression. Its result—which may be a node set or other allowed value—is converted to a string and included in the output. For example, the selection can be a set of attribute nodes, a set of element nodes, or it could be the result of a numeric computation. If the result is a set of nodes, the string result is just the result of converting the first member of the set to a node. To convert an element to a node, all text nodes in the element, including nested elements, are concatenated and returned as the value. 2/28/2019 xmlstylespring02

XPath Expressions in Attributes Suppose we want to generate an XML element in the output with an attribute whose value is computed from source data. One might be tempted to try a template like: <planet name = "<xsl:value-of select='name'/>" > Status: discovered </planet> This is ill-formed XML: we cannot have an XML element as an attribute value. Instead {}s can be used in an attribute value to surround an Xpath expression: <planet name = "{name}" > The XPath expression name is evaluated exactly as if it was the select attribute in a value-of element, converted to a string, and interpolated into the attribute value string. 2/28/2019 xmlstylespring02

Element Names from Data For similar reasons we cannot use <xsl:value-of> to compute an expression that is used as the name of an element in the generated file. This isn’t a particularly likely scenario if you are generating HTML, but imagine you are converting your input astronomical data to a well-formatted XML document where element names are planet names: <Mercury mass=“0.0553”> Status: discovered </Mercury> <Venus mass=“0.815”> </Venus> . . . 2/28/2019 xmlstylespring02

The xsl:element element In this case one can use instead the xsl:element element. These can optionally include nested xsl:attribute elements (as their first children): <xsl:template match="planet"> <xsl:element name="{name}"> <xsl:attribute name=“mass"> <xsl:value-of select=“mass"/> </xsl:attribute> Status: discovered </xsl:element> </xsl:template> When this template matches a planet, it generates an XML element whose name is the planet, with a mass attribute. 2/28/2019 xmlstylespring02

A Table of Planets <xsl:template match="planets"> <html><body> <h1>All Known Planets</h1> <table width="100%" align="center" border="1"> <tr><th>name</th><th>mass</th><th>density</th> <th>radius</th></tr> <xsl:apply-templates/> <!-- rows of table --> <tr> <td>AVERAGES</td> <td><xsl:value-of select="sum(planet/mass) div count(planet)"/></td> <td><xsl:value-of select="sum(planet/density) div count(planet)"/></td> <td><xsl:value-of select="sum(planet/radius) div count(planet)"/></td> </tr> </table> </body></html> </xsl:template> 2/28/2019 xmlstylespring02

A Row of the Table <tr> <xsl:template match="planet"> <tr> <td><xsl:value-of select="name"/></td> <td><xsl:value-of select="mass"/></td> <td><xsl:value-of select="density"/></td> <td><xsl:value-of select="radius"/></td> </tr> </xsl:template> 2/28/2019 xmlstylespring02

The Display 2/28/2019 xmlstylespring02

Remarks This example shows off a couple of functions for doing arithmetic on (numeric values of) sets of nodes: sum and count. Not clear how practical it is to do extensive computing in XSLT, but we can see that at least it possible... Note: could use format-number() function to get more sensible format for AVERAGES. 2/28/2019 xmlstylespring02