3/22/2016

MANAGING INFORMATION (CSCU9T4) LECTURE 5: XML STYLE

Gabriela Ochoa http://www.cs.stir.ac.uk/~goc/

CONTENT

 Revise XML Schema example

 Content vs. Display (e.g. Word vs. XML) [email protected] Gabriela Ochoa,  XSL: eXtensible Stylesheet Language. A style sheet language for XML documents.  XSLT: XSL Transformations. A language for transforming XML documents  XPath: a language for navigating in XML

documents  A number of examples

2

1 3/22/2016

RESOURCES

 Books

 XML in a Nutshell (2004) by Elliotte Gabriela [email protected] Gabriela Ochoa, Rusty Harold, W. Scott Means, O'Reilly  XML 1.1 Bible (2004) by Elliotte Rusty Harold, Wiley  Internet & World Wide Web How to Program, 5/e by Paul J. Deitel, Harvey M. Deitel, Abbey Deitel

 Links and websites

 W3 ORG  XML Tutorial: W3Schools  XML.COM O’REALLY  XSLT Online Transformations 3  W3 Schools: XLST online Editor

WHAT IS XSL?

 XSL stands for eXtensible Stylesheet Language,

and is a style sheet language for XML documents Gabriela [email protected] Gabriela Ochoa,  An XSL style sheet is, like with CSS, a file that describes how to display an XML document of a given type  XSL consists of 2 components:  XSLT - a language for transforming XML documents

 XSL-FO - a language for formatting XML documents

 Related tools  XPath - a language for navigating in XML documents. XSLT uses XPath to find information in an XML doc  XQuery - a language for querying XML documents 4

2 3/22/2016

HOW DOES XLST WORK? Gabriela [email protected] Gabriela Ochoa,

Styling requires:

1. A source XML document, containing the information that the style sheet will display 2. The style sheet itself which describes how to display a 5 document of a given type.

XSLT STYLESHEETS

 Declarative language

 Use pattern matching and templates to specify the [email protected] Gabriela Ochoa, transformation  Vastly more expressive than a CSS stylesheets  May perform arbitrary computations  XSLT transformation can be done either on the client (e.g. Explorer or Mozilla), or on the server

(e.g. Apache Xalan)  The target form is usually another XML document, commonly XHTML or HTML

6

3 3/22/2016

XSLT: AN EXAMPLE TRANSFORMATION

1. Demo: Simple ‘Users’ example in the browser with and w/o stylesheet 2. Example at: http://www.w3schools.com/xml/cd_catalog.xml

XML file [email protected] Gabriela Ochoa, • No information Empire Burlesque about display Bob Dylan • Display is included USA in the stylesheet Columbia 10.90 1985

• Use XSLT to transform XML into HTML, before it is displayed in a browser • The browser process the transformation 7

XSL style sheet is an XML file THE CD CATALOG EXAMPLE itself. So, the file begins with an xml declaration

The correct way to declare an

Gabriela [email protected] Gabriela Ochoa,

My CD Collection

We must declare the XSLT namespace at the top of the document An XSLT stylesheet consists of a number of template rules: rule = pattern + template
TitleArtist
HTML tags: 8 http://www.tutorialspoint.com/html/html_tags_reference.htm

4 3/22/2016

XSLT PROCESSING MODEL

 An XSLT stylesheet consists of a number of template rules: template rule = pattern + template

 For a given input XML document, the output is [email protected] Gabriela Ochoa, obtained as follows:  The source tree is processed by processing the root node  A single node is processed by:

1. finding the template rule with the best matching pattern

2. instantiating its template (creates result fragment + continues

processing recursively)

 A node list is processed by processing each node in order and concatenating the results  Simple illustrative animation:  http://cs.au.dk/~amoeller/XML/transformation/p2.html 9

STRUCTURE OF A STYLESHEET

 An XSLT stylesheet is itself an XML document

[email protected] Gabriela Ochoa, a template rule template

