Play2 for Java(五:View)

Module 5 View

我们来看看Play!是怎么样构建视图的,比如将Controller(控制器)的Action(操作)的参数传递给view(视图)。我们将研究如何在视图中实现迭代和条件逻辑。最后,我们将研究如何在视图中访问Session和flash对象。

5.1 Play的View

在Play中视图有趣的一点是它完全是Scala,这并不意味着您需要理解Scala语言的复杂性。
同样,与build文件一样,Scala的灵活性意味着您可以将它当作最小的DSL来表达您的视图中的一些逻辑。
基于Scala的视图模板的优点是,我们可以再次获得type safe(类型安全性)和编译时语法检查,这是非常有用的,但在许多流行的MVC样式框架中非常少见。
同样,视图的编译步骤,如我们以前在路由中看到的,使我们能够生成源文件。这些可以与IDE一起使用,以支持开发时代码检查和自动完成,以及为在Controller(控制器)中的Action(操作)中呈现视图提供编程访问。
Play!的视图被配置为存在于app/views文件夹下,并具有.scala.html的双段扩展名。这些设置确保编译步骤可以限制并生成视图的源文件。

5.2 Static Views静态视图

通过简单的例子可以更好地解释视图,因此,我们直接上代码。
Step1:创建Controller

这里写图片描述

Step2:创建视图

这里写图片描述

Step3:router配置

这里写图片描述

Step4 运行

这里写图片描述

5.3 向view传递参数

Step1:Controller的Action

这里写图片描述

注意:肯定会报错,render()默认是无参的,我们说了,Play的View是会编译的,也就是说因为我们的view没有配置(在Step2中),编译的结果就是无参。一会我们修改了view,就不会报错了

Step2:view页面

这里写图片描述

①:首行需要配置该view的入参,你可以将这个view看做一个Scala的类,我们这里填的参数就是该类的实例属性。需要注意的是,这里的参数列表是按照Scala的语法来写,不能按照Java的语法来
②我们这里使用了name属性值,但是它需要和其他字符串拼接,那么就使用这种语法
③这里需要看的是for遍历,其实就是Scala的for语法,左边是遍历的临时值,右边是被遍历的列表,中间是<-符号。
④当需要直接使用属性值,而不做拼装的话,那么可以直接像图中这样@number即可哦~
Step3:router:
因为与上面的router一样,就不贴了。
Step4:刷新你的页面

这里写图片描述

5.4 条件判断

Step1:Controller的Action

这里写图片描述

Step2:修改view

这里写图片描述

这里讲的是条件判断的语法,即@if,应该不难,不讲了
Step3:router不需要改
Step3:刷新页面

这里写图片描述

5.5

正如我们之前看到的,在Play!中view是有效的代码。因此,即使是在其他视图中,它们也可以很容易地重用。这开辟两个新特性:
①partials
②layouts
Partials基本上是一些小块的视图代码,可以在不同的地方使用,但在一个地方定义。例如,假设我们有许多页面需要显示我们刚刚构建的1,2,3,...这个列表。如果我们只是在不同的页面上复制并粘贴这段代码,它不仅会创建许多重复的代码,而且会使维护变得异常困难,例如,更改当列表为空的时候显示的消息。在Play!中,如果你已经创建了另一个视图文件,你可以调用它,就像它是视图中可用的方法一样,事实上,它确实就是这样的。看下面代码分解:
Step:1 Controller

这里写图片描述

Step2: 创建partials

这里写图片描述

我们对view做了一定的修改,它的参数只有一个,就是一个List[String]的列表

Step3: view

这里写图片描述

这里我们对参数的名字做了修改,不要使用相同的参数名,否则会报错的。
Step4: router 不变
Step5:刷新页面

这里写图片描述

很明显我们成功了~~


同样的原理可以用来实现通常被称为layouts(布局)的东西。当我们浏览我们的网站时,我们的绝大多数页面不太可能改变。我们的主题、标题和总体布局将保持不变,但主要内容可能会改变。这意味着将普通的样板文件重构为一个布局文件,并允许视图专注于呈现自己的内容通常是个好主意。所以让我们用partial 的抽,从视图中分离出head和body。我们用代码来分解步骤:
Step1: 创建layouts.scala.html(名字不重要)

这里写图片描述

Step2:view

这里写图片描述

Step3 刷新页面
不放截图了,与上面的一致

5.6 Session

对于Session,下面以代码分解
Step1::在Action中的java代码中操作Session

这里写图片描述

我们在Session中存了一个叠加器

Step2:view

这里写图片描述

Step3 刷新页面

这里写图片描述

Step4: 再次刷新页面

这里写图片描述

5.7 字符串Html

当我们传递进view的字符串中带有Html元素时候,是无法直接展示的,我们需要借助@Html来做:
Step1:

这里写图片描述

我们在字符串中加了一个<span>哈哈</span>
Step2 view:

这里写图片描述

Step3:刷新页面

这里写图片描述

5.8 静态资源

分两种方式:
方式一:路径方式
在默认router文件中,已经为我们配置了静态资源的映射:

这里写图片描述

我们可以看到,只要是以/assets开始的路径,就会被映射到我们项目中的public文件夹中的静态资源上。

这里写图片描述

上图是以路径的方式配置的静态资源引用

方式二:代码形式

这里写图片描述

用如上的方式来引用静态资源,一样是可以的。当然需要注意,不要加/,会多出来一个/

猜你喜欢

转载自blog.csdn.net/qq_31179577/article/details/78734718