spring+thymeleaf实现表单验证数据双向绑定

前言

  这个科目介绍了Thymeleaf与Spring框架的合并,特别是SpringMvc框架。
  注意Thymeleaf支持及Spring框架的3.跟4.版的并轨,但是这半单版的支撑是查封装在thymeleaf-spring3和thymeleaf-spring4顿时简单个单身的库中,项目受到需要依据实际情形分别引用。
  样例代码针对的凡spring4.,但一般景象下,spring3.也可以无缝使用,所要之唯有是移一下引用库。

1 Thymeleaf同Spring的整合
  Thymeleaf与Spring进行规整并后,可以以SpringMVC应用被完全代替JSP文件。
合后您拿:
  *就是比如控制JSP一样,使用SpringMvc的@Controller注解来映射Thymeleaf的模版文件。
  *当模板被采用SpringEL表达式来替换OGNL
  *在模板被开创的表单,完全支持Beans和结果的绑定,包括以PropertyEditor,转换,和验证等。
  *可以经过Spring来保管国际化文件显示国际化信息。
  *在意,在以仍学科之前,您该充分了解Thymeleaf的业内方言。

2 Spring标准方言
  为了更有益于,更速的拼,Thymeleaf提供了同效仿能够与Spring正确工作之蓄意方言。
  这套方言基于Thymeleaf标准方言实现,它当接近 org.thymeleaf.spring.dialect.SpringStandardDialect 中,事实上,他累给 org.thymeleaf.standard.StandardDialect 中。

而外已起在正规方言中之具备功能,Spring中还有以下特点:
  *勿适用OGNL,而是SpringEL做得了变量表达式,因此,所有的${…}和*{…}表达式将故Spring的表达式引擎进行拍卖。
  *访使context中的beans可以下SpringEL语法:${@myBean.doSomething()}
  *依据表格处理的新属性:th:field,th:errors和th:errorclass,除此还有一个th:object的初实现,允许她采用表单命令选择器(??)。
  *一个初的表达式:#themes.code(…),相当给jsp自定义标签中的spring:theme。
  *当spring4.0汇聚成被的一个新的表达式:#mvc.uri(…),相当给jsp自定义标签中之spring:mvcUrl(…)
顾,上述这些方言特性是休可知重复平常的TemplateEngine对象被动用的,应该安排一个org.thymeleaf.spring4.SpringTemplateEngine来执行。

  其他thymeleaf基础运用办法有无在叙。

创表单
处理命令对象
  SpringMVC的表单支持bean就是令对象,这个目标通过对象领域模型的艺术供get和set方法,在浏览器建立获取用户输入值的输入框架。

  Thymeleaf需要您来得的当form标签内通过th:object属性指定命令对象:

1 <form action="#" th:action="@{/seedstartermng}" th:object="${seedStarter}" method="post">
2 ...
3 </form>

  这个th:object与任何的之地方用是直的,但是其实在这种特定情景下,为了与SpringMVC框架的没错结合增加了一部分特定的限制:
  1.在form标签中的th:object的值必须是变量表达式(…),只能指定属性模型属性之名,而不可知用性能导航,这表示,表达式…),只能指定属性模型属性之讳,而休能够采取性能导航,
立即表示,表达式 {seedStarter}是是的,而${seedStarter.data}则免是。
  2.一个form标签内只能指定一个th:object属性,这同html中form标签不克嵌套的性状相平等。

input
  下面是怎样以一个input插入到表单中

<input type="text" th:field="*{datePlanted}" />

  正象上边的代码所示,新增了一个 th:field 的性质,这是SpringMVC集成的一个要害特色,它拉您就了表单bean和输入框中的重的绑定工作。可以看看他在from中之路径属性与SpringMVC的jsp标签库一样。
   th:field 属性的差行为在它所附加的例外标签,包括 <input> , <select> 或 <textarea> (还连标签的不等type属性类型),在这种情景下,时间达点哪行代码会是如此的:

