Commonization of headers, footers, etc.

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>

Commentary

index.html

`<header th:replace="common :: header()"></header>`

Was defined in common.html

`fragment="header()">`

It has been replaced with.

Other minimum required knowledge

--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)

Implementation sample using each function

`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;
        }
    }
}