Ext GWT 3.0 Advanced Templates

ADVANCED TEMPLATES
Colin Alworth, Sencha

colin.alworth@sencha.com @ambisinister

Wednesday, November 2, 2011

What are Templates?


Templates + Data =
HTML


Features
Control statements
Conditions
Loops
String formatting
Built-in and custom
Simple expressions
JavaScript-like scoping
Bean path syntax


Easier to Write, Better
Performance
GWT: SafeHtmlTemplates
2.0: Template and XTemplate
3.0: XTemplates methods


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();


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();


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")
}


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


The XTemplate
Language


Control Statements
<tpl if="condition">
contents
</tpl>

<tpl for="collection">
properties of item
</tpl>


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



<tpl for="data.kids">
<p>{#}. {parent.name}'s kid - {name} - {bday:date("M/d/yyyy")}</p>
</tpl>
</tpl>

<tpl for="kids">
<p>{#}. {data.name}'s kid - {name} - {bday:date("M/d/yyyy")}</p>
</tpl>
</tpl>


Variable Replacement
Expressions wrapped in {} turn into getters


Customization


String Formatting


Standard formats
value:date
value:date(formatString)
value:number
value:number(formatString)
value:scientiﬁc
value:decimal
value:currency
value:percentage


Custom Formatters


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);
  }
}


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);
  }
}

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>


Questions?


Thank you!


Ext GWT 3.0 Advanced Templates

More Related Content

What's hot

Similar to Ext GWT 3.0 Advanced Templates

More from Sencha

Recently uploaded

Ext GWT 3.0 Advanced Templates