Search KB Filter article types
JQT (jQuery Template Engine Extension - XSLT compatible)
By: guy
The JQT template engine is a robust jQuery template engine extension. It was created to provide powerful templating capabilities which are compatible (migratable) from XSLT. The JQT project includes runtime APIs which provide powerful capabilities and a XSLT migrator. The XSLT migrator can take XSLT files and transform them into JavaScript based on jQuery and the JQT engine.
Categories: Extensions
Tags: Architects, Developers, Visual WebGui Pipeline, JavaScript, 2. Intermediate, 3. Advanced, Customization, Optimizing Performance, jQuery, v6.4 and Later
Revision: 8
Posted: 23/Feb/2011
Updated: 27/Feb/2011
Status: Publish
Types: Article

Resources

 The following download link contains the zipped code of the JQT plug-in:

 To convert XSLT code to JQT you can use this only migration tool:

Overview

 The JQT engine was written to provide a robust templating engine which will be capable of handling large transformations of XML (and in the near future JSON) data. While XSLT is very robust technology it is not supported on all platforms (such as Android) and has problematic support in other platforms (such as Chrome). So migrating the XSLT code to jQuery provided VWG with the ability to run natively on much more platforms. 

While jQuery has a templating plug in it is less suited to deal complex algorithms. The JQT engine was created as part of the Visual WebGui's adoption of jQuery as its core engine. It replaces the previous XSLT based engine which it had been based on. So the ability to migrate from XSLT was crucial both for its core functionalities and for providing its users with a easy path to migrate their custom developments.

Because JQT was created as part of the migration the VWG framework from XSLT to jQuery its design goal was to perform at least as the XSLT engine and preferably increase the performance of the UI rendering. This goal was completely achieved in most scenarios. The result provided the VWG framework with a very significant performance boost which is critical in mobile devices and even better user experience for desktop users.

The JQT engine includes a migration engine written in C#. It can take entire projects, resx files or specific XSLT files and to migrate them to the new engine. It provides an almost no touch migration process which takes the XSLT code and generates functional equivalent JQT code. The large amount of XSLT code VWG had was migrated with very little manual work and in most cased manual work was to enhance performance.

The JQT engine provides the ability to register templates and to execute them as exists in XSLT. Templates can be registered with an XPath syntax or by name and can be applied on the target object seamlessly or called by name to provide the ability to break templates into modular parts. The JQT engine relays on a robust jQuery.sub() implementation which generates a dedicated API which supports the migration process. The jQuery.sub() is namespaced under "xpath$"  which allows developers to integrate with other jQuery plugins without collisions.

JQT syntax

 JQT provides a simple API for templating which adds the ability to register templates and to call them by name or by context. 

Here is a sample XSLT template:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
    <!-- Sample templpate -->
    <xsl:template name="tplCkNodeTest" match="ckNodeTest[@Style='Flat']">
 
        <xsl:param name="prmDescription" select="@description" />
        <xsl:param name="prmForm" select="F"/>
 
        <!-- Provide description to the test-->
        <p><xsl:value-of select="$prmDescription"/></p>
        
        <!-- Form like container-->
        <div style="width:{$prmForm/@W}px; height:{$prmForm/@H}">
            <p><xsl:value-of select="$prmForm/@TX"/></p>
        </div>
 
    </xsl:template>
 
</xsl:stylesheet>

 

Which is translated to the following syntax:

/// <template for="ckNodeTest[@Style='Flat'] or #tplCkNodeTest">
/// <summary>
/// Sample templpate
/// </summary>
$.jqtregtemplate("ckNodeTest[@Style='Flat']|#tplCkNodeTest", function(objWriter, objContext, objArgs) {
 
 
    var prmDescription = $.xpath("definied", objArgs.prmDescription) ? objArgs.prmDescription : this.attr("description");
    var prmForm = $.xpath("definied", objArgs.prmForm) ? objArgs.prmForm : this.xpath("F");
 
    // Provide description to the test
    objWriter.writeTag("p");
        objWriter.write(prmDescription);
    objWriter.writeTagEnd("p");
    // Form like container
    objWriter.writeTag("div", "style=\"width:", prmForm.attr("W"), "px; height:", prmForm.attr("H"), "\" ");
        objWriter.writeTag("p");
            objWriter.write(prmForm.attr("TX"));
        objWriter.writeTagEnd("p");
    objWriter.writeTagEnd("div");
 
});
/// </template>

 

 

The JQT code uses the $.jqtregremplate method to register a template which can be called by name (tplCkNodeTest) or by sending a node which is name is ckNodeTest and that has an attribute named Style which evaluates to 'Flat'. The template is registered with an anonymous function that will be responsible of generating HTML (or any other format). This anonymous function should declare at least one parameter which is the first objWriter argument which is used to write the code. It can use the second argument which is the objContext to get global variables or to refer to anonymous functions which can be attached in the template registrations (see template specific runtime behaviors). The last argument provides the ability to send named parameters to the template as can be done in XSLT and the $.xpath("definied", XX) method is used to verify that this parameter was sent.

Executing the template can be done either with a dedicated writer object which will enable to get the generated string value or without it which will return a DOM object that was constructed from the generated HTML code.

Here is a sample code which takes node and get the DOM result from running the template engine:

// Apply the registered JQT templates on the givven xml node
var objHTMLNode = $.jqtapplytemplate(objXMLNode);
 
