The document discusses advanced templates in Sencha Ext JS. It describes how templates combined with data can generate HTML. Templates provide control statements, conditions, loops and formatting. XTemplates were introduced in Ext JS 2.0 and 3.0 for easier and faster template writing. Multiple templates can be defined and templates are compiled to Java for performance. The template language supports variable scoping, replacement, and custom formatters. Templates can also be nested.

1. Wednesday, November 2, 2011

2. ADVANCED TEMPLATES
Colin Alworth, Sencha
colin.alworth@sencha.com @ambisinister
Wednesday, November 2, 2011

3. What are Templates?
Wednesday, November 2, 2011

4. Templates + Data =
HTML
Wednesday, November 2, 2011

5. Features
Control statements
Conditions
Loops
String formatting
Built-in and custom
Simple expressions
JavaScript-like scoping
Bean path syntax
Wednesday, November 2, 2011

6. Easier to Write, Better
Performance
GWT: SafeHtmlTemplates
2.0: Template and XTemplate
3.0: XTemplates methods
Wednesday, November 2, 2011

7. XTemplates in 2.0
private native String getTemplate() /*-{
var html = [
'<p>Name: {name}</p>',
'<p>Company: {company}</p>',
'<p>Location: {location}</p>',
'<p>Salary: {income:currency}</p>',
'<p>Kids:</p>',
'<tpl for="kids" if="name=='Darrell Meyer'">',
'<tpl if="age > 1"><p>{#}. {parent.name}'s kid - {name} - ',
'{bday:date("M/d/yyyy")}</p></tpl>',
'</tpl>'
];
return html.join("");
}-*/;
//...
XTemplate tpl = XTemplate.create(getTemplate());
panel.removeAll();
panel.addText(tpl.applyTemplate(Util.getJsObject(person, 3)));
panel.layout();
Wednesday, November 2, 2011

8. XTemplates in 3.0
<p>Name: {data.name}</p>
<p>Company: {data.company}</p>
<p>Location: {data.location}</p>
<p>Salary: {data.income:currency}</p>
<p>Kids:</p>
<tpl for="data.kids">
<tpl if="age < 100">
<p>{#}. {parent.name}'s kid - {name} - {bday:date("M/d/yyyy")}</p>
</tpl>
</tpl>
public interface DataRenderer extends XTemplates {
@XTemplate(source = "template.html")
public SafeHtml renderTemplate(Person data);
}
//...
panel.clear();
panel.add(new HTML(renderer.renderTemplate(person)));
panel.forceLayout();
Wednesday, November 2, 2011

9. Multiple Templates
public interface DataRenderer extends XTemplates {
@XTemplate("<p>Name: {data.name}</p><p>Company: {data.company}</p>
<p>Location: {data.location}</p>")
public SafeHtml render(Person data);
@XTemplate(source = "template.html")
public SafeHtml renderTemplate(Person data);
}
Wednesday, November 2, 2011

10. 3.0 Compiled Templates
Template compiled to Java with SafeHtmlTemplates
Paths translated to getters, or error
Compiler can optimize Java to JavaScript
Returns SafeHtml objects
Wednesday, November 2, 2011

11. The XTemplate
Language
Wednesday, November 2, 2011

12. Control Statements
<tpl if="condition">
contents
</tpl>
<tpl for="collection">
properties of item
</tpl>
Wednesday, November 2, 2011

13. Variable Scoping
Scoped like JavaScript, not Java
Loops can reuse variable names
If only one argument to template, no need to name it
parent refers to previously scoped object
# is a 1-indexed current position in collection
Wednesday, November 2, 2011

14. public SafeHtml renderTemplate(Person data);
<tpl for="data.kids">
<tpl if="age < 100">
<p>{#}. {parent.name}'s kid - {name} - {bday:date("M/d/yyyy")}</p>
</tpl>
</tpl>
<tpl for="kids">
<tpl if="age < 100">
<p>{#}. {data.name}'s kid - {name} - {bday:date("M/d/yyyy")}</p>
</tpl>
</tpl>
Wednesday, November 2, 2011

15. Variable Replacement
Expressions wrapped in {} turn into getters
Wednesday, November 2, 2011

16. Customization
Wednesday, November 2, 2011

17. String Formatting
Wednesday, November 2, 2011

18. Standard formats
value:date
value:date(formatString)
value:number
value:number(formatString)
value:scientific
value:decimal
value:currency
value:percentage
Wednesday, November 2, 2011

19. Custom Formatters
Wednesday, November 2, 2011

20. Custom Formatter
<div class="{style.thumb}"><img src="{photo.path}" title="{photo.name}"></div>
<span class="x-editable">{photo.name:shorten(18)}</span>
public class Shorten implements Formatter<String> {
private int length;
public Shorten(int length) {
this.length = length;
}
@Override
public String format(String data) {
return Format.ellipse(data, length);
}
}
Wednesday, November 2, 2011

21. Custom Formatter
@FormatterFactories(@FormatterFactory(factory = ShortenFactory.class, name =
"shorten"))
interface Renderer extends XTemplates {
@XTemplate(source = "ListViewExample.html")
public SafeHtml renderItem(Photo photo, Style style);
}
public class Shorten implements Formatter<String> {
private int length;
public Shorten(int length) {
this.length = length;
}
@Override
public String format(String data) {
return Format.ellipse(data, length);
}
}
public class ShortenFactory {
public static Shorten getFormat(int length) {
return new Shorten(length);
}
}
Wednesday, November 2, 2011

22. Nesting Templates
public interface Template extends XTemplates {
@XTemplate(source = "DivFrame.html")
SafeHtml render(DivFrameStyle style, SafeHtml content);
}
<div class="{style.contentArea}">
<div class="{style.content}">{content}</div>
<div class="{style.topLeft}"></div>
<div class="{style.top}"></div>
<div class="{style.topRight}"></div>
<div class="{style.bottomLeft}"></div>
<div class="{style.bottom}"></div>
<div class="{style.bottomRight}"></div>
<div class="{style.left}"></div>
<div class="{style.right}"></div>
</div>
Wednesday, November 2, 2011

23. Questions?
Wednesday, November 2, 2011

24. Thank you!
Wednesday, November 2, 2011