perfectxml.com
 Basic Search  Advanced Search   
Topics Resources Free Library Software XML News About Us
home » Info Bank » Articles » XSLT On Client Side Saturday, 24 November 2007

XSLT Stylesheets on Client Side

This article shows how to use XSLT on the client side to transform XML into HTML. More specifically, we'll look at the following examples:
  1. Associating Stylesheets with XML documents
  2. Simplified Syntax for XSLT Stylesheet
  3. Using JScript to Apply the Transformation
  4. XML Data Islands and XSLT
  5. Visual Basic .NET Client Application and XSLT

Example 1: Associating Style Sheets with XML documents

The xml-stylesheet processing instruction can be used inside an XML document so that when the browser (such as Internet Explorer 6.0 or Internet Explorer 5.0+ with MSXML 3.0 installed in replace mode) loads the XML document, it applies the stylesheet (CSS or XSLT) specified by the value of href in the xml-stylesheet processing instruction.

See Associating Style Sheets with XML documents 1.0 W3C Recommendation for more details on this.

Source XML document (Emp.xml without the xml-stylesheet processing instruction)

<?xml version="1.0" encoding="UTF-8"?>
<nw:Employees xmlns:nw="NorthWindEmps">
	<nw:Emp nw:ID="1">
		<nw:LastName>Davolio</nw:LastName>
		<nw:FirstName>Nancy</nw:FirstName>
		<nw:Title>Sales Representative</nw:Title>
		<nw:EmailAlias>nancyd</nw:EmailAlias>
		<nw:HireDate>2/2/2000</nw:HireDate>
		<nw:Phone>847-555-1029</nw:Phone>
		<nw:Manager>margaret</nw:Manager>
		<nw:Department>Sales</nw:Department>
	</nw:Emp>

	<nw:Emp nw:ID="2">
		<nw:LastName>Fuller</nw:LastName>
		<nw:FirstName>Andrew</nw:FirstName>
		<nw:Title>Web Developer</nw:Title>
		<nw:EmailAlias>andrewf</nw:EmailAlias>
		<nw:HireDate>3/3/2002</nw:HireDate>
		<nw:Phone>847-555-2736</nw:Phone>
		<nw:Manager>margaret</nw:Manager>
		<nw:Department>eBiz</nw:Department>
	</nw:Emp>

	<nw:Emp nw:ID="3">
		<nw:LastName>Leverling</nw:LastName>
		<nw:FirstName>Janet</nw:FirstName>
		<nw:Title>CEO</nw:Title>
		<nw:EmailAlias>janet</nw:EmailAlias>
		<nw:HireDate>1/1/1998</nw:HireDate>
		<nw:Phone>847-555-2938</nw:Phone>
		<nw:Manager></nw:Manager>
		<nw:Department>SrManagement</nw:Department>
	</nw:Emp>

	<nw:Emp nw:ID="4">
		<nw:LastName>Peacock</nw:LastName>
		<nw:FirstName>Margaret</nw:FirstName>
		<nw:Title>Director</nw:Title>
		<nw:EmailAlias>margaret</nw:EmailAlias>
		<nw:HireDate>2/2/1999</nw:HireDate>
		<nw:Phone>847-555-1212</nw:Phone>
		<nw:Manager>janet</nw:Manager>
		<nw:Department>SrManagement</nw:Department>
	</nw:Emp>

	<nw:Emp nw:ID="5">
		<nw:LastName>Buchanan</nw:LastName>
		<nw:FirstName>Steven</nw:FirstName>
		<nw:Title>Sales Representative</nw:Title>
		<nw:EmailAlias>stevenb</nw:EmailAlias>
		<nw:HireDate>7/7/2002</nw:HireDate>
		<nw:Phone>847-555-8431</nw:Phone>
		<nw:Manager>margaret</nw:Manager>
		<nw:Department>Sales</nw:Department>
	</nw:Emp>
</nw:Employees>
	


XSLT Stylesheet (Emp.xsl)

<xslt:transform version="1.0"
  xmlns:xslt="http://www.w3.org/1999/XSL/Transform"
  xmlns:nw="NorthWindEmps"
  exclude-result-prefixes="nw"
