Wednesday, November 2, 2011
ADVANCED TEMPLATES                              Colin Alworth, Sencha             colin.alworth@sencha.com             @am...
What are Templates?Wednesday, November 2, 2011
Templates + Data =                                  HTMLWednesday, November 2, 2011
Features       Control statements       Conditions       Loops       String formatting       Built-in and custom       Sim...
Easier to Write, Better       Performance       GWT: SafeHtmlTemplates       2.0: Template and XTemplate       3.0: XTempl...
XTemplates in 2.0          private native String getTemplate() /*-{         var html = [         <p>Name: {name}</p>,     ...
XTemplates in 3.0       <p>Name: {data.name}</p>       <p>Company: {data.company}</p>       <p>Location: {data.location}</...
Multiple Templates       public interface DataRenderer extends XTemplates {         @XTemplate("<p>Name: {data.name}</p><p...
3.0 Compiled Templates       Template compiled to Java with SafeHtmlTemplates       Paths translated to getters, or error ...
The XTemplate                                LanguageWednesday, November 2, 2011
Control Statements       <tpl if="condition">           contents       </tpl>       <tpl for="collection">           prope...
Variable Scoping       Scoped like JavaScript, not Java       Loops can reuse variable names       If only one argument to...
public SafeHtml renderTemplate(Person data);       <tpl for="data.kids">           <tpl if="age < 100">               <p>{...
Variable Replacement       Expressions wrapped in {} turn into gettersWednesday, November 2, 2011
CustomizationWednesday, November 2, 2011
String FormattingWednesday, November 2, 2011
Standard formats       value:date       value:date(formatString)       value:number       value:number(formatString)      ...
Custom FormattersWednesday, November 2, 2011
Custom Formatter       <div class="{style.thumb}"><img src="{photo.path}" title="{photo.name}"></div>       <span class="x...
Custom Formatter       @FormatterFactories(@FormatterFactory(factory = ShortenFactory.class, name =             "shorten")...
Nesting Templates       public interface Template extends XTemplates {         @XTemplate(source = "DivFrame.html")       ...
Questions?Wednesday, November 2, 2011
Thank you!Wednesday, November 2, 2011
Upcoming SlideShare
Loading in …5
×

Ext GWT 3.0 Advanced Templates

3,556 views

Published on

Published in: Technology, Business
  • Be the first to comment

Ext GWT 3.0 Advanced Templates

  1. 1. Wednesday, November 2, 2011
  2. 2. ADVANCED TEMPLATES Colin Alworth, Sencha colin.alworth@sencha.com @ambisinisterWednesday, November 2, 2011
  3. 3. What are Templates?Wednesday, November 2, 2011
  4. 4. Templates + Data = HTMLWednesday, November 2, 2011
  5. 5. Features Control statements Conditions Loops String formatting Built-in and custom Simple expressions JavaScript-like scoping Bean path syntaxWednesday, November 2, 2011
  6. 6. Easier to Write, Better Performance GWT: SafeHtmlTemplates 2.0: Template and XTemplate 3.0: XTemplates methodsWednesday, November 2, 2011
  7. 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. 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. 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. 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 objectsWednesday, November 2, 2011
  11. 11. The XTemplate LanguageWednesday, November 2, 2011
  12. 12. Control Statements <tpl if="condition"> contents </tpl> <tpl for="collection"> properties of item </tpl>Wednesday, November 2, 2011
  13. 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 collectionWednesday, November 2, 2011
  14. 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. 15. Variable Replacement Expressions wrapped in {} turn into gettersWednesday, November 2, 2011
  16. 16. CustomizationWednesday, November 2, 2011
  17. 17. String FormattingWednesday, November 2, 2011
  18. 18. Standard formats value:date value:date(formatString) value:number value:number(formatString) value:scientific value:decimal value:currency value:percentageWednesday, November 2, 2011
  19. 19. Custom FormattersWednesday, November 2, 2011
  20. 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. 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. 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. 23. Questions?Wednesday, November 2, 2011
  24. 24. Thank you!Wednesday, November 2, 2011

×