Prepare an HTML file for common parts such as common.html.
demo\src\main\resources\templates\common.html
<html xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header()">
header
</header>
</html>
Specifies to load the HTML defined in common.html in the screen-specific HTML.
demo\src\main\resources\templates\templateTest\index.html
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="common :: header()"></header>
</body>
index.html
<header th:replace="common :: header()"></header>
Was defined in common.html
fragment="header()">
It has been replaced with.
--Output of the value passed by controller
text="${Variable name}"
Or
```[[${Variable name}]]```
--IF statement
#### **`if="${Conditional expression}"`**
```th
--Variable definition
#### **`with="Variable name= 'Value to set'"`**
```th
- switch
<th:block th:switch="${Value to be inspected}"> <th:block th:case=Value 1> Value to be inspected=What to do if the value is 1 </th:block> <th:block th:case=Value 2> Value to be inspected=What to do if the value is 2 </th:block> </th:block>
--List iterative processing
#### **`th:each="{Variable name being repeated} , ${Status variable name during iterative processing} : ${Variable name to be repeated}"`**
You can get the following information about "Status variable name during repetitive processing".
| Property | Description |
|---|---|
| index | Index number in the loop (value from 0) |
| count | Count in loop (value from 1) |
| size | List size to loop |
| current | Elements in the loop |
| even | Whether or not it is an even number (boolean) |
| odd | Whether or not it is an odd number (boolean) |
| first | Whether it is the first line (boolean) |
| last | Whether it is the last line (boolean) |
demo\src\main\resources\templates\templateTest\index.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: head('Template test',~{::link},~{::script})">
<!--Screen-specific CSS, JS-->
<link rel="stylesheet" th:href="@{/css/index.css}" />
<script type="text/javascript" th:src="@{/js/index.js}"></script>
<script>
console.log("Screen-specific JS");
</script>
</head>
<body>
<header th:replace="common :: header()"></header>
<section>
<h1>Output the value of controllerValue</h1>
th:text use:<span th:text="${controllerValue}"></span>
<br>
th:text not used:[[${controllerValue}]]
</section>
<br>
<section>
<h1>ＩＦ</h1>
<th:block th:if="${conditionVal == 1}">
true
</th:block>
</section>
<br>
<section>
<h1>variable</h1>
<th:block th:with="hensu = 'value of hensu'">
hensu = [[${hensu}]]
</th:block>
</section>
<br>
<section>
<th:block th:switch="${conditionVal}">
<th:block th:case=1>
conditionVal=Output if 1
</th:block>
<th:block th:case=2>
conditionVal=Output in case of 2
</th:block>
</th:block>
</section>
<br>
<section>
<h1>Iterate list</h1>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>Loop information</th>
</tr>
</thead>
<tbody>
<tr th:each="company , status : ${companyList}">
<td th:text="${company.id}"></td>
<td th:text="${company.name}"></td>
<td>
index：[[${status.index}]]<br>
count：[[${status.count}]]<br>
size：[[${status.size}]]<br>
current：[[${status.current}]]<br>
even：[[${status.even}]]<br>
odd：[[${status.odd}]]<br>
first：[[${status.first}]]<br>
last：[[${status.last}]]<br>
</td>
</tr>
</tbody>
</table>
</section>
<footer th:replace="common :: footer()"></footer>
</body>
</html>
demo\src\main\resources\templates\common.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title , links , scripts)">
<meta charset="utf-8">
<!--Set screen-specific title-->
<title th:text="${title}"></title>
<!--CSS and JS common to all screens-->
<link rel="stylesheet" th:href="@{/css/common.css}" />
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<!--For replacement with screen-specific CSS and JS-->
<th:block th:replace="${links} ?: _" />
<th:block th:replace="${scripts} ?: _" />
</head>
<header th:fragment="header()">
header
</header>
<footer th:fragment="footer()">
footer
</footer>
</html>
demo\src\main\java\com\example\demo\TemplateTestConttoller.java
package com.example.demo;
import java.util.ArrayList;
import java.util.List;
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
@RequestMapping("templateTest")
public class TemplateTestConttoller {
@RequestMapping(value = "/index", method = RequestMethod.GET)
public Model index(Model model) throws Exception {
//For iterative processing
List<Company> companyList = new ArrayList<>();
companyList.add(new Company(1, "Company A"));
companyList.add(new Company(2, "Company B"));
model.addAttribute("companyList", companyList);
model.addAttribute("controllerValue", "String passed from the controller");
model.addAttribute("conditionVal", 1);
return model;
}
public class Company{
public Integer id;
public String name;
public Company(Integer id, String name) {
this.id = id;
this.name = name;
}
}
}