Creating A Dynamic XSLT Transformation

Step by Step

  1. Create or use an existing .xml file.
    1. You can reference your .xsd file (schema) if you've created one, in the opening element tag of the root element <document of your xml page as shown in the following code example.
    2. DO NOT reference your .xsl file in your .xml page. This will be done by the CrossBrowser.js file in your .xhtml loader page. 
      1. <?xml version="1.0" encoding="utf-8"?>
      2.     <document xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      3.         xsi:noNamespaceSchemaLocation="Example.xsd">
  2. Create or use an existing .xsl (.xslt) file.
    1. Make sure you set your xsl:output method="...." to xml as shown in the following code example (this is a Mozilla/Gecko browser requirement).
    2. Also, if you use an external .css file(master.css), include the relative path to it in the <head></head> section in the following code example. 
      1. <?xml version="1.0" encoding="utf-8"?>
      2.     <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      3.     <xsl:output method="xml"/>
      4.         <xsl:template match="/">
      5.             <html>
      6.             <head>
      7.                 <title>Example.xsl</title>
      8.                 <link> href="master.css" media="screen" rel="stylesheet" type="text/css"/>
      9.                 <meta>content="text/html; charset=UTF-8" http-equiv="Content-Type" />
      10.             </head>
  3. The Sarissa ECMAscript Library v.0.9.6.1 folder has been provided for you in the main folder.
    1. Create a scripts folder in your Project folder and copy the sarissa.js file located in the Sarissa ECMAscript Library to it.
  4. Create the CrossBrowser.js file (the following code example) and put it in the same scripts folder with the sarissa.js file.
    1. Add your xsl and xml file names to the var xslStylesheet = "........"; and the var xmlDatafile = "..........."; as shown in the following code example. 
      1. var xslStylesheet = "Example.xsl";
      2. var xmlDatafile = "Example.xml";
      3.  
      4. var xslDoc = Sarissa.getDomDocument();
      5.     xslDoc.async = false;
      6.     xslDoc.load(xslStylesheet);
      7.  
      8. var xmlDoc = Sarissa.getDomDocument();
      9.     xmlDoc.async = false;
      10.     xmlDoc.load(xmlDatafile);
      11.  
      12. var processor = new XSLTProcessor();
      13.     processor.importStylesheet(xslDoc);
      14.  
      15. var resultDocument = processor.transformToDocument(xmlDoc);
      16.     document.write(Sarissa.serialize(resultDocument));
  5. Attach the external Javascipts to the (X)HTML Loader web page.
    1. You can change the <title> of the web page and the <link> to your own external .css file.
    2. In the <head></head> section, create a relative path to the external sarissa.js script with the <script></script> element..
    3. In the <body></body> section, create a relative path to the external CrossBrowser.js script with the <script></script> element.
  6. Save all files and then double-click on your Example.htm file to open it.
    1. It will open and render respectively in Microsoft Internet Explorer, Firefox, Netscape and Mozilla browsers.

top