>

  <xslt:output method="html" indent="no"  />
  <xslt:template match="/">
  <html>
    <head>
      <title>Northwind Employees</title>
      <style>
        BODY, A, LI, TD  {
          font-family: 'Verdana', 'Arial', sans-serif; 
          font-size: 9pt; 
          color : black;
        }
      </style>
    </head>
    <body>
      <div align="center">
      <h2>Northwind Employees</h2>
      <table width="99%" bgcolor="#EEEEEE" cellpadding="3" cellspacing="1" border="0">
        <tr>
          <td><b>Employee</b></td>
          <td><b>Name</b></td>
          <td><b>Email</b></td>
          <td><b>Title</b></td>
          <td><b>Department</b></td>
          <td><b>Phone</b></td>
          <td><b>Date of Joining</b></td>
        </tr>
        <xslt:for-each select="nw:Employees/nw:Emp">
          <xslt:variable name="bgColor">
            <xslt:choose>
              <xslt:when test="(position() mod 2)=0">#CCCCCC</xslt:when>
              <xslt:otherwise>#FFFFFF</xslt:otherwise>
            </xslt:choose>
          </xslt:variable>
          <xslt:variable name="FullName">
            <xslt:value-of select="nw:FirstName" /><xslt:text> </xslt:text>
            <xslt:value-of select="nw:LastName"/>
          </xslt:variable>
          <tr bgcolor="{$bgColor}">
            <td><img src="/Tmp/EMPID{@nw:ID}.JPG" border="0" alt="{$FullName}" /></td>
            <td><xslt:value-of select="$FullName" /></td>
            <td><a href="mailto:{nw:EmailAlias}"><xslt:value-of select="nw:EmailAlias" /></a></td>
            <td><xslt:value-of select="nw:Title" /></td>
            <td><xslt:value-of select="nw:Department" /></td>
            <td><xslt:value-of select="nw:Phone" /></td>
            <td><xslt:value-of select="nw:HireDate" /></td>
          </tr>
        </xslt:for-each>
      </table>
      </div>
    </body>
  </html>
  </xslt:template>
</xslt:transform>
	

Add the following processing instruction line in the source XML document, immediately after the XML declaration line:
	<?xml-stylesheet type="text/xsl" href="Emp.xsl"?>
And here is the output: EmpWithXSL.xml


