和你编写代码相似，你编写的页面也能够由多个小的片段组合而成，这些小的片段本身也能够由更小的片段构成。这些小片段一般是能够在其他页面反复使用的：有些部分能够用在全部页面，而有些部分是某些页面特定的。本篇介绍怎样使用这些可重用的小模板来构成整个页面。
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. Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器

    1.概述 本篇博客的产生呢,是因为,群里的哥们暖暖给我发了个效果图,然后问我该如何实现顶部ViewPager指示器的字体变色,该效果图是这样的: 大概是今天头条的app,神奇的地方就在于,切换View ...

  2. Java基础知识强化61：经典查找之 常见查找算法小结

    一.顺序查找 条件:无序或有序队列. 原理:按顺序比较每个元素,直到找到关键字为止. 时间复杂度:O(n) 二.二分查找(折半查找) 条件:有序数组 原理:查找过程从数组的中间元素开始,如果中间元素正 ...

  3. CentOS6.X 系统安装图文教程，超详细

    http://www.myhack58.com/Article/sort099/sort0102/2011/32363_7.htm

  4. 通过 yum update 将系统从CentOS 6.2 升级到 CentOS 6.6 及升级过程中的简单排错

    本文说明 本文写于2014年的WP中,后WP停止维护,今天翻到此记录整理下,记录于此,方便日后查看. 话说那时候写博客真是认真啊~哈哈~ 升级前的系统信息 [root@thatsit ~]# unam ...

  5. Sass的控制命令（循环）

    @if@if指令是一个SassScript,它可以根据条件来处理样式块,如果条件为true返回一个样式块,反之false返回另一个样式块.在Sass中除了@if,还可以配合@else if和@else ...

  6. pd的django To do list 教程------（1）说明与展示

    1:开发环境:windows7+django1.8+Python2.7+mysql数据库 2:开发工具:pycharm 3:说明与展示 以上就是最后的页面,可以完成添加,删除,编辑,已完成(勾选che ...

  7. windows身份验证，那么sqlserver的连接字符串的

    Data Source=计算机名称或ip地址;Initial Catalog=数据库名称;Integrated Security=True windows身份验证不需要psw的Provider=SQL ...

  8. Fragment实现底部Tab，切换可保存状态

    activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...

  9. 华为oj 统计字符串不同字符

    #include <stdio.h> #include <string.h> int firstSingle(char *str) { int hash[128]={0}; f ...

  10. 爆炸！iOS资源大礼包(持续更新...)

    今天为大家整理了一些关于iOS学习的干货,献给正在奋斗的你们,首先声明一下,在整理的过程中参考了大量的博客和文章,知识的分享终究会增值,在此表示感谢,希望这篇文章给大家带来帮助. 基础部分: C语言教 ...