和你编写代码相似，你编写的页面也能够由多个小的片段组合而成，这些小的片段本身也能够由更小的片段构成。这些小片段一般是能够在其他页面反复使用的：有些部分能够用在全部页面，而有些部分是某些页面特定的。本篇介绍怎样使用这些可重用的小模板来构成整个页面。
Includes
到眼下为止的样例，我们仅仅显示了HTML的片段，没有实例显示整个页面。以下我们给出完整的显现产品列表的代码和模板：

1 def catalog() = Action {
2     val products = ProductDAO.list
3     Ok(views.html.shop.catalog(products))
4 }

相应的页面模板app/views/products/catalog.scala.html

1 @(products: Seq[Product])
2 <!DOCTYPE html>
3 <html>
4     <head>
5         <title>paperclips.example.com</title>
6         <link href="@routes.Assets.at("stylesheets/main.css")"
7         rel="stylesheet">
8     </head>
9     <body>
10         <div id="header">
11             <h1>Products</h1>
12         </div>
13         <div id="navigation">
14             <ul>
15                 <li><a href="@routes.Application.home">Home</a></li>
16                 <li><a href="@routes.Shop.catalog">Products</a></li>
17                 <li><a href="@routes.Application.contact">Contact</a></li>
18             </ul>
19         </div>
20         <div id="content">
21             <h2>Products</h2>
22             <ul class="products">
23             @for(product <- products) {
24                 <li>
25                     <h3>@product.name</h3>
26                     <p class="description">@product.description</p>
27                 </li>
28             }
29             </ul>
30         </div>
31         <footer>
32             <p>Copyright paperclips.example.com</p>
33         </footer>
34     </body>
35 </html>

这样我们就定义了一个完整的HTML页面，可是我们在当中加入了不少和显示产品列表不直接相关的标记，比方Catalog不须要知道菜单是怎样显示的。页面模块化和重用性不高。
一般来说，一个action方法仅仅应负责终于页面的内容部分。对于非常多站点来说，页头，页脚，导航条在不同页面是通用的，例如以下图：

在这个页面样式中，Header，Navigation,Footer一般是不变的，须要变化的部分是由Page Content指定的部分。

因此我们能够把之前产品列表页面模板中的导航条部分抽取出来单独定义一个navigation页面模板：
views/navigation.scala.html

1 @()
2 <div id="navigation">
3     <ul>
4         <li><a href="@routes.Application.home">Home</a></li>
5         <li><a href="@routes.Shop.catalog">Catalog</a></li>
6         <li><a href="@routes.Application.contact">Contact</a></li>
7     </ul>
8 </div>

然后改动之前的catelog.scala.html

1 @(products: Seq[Product])
2 <!DOCTYPE html>
3 <html>
4     <head>
5         <title>paperclips.example.com</title>
6         <link href="@routes.Assets.at("stylesheets/main.css")"
7         rel="stylesheet">
8     </head>
9     <body>
10         <div id="header">
11             <h1>Products</h1>
12         </div>
13         @navigation()
14         <div id="content">
15             <h2>Products</h2>
16             <ul class="products">
17             @for(product <- products) {
18                 <li>
19                     <h3>@product.name</h3>
20                     <p class="description">@product.description</p>
21                 </li>
22             }
23             </ul>
24         </div>
25         <footer>
26             <p>Copyright paperclips.example.com</p>
27         </footer>
28     </body>
29 </html>

这个改动使得我们的页面变得更好，由于Catalog页面无需再知道怎样显示导航条，这样的把部分页面模板抽取出来单独写成一个可反复使用页面模板的方法叫”includes”，而抽取出来的模板叫”include”。

Layouts
前面的include使得我们的页面模板变好了，可是还是有改进的余地。我们能够看到Catelog页面还是显示整个页面，比方HTML DocType，head等等，这部分不应该由Catalog来负责显示。前面页面模板仅仅有div content部分由Catalog来显示：

1 <h2>Products</h2>
2 <ul class="products">
3 @for(product <- products) {
4     <li>
5         <h3>@product.name</h3>
6         <p class="description">@product.description</p>
7     </li>
8 }
9 </ul>

其他部分都应该放在Catalog 模板之外。我们也能够使用之前的include技术，但不是最理想的。假设我们使用”include”技术，那么我们须要另外两个新的模板，一个为Content前面部分的内容，另外一个模板为Content后面部分的内容。这样的方法不是非常好，由于这些内容应该是放在一起的。
幸运的是使用Scala的组合功能，Play支持抽出全部的内容到一个模板中，从catalog.scala.html 模板中抽出全部不应由catalog负责的部分，到一个布局模板：

1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>paperclips.example.com</title>
5         <link href="@routes.Assets.at("stylesheets/main.css")"
6         rel="stylesheet">
7     </head>
8     <body>
9         <div id="header">
10             <h1>Products</h1>
11         </div>
12         @navigation()
13         <div id="content">
14           // Content here
15         </div>
16         <footer>
17             <p>Copyright paperclips.example.com</p>
18         </footer>
19     </body>
20 </html>

我们把这部分模板存放在app/views/main.scala.html中，要使得这个模板变成能够重用的，我们为它定义一个參数content，其类型为html，改动例如以下：

