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 ...
}