LoginSignup
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@527aboo

Thymeleafテンプレートを利用してHello World

Last updated at Posted at 2017-01-14

前回、Mavenからアプリケーションの起動までを確認しました。
今回はThymeleafテンプレートを利用して、Controllerから呼び出せるようにします。

#Thymeleafとは
XHTMLやHTML5に準拠した形で記述できる.html形式のテンプレートです。
メリットは拡張子がhtmlであるため、途中の状態でもブラウザに直接表示することができ、デザインの確認をすることができます。

##今回作成変更するファイル
pom.xml
spring-mvc.xml
web.xml
Welcomecontroller.java
index.html

最終的なフォルダ構成は以下になります。

スクリーンショット 2017-01-14 14.49.45.png

SpringとThyemleafの連携

MavenプロジェクトからTymeleafのライブラリや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を呼び出すように設定しています。

Model
遷移先に連携するデータを保持するインターフェース。
「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!!!!」が表示されれば完了

スクリーンショット 2017-01-14 15.58.31.png

次回は、フォームを利用して入力した値を表示できるようにします。
また、プロパティファイルを利用して、エラーメッセージを日本語化していきます。

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?