Play Framework II Template

柔情只为你懂 2022-09-26 15:59 162阅读 0赞

### 1.Play Template介绍 ###

Play Scala template是一个简单的包含了Scala代码的文本文件，它可以生成任何给予文本格式的文件，如HTML、XML或者CSV。

Template系统被设计成能很舒服的使用HTML的模式，允许前台开发人员很容易的使用Template。

Template文件都放在app/views/目录下。Template会被编译成标准的Scala函数，且遵循一个简单的命名规范。例如，你创建了一个view/Application/index.scala.html文件的话，它会自动生成一个views.html.Application.index的class，且包含一个render()方法。

举个简单的例子，下面是一个简单的Template：

@(customer: Customer, orders: List[Order])
    
    <h1>Welcome @customer.name!</h1>
    
    <ul>
    @for(order <- orders) {
      <li>@order.getTitle()</li>
    }
    </ul>

你可以在任何Java代码中调用它，就像调用一个普通的方法一样。例如：

Content html = views.html.Application.index.render(customer, orders);

### 2.语法：字符@ ###

Scala template使用@作为唯一的特殊字符。任何时候出现这个字符，说明这里是个动态声明的起始位置。你不必非得明确的关闭这个代码块，因为这个动态声明的结尾可以被自动推断出来。如下所示：

Hello @customer.getName()!
           ^^^^^^^^^^^^^^^^^^
              Dynamic code

因为template引擎会通过分析你的代码自动推断出代码的结尾位置，这个语法仅支持简单的声明。如果你想插入复杂的声明，就需要明确的使用括号了。如下所示：

Hello @(customer.getFirstName() + customer.getLastName())!
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                              Dynamic Code

你也可以使用大括号来写代码块，如下所示：

Hello @{val name = customer.getFirstName() + customer.getLastName(); name}!
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                                      Dynamic Code

因为@是一个特殊字符，所以你有时需要对其进行转义，通过使用@@来进行转义。如下所示：

My email is bob@@example.com

### 3.Template参数 ###

一个template就像一个函数，所以它也需要参数，且必须被声明在template文件的最上面。如下所示：

@(customer: models.Customer, orders: List[models.Order])

其中，参数的书写格式和Scala的变量声明一样。冒号前面的事变量名，冒号后面是变量类型

你也可以给参数设置默认值，如下所示：

@(title: String = "Home")

甚至是几个参数组：

@(title:String)(body: Html)

### 4.迭代 ###

你可以使用关键字for，一下是一个非常标准的书写方式：

<ul>
    @for(p <- products) {
      <li>@p.getName() ($@p.getPrice())</li>
    }
    </ul>

注：确保\{是和for在同一行的，以表明这个表达式是持续到下一行的。

### 5.if块 ###

if块也没什么特殊的。简单的使用Scala的标准if声明就行了。如下所示：

@if(items.isEmpty()) {
      <h1>Nothing to display</h1>
    } else {
      <h1>@items.size() items!</h1>
    }

### 6.声明可复用的代码块 ###

你可以创建可复用的代码块，如：

@display(product: models.Product) = {
      @product.getName() ($@product.getPrice())
    }
    
    <ul>
    @for(product <- products) {
      @display(product)
    }
    </ul>

在上例中，先声明了一个叫display的代码块，然后在下面的for循环中，将display代码块所需的参数(product)传递给它，并复用它。

注意，你也可以声明复用纯代码块：

@title(text: String) = @{
      text.split(' ').map(_.capitalize).mkString(" ")
    }
    
    <h1>@title("hello world")</h1>

注意，声明代码块在有些时候很有用，不过需要强调的是，template中不是写复杂逻辑代码的最好的地方，最好是将这些代码写到Java（或Scala）文件中。

按照惯例，一个可复用的代码块的名字，需要以implicit开头：

@implicitFieldConstructor = @{ MyFieldConstructor() }

### 7.输出变量 ###

可以通过@\{valName\}的方式输出变量的值。例如，如果想输出name变量的值的话：

My name is @{name}

你可以使用defining定义局部变量：

@defining(user.getFirstName() + " " + user.getLastName()) { fullName =>
      <div>Hello @fullName</div>
    }

### 8.import声明 ###

你可以在template的开头import任何你想引用的类：

@(customer: models.Customer, orders: List[models.Order])
    
    @import utils._
    
    ...

若想使用绝对路径的话，需要在import声明中使用root前缀：

@import _root_.company.product.core._

如果你想弄一个在所有template中都奏效的import，你可以在build.sbt文件中进行声明：

TwirlKeys.templateImports += "org.abc.backend._"

### 9.注释 ###

你可以通过在template中使用@\* \*@来写注释：

@********************* * This is a comment * *********************@

你可以在第一行使用注释来给你的template写一个Scala API doc：

@************************************* * Home page. * * * * @param msg The message to display * *************************************@ @(msg: String) <h1>@msg</h1>

### 10.转义 ###

默认情况下，动态内容部分会根据template类型（如HTML或XML）被进行转义。若你想输出原始内容片断，可以将其包装在template文本类型中。例如输出一行HTML：

<p>
      @Html(article.content)
    </p>

在上例中，article.content是一段HTML代码，若不像上例中通过@Html包装一下，就会把content的内容转义成HTML页面显示出来了，若包装一下的话，就只会把HTML代码显示出来，而非渲染过的页面。

### 11.布局 ###

首先声明一个views/main.scala.html模板，这个模板将会被用来主面板的作用，例如在main中声明一些菜单，然后在所有子页面中，都显示这个菜单。main template的内容如下：

@(title: String)(content: Html)
    <!DOCTYPE html>
    <html>
      <head>
        <title>@title</title>
      </head>
      <body>
        <section class="content">@content</section>
      </body>
    </html>

如上所见，这个template有两个参数，一个title、一个HTML块。现在我们在另一个template中使用它。另一个template是views/Application/index.scala.html：

@main(title = "Home") {
    
      <h1>Home page</h1>
    
    }

注意：你既可以使用明明参数（如@main(title = "Home"）和定位参数（如@main("Home")）。

有时你需要一个特殊页面代码块，用于工具条或浏览路径记录（面包屑）。例如，你可以这样传递一个额外的参数：

@(title: String)(sidebar: Html)(content: Html)
    <!DOCTYPE html>
    <html>
      <head>
        <title>@title</title>
      </head>
      <body>
        <section class="content">@content</section>
        <section class="sidebar">@sidebar</section>
      </body>
    </html>

### 12.Includes ###

这里没有什么特殊的。你可以调用任何其他的template（或者其它函数，无论它们在哪被定义）：

<h1>Home</h1>
    
    <div id="side">
      @common.sideBar()
    </div>

### 13.CSS样式和JavaScript脚本 ###

如下所示：

@(title: String, scripts: Html = Html(""))(content: Html)
    
    <!DOCTYPE html>
    
    <html>
        <head>
            <title>@title</title>
            <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
            <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
            <script src="@routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
            @scripts
        </head>
        <body>
            <div class="navbar navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container">
                        <a class="brand" href="#">Movies</a>
                    </div>
                </div>
            </div>
            <div class="container">
                @content
            </div>
        </body>
    </html>

例2：

@scripts = {
        <script type="text/javascript">alert("hello !");</script>
    }
    
    @main("Title",scripts){
    
       Html content here ...
    
    }