XTemplates

用于声明接受对象并根据关联模板将它们转换为 HTML 的方法的标签接口。方法返回可用于许多 GWT 和 GXT 小组件以呈现内容的 SafeHtml 实例。

参考

• XTemplates Javadoc

功能

XTemplates 通过各种功能轻松生成内容。

• 支持字符串、基元和对象值变量。
• 将对象值格式化为字符串。
• 支持迭代对象和嵌套迭代对象。
• 支持条件。
• 能够调用返回布尔值的其他 Java 方法。
• 支持基本数学和表达式。
• 支持 HTML 外部来源。

定义

• XTemplate HTML 来源 - 指 XTemplate 接口中的内联注释和外部注释 HTML 来源定义。
• XTemplate 来源属性 - 指 XTemplate 来源属性，如 {property} 和 {path.to.property}，它们引用给定的对象属性。
• XTemplate 值或对象 - 指 XTemplate 接口方法参数参数，它将值传递给 XTemplate 来源属性。

简单的 XTemplate 示例

模板使用扩展 XTemplate 并包括注释 HTML 来源并返回 SafeHtml 的接口创建。

• 使用带注释 HTML 来源的 XTemplates 的示例

    public interface SampleXTemplates extends XTemplates {
      // Annotated HTML source with {name} property
      @XTemplate("<div>Hello, {name}!</div>")
      SafeHtml hello(String name);
    }
  

• 然后可以通过在模板类上调用 GWT.create 来创建 XTemplate 实例

    private SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  

• 调用 tpl.hello("test") 的示例将返回呈现的注释 HTML 的 SafeHtml 实例。

    public void display() { 
      // Displays Hello, test! and renders HTML as <div>Hello, test!<div> 
      RootPanel.get().add(new HTML(tpl.hello("test")));
    }        
  

XTemplate HTML 模板来源

存在两种加载 HTML 模板来源的方法，内联注释 HTML 或注释外部 HTML 来源。

• 内联注释 HTML 来源和外部注释 HTML 来源的示例

    public interface SampleXTemplates extends XTemplates {
      // Inline annotated HTML source
      @XTemplate("<div>Hello, {name}!</div>")
      SafeHtml hello(String name);
  
      // External annotated HTML source file.
      @XTemplate(source = "hello.html")
      SafeHtml helloExternal(String name);
    }
  

• 使用 XTemplate 模板方法的示例

    public void display() {
      // XTemplate instantiation
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Displays: Hello, Fred! or <div>Hello, Fred!</div>
      RootPanel.get().add(new HTML(tpl.hello("Fred")));
  
      // Displays: Hello, Willma! or <div>Hello, Willma!</div>
      RootPanel.get().add(new HTML(tpl.helloExternal("Willma")));
    }
  

属性

将值传递给 HTML 来源模板使用 XTemplate 方法变量，该变量可以包含字符串、基元、对象、迭代对象、嵌套迭代对象和多个方法参数。属性如 {property} 和 {path.to.property} 是 HTML 来源属性和/或 XTemplate 来源中的变量，属性查找规则在使用期间用属性值替换它们。

字符串和基元属性

通过 String 和基元将数据传递给模板。

• 变量通过用大括号括住名称来定义，如 {property}

    public interface SampleXTemplates extends XTemplates {
      // Using a String variable
      @XTemplate("<div>Hello, {name} are you {age} years old?</div>")
      SafeHtml hello(String name, int age); 
    }
  

对象属性查找规则

当在 HTML 来源中指定属性时，它将使用多种方法来查找该属性在所提供值中的值。

• 使用 HTML 来源中的 {name} 属性的示例将使用这些对象访问器来尝试查找值

    object.getName()
    object.hasName()
    object.isName()
    object.name()
  

对象属性

可以提供对象、多个对象、嵌套和迭代对象，并且当这样做时，必须在大括号中明确指定属性的路径，如 {property} 或 {path.to.property}。

• 下面方法签名中使用的 Person 对象的示例

    public class Person {
      private String name;
      private int age;
      public Person(String name, int age) {
        this.name = name;
        this.age = age;
      }
      public String getName() {
        return name;
      }
      public int getAge() {
        return age;
      }
    }
  

