ext gwt 3.0 advanced templates

Wednesday, November 2, 2011

Colin Alworth, Sencha

ADVANCED [email protected] @ambisinister


What are Templates?


Templates + Data = HTML


FeaturesControl statementsConditionsLoopsString formattingBuilt-in and customSimple expressionsJavaScript-like scopingBean path syntax


Easier to Write, Better PerformanceGWT: SafeHtmlTemplates2.0: Template and XTemplate3.0: XTemplates methods


XTemplates in 2.0private 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

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

<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>


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


3.0 Compiled TemplatesTemplate compiled to Java with SafeHtmlTemplatesPaths translated to getters, or errorCompiler can optimize Java to JavaScriptReturns SafeHtml objects


The XTemplate Language


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

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


Variable ScopingScoped like JavaScript, not JavaLoops can reuse variable namesIf only one argument to template, no need to name itparent refers to previously scoped object# is a 1-indexed current position in collection


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>


Variable ReplacementExpressions wrapped in {} turn into getters


Customization


String Formatting


Standard formats value:datevalue:date(formatString)value:numbervalue:number(formatString)value:scientificvalue:decimalvalue:currencyvalue: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 Templatespublic 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

Technology

public static

public class shortenfactory

getformatint length

currency value

rendertemplateperson

safehtml content

dateformatstring value

number value