• Namespace http://www.w3.org/1999/XSL/Transform is used to recognize the XSLT elements. • The XML document may refer to a stylesheet using the processing instruction: 10

5 3/22/2016

XLST USES XPATH

 XPath is an expression language for addressing parts of an

XML document Gabriela [email protected] Gabriela Ochoa,  Xpath data model provides a tree representation of XML documents as well as atomic values such as integers, strings, and Booleans.

 It uses path expressions to select a set of nodes or atomic values in an XML document

 Path expressions look very much like the expressions you see

when you work with a traditional computer file system

 XPath contains a library of standard functions

 XPath is a W3C recommendation

11

XPATH DATA MODEL

 XPath sees an XML document as a tree structure

 The topmost element of the tree is called the root [email protected] Gabriela Ochoa, element.  Each information (XML elements, attributes, text, etc.) is called a node.  Nodes that XPath can see  Root node

 Elements and attributes  Special nodes like comments, processing instructions, namespace declarations.

12

6 3/22/2016

XLST, XML AND TREES

 The transformation process: XSLT transforms an XML source-tree into an XML result-tree.

 XML Data Representation [email protected] Gabriela Ochoa, sample1.o sample1.cpp sample1.h g++ -c sample1.cpp

 XML Tree representation

dependency

object depends depends rule 13 sample1.o sample1.cpp sample1.h g++ -c …

TREE TERMINOLOGY

 Root: node without parent (A) A Tree is an abstract model  Siblings: nodes share the same parent of a hierarchical structure.  Internal node: node with at least one child (A, B, C, F) [email protected] Gabriela Ochoa,  External node (leaf ): node without children (E, I, J, K, G, H, D) A  Ancestors of a node: parent, grandparent, grand-grandparent, etc.  Descendant of a node: child, grandchild, grand-grandchild, etc. B C D  Depth of a node: number of ancestors  Height of a tree: maximum depth of any

node (3)

 Degree of a node: the number of its E F G H children  Degree of a tree: the maximum number of its node. I J K  Subtree: tree consisting of a node and its subtree descendants 14

7 3/22/2016

XPATH SYNTAX

 Let us consider the following XML document

[email protected] Gabriela Ochoa,

Harry Potter 29.99

Learning XML 39.95

15

XPATH: SELECTING NODES

 XPath uses path expressions to select nodes in an XML document

 The most useful path expressions are listed below: Gabriela [email protected] Gabriela Ochoa,

Expression Description Nodename Selects all nodes with the name "nodename" / Selects from the root node // Selects nodes in the document from the current node that match the selection no matter where they are

. Selects the current node

.. Selects the parent of the current node, @ Selects attributes

16

8 3/22/2016

XPATH: EXAMPLES OF PATH EXPRESSIONS

Path Expression Selects

bookstore All nodes with the name "bookstore" [email protected] Gabriela Ochoa, /bookstore The root element bookstore

bookstore/book All book elements that are children of bookstore

//book Selects all book elements no matter where they are in the document bookstore//book All book elements that are descendant of the

bookstore element, no matter where they are under the bookstore element

//@lang All attributes that are named lang

17

PREDICATES

 Are used to find a specific node or a node that contains a specific value.

 Are always embedded in square brackets. Gabriela [email protected] Gabriela Ochoa, Path Expression Selects /bookstore/book[1] The first book element that is the child of the bookstore element. /bookstore/book[last()] The last book element that is the child of the bookstore element /bookstore/book[position()<3] The first two book elements that are children of the bookstore element //title[@lang] All the title elements that have an attribute named "lang" //title[@lang='en'] All the title elements that have a "lang" attribute with a value of "en" /bookstore/book[price>35.00] All the book elements of the bookstore element that have a price element with a value greater 18 than 35.00

9 3/22/2016

SELECTING UNKNOWN NODES

XPath wildcards can be used to select unknown XML elements.

Wildcard Description

* Matches any element node Gabriela [email protected] Gabriela Ochoa, @* Matches any attribute node node() Matches any node of any kind

