Displaying XML Document

1

Displaying XML Document

Web and Database

Management System

2

XML and CSS

Web and Database

Management System

3

Using CSS to Display XML Document

• This is a simplest way to display the XML document

• We can simply create a css file with each XML’s tagname representing the separator

• We can use a browser to open the XML file

• The browser will then render the XML document according to the style specified in the CSS file

4

Display XML Doc using CSS

<?xml-stylesheet type="text/css" href="cd_catalog.css"?><CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> ….. ….. …..</CATALOG>

cd_catalog.xml/* CSS Document */CATALOG {

background-color: #ffffff;width: 100%;

}CD {

display: block;margin-bottom: 30pt;margin-left: 0;

}TITLE {

color: #FF0000;font-size: 20pt;

}ARTIST {

color: #0000FF;font-size: 20pt;

}COUNTRY,PRICE,YEAR,COMPANY {

display: block;color: #000000;margin-left: 20pt;

}

cd_catalog.css

5

Result of XML and CSS

• To display the xml document with its associated css is to simply open the xml file in a browser

6

XSLT

Web and Database

Management System

7

XSL and XSLT

• XSL (EXtensible Stylesheet Language) is a style sheet language for XML documents

• XSL describes how an XML document should be displayed

• XSL consists of three parts:– XSLT - a language for transforming XML documents– XPath - a language for navigating in XML documents– XSL-FO - a language for formatting XML documents

• XSLT stands for XSL Transformations which is how to transform XML documents into other formats

8

What is XSLT?

• XSLT stands for XSL Transformations

• XSLT is the most important part of XSL

• XSLT transforms an XML document into another XML document

• XSLT uses XPath to navigate in XML documents

• XSLT is a W3C Recommendation

XSLT transforms an XML source-tree into an XML result-tree.

9

XSLT

• XSLT transforms each XML element into an (X)HTML element that can be recognized by browsers

• With XSLT we can add/remove elements and attributes to or from the output file

• We can rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more

• XSLT uses XPath to find information in an XML document

10

Style Sheet Declaration

• The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>.

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:transform version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

or

11

XSL Style Sheet with a Transformation Template

<?xml version="1.0" encoding="ISO-8859-1"?><xsl:stylesheet version="1.0“ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32">

<th>Title</th> <th>Artist</th></tr><xsl:for-each select="catalog/cd"><tr> <td><xsl:value-of select="title"/></td><td><xsl:value-of select="artist"/></td></tr></xsl:for-each>

</table> </body> </html> </xsl:template></xsl:stylesheet>

12

Link XSL Style Sheet to XML Document

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>

<catalog>

<cd>

<title>Empire Burlesque</title>

<artist>Bob Dylan</artist>

<year>1985</year>

</cd>

.

.

</catalog>

13

XSLT <xsl:template> Element

• A template contains rules to apply when a specified node is matched

• The <xsl:template> element is used to build templates

• The value of the match attribute is an XPath expression– i.e. match="/" defines the whole document

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version=“1.0” mlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body> …………………

</xsl:template>

The match="/" attribute associates template with the root of the XML source document.

14

The <xsl:value-of> Element

• <xsl:value-of> is used to extract value of an XML element and add it to the output stream

• select attribute in the example, contains an XPath expression

<table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <tr> <td><xsl:value-of select=“catalog/cd/title” /></td> <td><xsl:value-of select=“catalog/cd/artist” /></td> </tr> </table>

15

<xsl:value-of> Output

My CD Collection

Title Artist

Empire Burlesque Bob Dylan

16

The <xsl:for-each> Element

• <xsl:for-each> element allows us to do looping in XSLT

• It can be used to select every XML element of a specified node-set:

<table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each></table>

17

<xsl:for-each> Output

18

Filtering the Output (for-each)

• We can also filter output from XML file by adding a criterion to select attribute in the <xsl:for-each> element

• Legal filter operators are:– = (equal)– != (not equal)– < less than– > greater than

<xsl:for-each select="catalog/cd[artist='Bob Dylan']">

19

XSLT <xsl:sort> Element

• To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each> element in the XSL file:

<xsl:for-each select="catalog/cd"> <xsl:sort select="artist"/>

<tr>

<td><xsl:value-of select="title"/></td>

<td><xsl:value-of select="artist"/></td>

</tr>

</xsl:for-each>

20

<xsl:sort> Output

My CD Collection

Title Artist

Romanza Andrea Bocelli

One night only Bee Gees


Hide your heart Bonnie Tyler

The very best of Cat Stevens

Greatest Hits Dolly Parton

Sylvias Mother Dr.Hook

Eros Eros Ramazzotti

Still got the blues Gary Moore

Unchain my heart Joe Cocker

Soulsville Jorn Hoel

For the good times Kenny Rogers

21

XSLT <xsl:if> Element

• <xsl:if> element is used to put a conditional test against the content of the XML file.

