Ramblings

As a follow up to my first post on JQuery in a TWebBrowser, I wanted to add the JQuery plugin TableSorter to an HTML report in order to add interactive sorting. Again, I wanted the program to be fully self-contained, so I didn’t want to add any <script> tags referring to temp files or anything like that.

Download the Delphi project which injects JQuery, JQuery plugin cssRule and JQuery plugin TableSorter. I tested that it works with Delphi 2006 and Delphi 2009.

In order to use the TableSorter plugin, basically you just have to call the tablesorter() function on the table object, so after injecting JQuery and the TableSorter plugin, if you have a table with an id of “t1“:

   $("#t1").tablesorter();

This allows you to click on a header element, and it will sort the data elements, but it doesn’t show any indication of what is currently sorted.

The TableSorter plugin will add the CSS class headerSortDown or headerSortUp depending on the last sort performed, so we just need to set some CSS.

Of course, I didn’t want to have to output images as temp files either. You can refer to EXE resources from a TWebBrowser by “res://ExeName/ResourceType/Resourcename” (see http://www.bsalsa.com/protocols.html). So if you have a resource of an image named IMAGEBG in an EXE named test.exe:
resources.rc
IMAGEBG 23 “bg.gif”
you can use <img src=”res://test.exe/IMAGEBG” /> to output an image (23 is the default resource type, so it can be left out. If the resource was defined as IMAGEBG GIF “bg.gif”, you would refer to it as res://test.exe/gif/IMAGEBG).

I didn’t want this CSS in the HTML either, so I found the cssRule JQuery plugin, which allows you to set CSS rules easily from JavaScript. The only problem is that it splits strings on “:”, which caused problems with specifying a background-url of “res://ExeName/Resourcename”. I chose to replace “:” with “|”, and then I modified jquery.cssRule.js on line 137 to change “|” back to “:”, so the code splitting on “:” doesn’t have a problem.

With this, the TableSorter injected into a TWebBrowser is finished. You can view the source of the HTML document, and there is no mention of a script or CSS.