Some Examples:

Path Expression Selects /bookstore/* All the child element nodes of the bookstore

element

//* All elements in the document //title[@*] All title elements which have at least one attribute of any kind

19

XPATH: SELECTING SEVERAL PATHS

• By using the | operator in an XPath expression you can select several paths.

• Some Examples: [email protected] Gabriela Ochoa,

Path Expression Select //book/title | //book/price All the title AND price elements of all book elements //title | //price All the title AND price elements in the document /bookstore/book/title | //price All the title elements of the book element of

the bookstore element AND all the price elements in the document

20

10 3/22/2016

XPATH AXES

 An axis defines a node-set relative to the current node. Axis Names: Example XML: [email protected] Gabriela Ochoa, • ancestor • ancestor-or-self • attribute • child Harry Potter • descendant 29.99 • descendant-or-self • following • following-sibling Learning XML • namespace 39.95 • parent • preceding • preceding-sibling • self

Details at: http://www.w3schools.com/xpath/xpath_axes.asp 21

XPATH: LOCATION PATH EXPRESSION

 A location path can be absolute or relative  Absolute locations start with a slash ‘/’: /step/step/...

 Relative locations does *not* start with a ‘/’: step/step/... Gabriela [email protected] Gabriela Ochoa,  Location paths consist of one or more steps, each separated by a slash

 Each step is evaluated against the nodes in the current node-set. A step consists of:  an axis: defines the tree-relationship between the selected nodes and the current node

 a node-test: identifies a node within an axis

 zero or more predicates: to further refine the selected node-set

 Syntax or a location step: axisname::nodetest[predicate]

22

11 3/22/2016

EXAMPLES: LOCATION PATH EXPRESSION

Example Selects child::book All book nodes that are children of the current node [email protected] Gabriela Ochoa, attribute::lang The ‘lang’ attribute of the current node child::* All element children of the current node attribute::* All attributes of the current node child::text() All text in the children of the current node child::node() All children of the current node All book descendants of the current node descendant::book ancestor::book All book ancestors of the current node ancestor-or-self::book All book ancestors of the current node - and the current as well if it is a book node 23

BACK TO XSLT • We took some time to cover Xpath • We get back to explaining more details of XSLT • Let us first consider the CD Catalog Example • Then some extensions to it

12 3/22/2016

HOW DOES XLST WORK? Gabriela [email protected] Gabriela Ochoa,

Styling requires:

1. A source XML document, containing the information that the style sheet will display 2. The style sheet itself which describes how to display a 25 document of a given type.

XSLT ELEMENTS

 XSLT is based on the idea of templates.

 The idea is to specify a number of templates that each match XML in the source document [email protected] Gabriela Ochoa,

 When the matching XML is found, the template is activated and its contents are added to the output document.

 Example:  A template that matches a element.  For each encountered in the source document the corresponding template will be activated  Any code inside the template will be executed and added to the output

 Using templates to process various parts of the source document, is one of the most powerful features of XSLT 26

13 3/22/2016

MAIN XSLT ELEMENTS

 All-encompassing document element used to hold all your templates [email protected] Gabriela Ochoa,  Use for setting which version of XSLT you want to use   The most important of XLST elements. It has two features:

1. What items from the source document it should handle

2. What should be added to the output when it is executed

27

MAIN XSLT ELEMENTS

:  An alternative way of processing a number of items in a

similar fashion (it can also be done with ) [email protected] Gabriela Ochoa,  Group the items and produce output based on each one  :  Used to evaluate an expression and add the result to the output.  Example:

 Process a element

 Use to add the contents of its element to the output </p><p> <xsl:apply-templates>: </p><p> Responsible for deciding which items in the source document should be processed  They are then handled by the appropriate template. </p><p>28 </p><p>14 3/22/2016 </p><p>XSL style sheet is an XML file THE CD CATALOG EXAMPLE itself. So, the file begins with an xml declaration </p><p><?xml version="1.0"?> The correct way to declare an <xsl:stylesheet version="1.0" XSL style sheet according to the xmlns:xsl=http://www.w3.org/1999/XSL/Transform> W3C XSLT Recommendation <xsl:template match="/"> </p><p><html> Gabriela goc@cs.stir.ac.uk Gabriela Ochoa, <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> We must declare the XSLT <th>Title</th> namespace at the top of the <th>Artist</th> document </tr> <xsl:for-each select=“CATALOG/CD"> <tr> <td><xsl:value-of select=“TITLE"/></td> An XSLT stylesheet <td><xsl:value-of select=“ARTIST"/></td> consists of a number of </tr> template rules: rule = </xsl:for-each> pattern + template </table> </body> </html> </xsl:template> </xsl:stylesheet> HTML tags: 29 http://www.tutorialspoint.com/html/html_tags_reference.htm </p><p>STYLE SHEET DECLARATION AND LINKING WITH THE XML DOCUMENT </p><p> XSL style sheet is an XML file itself. So, the file begins with an xml declaration. </p><p> The correct way to declare an XSL style sheet according to the goc@cs.stir.ac.uk Gabriela Ochoa, W3C XSLT Recommendation is: <xsl:stylesheet version="1.0" xmlns:xsl=http://www.w3.org/1999/XSL/Transform>  To get access to the XSLT elements, attributes and features we must declare the XSLT namespace at the top of the document. </p><p> To Link the XSL Style Sheet to the XML Document </p><p> Add the XSL style sheet reference to your XML document ("cdcatalog.xml"): <?xml-stylesheet type='text/xsl' href='cd_catalog.xls' ?>  An XSL style sheet consists of one or more set of rules that are called templates. 30 </p><p>15 3/22/2016 </p><p>XSLT <XSL:TEMPLATE> ELEMENT </p><p> A template contains rules to apply when a specified node is </p><p> matched. Gabriela goc@cs.stir.ac.uk Gabriela Ochoa,  The <xsl:template> element is used to build templates.  The match attribute is used to associate a template with an XML element or for the entire XML document. </p><p> The value of the match attribute is an XPath expression  In the Example: <xsl:template match="/">  The match="/" attribute associates the template with the root of </p><p> the XML source document. </p><p> The content inside the <xsl:template> element defines some HTML to write to the output. </p><p>31 </p><p>XLST <XSL:FOR-EACH> AND <XSL:VALUE-OF> ELEMENT S </p><p> <xsl:for-each select="CATALOG/CD"> </p><p> Locates elements in the XML document and repeats a Gabriela goc@cs.stir.ac.uk Gabriela Ochoa, template for each one.  The select attribute describes the element in the source document.  <xsl:value-of select="TITLE"/>  Selects a child in the hierarchy and  Inserts the content of that child into the template. </p><p>32 </p><p>16 3/22/2016 </p><p>XSLT SORT </p><p> The <xsl:sort> element is used to sort the </p><p> output Gabriela goc@cs.stir.ac.uk Gabriela Ochoa,  Add an <xsl:sort> element inside the <xsl:for-each> element in the XSL file:  <xsl:sort select="artist"/> </p><p> Demo, by editing the XSL file </p><p>33 </p><p>XSLT FILTER </p><p> It is possible to have filters to the XML file </p><p> Add the filter in a <xsl:for-each> element: goc@cs.stir.ac.uk Gabriela Ochoa, <xsl:for-each select="CATALOG/CD[ARTIST='Bob Dylan']">  Legal operators are:  = (equal)  =! (not equal)  < (less than) </p><p> > (greater than) </p><p> Demo, by editing the XSL file </p><p>34 </p><p>17 3/22/2016 </p><p>XSLT CONDITIONAL IF </p><p> It is possible to have a conditional if test against the content of the file, by adding an <xsl:if> element to your XSL document : goc@cs.stir.ac.uk Gabriela Ochoa, <xsl:if test="expression"> ...some output if the expression is true... </xsl:if>  Demo, by editing the XSL file (inside the <xsl:for- each> element ): <xsl:if test="PRICE < 9> </p><p><tr> <td><xsl:value-of select="TITLE"/></td> <td><xsl:value-of select="ARTIST"/></td> </tr> 35 </xsl:if> </p><p>XSLT CONDITIONAL CHOOSE CONDITION </p><p> It is possible to have a conditional choose against the content of the file, by adding an <xsl:choose>, <xsl:when> and <xsl:otherwise> elementd to your XSL document: <xsl:choose> <xsl:when test="expression"> goc@cs.stir.ac.uk Gabriela Ochoa, ... some output ... </xsl:when> <xsl:otherwise> ... some output .... </xsl:otherwise> </xsl:choose>> </p><p> Demo, by editing the XSL file, substituting the xsl:value-of-select = “ARTIST” element (after <td><xsl:value-of select="TITLE"/></td>): </p><p><xsl:choose> </p><p><xsl:when test="PRICE > 10"> <td bgcolor="#ff00ff"> <xsl:value-of select="ARTIST"/></td> </xsl:when> <xsl:otherwise> <td><xsl:value-of select="ARTIST"/></td> 36 </xsl:otherwise> </xsl:choose> </p><p>18 3/22/2016 </p><p>THE <XSL:APPLY-TEMPLATES> ELEMENT </p><p> Applies a template to the current element or to the </p><p> current element's child nodes Gabriela goc@cs.stir.ac.uk Gabriela Ochoa,  If we add a select attribute to the <xsl:apply-templates> element it will process only the child element that matches the value of the attribute.  We can use the select attribute to specify the order </p><p> in which the child nodes are processed. </p><p>37 </p><p><?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> </p><p><xsl:template match="/"> <html> </p><p><body> goc@cs.stir.ac.uk Gabriela Ochoa, <h2>My CD Collection</h2> <xsl:apply-templates/> </body> </html> </xsl:template> </p><p><xsl:template match="cd"> <p><xsl:apply-templates select="title"/> <xsl:apply-templates select="artist"/> </p> </xsl:template> </p><p>38 … Continue next slide </p><p>19 3/22/2016 </p><p><xsl:template match="title"> Title: <span style="color:#ff0000"> </p><p><xsl:value-of select="."/></span> Gabriela goc@cs.stir.ac.uk Gabriela Ochoa, <br /> </xsl:template> </p><p><xsl:template match="artist"> Artist: <span style="color:#00ff00"> <xsl:value-of select="."/></span> <br /> </p><p></xsl:template> </p><p></xsl:stylesheet> </p><p>39 </p><p>SUMMARY </p><p> XSL: eXtensible Stylesheet Language. A style </p><p> sheet language for XML documents. Gabriela goc@cs.stir.ac.uk Gabriela Ochoa,  XSLT: XSL Transformations. A language for transforming XML documents  XPath: a language for navigating in XML documents  A number of examples with explanations </p><p> More XSLT elements listed at : http://www.w3schools.com/xsl/xsl_w3celementref.asp </p><p>40 </p><p>20 </p> </div> </article> </div> </div> </div> <script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> var docId = 'f9fef81895b78329bad35e65e0385791'; var endPage = 1; var totalPage = 20; var pfLoading = false; window.addEventListener('scroll', function () { if (pfLoading) return; var $now = $('.article-imgview .pf').eq(endPage - 1); if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) { pfLoading = true; endPage++; if (endPage > totalPage) return; var imgEle = new Image(); var imgsrc = "//data.docslib.org/img/f9fef81895b78329bad35e65e0385791-" + endPage + (endPage > 3 ? ".jpg" : ".webp"); imgEle.src = imgsrc; var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>'); $('.article-imgview').append($imgLoad); imgEle.addEventListener('load', function () { $imgLoad.find('img').attr('src', imgsrc); pfLoading = false }); if (endPage < 7) { adcall('pf' + endPage); } } }, { passive: true }); </script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>