• 使用方法签名中的 Person 对象设置方法 hello(Person person)，然后在 HTML 来源中提供 Person 的 {name} 和 {age} 属性。

   public interface SampleXTemplates extends XTemplates {
     // Providing person instance to the XTemplate method.
     @XTemplate("<div>Hello, {name}! Is your age {age}?</div>")
     SafeHtml hello(Person person);
   }
  

• 使用 XTemplate 方法 hello(person) 的示例

    public void displayTemplates() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Displays: Hello, Barney! Is your age 34? or <div>Hello, Barney! Is your age 34?</div>
      Person barney = new Person("Barney", 34);
      RootPanel.get().add(new HTML(tpl.hello(barney)));
    }
  

多个参数

在 XTemplate 方法签名中提供多个对象需要 HTML 来源中的特定路径，如 {object1.path} 和 {object2.path}。

• 使用两个对象的示例

    public class Person {
      private String name;
      private List<Person> kids;
      public Person(String name, List<Person> kids) {
        this.name = name;
        this.kids = kids;
      }
      public String getName() {
        return name;
      }
      public List<Person> getKids() {
        return kids;
      }
    }
  
    public class Book {
      private String title;
      public Book(String title) {
        this.title = title;
      }
      public String getTitle() {
        return title;
      }
    }
  

• XTemplate 方法中多个对象的示例

    public interface SampleXTemplates extends XTemplates {
      @XTemplate("<div>Hello, {person.name}! Do you like the book {book.title}?</div>")
      SafeHtml hello(Person person, Book book);
    }
  

• 使用多对象 XTemplate 方法的示例

    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      Person fred = new Person("Fred");
      Book book = new Book("Ice Age");
  
      // Display Hello, Fred! Do you like the book Ice Age? or <div>Hello, Fred! Do you like the book Ice Age?</div>
      RootPanel.get().add(new HTML(tpl.hello(fred, book)));
    }        
  

嵌套属性

在 HTML 来源中指定嵌套对象属性需要特定的路径属性，如 {path.to.property}。

• 名为 father 的嵌套 Person 的 Person 示例。

   public class Person {
     private String name;
     private int age;
     private Person father;
     public Person(Person father, String name, int age) {
       this.father = father;
       this.name = name;
       this.age = age;
     }
     public String getName() {
       return name;
     }
     public int getAge() {
       return age;
     }
     public Person getFather() {
       return father;
     }
   }
  

• 提供嵌套人父亲的路径示例，如 {father.name}

    public interface SampleXTemplates extends XTemplates {
      // Providing person instance to the XTemplate method.
      // {name} uses Person.getName();
      // {age} uses Person.getAge();
      // {father.name} uses Person.getFather().getName();
      @XTemplate("<div>Hello, {name}! Is your age {age}? {name}&lsquo;s father is {father.name}.</div>")
      SafeHtml hello(Person person);
    }
  

• 使用 XTemplate 的示例

    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Displays: Hello, Barney! Is your age 34?
      Person father = new Person(null, "Bob", 61);
      Person barney = new Person(father, "Barney", 34);
      RootPanel.get().add(new HTML(tpl.hello(barney)));
    }
  

更深层次的嵌套属性

通过指定嵌套对象变量的属性路径，深入到对象图属性中。

• 带有嵌套的示例 Person 对象图。

    public class Person {
      private String name;
      private int age;
      private Person father;
      private Book favoriteBook;
      public Person(Person father, String name, int age, Book favoriteBook) {
        this.father = father;
        this.name = name;
        this.age = age;
        this.favoriteBook = favoriteBook;
      }
      public String getName() {
        return name;
      }
      public int getAge() {
        return age;
      }
      public Person getFather() {
        return father;
      }
      public Book getFavoriteBook() {
        return favoriteBook;
      }
    }
  
    public class Book {
      private String title;
      private Recommendation recommendation;
      public Book(String title, Recommendation recommendation) {
        this.title = title;
        this.recommendation = recommendation;
      }
      public String getTitle() {
        return title;
      }
      public Recommendation getRecommendation() {
        return recommendation;
      }
    }
  
    public class Recommendation {
      private String message;
      public Recommendation(String message) {
        this.message = message;
      }
      public String getMessage() {
        return message;
      }
    }
  