<xsl:for-each select="catalog/cd"> <xsl:if test="price > 10"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:if> </xsl:for-each>

<xsl:if test="expression"> ...some output if the expression is true...</xsl:if>

Syntax:

22

<xsl:if> Output

My CD Collection

Title Artist


Still got the blues Gary Moore

One night only Bee Gees

Romanza Andrea Bocelli

Black angel Savage Rose

1999 Grammy Nominees Many

23

XSLT <xsl:choose> Element

• <xsl:choose> element is used in conjunction with <xsl:when> and <xsl:otherwise> to express multiple conditional tests.

<xsl:choose>

<xsl:when test="expression">

... some output ...

</xsl:when>

<xsl:otherwise>

... some output ....

</xsl:otherwise>

</xsl:choose>

Syntax:

24

<xsl:choose> Example

<xsl:for-each select="catalog/cd">

<tr>

<td><xsl:value-of select="title"/></td>

<xsl:choose>

<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>

</xsl:otherwise>

</xsl:choose>

</tr>

</xsl:for-each>

25

<xsl:choose> Example

<xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <xsl:choose> <xsl:when test="price > 10"> <td bgcolor="#ff00ff"><xsl:value-of select="artist"/></td> </xsl:when> <xsl:when test="price > 9"> <td bgcolor="#cccccc"><xsl:value-of select="artist"/></td> </xsl:when> <xsl:otherwise> <td><xsl:value-of select="artist"/></td> </xsl:otherwise> </xsl:choose> </tr></xsl:for-each>

26

<xsl:choose> Output

27

XSLT <xsl:apply-templates> Element

• <xsl:apply-templates> element applies a template to the current element or to the current element's child nodes

• If we add a select attribute to the, it will process only the child element that matches the value of the attribute

• We can use the select attribute to specify the order in which the child nodes are processed.

28

XSLT <xsl:apply-templates> Example

<xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <xsl:apply-templates/> </body> </html></xsl:template><xsl:template match="cd"> <p> <xsl:apply-templates select="title"/> <xsl:apply-templates select="artist"/> </p></xsl:template><xsl:template match="title"> Title: <span style="color:#ff0000"> <xsl:value-of select="."/></span> <br /></xsl:template><xsl:template match="artist"> Artist: <span style="color:#00ff00"> <xsl:value-of select="."/></span> <br /></xsl:template>

29

XSLT <xsl:apply-templates> Output

30

XPath

Web and Database

Management System

31

XPath

• XPath is a syntax for defining parts of an XML document

• XPath is used to navigate through elements and attributes in an XML document.

• XPath is a major element in XSLT

32

XPath Introduction

• XPath Path Expressions– XPath uses path expressions to select nodes or node-sets in an

XML document

• XPath Standard Functions– XPath has functions for string values, numeric values, date and

time comparison, node and QName manipulation, sequence manipulation, Boolean values, and more

• XPath is Used in XSLT– XPath is a major element in the XSLT standard. Without XPath

knowledge we will not be able to create XSLT documents

33

XPath Nodes

• There are seven kinds of nodes: – element, attribute, text, namespace, processing-instruction,

comment, and document nodes.

<?xml version="1.0" encoding="ISO-8859-1"?><bookstore> <book> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book></bookstore>

<bookstore> is root element node, <author>J K. Rowling</author> is element node, and lang="en" is attribute node.

34

Terminology

• Parent– Each element and attribute has one parent

• Children– Element nodes may have zero, one or more children

• Siblings– Nodes that have the same parent

• Ancestors– A node's parent, parent's parent, etc.

• Descendents– A node's children, children's children, etc.

35

XPath Syntax

• XPath uses path expressions to select nodes or node-sets in an XML document.

<?xml version="1.0" encoding="ISO-8859-1"?><bookstore> <book> <title lang="eng">Harry Potter</title> <price>29.99</price> </book> <book> <title lang="eng">Learning XML</title> <price>39.95</price> </book></bookstore>

36

Selecting Nodes

• The most useful path expressions are listed below:

Expression Description

nodename Selects all child nodes of the named node

/ 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

37

Selecting Nodes (Example)

Path Expression Result

bookstore Selects all the child nodes of the bookstore element

/bookstore Selects the root element bookstoreNote: If the path starts with a slash ( / ) it always represents an absolute path to an element!

bookstore/book Selects all book elements that are children of bookstore

//book Selects all book elements no matter where they are in the document

bookstore//book Selects all book elements that are descendant of the bookstore element, no matter where they are under the bookstore element

//@lang Selects all attributes that are named lang

38

Predicates

• Predicates are used to find a specific node or a node that contains a specific value.

• Predicates are always embedded in square brackets.Path Expression Result

/bookstore/book[1] Selects the first book element that is the child of the bookstore element.Note: IE5 and later has implemented that [0] should be the first node, but according to the W3C standard it should have been [1]!!

/bookstore/book[last()] Selects the last book element that is the child of the bookstore element

