当前位置:首页 » 网站系统架构

play教程 第七课 View的用法 模版的用法

2015-09-17 14:49 本站整理 浏览(166)

view(视图)是play中MVC三大组件之一。

Play 框架有自己的模板引擎来生成HTML页面,该引擎使用 Groovy 做为表达式语言。Groovy和我们之前使用的JSTL表达式类似,在学习play过程中,无需学习Groovy 所有的知识,你需要了解的只是跟 Java 非常相近的一部分,够我们开发过程中使用即可。 Play所有的模板文件都放在 app/views 目录下,所有页面都是在请求时即时解析的。

-表达式

${...}
这就是表达式,例如

${student.name}

${totalcount}
这里要说明一点的是,有时候我们取出来的值会有html标签,尤其是在博客系统中,使用了Editor编辑器插件后,通常会有这种情况,但是play默认是过滤掉html标签的,如果需要,我们可以通过${content.raw()}来取消过滤,即在所取内容后面加一个”.raw()”。

-标签

play中的标签以“#”开头,需要注意的是,标签有开始标签就有结束标签,如
#{list items:users, as:'user'}
<li>${user}</li>
#{/list}

或者

#{if user.admin}
     <li>#{a @Application.admin()}Admin#{/a}</li>
#{/if}
#{else}
     <li>#{a @Application.admin()}Admin#{/a}</li>
#{/else}

-Actions

play中,我们可以用这种方式来写超链接

{a @Application.logout()}Logout#{/a}
当然了,这种方式也是可以的

<a href="/Application/logout">Logout</a>

-注释

这里有专门的注释标签{…}

-脚本

同样的,play的页面也可以向jsp那样写一些逻辑操作脚本,比如
%{ fullname = user.firstname + “ “ + user.lastname; }%
<h1>Welcome ${fullname}!</h1>

但是,我觉得为了代码美观,不到万不得已,还是不要这样做了,可以在后台处理的事情为什么要放到前台呢?

-模版

模版这个概念在play中又是一个亮点。模版的目的很简单,就是为了增强页面代码的复用性,提高开发效率。 当我们新建一个play项目后,会发现在views层有一个main.html,如果我们打开它,会发现其中的代码是这样的:

<html>
<head>
     <title>#{get 'title' /}</title>
</head>
<body>
     #{doLayout /}
</body>
</html>
我们新建一个hello.html文件,在其中写这样一段

#{extends 'main.html' /}
#{set title:'Home' /}
<h1>Hello World!</h1>
What is your name?
<form action="@{Application.sayHello()}" method="POST">
    <input type="text" name="myName" />
    <input type="submit" name="hello" value="Say hello!" />
</form>
那我们来分析一下这两个html文件,首先来看main.html,这里有两个关键点#{get ‘title’ /}和#{doLayout /}

#{get}顾名思义,这个标签是用来接收值的,有接收就有设定,那它对应的就是#{set};
#{doLayout/},按字面意思,这里应该是布局代码段,没错,我们在hello.html中的那一段正是填充到这里的。
那么play如何知道怎么填充呢?答案是用#{extends/}标签。

通过总结,我们发现play模版中的几个关键标签:

#{doLayout/}
#{extends/}
#{get/}
#{set/}
模版这个概念在实际开发过程中还是发挥了较大作用的,比如公用的header,公用的footer,公用的frame等。

-自定义标签

如果你喜欢在开发中定义自己的标签,那么可以这样做: 首先我们需要在views目录下创建名为 tags的子目录,例如我们创建一个 booklist.html 文件,存放在 views/tags 目录下, booklist.html 的代码如下:

<ul>
#{list items:_items, as:'book'}
%{
bookTitle = book.title.toUpperCase();
}%
<li>${bookTitle}</li>
#{/list}
</ul>
那我们在使用的时候可以这样来用:

#{booklist items:books /}
通过这种自定义标签,就大大提高了代码的复用性。