第6章-渲染WEB视图

渲染WEB视图

学习内容

将模型数据渲染为HTML

使用JSP视图

通过tiles定义视图布局

使用Thymeleaf视图

创建JSP视图

Spring提供了两种支持JSP视图的方式：

InternalResourceViewResolver会将视图名解析为JSP文件。另外如果你的JSP页面中使用了JSP标准标签库(JavaServer Pages Standard Tag Library JSTL)的话，InternalResourceViewResolver能够将视图名解析为JstlView形式的JSP文件，从而将JSTL本地化和资源bundle变量暴露给JSTL的格式化和信息标签。

Spring提供了两个JSP标签库，一个用于表单到模型的绑定，另一个提供了通用的工具类特性。

不管你使用JSTL，还是准备使用Spring的JSP标签库，配置解析JSP的视图解析器都是非常重要的。InternalResourceViewResolver是最简单和最常用的视图解析器。

1、配置适用于JSP的视图解析器

InternalResourceViewResolver的配置遵循一种约定，会在视图名上添加前缀和后缀，进而确定一个Web应用中视图资源的物理路径。

考虑一个简单的场景，假设逻辑视图名为home。通用的实践是将JSP文件放到Web应用的WEB-INF目录下，防止对他的直接访问。

 

Java配置视图解析器

@Bean

public ViewResolver viewResolver() {

InternalResourceViewResolver resolver = new InternalResourceViewResolver();

resolver.setPrefix("/WEB-INF/views/");

resolver.setSuffix(".jsp");

return resolver;

}

XML配置视图解析器

<bean id= “viewResolver” 

class=”org.springframework.web.servlet.view.InternalResourceViewResolver”

p:prefix=”/WEB-INF/views/” p:suffix=”.jsp” />

配置后解析规则：

home将会解析为：“/WEB-INF/views/home.jsp”

productList将会解析为：“/WEB-INF/views/productList.jsp”

books/detail将会解析为：“/WEB-INF/views/books/detail.jsp”

2、解析JSTL视图

如果JSP使用JSTL标签来处理格式化和信息的话，那么我们希望InternalResourceViewResolver将视图解析为JstlView。

JSTL的格式化标签需要一个Locale对象，以便于恰当地格式化地域相关的值，如日期和货币。

java配置JSTL视图解析器

@Bean

public ViewResolver viewResolver() {

InternalResourceViewResolver resolver = new InternalResourceViewResolver();

resolver.setPrefix("/WEB-INF/views/");

resolver.setSuffix(".jsp");

resolver.setViewClass(org.springframework.web.servlet.view.JstlView.class);

return resolver;

}

XML配置JSTL视图解析器

<bean id= “viewResolver” 

class=”org.springframework.web.servlet.view.InternalResourceViewResolver”

p:prefix=”/WEB-INF/views/” p:suffix=”.jsp”

p:viewClass=”org.springframework.web.servlet.view.JstlView.class”/>

3、使用Spring的JSP库

将表单绑定到模型上

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf" %>

 

    <sf:form method="POST" commandName="spitter" >

      <sf:errors path="*" element="div" cssClass="errors" />

      <sf:label path="firstName"

          cssErrorClass="error">First Name</sf:label>:

        <sf:input path="firstName" cssErrorClass="error" /><br/>

      <sf:label path="lastName"

          cssErrorClass="error">Last Name</sf:label>:

        <sf:input path="lastName" cssErrorClass="error" /><br/>

      <sf:label path="email"

          cssErrorClass="error">Email</sf:label>:

        <sf:input path="email" cssErrorClass="error" /><br/>

      <sf:label path="username"

          cssErrorClass="error">Username</sf:label>:

        <sf:input path="username" cssErrorClass="error" /><br/>

      <sf:label path="password"

          cssErrorClass="error">Password</sf:label>:

        <sf:password path="password" cssErrorClass="error" /><br/>

      <input type="submit" value="Register" />

    </sf:form>

 

Spring通用的标签库

要使用Spring通用的标签库，我们必须要在页面上对其进行声明：

<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>

 

展现国际化信息

。。。。。

 

使用Thymeleaf

1、背景

尽管JSP已经存在了很长的时间，并且在Java Web服务器中无处不在，但是他却存在一些缺陷。JSP最明显的问题在于他看起来像HTML或XML，但他其实上并不是。大多数的JSP模板都是采用HTML的形式，但是又掺杂上了各种JSP标签库的标签，使其变得很混乱。这些标签库能够以很便利的方式为JSP带来动态渲染的强大功能，但是他也摧毁了我们想维持一个格式良好的文档的可能性。作为一个极端的样例，如下的JSP标签甚至作为HTML参数的值：

