Compare two XSLT transformation

In my previous blog I showed two methods for XSLT transformation. See for details Previous blog.
Today I would like to compare run time of  two methods.
Therefore  I created big xml with the same fields as I showed in my previous blog
and XSL stays the same. I created method that uses "transformnode" approach and
method that uses "processor" approach.

Afterwords I created a method that will run 5  transformation at once and create a table
with the results. I colored in red the method which run faster.

As you see the process template is the quicker one. Please note that I did not measure CPU

execution time only time that took to do XML transformation.

You can play with the source and check yourself. All files can be downloaded from Download

Two XSLT transformation in javascript

Introduction.

In order to execute XSLT transformation in IE two different javascript methods can be done.
In this article I would like explain how to use each of the javascript method.

Setup

So for a start I created XML and XSL that I will show transformation.

XML Example
<?xml version="1.0"?>
<products>
<product href="http://www.playfield.com/text">
      <name>Playfield Text</name>
      <price currency="usd">299</price>
      <description>Faster than the competition.</description>
      <version>1.0</version>
   </product>
</product>


XSLT Example
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="no"/>
   <xsl:template match="/products">
        <table>
          <tr class="header">
             <td>Name</td>
             <td>Price</td>
             <td>Description</td>
          </tr>
          <xsl:apply-templates/>
        </table>
</xsl:template>
<xsl:template match="product[position() mod 2 = 1]">
   <tr class="odd">
      <td><xsl:value-of select="name"/></td>
      <td><xsl:value-of select="price"/></td>
      <td><xsl:value-of select="description"/></td>
   </tr>
</xsl:template>
<xsl:template match="product">
   <tr class="even">
      <td><xsl:value-of select="name"/></td>
      <td><xsl:value-of select="price"/></td>
      <td><xsl:value-of select="description"/></td>
   </tr>
</xsl:template>
</xsl:stylesheet>

The first method.

The first method that can trasform XSLT is to use "transformNode"
method of Microsoft.XMLDOM object.

Please see below the code

   var xml = new ActiveXObject("Microsoft.XMLDOM");
   var xslt = new ActiveXObject("Microsoft.XMLDOM");


   xml.load("data.xml");
   xslt.load("transformxsl.xml");
   var output = xml.transformNode(xslt);

The code is pretty simple. Need to define a two XMLDom object and invoke transform method.

The second method.

The second method is to use with XSLTemplate.

    var xml = new ActiveXObject("Microsoft.XMLDOM");
    var xslt = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
   
    xml.load("data.xml");
    xslt.load("transformxsl.xml");
   
   var processor   = new ActiveXObject("Msxml2.XSLTemplate");
   processor.stylesheet = xslt;

   var objXSLTProc = processor.createProcessor();
   objXSLTProc.input = xml;
   objXSLTProc.transform();
   var output  = objXSLTProc.output;

The object is to load XSLT need to be created from FreeThreadedDOMDocument.
The transformation is done by object created from Msxml2.XSLTemplate.
Afterwords need to invoke transform method.

Summary

We looked in two different approaches of XSLT transformatiion.
On my next article, we will check which is the best solution.
Please follow my next article to see the result.

Remove mask from the Grid (ExtJS)

I created a grid using ExtJs framework. When the grid was loading , the 'loading...'  text was displayed in
the screen. The text was displayed by Extjs framework , and I needed to remove it. In order to do it,
I debuged ExtJs framework and found out that the message was created by the
LoadMask class. In order to remove the loading message need to define in the class config setup of the grid,  viewConfig section with the 'loadMask:false' option.
viewConfig: {
  loadMask:
 false
}

Extjs S.gif

I staretd to use Extjs library. It's really a great library with the strong features.
(www.sencha.com/) .  I wrote first page , opened a fiddler to see the data between client and server.
I found out that the Extjs is downloading image s.gif from the external server. I searched in the
Net about this issue and found that need to download this image from sencha site to local server.
The file can be downloaded  from  "http://extjs.com/s.gif". And then need to include at the beginning of the code 
Ext.BLANK_IMAGE_URL='include/images/blank.gif'; This code will remove unwanted request to external server.

 

Tooltip Class. Prototype

One of my projects was developed on prototype java-script framework. I needed to write a functionality to show tool tip . I started to look in the prototype framework if they already have it.
Unfortunately I did not find any component . I started to goggle it  and did not found anything as well.So I wrote my class that aimed to show tool tip . In constructor class receiving following parameters.

elementOb -  The parent element to show tip
tool_tip -  Tool tip message
width - Tooltip width
height - Tooltip height

Simple?

In order to setup a css class for the tool tip need to define a css style with the
.toolTip className.

To use it need to write the code below.

var toolTipMessage = "The message is showing tooltip.Please change and play with it";
var toolTip = new Tooltip($('tblToolTip'),toolTipMessage);
I wrote sample page to test it .

All the code can be downloaded from here Download


See below sample picture