/bookstore/book[last()-1] Selects the last but one book element that is the child of the bookstore element

/bookstore/book[position()<3] Selects the first two book elements that are children of the bookstore element

39

Predicates (cont)


//title[@lang] Selects all the title elements that have an attribute named lang

//title[@lang='eng'] Selects all the title elements that have an attribute named lang with a value of 'eng'

/bookstore/book[price>35.00] Selects all the book elements of the bookstore element that have a price element with a value greater than 35.00

/bookstore/book[price>35.00]/title Selects all the title elements of the book elements of the bookstore element that have a price element with a value greater than 35.00

40

Selecting Unknown Nodes

• XPath wildcards can be used to select unknown elements

• Selecting nodes using wildcards

Wildcard Description

* Matches any element node

@* Matches any attribute node

node() Matches any node of any kind


/bookstore/* Selects all the child nodes of the bookstore element

//* Selects all elements in the document

//title[@*] Selects all title elements which have any attribute

41

Selecting Several Path

• By using the | operator in an XPath expression, we can select several paths


//book/title | //book/price Selects all the title AND price elements of all book elements

//title | //price Selects all the title AND price elements in the document

/bookstore/book/title | //price

Selects all the title elements of the book element of the bookstore element AND all the price elements in the document

42

XPath AxesAxisName Result

ancestor Selects all ancestors (parent, grandparent, etc.) of the current node

ancestor-or-self Selects all ancestors (parent, grandparent, etc.) of the current node and the current node itself

attribute Selects all attributes of the current node

child Selects all children of the current node

descendant Selects all descendants (children, grandchildren, etc.) of the current node

descendant-or-self

Selects all descendants (children, grandchildren, etc.) of the current node and the current node itself

following Selects everything in the document after the closing tag of the current node

following-sibling Selects all siblings after the current node

namespace Selects all namespace nodes of the current node

parent Selects the parent of the current node

preceding Selects everything in the document that is before the start tag of the current node

preceding-sibling Selects all siblings before the current node

self Selects the current node

43

Location Path Expression (Axes)

• 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)

<?xml version="1.0" encoding="ISO-8859-1"?><bookstore> <book> <title lang="eng">Harry Potter</title> <price>29.99</price> </book> <book> <title lang="eng">Learning XML</title> <price>39.95</price> </book></bookstore>

axisname::nodetest[predicate]

44

Axes Examples

Example Result

child::book Selects all book nodes that are children of current node

attribute::lang Selects the lang attribute of the current node

child::* Selects all element children of the current node

attribute::* Selects all attributes of the current node

child::text() Selects all text node children of the current node

child::node() Selects all children of the current node

descendant::book Selects all book descendants of the current node

ancestor::book Selects all book ancestors of the current node

ancestor-or-self::book Selects all book ancestors of the current node - and the current as well if it is a book node

child::*/child::price Selects all price grandchildren of the current node

45

Operator Description Example Return value

| Computes two node-sets //book | //cd Returns a node-set with all book and cd elements

+ Addition 6 + 4 10

- Subtraction 6 - 4 2

* Multiplication 6 * 4 24

div Division 8 div 4 2

= Equal price=9.80 true if price is 9.80false if price is 9.90

!= Not equal price!=9.80 true if price is 9.90false if price is 9.80

< Less than price<9.80 true if price is 9.00false if price is 9.80

<= Less than or equal to price<=9.80 true if price is 9.00false if price is 9.90

> Greater than price>9.80 true if price is 9.90false if price is 9.80

>= Greater than or equal to price>=9.80 true if price is 9.90false if price is 9.70

or or price=9.80 or price=9.70 true if price is 9.80false if price is 9.50

and and price>9.00 and price<9.90 true if price is 9.80false if price is 8.50

mod Modulus (division remainder) 5 mod 2 1

46

XPath Functions

• XPath provides a group of functions including:– Accessor, Error and Trace, Numeric, String, AnyURI, Boolean,

Duration/Date/Time, QName, Node, Sequence, and Context

• The default prefix for the function namespace is fn:

• The URI of the function namespace is: http://www.w3.org/2005/xpath-functions

47

XPath Functions Example

• Some examples from context function

Name Description

fn:position() Returns the index position of the node that is currently being processedExample: //book[position()<=3]Result: Selects the first three book elements

fn:last() Returns the number of items in the processed node listExample: //book[last()]Result: Selects the last book element

fn:current-dateTime() Returns the current dateTime (with timezone)

fn:current-date() Returns the current date (with timezone)

48

<html><body><script type="text/javascript"> if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

xmlhttp.open("GET","cd_catalog.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>"); var x=xmlDoc.getElementsByTagName("CD"); for (i=0;i<x.length;i++) {

document.write("<tr><td>");document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);document.write("</td><td>");document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);document.write("</td></tr>");

} document.write("</table>");</script>

</body></html>

Displaying XML Document

Documents

Transcript of Displaying XML Document