• XTemplate HTML 源示例

    <!-- hello.html file -->
    <div>
        Hello, {name}! Is your age {age}? 
        {name}&lsquo;s father is {father.name}.
        My favorite book is {favoriteBook.title} and
        has recommendation: {favoriteBook.recommendation.message}
    </div>        
  

• 使用更深层次嵌套属性引用的示例

    public interface SampleXTemplates extends XTemplates {
      // Providing person instance to the XTemplate method.
      // {name} uses Person.getName();
      // {age} uses Person.getAge();
      // {father.name} uses Person.getFather().getName();
      // {favoriteBook.title} uses Person.getFavoriteBook().getTitle();
      // {favoriteBook.recommendation.message} uses Person.getFavoriteBook().getRecommendation().getMessage();
      @XTemplate(source = "hello.html")
      SafeHtml hello(Person person);
    }
  

• 使用 XTemplate 的示例

    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Displays: Hello, Barney! Is your age 34? Barney's father is Bob. My favorite book is 
      //           Dinosaurs and has recommendation: This book was good.
      Recommendation recommendation = new Recommendation("This book was good.");
      Book book = new Book("Dinosaurs", recommendation);
      Person father = new Person(null, "Bob", 61, null);
      Person barney = new Person(father, "Barney", 34, book);
      RootPanel.get().add(new HTML(tpl.hello(barney)));
    }
  

属性值格式化

内置属性格式化器用于对货币、日期、小数、数字和科学数据类型的字符串进行格式化。

• 内置字符串格式化器

    {property:currency} 
    {property:date("format")} 
    {property:decimal} 
    {property:number("format")} 
    {property:scientific} 
  

货币

• 将属性格式化为货币

    {property:currency}
  

• 使用 {money:currency} 的示例

    // Example of object for use with this example
    public class Person {
      private String name;
      private BigDecimal money;
      public Person(String name, BigDecimal money) {
        this.name = name;
        this.money = money;
      }
      public String getName() {
        return name;
      }
      public BigDecimal getMoney() {
        return money;
      }
    }
  
    // XTemplate using {money:currency} formatting
    public interface SampleXTemplates extends XTemplates {
      @XTemplate("<div>You owe me {money:currency}.</div>")
      SafeHtml hello(Person person);
    }
  
    // Using the XTemplate
    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Displays: You owe me US$1.23.
      BigDecimal money = new BigDecimal("1.23");
      Person barney = new Person("Barney", money);
      RootPanel.get().add(new HTML(tpl.hello(barney)));
    }
  

日期

• 将属性格式化为日期：DateTimeFormat Javadoc - 格式化选项

    {property:date}
    {property:date("[custom format]")}
    {property:date("M/d/y")} // default
    {property:date("mm/dd/yyyy")}
  

• 使用 {property:date} 的示例

    // Example of object for use with this example
    public class Person {
      private String name;
      private Date hangout;
      public Person(String name, Date hangout) {
        this.name = name;
        this.hangout = hangout;
      }
      public String getName() {
        return name;
      }
      public Date getHangout() {
        return hangout;
      }
    }
  
    // XTemplate using {hangout:date} formatting
    public interface SampleXTemplates extends XTemplates {
      @XTemplate("<div>Hello, {name}! Lets hangout on {hangout:date}.</div>")
      SafeHtml hello(Person person);
    }
  
    // Using XTemplate
    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Displays: Hello, Barney! Lets hangout on 12/31/2014.
      Date hangout = new Date(2014-1900, 11, 31);
      Person barney = new Person("Barney", hangout);
      RootPanel.get().add(new HTML(tpl.hello(barney)));
    }
  

小数

• 将属性格式化为小数

    {property:decimal}    
  

