画面構成はヘッダー、コンテンツ、フッターの3箇所をレイアウトにする。
ヘッダー、フッターは共通化して、コンテンツがページごとに変わる感じだ。
以前、仕事でしたことあるstrutsのtilesみたいなものだな。
(現在も使われているんかいな？)
さて、まず、build.gradleにthymeleafの設定をする。
compile('org.springframework.boot:spring-boot-starter-web') は削除する。
そして、代りに compile('org.springframework.boot:spring-boot-starter-thymeleaf') を設定する。
次のサイトを参考にしたけれど、`spring-boot-starter-web` に依存するため、`spring-boot-starter-web` を明記する必要はないみたいだ。
Spring Boot における Thymeleaf サンプルコード
それと、thymeleafとdialectのバージョンを設定する。
ext['thymeleaf.version'] と ext['thymeleaf-layout-dialect.version'] を設定する。
それぞれのバージョンは次のサイトを参考にすればいいみたいだ。
https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring4
https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect
このバージョンについての情報は次のサイトを参考にした。
Spring Boot で Thymeleaf 使い方メモ
そして、build.gradleは次のとおりになる。
buildscript {
ext {
springBootVersion = '1.5.13.BUILD-SNAPSHOT'
}
repositories {
mavenCentral()
maven { url "https://repo.spring.io/snapshot" }
maven { url "https://repo.spring.io/milestone" }
}
dependencies {
classpath("org.springframework.boot:spring-boot-gradle-plugin:${springBootVersion}")
}
}
apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = 1.8
repositories {
mavenCentral()
maven { url "https://repo.spring.io/snapshot" }
maven { url "https://repo.spring.io/milestone" }
}
dependencies {
compile('org.springframework.boot:spring-boot-starter-thymeleaf') {
exclude group: 'org.springframework.boot', module: 'spring-boot-starter-logging'
}
compile('org.springframework.boot:spring-boot-starter-log4j2')
testCompile('org.springframework.boot:spring-boot-starter-test')
}
ext['thymeleaf.version'] = '3.0.9.RELEASE'
ext['thymeleaf-layout-dialect.version'] = '2.3.0'
コントローラプログラムの HogeController.java は次のとおり
以前のSpringでlog4j2(Gradleでプロジェクト作成)は、"Hello World!" の文字列を表示していたけれど、今回は表示するテンプレート "index" を設定している。
package com.example.hoge;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
@RestController
public class HogeController {
private static final Logger logger = LoggerFactory.getLogger(HogeController.class);
@RequestMapping("/")
public ModelAndView index(ModelAndView mav) {
logger.info("#index START");
mav.setViewName("index");
return mav;
}
}
次にDialectのレイアウト全体のテンプレート "layout.html" を設定する。
ソースは次のとおり。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org">
<head>
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">My website</title>
<meta charset="UTF-8" />
</head>
<body>
<header layout:replace="~{layout/header::header}"></header>
<article layout:fragment="content" style="background-color: lightpink;"></article>
<footer layout:replace="~{layout/footer::footer}"></footer>
</body>
</html>
次が "layout.html" でヘッダ部分を取り込む箇所 "<header layout:replace="~{layout/header::header}"></header>" で取り込まれる "header.html" を設定する。
ソースは次のとおり
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <body> <header id="global-header" layout:fragment="header" style="background-color: beige;"> <p class="text-center">This is header</p> </header> </body> </html>
次が "layout.html" でフッタ部分を取り込む箇所 "<footer layout:replace="~{layout/footer::footer}"></footer>" で取り込まれる "footer.html" を設定する。
ソースは次のとおり
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <body> <footer id="global-footer" layout:fragment="footer" style="background-color: aqua;"> <p class="text-center">This is footer</p> </footer> </body> </html>
レイアウトの定義は以上で、次に上記コントローラプログラムで設定した表示するテンプレート "index" のテンプレート "index.html" を設定する。
ソースは次のとおり
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/layout}">
<head>
<title>INDEX PAGE</title>
</head>
<body>
<div layout:fragment="content" class="text-center">
<p style="height: 150px;">This is index page.</p>
</div>
</body>
</html>
これでThymelaefのDialectのレイアウトでの画面表示するプログラムは用意できた。
動かしてみる。
画面表示は次のようになる。
本画面のHTMLは次のように生成されている。
これで終わり。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My website - INDEX PAGE</title> <meta charset="UTF-8" /> </head> <body> <header id="global-header" style="background-color: beige;"> <p class="text-center">This is header</p> </header> <div style="background-color: lightpink;" class="text-center"> <p style="height: 150px;">This is index page.</p> </div> <footer id="global-footer" style="background-color: aqua;"> <p class="text-center">This is footer</p> </footer> </body> </html>
