PlayFramework 一步一步来 之 页面模板引擎

Play的魔板引擎本人认为可以说是为full stack Developers量身打造的功能。在原有的html页面基础上，只需要在html文件名后缀名前面加上”.scala“，就可以在页面上写Scala代码，而且页面之间可以像函数一样被”调用“。例如：index.html本身这个文件中不能够写scala代码，但是如果index.html后缀名前加上”.scala“变为”index.scala.html“，就可以在其中写scala代码了，”index.html“变为”index.scala.html“后，就会被看成一个scala文件，编译的时候会当做一个object来编译；是不是有点JSP的感觉？但是比JSP更爽，JSP必须是一个完整的html文件，而play 的魔板引擎可以”拼凑“，就是可以一个功能模块写一个文件，或者共同的模块儿抽象出来，写成一个公共的模块文件，然后被其他文件调用。有了play魔板引擎，写页面变的如此简单！

      下面我们对play的页面魔板引擎做一个简单的介绍：

      其实play的页面魔板引擎并不是为play而生的，它本身就是一个简单框架，有自己的名字，叫：”Twirl“，Twirl并不是依赖着play而存在的，它是一个单独的项目，具体请关注https://github.com/playframework/twirl/blob/master/README.md。

      一个play 的页面魔板 是一个包含少量scala代码块的简单的text文件。页面魔板可以在任何文本格式的文件中触发，例如：HTML、XML或者CSV等。

     页面魔板将会被编译成标准的Scala函数，假如你创建了一个views/Application/index.html页面魔板文件，它会生成一个包含applay()方法的views.html.Application.index类。

    好了，正式开始：

     play的页面模板是从神奇”@“字符开始的。在页面模板中，加入”@“后，就可以写Scala代码了，可以是变量、函数、对象、代码块…任何Scala相关的东西。

    例如：

    1、 Hello  @customer.name     ！   在这里，”customer“代表的就是一个对象，name是customer的属性

     2、Hello @{customer.firstName +customer.lastName}！看见了没有加了”@“后可以直接写Scala的代码，这样为动态的赋值增加了便利

     3、Hello @{val name=customer.firstName +customer.lastName；name}  注意：这样输出的是”name“的值，很像Scala函数返回值的写法有木有？

   加一个”@“有神奇的效果，但是两个”@“：”@@“就是脱离这种效果了，大家要注意。

     页面模板就像一个函数，函数当然可以有参数，如果你想加参数，就得在文件的上面 定义：@（customer：Customer，order:List[Order]），完全是Scala函数的定义方法 有木有？也可以这样：@（title：String=”Home“） 还可以柯里化的形式，像这样：@（title：String）（body:Html），总之就是Scala函数的定义方法基本都可以。

      循环：play 页面模板推荐使用增强for循环

     例： <ul>

              @for(p <-products){

                <li>@p.name ($@p.price)</li>

                }

               </ul>

             这里有个需要注意的地方：”{“必须和”for“字段在同一行

      if语句：

   例：@if(items.isEmpty){

             <h1>Nothing to display</h1>

         }else{

             <h1>@items.size.items！</h1>

           }

       声明可以再度使用的代码块:（函数）

 例1：     @display(product:Product)={

      @product.name($@product.price)

}

    <ul>

    @for(product <- products){

     @display(product)

     }

 例2：

     @title(text:String)=@{

        text.split(' ').map(_.capitalize).mkString(" ")

      }

    <h1>@title("hello world")</h1>

    这个·用法非常的常用，可以在这个语法块中处理相关的逻辑，然后得出一个返回值，然后再别处调用。

    顺便说一下：如果你想定义一个隐士的变量，必须在@之后以”implicit“开头命名就可以，例如：

   @implicitFieldConstructor=@{MyFieldConstructor()}

  注意：implicit和名字必须是连起来的，@implicit FiledConstructor这样写是不行的。

  声明可以使用的值

 @defining(user.firstName+" "+user.lastName){ fullName =>

  <div>Hello @fullName </div>

}    

注意：fullName的作用范围仅仅是”{}“之内，出了”{}“就不好用了

引入声明：

 你可以引入任何你先引入的东西，类、包等等

 例子：

@（customer：Customer，orders:List[Order]）

@import utils._

注释：

 play 页面模板的注释：@* *@

例子：

<code class="language-html" style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inconsolata,monospace; font-size:14px; vertical-align:baseline; height:4px; color:rgb(102,102,102); line-height:inherit; background:none"><span class="pln" style="font-family:inherit;color:#000000;margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline;">@*********************
* This is a comment *
*********************@</span></code>

你可以放一条注释在模板的首页，作为Scala API的文档：

<code class="language-html" style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inconsolata,monospace; font-size:14px; vertical-align:baseline; height:4px; color:rgb(102,102,102); line-height:inherit; background:none"><span class="pln" style="font-family:inherit;color:#000000;margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline;">@*************************************
 * Home page.                        *
 *                                   *
 * @param msg The message to display *
 *************************************@
@(msg: String)

</span><span class="tag" style="font-family:inherit;color:#0088;margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline;"><h1></span><span class="pln" style="font-family:inherit;color:#000000;margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline;">@msg</span><span class="tag" style="font-family:inherit;color:#0088;margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline;"></h1></span></code>

输出真实的HTML：

<code class="language-html" style="margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; font-family:inconsolata,monospace; font-size:14px; vertical-align:baseline; height:4px; color:rgb(102,102,102); line-height:inherit; background:none"><span class="tag" style="font-family:inherit;color:#0088;margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline;"><p></span><span class="pln" style="font-family:inherit;color:#000000;margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline;">
  @Html(article.content)
</span><span class="tag" style="font-family:inherit;color:#0088;margin:0px; padding:0px; border:0px; outline:0px; font-weight:inherit; font-style:inherit; vertical-align:baseline;"></p></span></code>