jy[B]log

That's an object that generate XUL tag for you (or any other XML dialect). Pass it your javascript data (strings, objects, arrays etc..), a template file, and a DOM element where to insert the generated content. And jsTemplateBuilder will work for you.

Here is an example of a template file :

<?xml version="1.0"?>
<jstemplate
   version="1.0"
   xmlns="http://disruptive-innovations.com/ns/jstemplate"
   xmlns:jstpl="http://disruptive-innovations.com/ns/jstemplate"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
  <xul:grid>
     <attribute name="flex" value="aFlexValue" />
       <attribute name="context" value="aContextPopupValue" />

      <xul:columns >
        <xul:column />
        <xul:column />
      </xul:columns>

      <xul:rows>

   <foreach from="firstname" item="aLabel" key="aKey">
       <xul:row>
           <if condition="aLabel == '' ">
               <iftrue>
                   <xul:description value="This is an empty value !" />
               </iftrue>
               <iffalse>
                   <xul:description jstpl:attribute="value=aLabel" />
               </iffalse>
           </if>
           <xul:description jstpl:attribute="value=aKey" />
       </xul:row>
   </foreach>
      </xul:rows>
   </xul:grid>
</jstemplate>

You can see that this file contains XUL tags. These tags will be instantiated in the resulting document (In the example above, it generates a XUL grid). But some of them will be generated many times (or not) because of some specific tags like <foreach>, <if> etc. In fact, if you know the syntax of some PHP template engine, like smarty, you won't have difficulties understanding it.

In this example, there is a foreach tag, showing the template engine that it must iterate over an array (or object) named here "firstname". Each value in the array will be stored in an "aLabel" variable, and its key (a integer for an array, or the name of a property for an object) will be stored in the "aKey" variable (the key attribute is optional). So, for each item in the example above, a row element and some description elements will be generated.

The if tag allows to create elements based on conditions. Conditions are javascript expressions, in which you can use some variables like aLabel.

There are other tags, like the <attribute> tag, to assign an attribute to a generated element, its value coming from a variable. To learn other tags, please see the documentation.

Now, let's must instantiate a jsTemplateBuilder object.

 var jstpl = new jsTemplateBuilder();

Next, let's assign some variables that will be used in the template :

 jstpl.assign('aFlexValue',1);
 jstpl.assign('aContextPopupValue', 'mypopup');
 jstpl.assign('firstname', ['Laurent','Daniel','', 'Tristan']);

Finally, we call the build method to generate the content from the given template into the given DOM element. The last argument says if we want to destroy all children of this element before inserting the generated content.

 jstpl.build('mytemplate.jstpl', document.getElementById('anyelement'), true);

Please note the alternative grammar: just give the id of the element instead of the element itself

 jstpl.build('mytemplate.jstpl', 'anyelement', true);

And that's all !

jsTemplateBuilder is a javascript object and needs chrome privileges to run.

(c) Disruptive Innovations 2004

You can download it on my web site.