和你编写代码相似，你编写的页面也能够由多个小的片段组合而成，这些小的片段本身也能够由更小的片段构成。这些小片段一般是能够在其他页面反复使用的：有些部分能够用在全部页面，而有些部分是某些页面特定的。本篇介绍怎样使用这些可重用的小模板来构成整个页面。
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. OD: Memory Attach Technology - Off by One, Virtual Function in C++ & Heap Spray

    Off by One 根据 Halvar Flake 在“Third Generation Exploitation”中的描述,漏洞利用技术依攻击难度从小到大分为三类: . 基础的栈溢出利用,可以利用 ...

  2. 在div+css中用到的js代码注意return

    今天做了一个项目,美工做好后放在了form中(没有加runat=server),由于用到了服务器控件,所以这里要加,否则报错,关键一段div代码是: <form id="form_re ...

  3. （转）c#缓存介绍

    在 ASP.NET 提供的许多特性中,缓存支持无疑是最值得欣赏的特性.相比 ASP.NET 的所有其他特性,缓存对应用程序的性能具有最大的潜在影响,利用缓存和其他机制,ASP.NET 开发人员可以接受 ...

  4. iOS_SN_CoreDate(一)封装使用

    看过一篇封装CoreData的文章挺不错,有基本使用封装,但是没有写怎么与tableView结合使用,我自己用的过程有些小波折,自己做了一个demo,大家可以看源码一些基本使用应该不难了, 原文:ht ...

  5. 高性能ORM框架XLinq功能详细介绍

    之前简单介绍了XLinq的一些功能,有很多功能都没有提到,现在给XLinq加了一些功能,这次把所有功能都介绍一遍. 设计目标 易用性 在使用一个框架的时候 应该没几个人会喜欢写一大堆的配置文件吧 也应 ...

  6. C#使用多态求方形面积周长和圆的面积周长

    class class1 { public static void Main(string[] args) { //使用多态求矩形面积与周长和圆的面积与周长 Shape cl = ); double ...

  7. Sudoku Killer

    算法:深搜 自从2006年3月10日至11日的首届数独世界锦标赛以后,数独这项游戏越来越受到人们的喜爱和重视. 据说,在2008北京奥运会上,会将数独列为一个单独的项目进行比赛,冠军将有可能获得的一份 ...

  8. hdu 1711 Number Sequence（KMP模板题）

    我的第一道KMP. 把两个数列分别当成KMP算法中的模式串和目标串,这道题就变成了一个KMP算法模板题. #include<stdio.h> #include<string.h> ...

  9. mongodb安装指南

    mongodb安装 1.解压mongodb-win32-i386-1.8.1.zip ,创建路径C:\Program Files\mongodb ,将解压后的Bin文件Copy to 此文件夹下 2. ...

  10. C# 读取EXCEL数据

       /// <summary> /// 读取EXCEL数据 /// </summary> /// <param name="Path">< ...