はじめに
Spring Boot + Thymeleaf のサンプルプログラムをEclipseで作ってみよう。
の続き。Thymeleaf layoutを使用して、共通ヘッダー、フッターを作成します。
開発環境
Windows 10 Pro 1709(16299.192)
Eclipse pleiades-4.7.3
java 1.8.0_162
spring-boot-2.0.2.RELEASE
thymeleaf-3.0.9.RELEASE
手順
1.共通とコンテンツフォルダー作成
2.ヘッダー、フッター作成
3.ヘッダー、フッター組み込み
4.動作確認
1. 共通とコンテンツフォルダー作成
1-1.templatesフォルダーの下に、contentsとcommonフォルダーを作成する
1-2.employee.htmlはcontentsフォルダーに移動する
1-3.view nameを"employee"から"contents/employee"に変更する
EmployeeController.java
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class EmployeeController {
@RequestMapping("/show")
public ModelAndView show(ModelAndView mav) {
EmployeeForm form = new EmployeeForm();
form.setId("1");
form.setName("Ken");
form.setEmail("ken@mail.coml");
mav.addObject("employeeForm", form);
mav.setViewName("contents/employee");
return mav;
}
}
2. ヘッダー、フッター作成
2-1.templates/commonフォルダーの下に、header.html、footer.htmlを作成する
header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>header</title>
</head>
<body>
<div th:fragment="common_header" th:remove="tag">
<h1>
<a th:href="@{/}" style="background: #e5eCf9;">Staff Management System</a>
</h1>
</div>
</body>
</html>
footer.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>footer</title>
</head>
<body>
<div th:fragment="common_footer" th:remove="tag">
<p style="text-align: center; background: #e5eCf9;">Copyright © 20XX CompanyName</p>
</div>
</body>
</html>
3. ヘッダー、フッター組み込み
3-1.employee.htmlにヘッダー、フッターを組み込む
employee.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello, Spring Boot!</title>
</head>
<body>
<div th:replace="common/header :: common_header"></div> <!-- 追加 -->
<h1>Hello, Spring Boot!</h1>
<form th:action="@{/show}" th:object="${employeeForm}" method="post">
<table>
<caption>
<strong>従業員検索</strong>
</caption>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
</tr>
</thead>
<tbody>
<tr>
<td th:text="*{id}"></td>
<td th:text="*{name}"></td>
<td th:text="*{email}"></td>
</tr>
</tbody>
</table>
<p>Name (optional): <input type="text" th:field="*{name}" />
<em th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</em></p>
<p><input type="submit" value="Submit" /></p>
</form>
<div th:replace="common/footer :: common_footer"></div> <!-- 追加 -->
</body>
</html>