XML and XSL

• Use IE5 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 independent 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 always stale.
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 all 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 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 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.

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 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. For example the following defines XML for Employees. 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 examine this in detail later in the course.
 

<?xml version="1.0"?> 
 <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>

Employees.xml <?xml version="1.0"?> <?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> HTML and Table produced <HTML>   <BODY>    <TABLE BORDER="1">     <TR>      <TD>First</TD>       <TD>Last</TD>     </TR>     <TR>      <TD>James</TD>        <TD>Borg</TD>     </TR>     <TR>      <TD>Joyce</TD>       <TD>English</TD>     </TR>   </TABLE>  </BODY> </HTML>

Employees.xsl <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:template match="/"> <HTML> <BODY> <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> </BODY> </HTML> </xsl:template> </xsl:stylesheet>

XSL Templates Correspond to XML Elements

Employees.xml file defines a 4 level hierarchy of elements:

1. "/" or root 
2. <Employees>
3. <Employee>
4. <First> and <Last>

<?xml version="1.0"?>
<?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="/">
  <HTML>
   <BODY>
    <TABLE BORDER="1">
     <TR>
      <TD>First</TD>
      <TD>Last</TD>
     </TR>
     <xsl:apply-templates/>
    </TABLE>
   </BODY>
  </HTML>
 </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 (i.e. match="Employees").
  • Applying templates at the Employees node applies the child template (i.e. match="Employee").
  • Applying templates at the Employee node applies the child templates, in this case there are no templates defined for First and Last.

The effect is to visit the tree nodes in depth-first order, although the results are not apparent in this example. However, for the Family tree, 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>

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>

XSL can generate any HTML from XML but it takes a little effort with the < and > characters. Suppose we want to have XML elements define the names of images to generate the following:

• <img src='test1.jpg'>

The XML would define an IMAGEFILE1 element with a value of "test1.jpg". In XSL we would like to write selects for IMAGEFILE1, something as below:

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

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

What is needed is a way to insert text such as < and > which is ignored by XSL. One way might be 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'>

The solution is the <xsl:text> </xsl:text> tag which states that the between text should be ignored by XSL, and using the &lt; and &gt; and telling XSL to convert the &lt; to < and &gt; to >. The <xsl:text disable-output-escaping="yes">'&gt;</xsl:text> converts the &gt; to >. Whew!

The following shows the correct XSL to produce the above from the XML.

<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 version="1.0"?>
<?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>