• 使用 {property:decimal} 的示例

    // Example of object for use with this example
    public class Person {
      private String name;
      private double pi;
      public Person(String name, double pi) {
        this.name = name;
        this.pi = pi;
      }
      public String getName() {
        return name;
      }
      public double getPi() {
        return pi;
      }
    }
  
    // XTemplate using {pi:decimal} formatting
    public interface SampleXTemplates extends XTemplates {
      @XTemplate("<div>Would you like some apple {pi:decimal}?</div>")
      SafeHtml hello(Person person);
    }
  
    // Using XTemplate
    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Would you like some apple 3.14?
      double pi = 3.14;
      Person barney = new Person("Barney", pi);
      RootPanel.get().add(new HTML(tpl.hello(barney)));
    }
  

数字

• 将属性格式化为数字：NumberFormat Javadoc - 格式化选项

    {property:number}
    {property:number("[custom format]")}
    {property:number("#")} // default
    {property:number("#,##0.00")}
  

• 使用 {property:number} 的示例

    // Example of object for use with this example
    public class Person {
      private String name;
      private double pie;
      public Person(String name, double pie) {
        this.name = name;
        this.pie = pie;
      }
      public String getName() {
        return name;
      }
      public double getPie() {
        return pie;
      }
    }
  
    // XTemplate using {pie:number} formatting
    public interface SampleXTemplates extends XTemplates {
      @XTemplate("<div>Would you like some apple {pie:number(\"#,##0.00\")}?</div>")
      SafeHtml hello(Person person);
    }
  
    // Using XTemplate
    public void onModuleLoad() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Would you like some apple 3.14?
      double pie = 3.14;
      Person barney = new Person("Barney", pie);
      RootPanel.get().add(new HTML(tpl.hello(barney)));
    }
  

科学

• 将属性格式化为科学

    {property:scientific}
  

• 使用 {pie:scientific} 的示例

    // Example of object for use with this example
    public class Person {
      private String name;
      private double pie;
      public Person(String name, double pie) {
        this.name = name;
        this.pie = pie;
      }
      public String getName() {
        return name;
      }
      public double getPie() {
        return pie;
      }
    }
  
    // XTemplate using {pie:scientific} formatting
    public interface SampleXTemplates extends XTemplates {
      @XTemplate("<div>Would you like some apple {pie:scientific}?</div>")
      SafeHtml hello(Person person);
    }
  
    // Using XTemplate
    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Would you like some apple 3E0?
      double pie = 3.141592653589793238462643383279502884197169399;
      Person barney = new Person("Barney", pie);
      RootPanel.get().add(new HTML(tpl.hello(barney)));
    }
  

自定义属性格式化器

如果内置属性格式化器无法提供格式化值所需的功能，请构建一个自定义格式化器，如下面的示例所示。此自定义格式化器示例可以将字符串缩短到指定长度。

• 用于示例的对象示例

    public class Person {
      private String name;
      public Person(String name) {
        this.name = name;
      }
      public String getName() {
        return name;
      }
    }
  

• 带有自定义格式化器的 XTemplate HTML 源示例

    <!-- hello.html file -->
    <div>
      <p>
          <!-- applies the custom formatter :shorten(7) -->
        Hello {person.name:shorten(7)}! 
      </p>
    </div>
  

• ShortenFactory 实例化的格式化器示例

   import com.sencha.gxt.core.client.XTemplates.Formatter;
   import com.sencha.gxt.core.client.util.Format;
  
   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);
     }
   }
  

• 在 XTemplates 接口中加了注释的 ShortenFactory 类示例

    public class ShortenFactory {
      public static Shorten getFormat(int length) {
        return new Shorten(length);
      }
    }        
  

• 带注释的缩短格式化器示例

    @FormatterFactories(@FormatterFactory(factory = ShortenFactory.class, name = "shorten"))
    public interface SampleXTemplates extends XTemplates {
      @XTemplate(source = "hello.html")
      SafeHtml hello(Person person);
    }
  

