마지막으로 Maven에서 애플리케이션 시작까지 확인했습니다.
이번에는 Thymeleaf 템플릿을 이용하여 Controller에서 호출할 수 있도록 합니다.

Thymeleaf란?

XHTML이나 HTML5에 준거한 형태로 기술할 수 있는 .html 형식의 템플릿입니다.
이점은 확장자가 html이므로 도중 상태에서도 브라우저에 직접 표시할 수 있어 디자인을 확인할 수 있습니다.

이번에 작성 변경하는 파일

pom.xml
spring-mvc.xml
web.xml
Welcomecontroller.java
index.html

최종 폴더 구성은 다음과 같습니다.

Spring과 Thyemleaf의 협력

Maven 프로젝트에서 Timeleaf 라이브러리와 Spring MVC 종속 라이브러리를 적용합니다.
pom.xml 전체는 다음과 같습니다.

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>
  <groupId>work</groupId>
  <artifactId>app</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>app Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <dependencyManagement>
  <dependencies>

    <dependency>
        <groupId>io.spring.platform</groupId>
        <artifactId>platform-bom</artifactId>
        <version>2.0.5.RELEASE</version>
        <type>pom</type>
        <scope>import</scope>
    </dependency>

  </dependencies>
  </dependencyManagement>

  <dependencies>
    <!-- ①Spring Frameworkの依存モジュールへの依存関係を解決 -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
    </dependency>

    <!-- ②Hibernate Validatorを使用する -->
    <dependency>
        <groupId>org.hibernate</groupId>
        <artifactId>hibernate-validator</artifactId>
    </dependency>

    <!-- ③thymeleaf-spring4ライブラリを指定 -->
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf-spring4</artifactId>
    </dependency>

    <!-- ④ログ出力の依存ライブラリ -->
    <dependency>
        <groupId>org.slf4j</groupId>
        <artifactId>jcl-over-slf4j</artifactId> 
    </dependency>

    <dependency>
        <groupId>ch.qos.logback</groupId>
        <artifactId>logback-classic</artifactId>
    </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>

  </dependencies>

  <build>
    <finalName>app</finalName>
    <pluginManagement>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <soruce>1.8</soruce>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </pluginManagement>
  </build>
</project>

Spring과 Thymeleaf 설정

이번에는 xml 파일을 이용하여 Spring과 Thyemleaf의 연계를 해 나갈 것입니다. Spring-mvc.xml 파일을 resource/META-INF/spring 폴더 아래에 설치합니다.

spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
       ">

    <context:component-scan base-package="spring.controller" />    


    <!-- ①サーブレットコンテナ内のリソースからテンプレートを読み込む -->
    <bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
        <property name="prefix" value="/WEB-INF/view/" />
        <property name="suffix" value=".html" />
        <property name="templateMode" value="HTML5" />
        <property name="characterEncoding" value="UTF-8" />
    </bean>

    <!-- ②テンプレートとSpring MVCとの連携 -->
    <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
        <property name="templateResolver" ref="templateResolver" />
    </bean>

    <!-- ③View解決の仕組みの設定 -->
    <bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
        <property name="templateEngine" ref="templateEngine" />
        <property name="characterEncoding" value="UTF-8" />
        <property name="order" value="1" />
    </bean>

</beans>

①에서는 Thymeleaf를 이용하기 위한 설정을 하고 있습니다.
View에 대한 설정을 정의합니다.

③에서는 ②에서 설정한 템플릿 엔진의 출력 데이터의 인코딩과 우선 순위를 설정합니다.

web.xml 수정

web.xml

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="
    http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd 
 " 
 version="3.0"
 >

 <servlet>
    <servlet-name>app</servlet-name>
    <!-- DispatcherServletクラスをサーブレットコンテナに登録 -->
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

    <!-- 作成したspring-mvc.xmlを読み込む -->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>
        classpath:/META-INF/spring/spring-mvc.xml
      </param-value>
    </init-param>

    <load-on-startup>1</load-on-startup>

 </servlet>

 <!-- DispatcherServletを使用してリクエストをハンドリングするパターンを指定 -->
 <servlet-mapping>
    <servlet-name>app</servlet-name>
    <url-pattern>/</url-pattern>
 </servlet-mapping>

 <!-- サーブレットのリスナクラス -->
 <listener>
    <listener-class>
        org.springframework.web.context.ContextLoaderListener
    </listener-class>
 </listener>

 <!-- サーブレットコンテナのcontextClassパラメータにAnnotationConfigWebApplicationContext指定 -->
 <context-param>
    <param-name>contextClass</param-name>
    <param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value>
 </context-param>

 <filter>
    <!-- CaracterEncodingFilterをサーブレットコンテナに登録 -->
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <!-- 文字エンコーディングを指定する。 -->
    <init-param>
        <param-name>encoding</param-name>
        <param-value>UTF-8</param-value>
    </init-param>
    <!-- パラメータにリクエストパラメータの文字エンコーディングを上書きするか指定する -->
    <init-param>
        <param-name>forceEncoding</param-name>
        <param-value>true</param-value>
    </init-param>
 </filter>

 <!-- CharacterEncodignFilterを適用するURLパターンを指定する -->
 <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
 </filter-mapping>

</web-app>

컨트롤러 만들기

View를 호출하는 컨트롤러를 만듭니다.
이번에는 단순히
http://localhost:8080/app/
에 액세스하여 메시지를 View로 반환합니다.

WelcomeController.java

package spring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class WelcomeController {

    @RequestMapping(value="/", method= {RequestMethod.GET, RequestMethod.POST})
    public String home(Model model) {
        model.addAttribute("hello", "Hello World!!!!");
        return "index";
    }

}

@Controller 어노테이션
Controller 클래스에 부여

@RequestMapping 어노테이션
메서드를 호출하고 요청 URL을 지정합니다. 이번에는 루트 경로가 호출되면 index.html을 호출하도록 설정했습니다.

모델
전환 목적지와 협력하는 데이터를 보유하는 인터페이스.
"hello"라는 키에 "Hello World!!!!"의 값을 저장합니다.

View 만들기

방금 만든 컨트롤러가 호출하는 View를 만듭니다.

index.html

<!DOCTYPE html>
<!-- ① xmln:th -->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

    <body>
        <!-- ② メッセージの表示 -->
        <h2 th:text="${hello}">Hello World!!</h2>
    </body>   

</html>

① 네임스페이스로 ① 이하를 부여한다.
Thymeleaf의 마크업으로서 xml:th・・・를 부여해, th:속성을 이용할 수 있도록 한다.

② 컨트롤러에서 설정한 값을 키를 사용하여 호출한다.
이번은 단지 텍스트 표시이기 때문에 「th:text」 사용한다.
키를 사용해 호출하는 경우는 {}로 키명을 둘러쌀 필요가 있다.

위의 준비가 되면 아래로 이동하여
http://localhost:8080/app/

「Hello World!!」가 아니라 「Hello World!!!!」가 표시되면 완료



다음 번에는 양식을 사용하여 입력한 값을 볼 수 있습니다.
또, 프로퍼티 파일을 이용해, 에러 메세지를 일본어화해 갑니다.