com.sencha.gxt.legacy.client.core

Class XTemplate

java.lang.Object

com.google.gwt.core.client.JavaScriptObject

com.sencha.gxt.legacy.client.core.XTemplate

public final class XTemplate
extends JavaScriptObject

A template class that supports advanced functionality like:

• Formatting
• Autofilling arrays using templates and sub-templates
• Conditional processing with basic comparison operators
• Basic math function support
• Execute arbitrary inline code with special built-in template variables

Usage

• Sample Data

  
  This is the data used for reference in each code example:

   
       class Kid extends BaseModelData {
         public Kid(String name, int age) {
           set("name", name);
           set("age", age);
         }
       }
       
       class Person extends BaseModelData {
         public Person(String name, String company, String product, String location) {
           set("name", name);
           set("company", company);
           set("product", product);
           set("location", location);
         }
         
         public void setKids(List kids) {
           set("kids", kids);
         }
         
         public List getKids() {
           return get("kids");
         }
       }
   
       final Person person = new Person("Darrell Meyer", "Sencha Inc", "GXT", "Washington, DC");
   
       List kids = new ArrayList();
       kids.add(new Kid("Alec", 4));
       kids.add(new Kid("Lia", 2));
       kids.add(new Kid("Andrew", 1));
   
       person.setKids(kids);
   
   

Formatting

Values can be formatted using the following syntax:

• {value:formatName} - no format param
• {value:formatName(format)} - with format param

Available formats:

• date(format) - format syntax uses GWT DateTimeFomat (example: {mydate:date("m/d/yyyy")})
• number(format) - format syntax uses GWT NumberFormat (example: {mynumber:number("0000.0000")})
• currency - no parameters
• scientific - no parameters
• decimal - mo parameters

Auto filling of arrays

The tpl tag and the for operator are used to process the provided data object:

• If the value specified in for is an array, it will auto-fill, repeating the template block inside the tpl tag for each item in the array.
• If for="." is specified, the data object provided is examined.
• While processing an array, the special variable {#} will provide the current array index + 1 (starts at 1, not 0).

 
 <tpl for=".">...</tpl>       // loop through array at root node
 <tpl for="foo">...</tpl>     // loop through array at foo node
 <tpl for="foo.bar">...</tpl> // loop through array at foo.bar node
 
 

Using the sample data above:

 
 // generating strings in native methods easier than in Java, can be created in Java as well
 public native String getTemplate() /*-{
   return ['<p>Kids: ',
           '<tpl for=".">',       // process the data.kids node
           '<p>{#}. {name}</p>',  // use current array index to autonumber
           '</tpl></p>'
          ].join("");
 );
 XTemplate tpl = XTemplate.create(getTemplate());
 tpl.overwrite(someElement, Util.getJsObject(person.getKids())); // pass the kids property of the data object
 
 

An example illustrating how the for property can be leveraged to access specified members of the provided data object to populate the template:

 
 public native String getTemplate() /*-{
   return ['<p>Name: {name}</p>',
           '<p>Title: {title}</p>',
           '<p>Company: {company}</p>',
           '<p>Kids: ',
           '<tpl for="kids">',     // interrogate the kids property within the data
           '<p>{name}</p>',
           '</tpl></p>'
         ].join("");
 );
 template.overwrite(someElement, Util.getJsObject(person));
 
 

When processing a sub-template, for example while looping through a child array, you can access the parent object's members via the parent object:

 
 public native String getTemplate() /*-{
   return ['<p>Name: {name}</p>',
           '<p>Kids: ',
           '<tpl for="kids">',
           '<tpl if="age > 1">',
             '<p>{name}</p>',
             '<p>Dad: {parent.name}</p>',
           '</tpl>',
           '</tpl></p>'
          ].joint("");
 );
 template.overwrite(someElement, Util.getJsObject(person));
 
 

Conditional processing with basic comparison operators

The tpl tag and the if operator are used to provide conditional checks for deciding whether or not to render specific parts of the template. Notes:

• Double quotes must be encoded if used within the conditional
• There is no else operator — if needed, two opposite if statements should be used.

 
 <tpl if="age > 1 && age < 10">Child</tpl>
 <tpl if="age >= 10 && age < 18">Teenager</tpl>
 <tpl if="id==\'download\'">...</tpl>
 <tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
 // no good:
 <tpl if="name == "Jack"">Hello</tpl>
 // encode " if it is part of the condition, e.g.
 <tpl if="name == &quot;Jack&quot;">Hello</tpl>
 
 

Using the sample data above:

 
 public native String getTemplate() /*-{
   return ['<p>Name: {name}</p>',
           '<p>Kids: ',
           '<tpl for="kids">',
           '<tpl if="age > 1">',
             '<p>{name}</p>',
           '</tpl>',
           '</tpl></p>'
         ].join("");
 );
 template.overwrite(someElement, Util.getJsObject(person));