Your SlideShare is downloading. ×
  • Like
Ext GWT 3.0 Advanced Templates
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ext GWT 3.0 Advanced Templates

  • 2,720 views
Published

 

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,720
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
127
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Wednesday, November 2, 2011
  • 2. ADVANCED TEMPLATES Colin Alworth, Sencha colin.alworth@sencha.com @ambisinisterWednesday, November 2, 2011
  • 3. What are Templates?Wednesday, November 2, 2011
  • 4. Templates + Data = HTMLWednesday, November 2, 2011
  • 5. Features Control statements Conditions Loops String formatting Built-in and custom Simple expressions JavaScript-like scoping Bean path syntaxWednesday, November 2, 2011
  • 6. Easier to Write, Better Performance GWT: SafeHtmlTemplates 2.0: Template and XTemplate 3.0: XTemplates methodsWednesday, 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 objectsWednesday, November 2, 2011
  • 11. The XTemplate LanguageWednesday, 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 collectionWednesday, 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 gettersWednesday, November 2, 2011
  • 16. CustomizationWednesday, November 2, 2011
  • 17. String FormattingWednesday, November 2, 2011
  • 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. Custom FormattersWednesday, 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