XML and XSL

• Use IE5 or later to view XML and XSL
• Tutorial 
  • XML and XSL Online 
  • XSL Transformations Book Chapter Online
  • XSLT Download
  • XML Download
• Reference
  • XSLT Download
  • XSLT - WWW Consortium Version 2.0 Online
  • XML - WWW Consortium Verison 1.0 Online
• Software
  • Generate HTML from XML/XSL transform - msxsl.exe Download

Overview

Web systems minimally consist of two distinct parts:

• Client Browser the user interface of the system, which requests and presents the pages from the server to the user.
• Web Server which responds to user requests, returning file contents or dynamically generated pages to the client for display.

Differences - The skills needed to design and implement a user interface on the client are very different than those for dynamically generating pages on the server.

• User interface design is concerned with Web site organization, page layout, navigation, color, font size, and other issues directly related to making the site usable by a human. Skills needed are interviewing users, defining site goals, prototyping a Web site, testing the prototype, HTML, Javascript, and others. Key goal is usability.
• Server page generation is concerned with design and implementation of program logic in C++, Perl, and JavaScript, database access, responding to user requests, transactions with other servers, security and others. Key goal is correctness.

Separation - Ideally the user interface and server page generation implementations are separated or decoupled, allowing changes in one to be made independently of changes in the other.

For example, suppose you maintain the NYSE stock pages. You have two basic options for constructing the pages seen by the user:

1. A static HTML implementation would require someone with a knowledge of HTML to edit the page each time a trade occurred; very time-consuming, requires constant attention by someone with HTML skills and the results are still always behind the real-time stock changes.
2. A dynamic page generation would construct the page by consulting the real-time stock database and merging HTML with the current stock information to produce the HTML delivered to the browser. Requires greater initial effort and skill to implement initially but operates automatically and timely from live data.

This section is about implementing the user interface separately from the logic of the Web site.

Throughout the course, XML will be used to represent the data and combined HTML/XSL to implement the user interface.

XML (eXtensible Markup Language) 

A language for defining and representing languages. 

1. HTML (and XHTML) is a subset of XML.
2. One key use is to define a data structure and data within the structure, useful for exchanging data between different applications and computer systems. 
3. XML gives semantic meaning to data. For example, <Zip>47150</Zip> can mean the Zip code is 47150.
4. Since XML is written as text that is readable and writeable by humans, it is also computer architecture neutral, that is does not depend upon a specific bit-size representation of floating point numbers for example. XML can and is commonly used to communicate data over the Internet without regard to the sending or receiving machine characteristics.
5. Many database systems such as Oracle and Microsoft can generate entries from a database in XML form for use by other applications that understand XML without regard to the computer system word size, etc. 
6. XML combined with XSL can separate implementation of the user interface from the data being presented. More on XSL later.

A simple example of XML use is to supply structured data to an application. Information for shipping a package from one Zip code to another can be specified in XML with a hierarchy tree as:
 

<package>    <To>47150</To>    <From>47165</From>    <Weight>17.0</Weight>    <Rate>27.50</Rate>   </package>

Basic XML Rules

• Hierarchical element structure - XML documents must have a strictly hierarchical tag structure. That is, start tags must have exact corresponding end tags. In XML vocabulary, a pair of start and end tags is called an element. Any element must be completely nested within another. 
   
• Well-formed - <To>47150</To> is well-formed because there is a <To> start tag and a </To> end tag.
   
• Case sensitive - XML is case sensitive. <to> 47150</To> is invalid.
   
• Empty - An empty element can be written as <To></To> or equivalently as <To/>.
   
• Text - A non-empty element can enclose other elements or text. <To>47150</To> encloses text of 47150.
   
• Attribute - <To Signature="Yes">47150</To> has one attribute, Signature, with the value "Yes".

Parsing 

Many programming languages and applications such as the IE Web browser can parse XML to build a hierarchical tree that corresponds to the XML. The parser reads the XML and constructs the corresponding tree. A program such as IE would use a parser to first construct the tree, then reference nodes on the tree to access each element of the XML. We'll see that XML parsing into a DOM (Document Object Model) tree is key, allowing programs (and therefore us) complete control of the tree and its contents; we will examine this in detail later in the course.

For example the following defines XML for Employees, which is automatically parsed by IE and some other browsers into a DOM tree.
 

 <Employees>
  <Employee>
    <First>James</First>   <Last>Borg</Last> 
  </Employee>
  <Employee>
    <First>Joyce</First>   <Last>English</Last> 
  </Employee>
 </Employees>

XSL - XML Stylesheet Language

Style sheets provide a consistent way to display a page.

XSL works to transform the data structure of the XML or HTML tree for display in a browser. The advantage is illustrated below where the XML file references the XSL file when loaded to display a table based upon the data structure defined in XML. This supports maintaining a standard look and feel across all applications that would generate a table that appeared the same though with different entries for the different source XML data recordsets.

How it works 

IE browser loads and parses the XML file into a tree.  XSL style sheet file loaded and parsed to into a tree. XML and XSL trees used to produce an HTML result tree. IE renders the HTML tree to display.

