XPath and XSLT

XSL - XML Stylesheet Language Describes how an xml document should be displayed.

XPath - this allows you select a part of the xml document to be processed in a particular way.

XSLT - Extensible Stylesheet Language Transformations converts an xml document into some other representation, often for presentations or display (HTML or XHTML)

XSLT uses XPath which is used to navigate through an XML document

Here are links to two very elementary tutorials on XSLT. You should work through both of these.
The ZVON XSLT tutorial
The W3Schools XSLT Tutorial

XPath

Xpath recognizes seven kinds of nodes

• element
• attibute
• text
• namespace
• processing-instruction
• comment
• document (root) nodes

An item is an atomic value or a node. nodes have parents, children, siblings

There is an expression grammar. This looks very similar to Unix File stuff

XPath uses path expressions to select nodes in an XML document. The node is selected by following a path or steps. The most useful path expressions are listed below:

Expression	Description
nodename	Selects all child nodes of the 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

<?xml version="1.0" encoding="ISO-8859-1"?>
<courselist semester="fall,05">
  <course>
      <dept>CSCI</dept>
      <coursenum>1100</coursenum>
      <coursename>Computer Science I</coursename>
      <instructor>Hardwick</instructor>
  </course>
  <course>  ...
</courselist>

courselist - all child nodes of the courselist element
/courselist selects the root element courselist
courselist/course - selects all course elements
// course - all course elements, no matter where they are in the document
//@semester - selects all attributes named semester

/courselist/course[1] selects the first course element that is the child of the courselist element
/courselist/course[last()]
/courselist/course[last()-1]
/courselist/course[position()<3]
/courselist/course[coursenum>1999]

Wildcards * matches any element node
@* matches any attribute node
node() matches any node of any kind

The | operator selects several paths

The standard arithmetic operators can be used (+, - *, div)

XSLT

In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more predefined templates. When a match is found, XSLT will transform the matching part of the source document into the result document.

XSLT support is built into the browser.

Example: Converting XML to XHTML

Here is how to declare an XSL stylesheet

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

Here is our XML document

Create an XSL stylesheet

courselist.xsl

Link the xsl stylesheet to the xml document by inserting a stylesheet line into the xml file

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

Here is how it is displayed now.

An XSL style sheet consists of one or more set of rules that are called templates. Each template contains rules to apply when a specified node is matched.

The xsl:template Element

The match attribute is used to associate a template with an XML element.

match="/" matches the entire document

The <xsl:value-of> element is used to extract the value of a selected node. The value is an XPath expression

The <xsl:for-each> element allows you to do looping in XSLT

The value of the select attribute is an XPath expression

Filtering the Output

We can select only those elements that meet certain criteria by adding a filter to the select attribute in the element.

<xsl:for-each select="courselist/course/[dept='CSCI']">

Here is the revised stylesheet file

and here is how it would be displayed.

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

Here is another form of filtering using the xsl:if element and the test attribute

    <xsl:for-each select="courselist/course">
    <xsl:if test="coursenum&gt;3000">
    <tr>
      <td><xsl:value-of select="dept"/></td>
      <td><xsl:value-of select="coursenum"/></td>
      <td><xsl:value-of select="instructor"/></td>
    </tr>
    </xsl:if>
    </xsl:for-each>

The <xsl:sort> element is used to sort the output. This is put just after the for-each element

<xsl:sort select="instructor"/>

Here is the stylesheet sorting by instructor

and here is how the data are displayed.

Note that the xml file is unchanged for all of this except for the stylesheet.

It is also possible to put XSLT commands in javascript, so that there is no reference to the style sheet in the xml file. There is complete separation between the data and its display.

Here is the java script demo that I showed in class
Alert! Many of these demos only work in Internet Explorer.

There are lots of good javascript tutorials on the web; the w3school tutorial is perhaps the best one. This is your reading assignment

Dave Hollinger's stupid javascript tricks