1 @(content: Html)
2 <!DOCTYPE html>
3 <html>
4     <head>
5         <title>paperclips.example.com</title>
6         <link href="@routes.Assets.at("stylesheets/main.css")"
7         rel="stylesheet">
8     </head>
9     <body>
10         <div id="header">
11             <h1>Products</h1>
12         </div>
13         @navigation
14         <div id="content">
15         @content
16         </div>
17         <footer>
18             <p>Copyright paperclips.example.com</p>
19         </footer>
20     </body>
21 </html>

使用这个模板如同调用Scala函数类型，views.html.main(content) ，使用这个布局模板，我们改动catelog页面例如以下：

1 @(products: Seq[Product])
2 @main {
3     <h2>Products</h2>
4     <ul class="products">
5     @for(product <- products) {
6         <li>
7             <h3>@product.name</h3>
8             <p class="description">@product.description</p>
9             }
10     </ul>
11 }

假设有须要，我们能够为main布局模板加入很多其他的參数，比方将title也作为參数，
比方把

1 @(content: Html)
2 <html>
3     <head>
4     <title>Paper-clip web shop</title>

改动成

1 @(title: String)(content: Html)
2 <html>
3     <head>
4     <title>@title</title>

还能够给參数定义缺省值，比方：

1 @(title="paperclips.example.com")(content: Html)

这样改动能够进一步參数化布局模板，通用性更强。

很多其他Play教程请訪问http://www.imobilebbs.com/

Play Framework Web开发教程(33): 结构化页面-组合使用模板的更多相关文章

  1. web开发 c/s结构 和 b/s结构

    web开发 c/s结构 和 b/s结构 c/s结构 --client/server 客户端/服务器机构 如qq b/s结构 -- browser/server 浏览器/服务器结构 如网站 mvc设计 ...

  2. cuSPARSELt开发NVIDIA Ampere结构化稀疏性

    cuSPARSELt开发NVIDIA Ampere结构化稀疏性 深度神经网络在各种领域(例如计算机视觉,语音识别和自然语言处理)中均具有出色的性能.处理这些神经网络所需的计算能力正在迅速提高,因此有效 ...

  3. XAF应用开发教程(八) 汉化与多国语言支持

    使用了XAF开发时,汉化是一个比较常的问题. 要实现汉化很简单: 1.在这里下载汉化资源文件.这里演示的版本是15.1.X的 2.文件下载后将:文件解压到目录    <你的项目>\BIN\ ...

  4. [置顶] Java Web开发教程来袭

    Java Web,是用Java技术来解决相关web互联网领域的技术总和.web包括:web服务器和web客户端两部分.Java在客户端的应用有java applet不过现在使用的很少,Java在服务器 ...

  5. 勤拂拭软件 java web 开发教程(1) - 开发环境搭建

    勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...

  6. H5中使用Web Storage来存储结构化数据

    在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key—value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...

  7. java web 开发教程(1) - 开发环境搭建

    勤拂拭软件系列教程 之 Java Web开发之旅(1) Java Web开发环境搭建 1 前言 工作过程中,遇到不少朋友想要学习jsp开发,然而第一步都迈不出,连一个基本的环境都没有,试问,如何能够继 ...

  8. 网页布局WEB标准的HTML结构化

    您正在学习WEB标准CSS网页布局吗?是不是还不能完全掌握纯CSS布局?通常有两种需要您特别注意: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义 ...

  9. Twisted web开发教程

    最近在网上看到一篇twisted web开发文章,将它实践了一下,twisted 提供基本的url路由 和 控制器,模板与模型需要外部扩展 1.目录浏览 2.get请求 3.url路由 4.接受带参数 ...

随机推荐

  1. Python之基础（一）

    数学计算 要利用相关的数学计算函数,首先需要把数学模块包含进来: >>>import math 进行计算: >>> math.pi 3.14159265358979 ...

  2. C++指针数组和数组指针

    指针相关问题 using namespace std; int main(){ //a) 一个整型数( An integer) int a; //b) 一个指向整型数的指针( A pointer to ...

  3. html中编写js的方式

    第一种:引用外部的js文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http ...

  4. C#自定义List类

    代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespac ...

  5. Vi操作技巧

    Vi操作技巧: :nu    显示当前所在行的行号 :set nu    显示全部行号 :set nonu        取消显示行号 /字符串    查询字符串,按n查询下一个,按N查询上一个 持续 ...

  6. Excel01-不同的单元格输入同一数据

    第一步:按住Ctrl键,选择不同的单元格 第二步:选择完最后一个单元格后,输入需要的数据“YES”,按Ctrl+Enter键结束. 提示:按Ctrl+; 输入当前日期,再按ctrl+Enter实现全部 ...

  7. CentOS下配置SMTP

    在服务器上配置一个SMTP邮件服务可能是在日常工作中经常会遇到的需要,比如在做一些简单测试的时候. 配置步骤无比简单,废话不说: 1,yum -y install mail 2,编辑/etc/mail ...

  8. java新版中唤醒指定线层对象

    import java.util.concurrent.locks.*; class Do9 { public static void main(String[] args) { Resource r ...

  9. （原）torch中微调某层参数

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6221664.html 参考网址: https://github.com/torch/nn/issues ...

  10. Linux下添加磁盘创建lvm分区

    shell> fdisk /dev/xvdb #### 选择磁盘 Command (m for help): m #### 帮助 Command action a toggle a bootab ...