Embed Size (px)
Citation preview
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
Empire Burlesque Bob Dylan
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
Empire Burlesque Bob Dylan
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)
Path Expression Result
//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
Path Expression Result
/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
Path Expression Result
//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>