// If there is a valid node
if(objHTMLNode)
{
     // Add the generated html node to the bottom of the body
     $('body').append(objHTMLNode);
}

 

 

Templates can also be registered using a mode value which allows to have several templates matching the same node.

Here is the syntax to register a mode enabled template:

/// <template for="ckNodeTest" mode="highlight">
/// <summary>
/// Sample templpate
/// </summary>
$.jqtregtemplate("ckNodeTest", "highlight", function(objWriter, objContext, objArgs) {
 
     // Code goes here
 
});
/// </template>

 

 

To call the specific mode template we can use the same code as before adding the mode argument:

// Apply the registered JQT templates on the givven xml node but require only templates which are registered as "highlight" mode.
var objHTMLNode = $.jqtapplytemplate(objXMLNode, "highlight");
 
// If there is a valid node
if(objHTMLNode)
{
     // Add the generated html node to the bottom of the body
     $('body').append(objHTMLNode);
}

 

 

Templates as in XSLT can be called recursively to generate a modular templating code. 

Here is an example of a template which enumerates its children and applies a template on each child:

/// <template for="ckNodeTest" mode="highlight">
/// <summary>
/// Sample templpate
/// </summary>
$.jqtregtemplate("ckNodeTest", "highlight", function(objWriter, objContext, objArgs) {
 
     // Enumerate child nodes and apply template to each of them
     this.children().each(function(){
 
          // Apply template on the current node
          // first argument: this - is the subject to apply template on
          // second argument: null - indicates templates with no mode value
          // third argument: objWriter - the writer to append content to
          // forth argument: hash - the parameters to send to the template (optional)
          $.jqtapplytemplate(this, null, objWriter, {
              prmEnabled : true
          });
 
     });
 
});
/// </template>
JQT Migrator

The JQT migration tool provides a simple way to translate your XSLT documents into JQT code.  

While it is available as a standalone console you can use it without downloading. The JQT migration tool had been integrated into a simple ASPX page available here:

http://www.visualwebgui.com/jqtmigrator.aspx

Using JQT

To start using JQT all you need is to include the following scripts :

jQuery.js - Required 1.5 as JQT uses jQuery.sub()
jQueryTemplates.js - Provides all the relevant JQT API
jQueryXPath.js - Provides all the relevant XPath API
jQueryXPathEngine.js - Provides XPath support for non XPath supporting platforms (Android)

<html>
    <head>
        <title>jqtTemplates unit tests.</title>
        <script type="text/javascript" src="jQuery.js"></script>
        <script type="text/javascript" src="jQueryXPath.js"></script>
        <script type="text/javascript" src="jQueryTemplates.js"></script>
        <script type="text/javascript" src="jQueryXPathEngine.js"></script>        
    </head>
    <body>
    
    </body>
</html>
Using the JQT writer

The JQT writer (JQTTemplteWriter) is a helper class which is passed between templates to help emit your HTML content. Theoretically you can pass in any class that has a flush method that returns the collected string. As expected this class uses an array to speed up the generation of the large strings generated and it is highly optimized to provide you the simplest API and maximum power. The JQT writer is passed as the first parameter in the template handler. 

The JQTTemplateWriter can be created simply by instantiating it and by passing it to the $.jqtapplytemplate you prevent the template engine from creating the HTML DOM for you. This means that you will be responsible on getting the string from the JQTTemplateWriter.flush() method. Again, you can pass your own object and do not HTML transformations.

The JQTTemplateWriter API is as following:

  • writeTag ("[TAGNAME]",[P1, P2, P3...]) – Writes: <TAGNAME " P1 P2 P3 
  • writeFullTag (" [TAGNAME]",[P1, P2, P3...]) – Writes: <TAGNAME " P1 P2 P3 " />
  • writeFullTagStart ("[TAGNAME]") – Writes: <TAGNAME>
  • writeTagEnd ("[TAGNAME]") – Writes: </TAGNAME>
  • writeAttribute ("[ATTRNAME]", [P1, P2, P3...]) – Writes: [ATTRNAME]=" P1 P2 P3 "
  • writeStartAttribute ("[ATTRNAME]") – Writes: [ATTRNAME]=" 
  • writeEndAttribute () – Writes: "
  • write (P1, P2, P3...) - Simply writes the content of P1 P2 P3

The JQT writer was designed to emulate the XSLT engine writer and as such you do not need to close an opening tag. The writer tracks when the end starting tag sign needs to be added and writes it for you. This enables templates to write attributes to calling templates and releases the developer from tracking that within his code.

License

This article, along with any associated source code and files, is licensed under: Lesser General Public License (LGPL)

About the author

guy

Related Articles

Extensions  
Title Update Author
Learn the basics of how to migrate your custom-control to the new .NETHTML5 version of Visual WebGui
Tags: Developers, Theme, XML, XSLT, 2. Intermediate, 3. Advanced, Customization, v6.4 and Later
26/April/2011    2011/04/26
The plugin provides functionality to compare two DOM nodes and build a well looking HTML page to visualize the difference.
Tags: Developers, JavaScript, 2. Intermediate
01/March/2011    2011/03/01
The article describes how to use the debugging panel, migration hints and resource splitting in order to reach full functional equivalency between the original XSLT (WINWEB) version and targeted JQT (.NETHTML5) version.
Tags: Architects, Developers, HTML5, JavaScript, XML, XSLT
28/April/2011    2011/04/28