screen

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>IF</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;
        }
    }
}

Recommended Posts

screen
Screen transition method
Screen transition memorandum
Screen recording on Ubuntu 20.04
Arrangement of screen parts