• 使用带有自定义格式化器的 XTemplate 的示例

    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      // Displays: Hello Barn...! 
      Person barney = new Person("Barney Rubbel");
      RootPanel.get().add(new HTML(tpl.hello(barney)));
    }
  

迭代列表和数组属性

使用 <tpl for="." /> 标记迭代列表和数组。

• 以下内容将列表和数组类型称为迭代属性。
• 当使用 <tpl for="." /> 并且提供的属性是迭代对象时，迭代将在标记中进行。
• 在 <tpl/> 标记内迭代时，特殊变量 {#} 将提供当前数组索引+1 (1,2,3...)。

嵌套迭代属性

属性可以进行任何类型的嵌套，尽管必须给出特定路径来引用属性。

• "." 指 this，即 XTemplate 签名中提供的值。

• 在 <tpl for="." /> 标记中使用嵌套属性引用的示例

    <tpl for="." /> // 'this' or kids or the given iterative value
    <tpl for="kids" /> // this.getKids();
    <tpl for="kids.friends" /> // this.getKids().getFriends();
    <tpl for="kids.friends.teachers" /> // this.getKids().getFriends().getTeachers();
  

迭代嵌套路径“.”的示例：

• 使用 <tpl for="." /> 的示例，它会迭代 List<Person>

    // Example object
    public class Person {
      private String name;
      public Person(String name) {
        this.name = name;
      }
      public String getName() {
        return name;
      }
    }
  

• HTML 源示例

    <!-- hello.html file -->
    <div>
      <tpl for='.'>
        <p>{#}. Hello {name}!</p>     
      </tpl>
    </div>
  

• XTemplate 示例

    // Example XTemplate with List<Person> people iteration
    public interface SampleXTemplates extends XTemplates {
      @XTemplate(source = "hello.html")
      SafeHtml hello(List<Person> people);
    }
  

• 示例用法

    // Example of using the XTemplate
    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      List<Person> people = new ArrayList<Person>();
      people.add(new Person("Fred"));
      people.add(new Person("Barney"));
  
      // Displays:
      // 1. Hello Fred!
      // 2. Hello Barney!
      RootPanel.get().add(new HTML(tpl.hello(people)));
    }
  

迭代嵌套路径“kids”的示例：

• 使用 kids 的嵌套属性的另一个示例，如 <tpl for="kids" />

    // Example object
    public class Person {
      private String name;
      private List<Person> kids;
      public Person(String name, List<Person> kids) {
        this.name = name;
        this.kids = kids;
      }
      public String getName() {
        return name;
      }
      public List<Person> getKids() {
        return kids;
      }
    }
  

• HTML 源示例

    <!-- hello.html -->
    <div>
      <tpl for='.'>
        <p>
          {#}. Hello {name}! Kids: 
            <tpl for='kids'>{name} </tpl>
        </p>
      </tpl>
    </div>
  

• XTemplate 示例

    // Example XTemplate with deeper object graph iteration
    public interface SampleXTemplates extends XTemplates {
      @XTemplate(source = "hello.html")
      SafeHtml hello(List<Person> people);
    }
  

• 使用示例

    // Using the XTemplate
    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      List<Person> fredsKids = new ArrayList<Person>();
      fredsKids.add(new Person("Pebbles", null));
      fredsKids.add(new Person("Stony", null));
  
      List<Person> barneysKids = new ArrayList<Person>();
      barneysKids.add(new Person("Bam-Bam", null));
  
      List<Person> people = new ArrayList<Person>();
      people.add(new Person("Fred", fredsKids));
      people.add(new Person("Barney", barneysKids));
  
      // Displays:
      // 1. Hello Fred! Kids: Pebbles Stony
      // 2. Hello Barney! Kids: Bam-Bam
      RootPanel.get().add(new HTML(tpl.hello(people)));
    }
  

if 语句

<tpl if="expression" /> 标记提供表达式的条件评估。

• 没有 else 运算符，但可以使用两个相反的 if 语句。

• if 语句示例 <tpl if="expression" />

    <tpl if="needsIcon" />
    <tpl if="id == 'download'" />
    <tpl if="name == &quot;Jack&quot;" />
    <tpl if="age &gt; 1 && age &lt; 10" />
    <tpl if="age &gt;= 10 && age &lt; 18" />
  

表达式引号封装

引号封装规则属于 XML 标记，此处适用相同的规则。

• 单引号值封装可以通过几种方式完成。

    // double quote with single quote encapsulation
    <tpl if="id == 'download'" /> 
  
    // escaping single quotes
    <tpl if="id == \'download\'" /> 
  

• 可以使用双引号，但必须从 " 编码为 "

    // "Jack" is encoded as "Jack"
    <tpl if="name == &quot;Jack&quot;" />        
  

表达式字符编码

XTemplate 系统使用需要对这些字符进行编码的 xml。

if 语句示例

使用 <tpl if="expression" /> 标记的示例。

• HTML 源示例

    <!-- hello.html file -->
    <div>
      <p>
        Hello {person.name}! Kids with age &gt; 3: 
        <tpl for='person.kids'>
  
          <!-- if statement with encoded '>' as &gt; -->
          <tpl if="age &gt; 3">
            {name}
          </tpl>
  
        </tpl>
      </p>
    </div>
  

• XTemplate 示例

    public interface SampleXTemplates extends XTemplates {
      @XTemplate(source = "hello.html")
      SafeHtml hello(Person person);
    }
  

• 使用 XTemplate 的示例

    public void onModuleLoad() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      List<Person> kids = new ArrayList<Person>();
      kids.add(new Person("Pebbles", 7, null));
      kids.add(new Person("Stony", 8, null));
      kids.add(new Person("Bam-Bam", 2, null));
  
      Person fred = new Person("Fred", 34, kids);
  
      // Displays: Hello Fred! Kids with age > 3: Pebbles Stony 
      RootPanel.get().add(new HTML(tpl.hello(fred)));
    }        
  