<input type=”text” value=”<c:out value=”${thing.name}”>” />

标签库和JSP缺乏良好格式的一个副作用就是他很少能够与其产生的HTML类似。所以，在Web浏览器或HTML编辑器中查看未经渲染的JSP模板是非常令人困惑的，而且得到的结果看上去也非常丑陋。这个结果是不完整的--在视觉上这简直就是一场灾难！因为JSP并不是真正的HTML，很多浏览器和编辑器展现的效果都很难在审美上接近模板最终所渲染出来的效果。

同时，JSP规范是与Servlet规范紧密耦合的。这意味着他只能在基于Servlet的Web应用之中。JSP模板不能作为通用的模板，也不能用于非Servlet的Web应用。

Thymeleaf模板是原生的，不依赖于标签库。他能在接受原始HTML的地方进行编辑和渲染。

2、配置Thymeleaf视图解析器

为了要在Spring中使用Thymeleaf，我们需要配置三个启用Thymeleaf与Spring集成的bean:

ThymeleafViewResolver：将逻辑视图名称解析为Thymeleaf模板视图；

SpringTemplateEngine：处理模板并渲染结果；

TemplateResolver：加载Thymeleaf模板。

Java代码配置方式：

  @Bean

  public ViewResolver viewResolver(SpringTemplateEngine templateEngine) {

    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();

    viewResolver.setTemplateEngine(templateEngine);

    return viewResolver;

  }

  @Bean

  public SpringTemplateEngine templateEngine(TemplateResolver templateResolver) {

    SpringTemplateEngine templateEngine = new SpringTemplateEngine();

    templateEngine.setTemplateResolver(templateResolver);

    return templateEngine;

  }

  @Bean

  public TemplateResolver templateResolver() {

    TemplateResolver templateResolver = new ServletContextTemplateResolver();

    templateResolver.setPrefix("/WEB-INF/views/");

    templateResolver.setSuffix(".html");

    templateResolver.setTemplateMode("HTML5");

    return templateResolver;

  }

XML配置方式

  <bean id="viewResolver" class="org.thymeleaf.spring3.view.ThymeleafViewResolver"

  p:templateEngine-ref="templateEngine" />

 

  <bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine"

  p:templateResolver-ref="templateResolver" />

 

  <bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver"

  p:prefix="/WEB-INF/templates/"

  p:suffix=".html"

  p:templateMode="HTML5" />

3、定义Thymeleaf模板

Thymeleaf在很大程度上就是HTML文件，与JSP不同，他没有什么特殊的标签或标签库。Thymeleaf之所以能够发挥作用，是因为他通过自定义的命名空间，为标准的HTML标签集合添加Thymeleaf属性。

命名空间为：

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:th="http://www.thymeleaf.org">

th:href属性的特殊之处在于他的值中可以包含Thymeleaf表达式，用来计算动态的值。他会渲染成一个标准的href属性，其中会包含在渲染时动态创建得到的值，这是Thymeleaf命名空间中很多属性的运行方式：他们对应标准的HTML属性，并且具有相同的名称，但是会渲染一些计算后得到的值。

借助Thymeleaf实现表单绑定

<form method="POST" th:object="${spitter}">

  <div class="errors" th:if="${#fields.hasErrors('*')}">

    <ul>

      <li th:each="err : ${#fields.errors('*')}" 

        th:text="${err}">Input is incorrect</li>

    </ul>

  </div>

  <label th:class="${#fields.hasErrors('firstName')}? 'error'">First Name</label>:

  <input type="text" th:field="*{firstName}"  

                 th:class="${#fields.hasErrors('firstName')}? 'error'" /><br/>

  <label th:class="${#fields.hasErrors('lastName')}? 'error'">Last  Name</label>:

  <input type="text" th:field="*{lastName}"

                 th:class="${#fields.hasErrors('lastName')}? 'error'" /><br/>

  <label th:class="${#fields.hasErrors('email')}? 'error'">Email     </label>:

  <input type="text" th:field="*{email}"

                 th:class="${#fields.hasErrors('email')}? 'error'" /><br/>

  

  <label th:class="${#fields.hasErrors('username')}? 'error'">Username  </label>:

  <input type="text" th:field="*{username}"

                 th:class="${#fields.hasErrors('username')}? 'error'" /><br/>

  

  <label th:class="${#fields.hasErrors('password')}? 'error'">Password  </label>:

  <input type="password" th:field="*{password}"  

                 th:class="${#fields.hasErrors('password')}? 'error'" /><br/>

  <input type="submit" value="Register" />

      </form>

${}表达式是变量表达式，

*{}表达式是选择表达式，

变量表达式是基于整个SpEL上下文计算的，而选择表达式是基于某一个选中对象计算的。