(You'll need Internet Explorer 6.0 or Internet Explorer 5.0+ with MSXML 3.0 installed in replace mode to view the above transformed output).

Things to note in the above XSLT stylesheet:
  • Using Namespaces with XSLT
  • Using CSS styles with XSLT
  • Looping using xslt:for-each
  • Conditionally assigning the value to the variable
  • Using Attribute Value Templates
Source files for example 1:
  • Emp.xml (source XML file without the xml-stylesheet processing instruction)
  • Emp.xsl (the stylesheet)
  • EmpWithXSL.xml (source XML file with the xml-stylesheet processing instruction)

Top

Example 2: Simplified Syntax for XSLT Stylesheet

As the above XSLT stylesheet contains only one template rule, the xslt:template element can be omitted and the simplified stylesheet can be written as below. This stylesheet then can be associated with the source XML document using the xml-stylesheet processing instruction as described in the previous example.

We'll use the same source XML document (Emp.xml).


Here is the XSLT stylesheet that uses the simplified syntax (EmpSimplified.xsl)
<html xslt:version="1.0"
	xmlns:xslt="http://www.w3.org/1999/XSL/Transform"
	xmlns:nw="NorthWindEmps"
	exclude-result-prefixes="nw"
>
<head>
<title>Northwind Employees</title>
<style>
	BODY, A, LI, TD  {
		font-family: 'Verdana', 'Arial', sans-serif; 
		font-size: 9pt; 
		color : black;
	}
</style>
</head>
<body>
<div align="center">
<h2>Northwind Employees</h2>
<table width="99%" bgcolor="#EEEEEE" cellpadding="3" cellspacing="1" border="0">
	<tr>
		<td><b>Employee</b></td>
		<td><b>Name</b></td>
		<td><b>Email</b></td>
		<td><b>Title</b></td>
		<td><b>Department</b></td>
		<td><b>Phone</b></td>
		<td><b>Date of Joining</b></td>
	</tr>
	<xslt:for-each select="nw:Employees/nw:Emp">
		<xslt:variable name="bgColor">
			<xslt:choose>
				<xslt:when test="(position() mod 2)=0">#CCCCCC</xslt:when>
				<xslt:otherwise>#FFFFFF</xslt:otherwise>
			</xslt:choose>
		</xslt:variable>
		<xslt:variable name="FullName">
			<xslt:value-of select="nw:FirstName" /><xslt:text> </xslt:text>
			<xslt:value-of select="nw:LastName"/>
		</xslt:variable>
		<tr bgcolor="{$bgColor}">
			<td><img src="/Tmp/EMPID{@nw:ID}.JPG" border="0" alt="{$FullName}" /></td>
			<td><xslt:value-of select="$FullName" /></td>
			<td><a href="mailto:{nw:EmailAlias}"><xslt:value-of select="nw:EmailAlias" /></a></td>
			<td><xslt:value-of select="nw:Title" /></td>
			<td><xslt:value-of select="nw:Department" /></td>
			<td><xslt:value-of select="nw:Phone" /></td>
			<td><xslt:value-of select="nw:HireDate" /></td>
		</tr>
	</xslt:for-each>
</table>
</div>
</body>
</html>
	



Add the following processing instruction line in the source XML document, immediately after the XML declaration line:
	<?xml-stylesheet type="text/xsl" href="EmpSimplified.xsl"?>
The result of the transformation looks exactly same as in the previous example, as the stylesheet is exactly same except that it uses the simplified syntax.

Click here to view EmpWithXSL2.xml.


Source files for example 2:
  • Emp.xml (source XML file without the xml-stylesheet processing instruction)
  • EmpSimplified.xsl (the simplified syntax stylesheet)
  • EmpWithXSL2.xml (source XML file with the xml-stylesheet processing instruction)

Top

Example 3: Using JScript to Apply the Transformation

In this example, we'll see how to write JScript code inside a HTML page to load XML and XSLT document and apply the transformation.

The latest Internet Explorer version 6.0 ships and uses MSXML 3.0 SP2, which is used when the XSLT stylesheets are applied on the XML document (as in previous two examples). However, if you know that MSXML 4.0 will be available on the client machines, and you would like to use that version, the only option available today is to write the client side script code that creates MSXML 4.0 objects to load the XML document and XSLT stylesheet and apply the transformation, as to date, no version of Internet Explorer ships and uses MSXML 4.0.

Once again, we'll use the same source XML document (Emp.xml).


The goal is to create a HTML page that first shows list of all the employees, and show the employee details when clicked on an employee's name.

Here is the output we want:


The sample HTML page uses two stylesheets: First one to create a list of employees (when the HTML page is loaded), and second to show the employee details when clicked on any employee's name. Here is the first XSLT stylesheet to create a list of employees: (EmpForHTML1.xsl).

<?xml version="1.0"?> 
<xslt:transform version="1.0"
  xmlns:xslt="http://www.w3.org/1999/XSL/Transform" 
  xmlns:nw="NorthWindEmps"
  exclude-result-prefixes="nw"
>  
  <xslt:output method="html" />
  <xslt:template match="/">
    <xslt:for-each select="nw:Employees/nw:Emp">
      <xslt:sort select="nw:LastName" />
      <a>
      <xslt:attribute name="href">javascript:showEmpDetails(<xslt:value-of select="@nw:ID" />);</xslt:attribute>
        <xslt:value-of select="nw:LastName" />
        <xslt:text>  </xslt:text>
        <xslt:value-of select="nw:FirstName" /><br />
      </a>
    </xslt:for-each>
  </xslt:template>
</xslt:transform>
	
The above stylesheet is used in the BODY onLoad event handler in the HTML page (discussed later). The transformation simply creates an anchor tag element for each /Employees/Emp element in the source XML document. The href attribute on this anchor element is assigned to call a JScript function called showEmpDetails, and the value of ID attribute from the source XML document element is passed as the parameter to this JScript function. The showEmpDetails JScript function is present in HTML file, which we'll study soon.


Let's now look at the second XSLT stylesheet file (EmpForHTML2.xsl) that is used when the employee name is clicked to see employee's details.

<?xml version="1.0"?> 
<xslt:transform version="1.0"
 xmlns:xslt="http://www.w3.org/1999/XSL/Transform" 
 xmlns:nw="NorthWindEmps"
 exclude-result-prefixes="nw"
> 
 <xslt:output method="html" />
 <xslt:param name="empID" />
 <xslt:template match="/">
  <xslt:for-each select="/nw:Employees/nw:Emp[@nw:ID=$empID]">
   <table border="0" width="100%">
    <tr><td  valign="top">
     <table width="100%" cellpading="2" cellspacing="0" bgcolor="#FFFFFF">
     <tr><td width="170"><b>Title:</b></td><td> <xslt:value-of select="nw:Title" /></td></tr>
     <tr><td width="170"><b>Email Alias:</b></td><td> <xslt:value-of select="nw:EmailAlias" /></td></tr>
     <tr><td width="170"><b>Date of Joining:</b></td><td> <xslt:value-of select="nw:HireDate" /></td></tr>
     <tr><td width="170"><b>Phone:</b></td><td> <xslt:value-of select="nw:Phone" /></td></tr>
     <tr><td width="170"><b>Manager:</b></td><td> <xslt:value-of select="nw:Manager" /></td></tr>
     <tr><td width="170"><b>Department:</b></td><td> <xslt:value-of select="nw:Department" /></td></tr>
     </table>
    </td>
    <td  valign="top">
     <img src="/tmp/EMPID{$empID}.jpg"/>
    </td>  
    </tr>
   </table>
  </xslt:for-each>
 </xslt:template>
</xslt:transform>
	
The above stylesheet accepts a parameter called empID, and for each elements (hopefully just one) where /Employees/Emp[@ID] attribute value matches the value of the empID stylesheet parameter, the stylesheet prints the values of other child elements such as Title, Phone, and so on.


Finally, let's look at the HTML page that uses MSXML inside a client-side JScript code to apply the transformation.

<html>
 <head>
  <title>Northwind Employees</title>
  <style>
   BODY, A, LI, TD  {
    font-family: 'Verdana', 'Arial', sans-serif; 
    font-size: 9pt; 
    color : black;
   }
  </style>
  <script language="JScript">
   <!--
   //Applies the XSLT transformation and returns a string
   //containing transformed text
   function applyXSLT(xmlFileName, xslFileName)
   {
    var objXML;
    var objXSLT;
   
    objXML = new ActiveXObject("MSXML2.DOMDocument.4.0");
    objXML.async = false;
    objXML.validateOnParse = false;
   
    objXSLT = new ActiveXObject("MSXML2.DOMDocument.4.0");
    objXSLT.async = false;
    objXSLT.validateOnParse = false;

    try
    { 
     //Load XML and XSLT documents
     objXML.load(xmlFileName);
     objXSLT.load(xslFileName);
     
     return objXML.transformNode(objXSLT)
     
    }
    catch(e)
    {
     //error handling
    }
   }

   //Applies the XSLT transformation and returns a string
   //containing transformed text
   //Allows passing a single parameter to the stylesheet
   function applyXSLTWithParam(xmlFileName, xslFileName, paramName, paramValue)
   {
    var objXML;
    var objXSLT;
    var objxsltTemplate;
    var objxsltProcessor;
   
    try
    { 
     objXML = new ActiveXObject("MSXML2.DOMDocument.4.0");
     objXML.async = false;
     objXML.validateOnParse = false;
   
     objXSLT = new ActiveXObject("MSXML2.FreeThreadedDOMDocument.4.0");
     objXSLT.async = false;
     objXSLT.validateOnParse = false;
    
     //Load XML and XSLT documents
     objXML.load(xmlFileName);
     objXSLT.load(xslFileName);
     
     objxsltTemplate = new ActiveXObject("MSXML2.XSLTemplate.4.0");
     objxsltTemplate.stylesheet = objXSLT;
     objxsltProcessor = objxsltTemplate.createProcessor();
     objxsltProcessor.input = objXML;
     objxsltProcessor.addParameter(paramName, paramValue);
    
     objxsltProcessor.transform();
    
     return objxsltProcessor.output;
    }
    catch(e)
    {
     //error handling
    }
   }
   
   function GetEmpList()
   {
    empList.innerHTML = applyXSLT("Emp.xml", "EmpForHTML1.xsl");
   }
   
   function showEmpDetails(empID)
   {
    empDetails.innerHTML = applyXSLTWithParam("Emp.xml", "EmpForHTML2.xsl", "empID", empID);
   }
   
   //-->
  </script>
 </head>
 <body onLoad="GetEmpList();">
  <div align="center">
  <h2>Northwind Employees</h2>
  </div>
  <b>Click on the employee name to view details:</b><br>
  <table width="100%" cellpadding="2" cellspacing="1" bgcolor="#EEEEEE" border="0">
   <tr>
    <td width="190"  valign="top" >
    
    <div id="empList" />
    </td>
    <td valign="top" bgcolor="#FFFFFF">
    <div id="empDetails" />
    </td>
   </tr>
  </table>
  <br /><br /> <hr /><br /><br /> 
  <a href="emp.xml" target="_blank">Source XML file</a>
  <br /><br />
  <a href="empForHTML1.xsl" target="_blank">empList XSLT stylesheet</a>
  <br /><br />
  <a href="empForHTML2.xsl" target="_blank">empDetails XSLT stylesheet</a>
 </body>
</html>
Source files for example 3:
  • Emp.xml (source XML file)
  • EmpForHTML1.xsl (stylesheet used to create employee list)
  • EmpForHTML2.xsl (stylesheet used to get employee details based on empID parameter)
  • EmpJScript.html (HTML page that uses MSXML 4.0 inside a JScript code to apply transformation)
  • EmpJScript30.html (HTML page that uses MSXML 3.0 inside a JScript code to apply transformation)
As a tiny exercise, update EmpForHTML2.xsl XSLT file to print the name of the employee in the employee details view and also make the email alias detail value is a mailto: link.

Top


Example 4: XML Data Islands and XSLT

In the above example, the client-side JScript code loaded the XML document and XSLT stylesheet file from the server. An alternative to this is to embed the XML data and/or XSLT stylesheet inside the HTML page as XML Data Island. For more details on XML Data Islands see: http://www.perfectxml.com/msxmlIslands.asp.

The following HTML page (xsltIsland.htm) contains XML data and XSLT stylesheet as part of the HTML page (as data island) and uses JScript code to load and apply the transformation.

<html>
 <head>
  <title>Northwind Employees</title>
  <style>
   BODY, A, LI, TD  {
    font-family: 'Verdana', 'Arial', sans-serif; 
    font-size: 9pt; 
    color : black;
   }
  </style>
  <script language="JScript">
   <!--
   //Applies the XSLT transformation and returns a string
   //containing transformed text
   function applyXSLT(objXML, objXSLT)
   {
    try
    { 
     return objXML.transformNode(objXSLT)
    }
    catch(e)
    {
     //error handling
    }
   }

   //Applies the XSLT transformation and returns a string
   //containing transformed text
   //Allows passing a single parameter to the stylesheet
   function applyXSLTWithParam(objXML, objXSLT, paramName, paramValue)
   {
    var objxsltTemplate;
    var objxsltProcessor;
    var objXSLT2; //FreeThreadedDOMDocument
   
    try
    { 
     objXSLT2 = new ActiveXObject("MSXML2.FreeThreadedDOMDocument.3.0");
     objXSLT2.async = false;
     objXSLT2.validateOnParse = false;
     objXSLT2.loadXML(objXSLT.xml);
     objxsltTemplate = new ActiveXObject("MSXML2.XSLTemplate.3.0");
     objxsltTemplate.stylesheet = objXSLT2;
     objxsltProcessor = objxsltTemplate.createProcessor();
     objxsltProcessor.input = objXML;
     objxsltProcessor.addParameter(paramName, paramValue);
    
     objxsltProcessor.transform();
    
     return objxsltProcessor.output;
    }
    catch(e)
    {
     //error handling
    }
   }
   
   function GetEmpList()
   {
    empList.innerHTML = applyXSLT(xmlDataDoc.XMLDocument, empListStylesheet.XMLDocument);
   }
   
   function showEmpDetails(empID)
   {
    empDetails.innerHTML = applyXSLTWithParam(xmlDataDoc.XMLDocument, empDetailsStylesheet.XMLDocument, "empID", empID);
   }
   
   //-->
  </script>
 </head>
 <body onLoad="GetEmpList();">
 <XML ID="xmlDataDoc">
<nw:Employees xmlns:nw="NorthWindEmps">
 <nw:Emp nw:ID="1">
  <nw:LastName>Davolio</nw:LastName>
  <nw:FirstName>Nancy</nw:FirstName>
  <nw:Title>Sales Representative</nw:Title>
  <nw:EmailAlias>nancyd</nw:EmailAlias>
  <nw:HireDate>2/2/2000</nw:HireDate>
  <nw:Phone>847-555-1029</nw:Phone>
  <nw:Manager>margaret</nw:Manager>
  <nw:Department>Sales</nw:Department>
 </nw:Emp>

 <nw:Emp nw:ID="2">
  <nw:LastName>Fuller</nw:LastName>
  <nw:FirstName>Andrew</nw:FirstName>
  <nw:Title>Web Developer</nw:Title>
  <nw:EmailAlias>andrewf</nw:EmailAlias>
  <nw:HireDate>3/3/2002</nw:HireDate>
  <nw:Phone>847-555-2736</nw:Phone>
  <nw:Manager>margaret</nw:Manager>
  <nw:Department>eBiz</nw:Department>
 </nw:Emp>

 <nw:Emp nw:ID="3">
  <nw:LastName>Leverling</nw:LastName>
  <nw:FirstName>Janet</nw:FirstName>
  <nw:Title>CEO</nw:Title>
  <nw:EmailAlias>janet</nw:EmailAlias>
  <nw:HireDate>1/1/1998</nw:HireDate>
  <nw:Phone>847-555-2938</nw:Phone>
  <nw:Manager></nw:Manager>
  <nw:Department>SrManagement</nw:Department>
 </nw:Emp>

 <nw:Emp nw:ID="4">
  <nw:LastName>Peacock</nw:LastName>
  <nw:FirstName>Margaret</nw:FirstName>
  <nw:Title>Director</nw:Title>
  <nw:EmailAlias>margaret</nw:EmailAlias>
  <nw:HireDate>2/2/1999</nw:HireDate>
  <nw:Phone>847-555-1212</nw:Phone>
  <nw:Manager>janet</nw:Manager>
  <nw:Department>SrManagement</nw:Department>
 </nw:Emp>

 <nw:Emp nw:ID="5">
  <nw:LastName>Buchanan</nw:LastName>
  <nw:FirstName>Steven</nw:FirstName>
  <nw:Title>Sales Representative</nw:Title>
  <nw:EmailAlias>stevenb</nw:EmailAlias>
  <nw:HireDate>7/7/2002</nw:HireDate>
  <nw:Phone>847-555-8431</nw:Phone>
  <nw:Manager>margaret</nw:Manager>
  <nw:Department>Sales</nw:Department>
 </nw:Emp>
</nw:Employees>
 </XML>
 
 <XML ID="empListStylesheet">
 <xslt:transform version="1.0"
 xmlns:xslt="http://www.w3.org/1999/XSL/Transform" 
 xmlns:nw="NorthWindEmps"
 exclude-result-prefixes="nw"
> 
 <xslt:output method="html" />
 <xslt:template match="/">
  <xslt:for-each select="nw:Employees/nw:Emp">
   <xslt:sort select="nw:LastName" />
   <a>
    <xslt:attribute name="href">javascript:showEmpDetails(<xslt:value-of select="@nw:ID" />);</xslt:attribute>
    <xslt:value-of select="nw:LastName" />
    <xslt:text>  </xslt:text>
    <xslt:value-of select="nw:FirstName" /><br />
   </a>
  </xslt:for-each>
 </xslt:template>
</xslt:transform>
 </XML>
 
 <XML ID="empDetailsStylesheet">
<?xml version="1.0"?> 
<xslt:transform version="1.0"
 xmlns:xslt="http://www.w3.org/1999/XSL/Transform" 
 xmlns:nw="NorthWindEmps"
 exclude-result-prefixes="nw"
> 
 <xslt:output method="html" />
 <xslt:param name="empID" />
 <xslt:template match="/">
  <xslt:for-each select="/nw:Employees/nw:Emp[@nw:ID=$empID]">
   <table border="0" width="100%">
    <tr><td  valign="top">
     <table width="100%" cellpading="2" cellspacing="0" bgcolor="#FFFFFF">
     <tr><td width="170"><b>Title:</b></td><td> <xslt:value-of select="nw:Title" /></td></tr>
     <tr><td width="170"><b>Email Alias:</b></td><td> <xslt:value-of select="nw:EmailAlias" /></td></tr>
     <tr><td width="170"><b>Date of Joining:</b></td><td> <xslt:value-of select="nw:HireDate" /></td></tr>
     <tr><td width="170"><b>Phone:</b></td><td> <xslt:value-of select="nw:Phone" /></td></tr>
     <tr><td width="170"><b>Manager:</b></td><td> <xslt:value-of select="nw:Manager" /></td></tr>
     <tr><td width="170"><b>Department:</b></td><td> <xslt:value-of select="nw:Department" /></td></tr>
     </table>
    </td>
    <td  valign="top">
     <img src="/tmp/EMPID{$empID}.jpg"/>
    </td>  
    </tr>
   </table>
  </xslt:for-each>
 </xslt:template>
</xslt:transform>
 </XML>
  <div align="center">
  <h2>Northwind Employees</h2>
  </div>
  <b>Click on the employee name to view details:</b><br>
  <table width="100%" cellpadding="2" cellspacing="1" bgcolor="#EEEEEE" border="0">
   <tr>
    <td width="190"  valign="top" >
    
    <div id="empList" />
    </td>
    <td valign="top" bgcolor="#FFFFFF">
    <div id="empDetails" />
    </td>
   </tr>
  </table>
 </body>
</html>

The above HTML page is similar to the one in previous example, except this HTML page embeds the XML data and stylesheet inside the HTML page (as data island). The XML Data Islands are assigned an ID, which can be used to get the DOMDocument object (by using XMLDocument property) for the contained XML data.

Source files for example 4:
  • xsltIsland.htm (HTML page that contains XML data and XSLT stylesheet as XML Data Island, uses MSXML 3.0 inside a JScript code to apply the transformation)

Top


Example 5: Visual Basic .NET Client Application and XSLT

perfectxml.com site already contains a Visual Basic and Visual C++ sample on using MSXML to apply the XSLT transformation. So we thought of providing a .NET example this time.

The example shown here is a Visual Basic .NET Windows Application that uses the classes from the System.Xml.Xsl and System.Xml namespaces to load the XML and XSLT files and apply the transformation.



The sample application allows browsing to XML and XSLT file and shows the results string in a text box control.


Imports System.Xml
Imports System.Xml.XPath
Imports System.Xml.Xsl
Imports System.IO

Public Class frmTestXSLT
  Inherits System.Windows.Forms.Form

'.....

  Private Sub btnApplyTransformation_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles btnApplyTransformation.Click
    Try
      'Load the XML document
      Dim xmlDocObj As New XmlDocument()
      xmlDocObj.Load(txtXMLFile.Text)

      'Load the XSLT file
      Dim xsltTransformObj As New XslTransform()
      xsltTransformObj.Load(txtXSLTFile.Text)

      'Apply the transformation
      Dim resultStringWrtr As New StringWriter()
      Dim resultWriter As New XmlTextWriter(resultStringWrtr)

      xsltTransformObj.Transform(xmlDocObj, Nothing, resultWriter)

      txtResults.Text = resultStringWrtr.ToString()

    Catch e1 As Exception
      txtResults.Text = "Error: " & e1.Message
    Finally
    End Try

  End Sub

  Private Sub btnBrowseXMLFile_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles btnBrowseXMLFile.Click
    OpenFileDialog1.Filter = "XML files (*.xml)|*.xml|All files (*.*)|*.*"
    OpenFileDialog1.ShowDialog()
    txtXMLFile.Text = OpenFileDialog1.FileName
  End Sub

  Private Sub btnBrowseXSLTFile_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles btnBrowseXSLTFile.Click
    OpenFileDialog1.Filter = "XSL files (*.xsl)|*.xsl|XSLT files (*.xslt)|*.xslt|All files (*.*)|*.*"
    OpenFileDialog1.ShowDialog()
    txtXSLTFile.Text = OpenFileDialog1.FileName
  End Sub

End Class
Click here to download a ZIP file (17 KB) that contains the above sample application, and all the XML/XSLT/HTML files discussed in this article.

Summary

Applying the XSLT stylesheets on the client-side (instead of on the server), helps reduce the load on the server, and also offers other benefits such as different stylesheets can be applied to the same XML data on the client-side, without making a round-trip to the server, and still show the data in a different way. In this article, we looked at five examples, of five different ways to apply XSLT stylesheets on the XML documents. Go ahead, and try out the examples given in this article!



  Contact Us | E-mail Us | Site Guide | About PerfectXML | Advertise ©2004 perfectxml.com. All rights reserved. | Privacy