基本数学运算符

基本数学运算符可以直接应用于数字数据值。

• 数学运算符遵循 Java 的最高优先级顺序。

• 数学表达式必须包含在方括号 {[expression]} 或 {[year+5]} 中

    {[expression]}
    {[year+5]}
    {[price*(quantity+1.23)]}
  

数学表达式示例

可以使用基本 Java 类型数学表达式。这种 Java 类型数学是有限的，更复杂的数学表达式更适合在 bean getter 访问器中使用。

• 带有数学表达式的示例 HTML 源代码

    <!-- hello.html file -->
    <div>
      <p>
        Hello {person.name}! Kids with age &gt; 3: 
        <tpl for='person.kids'>
          <tpl if="age &gt; 3">
            {name} age:{age} math:{[age+3]}
          </tpl>
        </tpl>
      </p>
    </div>
  

• XTemplate 示例

    public interface SampleXTemplates extends XTemplates {
      @XTemplate(source = "hello.html")
      SafeHtml hello(Person person);
    }
  

• 使用示例

    public void onModuleLoad() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
  
      List<Person> kids = new ArrayList<Person>();
      kids.add(new Person("Pebbles", 7, null));
      kids.add(new Person("Stony", 8, null));
      kids.add(new Person("Bam-Bam", 2, null));
  
      Person fred = new Person("Fred", 34, kids);
  
      // Displays: Hello Fred! Kids with age > 3: Pebbles age:7 math:10 Stony age:8 math:11 
      RootPanel.get().add(new HTML(tpl.hello(fred)));
    }        
  

国际化

在 XTemplates 中混合使用 GWT I18N 属性。此示例演示了将 Messages 与 XTemplates 一起使用，并且可以在其他 I18N 模块类型中使用相同的技术。

• 请参阅 GWT 国际化指南 了解更多信息

消息

使用 Messages 与 XTemplates 的示例。

• XTemplate 中使用的对象的示例

    public class Person {
      private String name;
      public Person(String name) {
        this.name = name;
      }
      public String getName() {
        return name;
      }
    }
  