• Employees.xml - Defines the XML data structure. 
  • <?xml-stylesheet type="text/xsl" href="Employees.xsl"?> - Transform the XML using "Employees.xsl" as the style sheet file.
     
• Employees.xsl - Defines the transformations, most of which is regular HTML. 
  • <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > - Start of style sheet that follows the www.w3.org... naming definitions.
  • <xsl:template match="/"> - A template for display of the '/' or root of the XML tree.
  • <xsl:for-each select="Employees/Employee"> - Iterates through each of the Employees/Employee nodes.
  • <xsl:value-of select="First"/> - Outputs the value of the current "First" node.
     
• HTML  - Generated by IE browser when loading the Employees.xml file.
   
• Attributes - XML elements (and HTML, which is a subset of XML) can contain attributes, for example:
  • <TABLE BORDER="1"> where BORDER is the attribute and "1" is the value of BORDER.
  • <xsl:value-of select="First"/> where select is the attribute and "First" is the value.
     
• Empty - Elements can be empty and have attributes, for example the following are equivalent:
  • <xsl:value-of select="First"/>
  • <xsl:value-of select="First"></xsl:value-of select>

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

<Employees>
  <Employee> 
	<First>James</First> 
	<Last>Borg</Last> 
  </Employee>  
  <Employee>    
	<First>Joyce</First>   
	<Last>English</Last>
  </Employee>
</Employees>

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

 <xsl:template match="/">

   <TABLE BORDER="1">
     <TR> <TD>First</TD>  <TD>Last</TD>  </TR>

     <xsl:for-each select="Employees/Employee">
      <TR>
       <TD><xsl:value-of select="First"/></TD>
        <TD><xsl:value-of select="Last"/></TD>
      </TR>
     </xsl:for-each>

  </TABLE>

 </xsl:template>
</xsl:stylesheet>

XSL Templates Correspond to XML Elements

The example below produces the same results as that above but use apply-templates rather than for-each to process XML elements. apply-templates specifies to apply the template defined for the next lower-level of the heirarchy.

Employees.xml file defines a 4-level hierarchy of elements, the Employees.xsl defines a corresponding hierarchy to process the XML elements.

	Employees.xml	Employees.xsl
1.	"/" or root	<xsl:template match="/">
2.	<Employees>	<xsl:template match="Employees">
3.	<Employee>	<xsl:template match="Employee">
4.	<First> and <Last>	<xsl:value-of select="First"/> <xsl:value-of select="Last"/>

Employees.xml <?xml-stylesheet type="text/xsl"       href="Employees.xsl"?> <Employees>   <Employee>     <First>James</First>     <Last>Borg</Last>   </Employee>    <Employee>        <First>Joyce</First>       <Last>English</Last>   </Employee> </Employees>

Employees.xsl <xsl:stylesheet version="2.0" xmlns:xsl= "http://www.w3.org/1999/XSL/Transform" > <xsl:template match="/"> <TABLE BORDER="1"> <TR> <TD>First</TD> <TD>Last</TD> </TR> <xsl:apply-templates/> </TABLE> </xsl:template> <xsl:template match="Employees"> <xsl:apply-templates/> </xsl:template> <xsl:template match="Employee"> <TR> <TD><xsl:value-of select="First"/></TD> <TD><xsl:value-of select="Last"/></TD> </TR> </xsl:template> </xsl:stylesheet>

XSL Templates - XSL can define a template to specify the style for displaying each XML element. In the Employees.xsl file, templates are defined for all elements except <First> and <Last>.

• <xsl:template match="/"> - The root template, applied automatically when XSL loaded.
• <xsl:template match="Employees"> - Defines the template for <Employees> element nodes in the tree.
• <xsl:apply-templates/> - Applies the templates to all immediate children nodes. 
  • Applying templates at the root node (i.e. "/") applies the child template of the root node (i.e. match="Employees").
  • Applying templates at the Employees node applies the child template of the Employees node (i.e. match="Employee").
  • Applying templates at the Employee node would apply the child templates, but in this case there are no templates defined for First and Last.

The effect of apply-templates is to visit the tree nodes in depth-first order, although the results are not easily apparent in the above example. However, for the Family tree at right, the order is more obviously depth-first. 

The order of depth-first visits to the 14 nodes would be:

1. Me
2. Me Mother
3. Me Mother Name
4. Me Mother Mother
5. Me Mother Mother Name
6. Me Mother Father
7. Me Mother Father Name
8. Me Name
9. Me Father
10. Me Father Name
11. Me Father Mother 
12. Me Father Mother Name
13. Me Father Father 
14. Me Father Father Name

XSL Template match/select

In the tree at right, the children nodes of Employee are First and Last. 

The First template could be defined as:

<xsl:template match="First">
    <xsl:value-of select="."/>
</xsl:template>

