本文对比了同一Spring MVC工程中相同页面(一个订阅表单)分别采用Thymeleaf和JSP(包括JSP、JSTL、Spring tag lib)两种方式的实现。
本文的所有代码来自一个可运行的应用。你可以从文档页面下载该应用程序的源代码。
Common requirements
顾客通过一个表单添加到消息列表中,包含下面两个域:
Email地址
订阅类型(接收所有邮件、每日摘要)
要求该页面支持HTML5且完全国际化,国际化信息从Spring框架中配置的MessageSource对象中抽取所有的文本和消息。
该应用包含两个@Controller,二者含有相同的代码,只是跳转到不同的view:
SubscribeJsp用于JSP页面(subscribejsp视图)
SubscribeTh用于Thymeleaf页面(subscribeth视图)
在模型(model)中包含下列类:
Subscription:form-backing bean,包含两个域:String email和SubscriptionType subscriptionType。
SubscriptionType:一个枚举类型,表单中subscriptionType域的值,可取的值包含ALL_EMAILS和DAILY_DIGEST。
(本文我们仅关注JSP和Thymeleaf模板代码的讨论。如果你想了解controller代码和Spring配置的实现细节,请自行查看下载包中的源代码)
使用JSP实现(Doing it with JSP)
这是页面:
下面是JSP代码,使用了JSTL(core)和Spring(tags和form) JSP标签库:
< %@ taglib prefix = "sf" uri = "http://www.springframework.org/tags/form" % > < %@
taglib prefix = "s" uri = "http://www.springframework.org/tags" % > < %@
taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" % > < %@
page contentType = "text/html; charset=UTF-8" pageEncoding = "UTF-8" % > >
< html >
< head >
< title > Spring MVC view layer: Thymeleaf vs. JSP title >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />
< link rel = "stylesheet" type = "text/css" media = "all" href = " " />
head >
< body >
< h2 > This is a JSP h2 >
< s:url var = "formUrl" value = "/subscribejsp" />
< sf:form modelAttribute = "subscription" action = "${formUrl}" >
< fieldset >
< div >
< label for = "email" > < s:message code = "subscription.email" /> : label >
< sf:input path = "email" />
div >
< div >
< label > < s:message code = "subscription.type" /> : label >
< ul >
< c:forEach var = "type" items = "${allTypes}" varStatus = "typeStatus" >
< li >
< sf:radiobutton path = "subscriptionType" value = "${type}" />
< label for = "subscriptionType${typeStatus.count}" >
< s:message code = "subscriptionType.${type}" />
label >
li >
c:forEach >
ul >
div >
< div class = "submit" >
< button type = "submit" name = "save" > < s:message code = "subscription.submit" /> button >
div >
fieldset >
sf:form >
body >
html >
使用Thymeleaf实现(Doing it with Thymeleaf)
下面使用Thymeleaf实现相同的页面。页面如下:
下面是Thymeleaf代码:
>
< html xmlns:th = "http://www.thymeleaf.org" >
< head >
< title > Spring MVC view layer: Thymeleaf vs. JSP title >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />
< link rel = "stylesheet" type = "text/css" media = "all"
href = "../../css/thvsjsp.css" th:href = "@{/css/thvsjsp.css}" />
head >
< body >
< h2 > This is a Thymeleaf template h2 >
< form action = "#" th:object = "${subscription}" th:action = "@{/subscribeth}" >
< fieldset >
< div >
< label for = "email" th:text = "#{subscription.email}" > Email: label >
< input type = "text" th:field = "*{email}" />
div >
< div >
< label th:text = "#{subscription.type}" > Type: label >
< ul >
< li th:each = "type : ${allTypes}" >
< input type = "radio" th:field = "*{subscriptionType}" th:value = "${type}" />
< label th:for = "${#ids.prev('subscriptionType')}"
th:text = "#{'subscriptionType.'+${type}}" > First type label >
li >
< li th:remove = "all" > < input type = "radio" /> < label > Second Type label > li >
ul >
div >
< div class = "submit" >
< button type = "submit" name = "save" th:text = "#{subscription.submit}" > Subscribe me! button >
div >
fieldset >
form >
body >
html >
注意事项:
上述代码更加接近HTML——没有奇怪的标签,只是增加了一些有意义的属性。
变量表达式(${...})是Spring EL且在模型属性(model attributes)上执行,星号表达式(*{...})在form backing bean上执行,hash表达式(#{...})用于国际化,link表达式(@{...})重写URL。(如果想深入学习,参考 Getting started with the Standard Dialect in 5 minutes)。
这里允许使用原型代码(prototype code):例如,可以把第一个域的标签设置为Email:,而在页面执行时,Thymeleaf会根据subscription.email的值把它替换为国际化的文本。
我们甚至可以添加一个仅仅用于prototype。当Thymeleaf执行页面时将会被删掉。
改变页面风格(Let's change the page style)
假象我们写完了页面,但是我们突然想改变一下按钮周围的颜色:从绿色改为淡蓝色。我们不确定那种蓝色更加合适,因此我们需要多次尝试不同的颜色组合。
下面看一下采用JSP和Thymeleaf的实现方式:
采用JSP修改页面风格(Changing the page style using JSP)
第1步:将应用程序部署到开发服务器上,并启动服务器。如果服务器不启动,JSP页面不会渲染,因此这一步是必须的。
第2步:导航到需要修改的页面。通常情况下,需要修改的页面是该应用程序的所有页面中某一个,很有可能需要点击多个链接、提交多个表单、查询多次数据库后才能跳转到这个页面。
第3步:打开firebug、dragonfly或其他嵌入浏览器的web开发工具。通过这些工具我们可以修改页面风格,并直接作用到浏览器的DOM上,并显示给我们。
第4步:修改颜色。尝试多种颜色组合后,确定最合适的颜色。
第5步:复制修改过的代码,并粘贴到对应的CSS文件中。
完成!
采用Thymeleaf修改页面风格(Changing the page style using Thymeleaf)
第1步:双击.html模板文件,在浏览器中打开它。由于是Thymeleaf模板,它将会正常显示,采用模板/原型(template/prototype)数据(注意订阅类型选项):
第2步:使用文本编辑器打开.css文件。模板文件在其 标签中链接了CSS(Thymeleaf在执行模板时会把该标签中的href替换为th:href)。因此对CSS文件的修改会显示在页面中。
第3步:修改颜色。和采用JSP一样,我们仍然需要尝试多种不同的颜色组合,使用F5刷新页面。
完成!
重大区别(That was a big difference)
步骤数量的差别并不重要(在Thymeleaf的例子中也可以使用firebug)。真正重要的区别在于其复杂性,JSP方式中每一步骤需要花费的精力和时间。采用JSP,就必须部署并启动整个应用程序,这使得JSP不如Thymeleaf方便。
下列情形将进一步体现上述区别的意义:
开发服务器并不在本地,而是远程服务器。
不仅修改CSS,而且添加或删除了一些HTML代码。
还未实现页面所需的后台逻辑
最后一点是最重要的一点:如果应用程序仍在开发中,页面展示所需的Java逻辑还未完成的情况下,我们如何给客户展示新的颜色?(或者想让顾客选择颜色)...
使用JSP作为静态原型不行吗?(And what about trying to use the JSP as a static prototype? )
你可能会问,我们为什么要那么费事儿的修改JSP,像Thymeleaf一样直接打开JSP不行吗?
答案是:NO。
我们可以试一下:我们要把.jsp文件的后缀名改为.html,打开后结果如下图:
页面哪去了?其实页面还是那个页面。只是为了让页面以JSP的方式执行,我们要添加许多JSP标签和特性。但是改为HTML后,浏览器就无法正确的显示了。
再一次回顾一下双击Thymeleaf模板打开后的样子:
完全不是一个级别的了。。。
Got HTML5?
在一开始的时候,我们就说了我们的页面是HTML5的。那么为什么不使用一些HTML5表单相关的新特性呢?
例如, 标签可以让浏览器检查输入是否是合法的邮件格式。input标签还添加了一个新属性placeholder,它的值会默然显示在输入框中,焦点移到该输入框时自动消失。
不错吧?不幸的是,并非所有浏览器都支持(到2011年,Opera 11 和Firefox 4支持),但是我们可以安全的使用这些新特性,因为所有的浏览器在遇到不认识的input type(如email)时会默认把它看做text类型的input,并忽略placeholder属性。
Doing HTML5 with JSP
Spring 3.1之前
Spring MVC的JSP标签库在Spring3.1之前不能完全支持HTML5,因而在此之前不能写email type的input标签:
< input type = "email" id = "email" name = "email" placeholder = "your@email" value = "" />
这是不对的。在Spring MVC中不能这样写JSP input ,因为我们不能正确地把输入绑定到form-backing bean的email属性。为了实现这种功能,需要使用 标签,该标签将完成所有的转换,使纯HTML标签像 标签一样运行:
< input type = "email" id = "email" name = "email" placeholder = "your@email"
value = " " />
Spring3.1及之后
Spring3.1仍然没有标签,但是标签允许type属性的值为email:
< sf:input path = "email" type = "email" />
上述代码正确地完成了表单绑定
Doing HTML5 with Thymeleaf
Thymeleaf完全支持HTML5(即使是Spring3.0),因而我们只需修改input标签的type属性并添加placeholder属性,即可使用,它将会正确地绑定属性、集成到Spring MVC的属性编辑器,更为重要的是,显示为原型时也能正常显示——这是sf:input标签不支持的——
< input type = "email" th:field = "*{email}" placeholder = "your@email" />
完成!
博文转自:http://blog.csdn.net/kingzone_2008/article/details/19034615