• 包含 Messages 翻译属性的本地化消息文件名的示例

    # AppMessages file names
    AppMessages.properties
    AppMessages_ca.properties
    AppMessages_cs.properties
    AppMessages_da.properties
    AppMessages_de.properties
    AppMessages_el_GR.properties
    AppMessages_es.properties
    AppMessages_fr.properties
    AppMessages_hu.properties
    AppMessages_it.properties
    AppMessages_no.properties
    AppMessages_pl.properties
    AppMessages_pt_BR.properties
    AppMessages_pt_PT.properties
    AppMessages_pt.properties
    AppMessages_ru.properties
    AppMessages_sl.properties
    AppMessages_ua.properties
    AppMessages_zh.properties
  
    # localized property which is put in all of the AppMessages files  
    hello = Hello
  

• 示例 Messages

    // The file name must start in the translated property file names
    public interface AppMessages extends Messages {
      String hello();
    }
  

• 带有本地化消息 messages.hello 的示例 XTemplate HTML 源代码

    <!-- hello.html file -->
    <div>
      <p>
        {messages.hello} {person.name}!
      </p>
    </div>
  

• 示例 XTemplate 方法

    public interface SampleXTemplates extends XTemplates {
      @XTemplate(source = "hello.html")
      SafeHtml hello(AppMessages messages, Person person);
    }
  

  • 使用带有消息的 XTemplates 的示例

    public void display() {
      AppMessages messages = GWT.create(AppMessages.class);
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
    
      // Displays: Hello Fred!
      Person fred = new Person("Fred");
      RootPanel.get().add(new HTML(tpl.hello(messages, fred)));
    }
    

样式

向 HTML 模板元素添加样式。此示例演示如何将 CSS 资源用作 XTemplate 参数。

• 一些 css 的示例

    /* style.css file */
    .widget {
        border: 1px red solid;
    }
  

• 应用程序 CSS 资源的示例

    import com.google.gwt.resources.client.ClientBundle;
    import com.google.gwt.resources.client.CssResource;
  
    public interface AppResources extends ClientBundle {
      public interface WidgetCssResource extends CssResource {
        String widget();
      }
  
      @Source("style.css")
      public WidgetCssResource widgetStyles();
    }
  

• 使用样式设置 XTemplate 模板的示例

    <!-- hello.html file -->
    <div class="{style.widget}">
      <p>
        Hello {person.name}!
      </p>
    </div>
  

• 使用 CSS 资源参数设置 Xtemplate 的示例

    public interface SampleXTemplates extends XTemplates {
      @XTemplate(source = "hello.html")
      SafeHtml hello(WidgetCssResource style, Person person);
    }
  

• 使用带有 CSS 资源的 XTemplate 的示例。

    public void display() {
      SampleXTemplates tpl = GWT.create(SampleXTemplates.class);
      AppResources appResources = GWT.create(AppResources.class);
      appResources.widgetStyles().ensureInjected();
  
      // Displays: <div class="GCQJNTMCAN"><p>Hello Barney!</p></div>
      Person barney = new Person("Barney");
      RootPanel.get().add(new HTML(tpl.hello(appResources.widgetStyles(), barney)));
    }
  

常见的 XTemplate 问题

由于变量引用是字符串，因此会导致一些常见问题，而 GXT 具有良好的调试日志记录功能，可以帮助快速诊断问题。

XTemplate 源变量命名错误

XTemplate 源中的变量命名错误将导致构建错误。此屏幕截图演示了在 XTemplate 源中错误地命名变量。该变量被命名为 {book.title}，但应该命名为 {favoriteBook.title}。

XTemplate 变量名称的对象中没有 getter

XTemplates 通过对象的 getter（如 getRecommendation()）引用对象实例变量，并且还查找 hasRecomendation()、isRecomendation() 和 recomendation() 以检索实例值。以下屏幕截图演示了当 getter 或类似方法丢失时，并给出了“no getter”错误。在此错误中，getRecommendation() 方法丢失，它对应于使用 {favoriteBook.recommendation}，该方法查找 getter 方法 getRecommendation()、hasRecomendation()、isRecomendation() 和 recomendation()，如果它们不存在，则抛出异常 no getter。