which outputs the value of the First element (i.e. <xsl:value-of select="."/> where the "." is the current node.

From node Employee, the following walks both First and Last child nodes:

<xsl:template match="Employee">
    <xsl:apply-templates/>
</xsl:template>

To walk only the First child node templates of Employee but not Last nodes use the select="First" in the apply-templates as follows:

<xsl:template match="Employee">
    <xsl:apply-templates select="First"/> 
</xsl:template>

To walk only the Employee/First child nodes of Employees:

<xsl:template match="Employees">
    <xsl:apply-templates select="Employee/First"/> 
</xsl:template>

Variables, Special Text < > and Generating Lists

XSL is designed to combine HTML and XML data to construct Web pages dynamically. However, there is a fly-in-the-ointment: because XSL, XML and HTML all use some of the same special characters (e.g. <, >, ', ") the parser can be confused when we attempt to embed one in another.

<table border="1">
<tr>
  <td> <img src='test1.jpg'> </td>
  <td> <img src='test2.jpg'> </td>
</tr>
</table>

Suppose we want XML elements to define the names of images that generate the following:

<img src='test1.jpg'>

In XML we could define an element, we'll call IMAGEFILE1, with a value of 'test1.jpg':

<IMAGEFILE1>test1.jpg</IMAGEFILE1>

In XSL we would like to write selects for using the value of IMAGEFILE1, something as below:

   <img src='<xsl:value-of select="IMAGEFILE1" />'>

Unfortunately < and > have special meaning in XSL and HTML, the parser gets lost at the second < of: <img src='<xsl.

What is needed is a way to insert the value of the element, IMAGEFILE1, into HTML text.

The simplest approach is to avoid nesting <'s by defining a variable assigned the value of the element. For example:

<xsl:variable name="x" select="IMAGEFILE1"/>

assigns variable x the value test1.jpg (from the above XML definition). The HTML text to display the image of test1.jpg can then be generated by:

<img src='{$x}'/>
 

The rule is:

• Inside <> use: <xsl:variable name="x" select="IMAGEFILE1"/>
                        <img src='{$x}'/>
   
• Outside <> use: <xsl:value-of select="IMAGEFILE1" />

Example

The following shows XSL to produce valid HTML from XML data with inside and outside <> values.

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

 <xsl:template match="/">
   <table border="1">
     <tr>
       <td>
         <xsl:variable name="x" select="Special/n1"/>
         <img src='{$x}'/>
       </td>
       <td>

          <xsl:variable name="z" select="Special/name"/>
          
          <a href="http://www.google.com/search?q={$z}">

                  <xsl:value-of select="Special/name"/> 

          </a>

       </td>
     </tr>
   </table>
 </xsl:template>
</xsl:stylesheet>

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

   <Special>
       <n1>test1.jpg</n1> 

       <n2>test2.jpg</n2>

       <email>jborg@ius.edu</email>

       <name>John Borg</name>

   </Special>

Thanks to Ken Bell and Ryan Hughes for pointing out this method referenced at: http://www.w3.org/TR/xslt20/#attribute-value-templates

Another, harder way: Special Text < > and Generating Lists

XSL is designed to combine HTML and XML data to construct Web pages dynamically. However, there is a fly-in-the-ointment: because XSL, XML and HTML all use some of the same special characters (e.g. <, >, ', ") the parser can be confused when we attempt to embed one in another.

<table border="1">
<tr>
  <td> <img src='test1.jpg'> </td>
  <td> <img src='test2.jpg'> </td>
</tr>
</table>

Suppose we want XML elements to define the names of images that generate the following:

<img src='test1.jpg'>

In XML we could define an element, we'll call IMAGEFILE1, with a value of 'test1.jpg':

<IMAGEFILE1>test1.jpg</IMAGEFILE1>

In XSL we would like to write selects for using the value of IMAGEFILE1, something as below:

   <img src='<xsl:value-of select="IMAGEFILE1" />'>

Unfortunately < and > have special meaning in XSL and HTML, the parser gets lost at the second < of: <img src='<xsl.

What is needed is a way to write ambigous HTML text such as < and > which is ignored by XSL parsing. We might try to use the &lt; for < and &gt; for >. The XSL would be:

&lt;img src='<xsl:value-of select="IMAGEFILE1" />'&gt;

but the result would be: 

<img src='test1.jpg'>

A solution is the <xsl:text> </xsl:text> tag.

• Whatever text in between is ignored by XSL.
• Then use the &lt; and &gt; and tell XSL to convert the &lt; to < and &gt; to >.
• <xsl:text disable-output-escaping="yes">&gt;</xsl:text> converts the &gt; to >.

Whew!

The following shows XSL to produce valid HTML from XML data.

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

 <xsl:template match="/">
  <table border="1">
  <tr>
   <td>
     <xsl:text disable-output-escaping="yes">&lt;img src='</xsl:text>
     <xsl:value-of select="Special/n1"/> 
     <xsl:text disable-output-escaping="yes">'&gt;</xsl:text>
   </td>
   <td>
     <xsl:text disable-output-escaping="yes">&lt;img src='</xsl:text>
     <xsl:value-of select="Special/n2"/> 
     <xsl:text disable-output-escaping="yes">'&gt;</xsl:text>
   </td>
  </tr>
  </table>
 </xsl:template>
</xsl:stylesheet>

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

   <Special>
       <n1>test1.jpg</n1> 
       <n2>test2.jpg</n2>
       <email>jborg@ius.edu</email>
       <name>John Borg</name>
   </Special>