Saturday, July 9, 2011

Tranforming XML into HTML using XSLT

Purpose : To transform XML using XSLT  to render HTML to the browser.

Different ways of Transformation :
We can transform any given .xml file in different ways.  Let us discuss all possible ways and their pros and cons.
Before that we need a sample .xml file and an .xsl/.xslt file that is going to transform the .xml file.

Sample XML file

results.xml


Sample XSLT file

Results.xslt

Method 1: Adding xslt reference to xml
The first and simplest method to transform is to link xslt and xml document by adding xsl style sheet reference to your xml document.

Linking xml and xslt
Now if you browse for results.xml in any XSLT compliant browser it will nicely transform your XML into XHTML.

Result:




Even if this works fine, it is not always desirable to include a style sheet reference in an XML file (because it will not work in a non XSLT aware browser.)

A more versatile solution would be to use a JavaScript to do the transformation.

Method 2: Transforming on the client using Javascript

By using a JavaScript, we can:
  • do browser-specific testing
  • use different style sheets according to browser and user needs
That is the beauty of XSLT! One of the design goals for XSLT was to make it possible to transform data from one format to another, supporting different browsers and different user needs.

XSLT transformation on the client side is bound to be a major part of the browsers work tasks in the future, as we will see a growth in the specialized browser market (Braille, aural browsers, Web printers, handheld devices, etc.)


  • Load XML and XSL files using XMLHttpRequest
  • Test what kind of browser the user has
  • If the user has a browser supporting the ActiveX object:
    • Use the transformNode() method to apply the XSL style sheet to the xml document
    • Set the body of the current document (div id="results") to contain the styled xml document
  • If the user has a browser that does not support the ActiveX object:
    • Create a new XSLTProcessor object and import the XSL file to it
    • Use the transformToFragment() method to apply the XSL style sheet to the xml document
    • Set the body of the current document (div id="results") to contain the styled xml document
script for loading xml and xsl and transform

Add the above script to the <head></head> tag of your .html/.aspx file.  So that we can call these methods from within our html document. Here I am calling the displayResult() javascript method from OnLoad event of the body tag like below.



in the above script


The loadXMLDoc() Function
The loadXMLDoc() function is used to load the XML and XSL files.
It checks what kind of browser the user has and loads the file.

The displayResult() Function
This function is used to display the XML file styled by the XSL file.

Result:


Observations:
We need not have a reference to xsl file in our xml.  This indicates that an XML file could be transformed using many different XSL style sheets.

Note: While loading an xsl file using XMLHttpRequest object's .Open() method the files extension should be .xsl only , if it is .xslt it will not load the file.


In the above method we created a JavaScript that used an XML parser to do the transformation. The JavaScript solution will not work in a browser that doesn't have an XML parser.

To make XML data available to all kind of browsers, we must transform the XML document on the SERVER and send it as XHTML back to the browser.

That's another beauty of XSLT. One of the design goals for XSLT was to make it possible to transform data from one format to another on a server, returning readable data to all kinds of browsers.

Method3: Transforming on the Server
I am using ASP.Net to transform on the server.  We have declarative and programatic ways to achieve this using asp.net.


Declarative way:
ASP.NET provides a ready made server control which we can just drag and drop on to the .aspx file, wherever we want to render the transformed xml to the browser, and set some properties and we are done. The rest of the things will be taken care by Asp.Net framework.

The properties we need to set are DocumentSource and TransformSource. By observing the above line we can understand that DocumentSource is our .xml file path and TransfromSource is .xsl file path.

I am not showing here the result window again as this also produce the same result in the browser window.

Programatic way:


Explaining the above Code

to be continued...

1 comment:

  1. Nice article...Waiting for the next part...The way you are explaining the things is very good. :-)
    Please remove word verification in blogger settings...

    ReplyDelete