<input type="text" id="datePlanted" name="datePlanted" th:value="*{datePlanted}" />

  事实上,可能较上的代码还要多片东西,因为 th:field 还可能会见报一个Spring的更换服务,包括前我们看看底 DateFormatter (甚至这表达式中莫动用对大括哀号),因此,这个日期呢将给科学的格式化。
   th:field 的价值必须下选择表达式,这样用在这个环境中应用表单bean,而非是上下文变量或SpringMVC的范属性。
  相反对 th:object 这类似,它的表达式可以采用性质导航(事实上在JSP的 <form:input 标签中,可以动用其他的路子属性表达式)
留意th:field属性也堪以HTML5的底初添项目受到动用,如 <input type=”datetime”> , <input type=”color”> 等,有效之充实了针对SpringMVC对HTML5支持的完整性。

复选框
 th:field 也可以为此当 checkbox 中,比如如下代码:

1 <div>
2    <label th:for="${#ids.next('covered')}" th:text="#{seedstarter.covered}">已种植</label>
3    <input type="checkbox" th:field="*{covered}" />
4 </div>

  注意这里来一对除了复选框之外的好东西,比如外表label和它用的 #ids.next(“covered”) 方法,用于当该id的复选框执行的时刻获得其的id值。
那为什么咱们需要是字段的id属性动态变化也?因为复选框可能是多值的,因此它们会受id值添加一个序列号后缀(内部使用 #ids.seq(…) 函数)来确保同一属性的复选框有差之id值。

咱俩可望多值的复选框:

1 <ul>
2   <li th:each="feat : ${allFeatures}">
3     <input type="checkbox" th:field="*{features}" th:value="${feat}" />
4     <label th:for="${#ids.prev('features')}" 
5         th:text="#{${'seedstarter.feature.' + feat}}">Heating</label>
6   </li>
7 </ul>

  注意这次咱们多了一个 th:value 属性,因为这次的特色性不是一个布尔值,而是一个数组。

诚如景象下,它的出口为:

 1 <ul>
 2   <li>
 3     <input id="features1" name="features" type="checkbox" 
 4          value="SEEDSTARTER_SPECIFIC_SUBSTRATE" />
 5     <input name="_features" type="hidden" value="on" />
 6     <label for="features1">Seed starter-specific substrate</label>
 7   </li>
 8   <li>
 9     <input id="features2" name="features" type="checkbox" 
10         value="FERTILIZER" />
11     <input name="_features" type="hidden" value="on" />
12     <label for="features2">Fertilizer used</label>
13   </li>
14   <li>
15     <input id="features3" name="features" type="checkbox" 
16         value="PH_CORRECTOR" />
17     <input name="_features" type="hidden" value="on" />
18     <label for="features3">PH Corrector used</label>
19   </li>
20 </ul>

  我们可见到一个阵后缀增加在各国一个id的性被, #ids.prev(….) 函数允许我们拿检索最后一个列值,生成的一个特定的id。
用不着担心那些隐藏域的称为”_features”:这是以避免浏览器将未入选的复选框的价当表单提交是绝非自行发送而故意抬高的。
尚应注意到,如果我们的表单bean中之feature属性已经包含了有的特定的价,那么th:field还拿会自行在对应的竹签中加进checked=”checked”属性。

单选框
  单选框的用法及一个非布尔值的多选框使用办法接近,只是他莫是多选:

1 <ul>
2   <li th:each="ty : ${allTypes}">
3     <input type="radio" th:field="*{type}" th:value="${ty}" />
4     <label th:for="${#ids.prev('type')}" th:text="#{${'seedstarter.type.' + ty}}">Wireframe</label>
5   </li>
6 </ul>

 

下拉列表
  下拉列表包含两独片:<select>标签和它们富含的<option>标签。在开立这种表单域的时光,只有<select>标签需要导入th:field属性,但 th:value 属性却以 <option> 标签中非常主要,因为他俩提供了目前选选择框的选取(使用和非布尔复选框和单选框类似之招数)

运用项目作为下拉列表:

1 <select th:field="*{type}">
2     <option th:each="type : ${allTypes}" 
3         th:value="${type}" 
4         th:text="#{${'seedstarter.type.' + type}}">Wireframe</option>
5 </select>

  这段代码理解起来颇爱,只是专注属性优先级为我们得在option标签内利用th:each属性。

动态域
  由于SpringMVC的高档表单绑定功能,使得我们好动用复杂的SpringEL表达式来绑定动态表单域到表单bean中。这将许我们于 SeedStarter
bean 中创造一个新的Row对象,并将以此row的域添加到用户请求的form中。

  为了好及时一点,我们需要以控制器中提供部分新的映射方法,它用因我们的特定请求的参数来支配添加或删除一行我们定义之.

 1 @RequestMapping(value="/seedstartermng", params={"addRow"})
 2 public String addRow(final SeedStarter seedStarter, final BindingResult bindingResult) {
 3     seedStarter.getRows().add(new Row());
 4     return "seedstartermng";
 5 }
 6 
 7 @RequestMapping(value="/seedstartermng", params={"removeRow"})
 8 public String removeRow(
 9     final SeedStarter seedStarter, final BindingResult bindingResult, 
10     final HttpServletRequest req) {
11     final Integer rowId = Integer.valueOf(req.getParameter("removeRow"));
12     seedStarter.getRows().remove(rowId.intValue());
13     return "seedstartermng";
14 }

今给form添加一个动态table

 1 <table>
 2   <thead>
 3     <tr>
 4       <th th:text="#{seedstarter.rows.head.rownum}">Row</th>
 5       <th th:text="#{seedstarter.rows.head.variety}">Variety</th>
 6       <th th:text="#{seedstarter.rows.head.seedsPerCell}">Seeds per cell</th>
 7       <th>
 8         <button type="submit" name="addRow" th:text="#{seedstarter.row.add}">Add row</button>
 9 </th>
10     </tr>
11   </thead>
12 <tbody>
13   <tr th:each="row,rowStat : *{rows}">
14     <td th:text="${rowStat.count}">1</td>
15     <td>
16       <select th:field="*{rows[__${rowStat.index}__].variety}">
17       <option th:each="var : ${allVarieties}" 
18             th:value="${var.id}" 
19             th:text="${var.name}">Thymus Thymi</option>
20       </select>
21     </td>
22     <td>
23       <input type="text" th:field="*{rows[__${rowStat.index}__].seedsPerCell}" />
24     </td>
25     <td>
26       <button type="submit" name="removeRow" 
27              th:value="${rowStat.index}" th:text="#{seedstarter.row.remove}">Remove row</button>
28     </td>
29    </tr>
30   </tbody>
31 </table>

  这里出现了好多事物,但还不难理解,除了就无异句:

1 <select th:field="*{rows[__${rowStat.index}__].variety}">
2 ...
3 </select>

  如果您记忆Thymeleaf教程,那么当明白 __${…}__ 是相同种植预处理表达式的语法。这是一个当处理任何表达式之前的里表达式,但为何用这种方式凭定行的目录呢,下面这种办法不行么:

1 <select th:field="*{rows[rowStat.index].variety}">
2     ...
3 </select>

  嗯事实上,是很的,他的题目是SpringEL表达式不执行数值中括号里的表达式变量,索引执行上的口舌时,会拿走一个左的结果,就是字面形式之 row[rowStat.index]  (而不是 row[0],row[1] )而未是行集合中的正确性位置,这虽是为什么以这里需要先处理。
  让咱们看看发生的html后依”添加行”按钮几不良:

 1 <tbody>
 2   <tr>
 3     <td>1</td>
 4     <td>
 5       <select id="rows0.variety" name="rows[0].variety">
 6         <option selected="selected" value="1">Thymus vulgaris</option>
 7         <option value="2">Thymus x citriodorus</option>
 8         <option value="3">Thymus herba-barona</option>
 9         <option value="4">Thymus pseudolaginosus</option>
10         <option value="5">Thymus serpyllum</option>
11       </select>
12     </td>
13     <td>
14       <input id="rows0.seedsPerCell" name="rows[0].seedsPerCell" type="text" value="" />
15     </td>
16     <td>
17       <button name="removeRow" type="submit" value="0">Remove row</button>
18     </td>
19   </tr>
20   <tr>
21     <td>2</td>
22     <td>
23       <select id="rows1.variety" name="rows[1].variety">
24         <option selected="selected" value="1">Thymus vulgaris</option>
25         <option value="2">Thymus x citriodorus</option>
26         <option value="3">Thymus herba-barona</option>
27         <option value="4">Thymus pseudolaginosus</option>
28         <option value="5">Thymus serpyllum</option>
29       </select>
30     </td>
31     <td>
32        <input id="rows1.seedsPerCell" name="rows[1].seedsPerCell" type="text" value="" />
33     </td>
34     <td>
35       <button name="removeRow" type="submit" value="1">Remove row</button>
36     </td>
37   </tr>
38 </tbody>

 

证实和错误信息
  让我们省当有错的当儿如何给一个表明单域一个CSS类:

1 <input type="text" th:field="*{datePlanted}" 
2            th:class="${#fields.hasErrors('datePlanted')}? fieldError" />

  可以看到, #fields.hasErrors(…) 函数接受一个表达式参数(datePlanted),返回一个布尔值告诉field该字段是否来说明错误。
咱们得依据他们各自的field获取有的不当:

1 <ul>
2       <li th:each="err : ${#fields.errors('datePlanted')}" th:text="${err}" />
3 </ul>

  通过迭代,我们得采用 th:errors ,一个专门用于创造一个由此制定选择器筛选的错误列表的性质,通过    分隔。

1 <input type="text" th:field="*{datePlanted}" />
2 <p th:if="${#fields.hasErrors('datePlanted')}" th:errors="*{datePlanted}">Incorrect date</p>

 

大概错误基础css样式,th:errorclass
  以上方的例证中,如果字段有错,将为表单的input域设置一个css类,因为这种方式要命广泛,Thymeleaf提供了一个一定的性也  th:errorclass 
  应用为form域的标签(input,select,textarea等),它用于现有的name属性或th:field属性字段的名词相同的习性,如果产生误,则拿制定的css类追加至标签中。

<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />

  如果datePlanted发生误,则: 

<input type="text" id="datePlanted" name="datePlanted" value="2013-01-01" class="small fieldError" />

 

成套左
  如果我们怀念如果在form中展示所有的荒谬为?我们一味需要经’*’或’all'(等价)来查询 #field.hasErrors(…) 方法和 #field.errors(…) 方法:

1 <ul th:if="${#fields.hasErrors('*')}">
2     <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
3 </ul>

  在上的事例中,我们收获有的左并迭代他们:

1 <ul>
2     <li th:each="err : ${#fields.errors('*')}" th:text="${err}" />
3 </ul>

树一个缘<Enter>分隔的列表:

1 <p th:if="${#fields.hasErrors('all')}" th:errors="*{all}">Incorrect date</p>

  最后,注意 #field.hasErrors(“”) 等效的属于性 #fields.hasAnyErrors() 和 #fields.errors() 的相同的 #fields.allErrors() ,可以下好的其他语法。

1 <div th:if="${#fields.hasAnyErrors()}">
2     <p th:each="err : ${#fields.allErrors()}" th:text="${err}">...</p>
3 </div>

 

大局错误
  Spring表单还生同一种错误,全局错误,都是把未跟窗体的外特定字段关联的荒谬。
  Thymeleaf提供了一个global的常量来拜访这些不当。

1 <ul th:if="${#fields.hasErrors('global')}">
2     <li th:each="err : ${#fields.errors('global')}" th:text="${err}">Input is incorrect</li>
3 </ul>

Incorrect date以及同样的 #field.hasGlobalErrors() 和 #field.globalErrors() 方法。

1 <div th:if="${#fields.hasGlobalErrors()}">
2     <p th:each="err : ${#fields.globalErrors()}" th:text="${err}">...</p>
3 </div>

 

当表单外部显示错误
表单验证错误吗得以于表单外部显示,方法是经过变量(即${…})的中甄选变量(*{…})增加表单bean的名字作前缀的法子。

 1 <form>
 2     <div th:errors="${myForm}">...</div>
 3     <div th:errors="${myForm.date}">...</div>
 4     <div th:errors="${myForm.*}">...</div>
 5     <div th:if="${#fields.hasErrors('${myForm}')}">...</div>
 6     <div th:if="${#fields.hasErrors('${myForm.date}')}">...</div>
 7     <div th:if="${#fields.hasErrors('${myForm.*}')}">...</div>
 8     <form th:object="${myForm}">
 9     ...
10 </form>

 

 

富国错误对象
  Thymeleaf提供了坐bean的样式(代替单纯的String)提供错误信息的力量,包括fieldName(String),message(String),和global(String)属性之缪。这些错可以通过工具方法#fields.datailedErrors()来实现:

1 <ul>
2   <li th:each="e : ${#fields.detailedErrors()}" th:class="${e.global}? globalerr : fielderr">
3     The field name |
4     The error message
5   </li>
6 </ul>

 

变服务
 配置
  就如前和所说,Thymeleaf可以在上下文中注册一个变换服务,再次看一下客的配备信息

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <beans ...>
 3     ... 
 4     <mvc:annotation-driven conversion-service="conversionService" />
 5 ...
 6 <!-- **************************************************************** -->
 7 <!-- CONVERSION SERVICE -->
 8 <!-- Standard Spring formatting-enabled implementation -->
 9 <!-- **************************************************************** -->
10   <bean id="conversionService"
11 class="org.springframework.format.support.FormattingConversionServiceFactoryBean">
12   <property name="formatters">
13   <set>
14      <bean class="thymeleafexamples.stsm.web.conversion.VarietyFormatter" />
15      <bean class="thymeleafexamples.stsm.web.conversion.DateFormatter" />
16      </set>
17     </property>
18   </bean>
19 ...
20 </beans>

 

${{…}}语法
  转换服务得由此 ${{…}} 语法大自在的落实目标及字符串的转换或格式化:
变量语法 ${{…}} 
择变量语法 *{{…}} 
  例如,将一个Integer型转换为字符串类型,并透过逗号来分隔:

1 <p th:text="${val}">...</p>
2 <p th:text="${{val}}">...</p>

回来结果吗:

1 <p>1234567890</p>
2 <p>1,234,567,890</p>

 

 

表单中应用
  我们前看来底每一个th:field属性都以尽用转换服务:

<input type="text" th:field="*{datePlanted}" />

等效于:

<input type="text" th:field="*{{datePlanted}}" />

小心及时是唯一一种于表达式中使单大括号的变服务。

 

#conversions工具对象
conversions工具对象表达式允许手动执行转换服务:

<p th:text="${'Val: ' + #conversions.convert(val,'String')}">...</p>

工具对象表达式的语法为:
 conversions.convert(Object,Class) :将目标转换为指定的好像
 conversions.convert(Object,String) :和上面相同,但是指定的靶子吗String类(java.lang包名可以大概)

 

渲染片段模板
  Thymeleaf提供了以一个模板就渲染一部分,并当一个有的返回的力。

眼看是一个死实惠的组件化工具,比如,它可用于实践AJAX的Controller的调用,用于在早就加载的浏览器被回到一个有标签(如用于更新选择,启用禁用按钮等)。

部分渲染可以采用Thymeleaf的有些规范:一个实现了 org.thymeleaf.fragment.IFragmentSpec 接口的对象。

不过常用的一个实现是 org.thymeleaf.standard.fragment.StandardDOMSelectorFragmentSpec 类,它同意一个片段规范包括之前说罢之th:insert,th:replace使用DOM选择器。

  每当视图bean中指定片段
观看图bean是以应用程序上下文中宣示的 org.thymeleaf.spring4.view.ThymeleafView 的bean,它同意这样定义一个片段:

1 <bean name="content-part" class="org.thymeleaf.spring4.view.ThymeleafView">
2     <property name="templateName" value="index" />
3     <property name="fragmentSpec">
4 <bean 
5  class="org.thymeleaf.standard.fragment.StandardDOMSelectorFragmentSpec"
6 c:selectorExpression="content" />
7 </property>
8 </bean>

 

通过上的bean的定义,如果controller返回一个content-part(bean的名),

1 @RequestMapping("/showContentPart")
2 public String showContentPart() {
3     ...
4     return "content-part";
5 }

Thymeleaf将单纯回去index模板的content片段。一旦前缀后缀都设置并配合,那么其恐怕啊/WEB-INF/templates/index.html,

 1 <!DOCTYPE html>
 2 <html>
 3   ...
 4   <body>
 5     ...
 6     <div th:fragment="content">
 7        只有这里渲染!!
 8     </div>
 9   ...
10   </body>
11 </html>

  另外当专注到,因为Thymeleaf可以动用DOM选择器,所有我们得无用外 th:fragment 属性,而独自所以id属性来选一个片,如:

1 <bean name="content-part" class="org.thymeleaf.spring4.view.ThymeleafView">
2   <property name="fragmentSpec">
3 <bean class="org.thymeleaf.standard.fragment.StandardDOMSelectorFragmentSpec"
4 c:selectorExpression="#content" />
5   </property>
6   <property name="templateName" value="index" />
7 </bean>

如出一辙统筹兼顾的适用:

 1 <!DOCTYPE html>
 2 <html>
 3   ...
 4  <body>
 5   ...
 6     <div id="content">
 7       只有这里渲染!!
 8     </div>
 9   ...
10   </body>
11 </html>

 

经控制权的返回值指定片段
  不声明一个视图bean,可以打控制器自己不怕足以行使与局部相同之语法,类似于th:insert,th:rplace属性等,如:

1 @RequestMapping("/showContentPart")
2 public String showContentPart() {
3     ...
4     return "index :: content";
5 }    

  当然,同样好下基于DOM选择器的效益,所有我们呢得以是选取用基于专业的HTML属性,如id=”content”

1 @RequestMapping("/showContentPart")
2 public String showContentPart() {
3     ...
4     return "index :: #content";
5 }

为堪运用参数:

1 @RequestMapping("/showContentPart")
2 public String showContentPart() {
3     ...
4     return "index :: #content ('myvalue')";
5 }

 

 

与RequestDataValueProcessor集成
  现在Thymeleaf无缝的同Spring的RequestDataValueProcessor接口集成,这个接口允许拦截链接URLS,表达URLS和表达域的价,以及为了启用安全,如敌CSRF而自动透明底丰富有的隐藏域。

以使用的前后文中可以大概的布RequestDataValueProcessor:

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <beans xmlns="http://www.springframework.org/schema/beans"
 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 4 xsi:schemaLocation="http://www.springframework.org/schema/beans
 5 http://www.springframework.org/schema/beans/spring-beans-3.1.xsd">
 6 
 7 ...
 8 
 9 <bean name="requestDataValueProcessor"
10 class="net.example.requestdata.processor.MyRequestDataValueProcessor" />
11 
12 </beans>

Thymeleaf将经过这种办法采取其:

  于渲染URL之前,th:href和th:src将会见调用 RequestDataValueProcessor.processUrl(…) 
  在渲染表单的action属性之前,th:action会调用 RequestDataValueProcessor.processAction(…) ,另外他会晤检查标签,因为相似的话就是利用action的绝无仅有一个地方,并且在的倒闭标签之前实施 RequstDataValueProcessor.getExtraHiddenFields(…) 用来新长返回的hidden域。

  以渲染value属性之前,th:value会调用 RequestDataProcessor.processFormFieldValue(…) ,除非在这标签中有了th:field(这时候th:field属性起作用)
  当是th:field的时,在渲染value属性之前会调用 RequestDataValueProcessor.processFormFieldValue(…) 处理是属于性值(<textarea>处理内容值)
  此功效只有Spring3.x以后采取

 

绑定地址及Controller
  以Spring4.1之后的版中,Spring允许通过注解直接由从视图链接到控制器,而未欲了解这些控制器映射的URI.

  以Thymeleaf中可以经过 #mvc.url(…) 表达式方法调用Controller中符合驼峰命名规则之计(get,set),调用的艺术啊计的名字,即一定给jsp的spring:mvcUrl(…)自定义方法。

比如

1 public class ExampleController {
2   @RequestMapping("/data")
3   public String getData(Model model) { ... return "template" }
4       @RequestMapping("/data")
5       public String getDataParam(@RequestParam String type) {
6            ...
7           return "template" }
8 }

 

下是一个链条接到她的办法:

1 <a th:href="${(#mvc.url('EC#getData')).build()}">获取Data参数</a>
2 <a th:href="${(#mvc.url('EC#getDataParam').arg(0,'internal')).build()}">获取Data参数</a>

Spring WebFlow的集成
  基本功配置
  Thymeleaf-spring4集成包包括与Spring WebFlow 2.3.x之融会

  WebFlow包括当特定的波(过渡)被触发时渲染页面片段的组成部分Ajax的职能,未来吃Thymeleaf参加这些Ajax请求,我们拿采取一个无经过之视图解析器的实现,它这样安排:

1 <bean id="thymeleafViewResolver" class="org.thymeleaf.spring4.view.AjaxThymeleafViewResolver">
2   <property name="viewClass" value="org.thymeleaf.spring4.view.FlowAjaxThymeleafView" />
3   <property name="templateEngine" ref="templateEngine" />
4 </bean>

  然后在ViewResolver中配置WebFlow的 ViewFactoryCreator .

1 <bean id="mvcViewFactoryCreator" 
2 class="org.springframework.webflow.mvc.builder.MvcViewFactoryCreator">
3   <property name="viewResolvers" ref="thymeleafViewResolver"/>
4 </bean>

  在此间可以指定模板的视图状态

1 <view-state id="detail" view="bookingDetail">
2     ...
3 </view-state>

  在上面的实例中,bookingDetail是Thymeleaf模板通常采用的一个方,是模板引擎内任何模板解析器都可掌握的

 

 

Ajax片段
  WebFlow的局部规范允许有的通过标签呈现,就比如这么:

1 <view-state id="detail" view="bookingDetail">
2   <transition on="updateData">
3     <render fragments="hoteldata"/>
4   </transition>
5 </view-state>

  这些片段(即hoteldata)可以是逗号分隔的列表标记在th:fragment标签中。

1 <div id="data" th:fragment="hoteldata">

  这里内容替换</div>

  世世代代记住,指定的局部必须有一个id属性,这样浏览器运行的SpringJavaScript库才会对标签进行替换。

*  *

*  *标签,也可经过DOM选择器设定

1 <view-state id="detail" view="bookingDetail">
2   <transition on="updateData">
3     <render fragments="[//div[@id='data']]"/>
4   </transition>
5 </view-state>

  这将象征th:fragment不在急需:

1 <div id="data">
2     This is a content to be changed
3 </div>

  而出发updateData后换的代码:

 1 <script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
 2 <script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
 3 <script type="text/javascript" th:src="@{/resources/spring/Spring-Dojo.js}"></script>
 4 
 5 ...
 6 
 7   <form id="triggerform" method="post" action="">
 8     <input type="submit" id="doUpdate" name="_eventId_updateData" value="Update now!" />
 9   </form>
10 
11 <script type="text/javascript">
12      Spring.addDecoration(
13          new Spring.AjaxEventDecoration({
14               formId:'triggerform',
15               elementId:'doUpdate',
16               event:'onclick'
17         }));
18 </script>

 

 

转载: 

相关文章