带着问题认识 Google Closure Templates

1.Closure Templates是干什么用的？

它是一个客户端和服务器端的模板系统，用来动态创建可复用的HTML和UI元素。

 

2.为什么要使用Closure Templates？

    2.1 模块化------相对于传统的模板系统中需要为每个页面创建一个整体模板，Closure Templates是模块/组件化的，你可以从视图显示的角度来分解应用程序的逻辑，并创建自己的用户界面。

    2.2 同时适用多个语言--------用户可以在客户端和服务器端适用相同的模板，模板中可以使用JS脚本语言或Java。

    2.3 在客户端的高效运行-------Closure Templates会被预编译成高效的JS脚本，以求最大化客户端的显示效果。

    2.4 模板之间可以相互调用。

 

3.如何创建一个Closure Template并用JS调用？

    3.1 下载closure-templates-for-javascript-latest.zip

       这个文件包括：SoyToJsSrcCompiler.jar 把Closure Template编译成高效的脚本。

                               soyutils.js 脚本代码会使用到这些工具。

   3.2 将上面的文件放入自己的工作目录（helloworld_js）里。

   3.3 在工作目录中创建 sample.soy文件。（所有包含Closure Templates并以soy后缀结尾的文件就是soy文件）

         在sample.soy文件中添加一行 {namespace examples.simple}。这表示了在这个文件中使用到的模板的命名空间。

   3.4 试着写第一个模板的内容，例如:      

 

/**
 * Says hello to the world.
 */
{template .helloWorld}   这是模板名字的一部分，结合前面的命名空间，模板的全名是：examples.simple.helloWorld
  Hello world!
{/template}

 

    3.5 使用命令将模板编辑成JS脚本：

 

~/helloworld_js$ java -jar SoyToJsSrcCompiler.jar --outputPathFormat simple.js --srcs simple.soy

    这个命令产生的simple.js文件，通过examples.simple.helloWorld（）来渲染模板内容。

   模板的内容、逻辑会在 .js 文件中得以体现。

注意：.js 文件是.soy 自动产生的，不要再去编辑. js 文件！

 

    3.6 在自己的工作目录 helloworld_js中，创建一个HTML文件，内容如下：

 

  
  
  


  

soyutils.js">
  


  

     于是就通过JS调用了Closure Template的模板内容，访问HTML即可看到。

 

4.如何创建一个Closure Template并用Java调用？

   4.1 下载closure-templates-for-java-latest.zip.

这其中包括两个文件：   soy-latest.jar 包含所有closure templates模板类和依赖；

     SoyParseInfoGenerator.jar转换soy文件并生成Java类。

   4.2 将上面的文件放入自己的工作目录。

         创建simple.soy文件，声明命名空间，输入模板内容：

 

/**
 * Says hello to the world.
 */
{template .helloWorld}
  Hello world!
{/template}

 

    4.3 在工作目录中创建一个Java类：HelloWorld.java

 

public class HelloWorld {

  public static void main (String[] args) {

    // 在项目中，将soy文件绑定到 SoyFileSet中。
    SoyFileSet sfs = SoyFileSet.builder().add(new File("simple.soy")).build();

    // 将soy模板文件编译成 SoyTofu 对象。
    // SoyTofu 对象的 newRenderer( )方法返回的render，可以渲染 SoyFileSet 中任何模板的内容
    SoyTofu tofu = sfs.compileToTofu();

    // 渲染模板内容
    System.out.println(tofu.newRenderer("examples.simple.helloWorld").render());
  }

}