[JAVA] Bildschirm

Commonization von Kopf- und Fußzeilen usw.

Bereiten Sie eine HTML-Datei für allgemeine Teile wie common.html vor.

demo\src\main\resources\templates\common.html


<html xmlns:th="http://www.thymeleaf.org">
    <header th:fragment="header()">
Header
    </header>
</html>

Gibt an, dass der in common.html definierte HTML-Code als bildschirmspezifischer HTML-Code geladen werden soll.

demo\src\main\resources\templates\templateTest\index.html


<html xmlns:th="http://www.thymeleaf.org">
	<header th:replace="common :: header()"></header>
</body>

Kommentar

index.html

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

Wurde in common.html definiert

fragment="header()">

Es wurde ersetzt durch.

Andere erforderliche Mindestkenntnisse

text="${Variablennamen}"


 Oder
```[[${Variablennamen}]]```


 --IF-Anweisung

#### **`if="${Bedingter Ausdruck}"`**
```th


 --Variable Definition

#### **`with="Variablennamen= 'Zu setzender Wert'"`**
```th


- switch

<th:block th:switch="${Zu prüfender Wert}"> <th:block th:case=Wert 1> Zu prüfender Wert=Was tun, wenn der Wert 1 ist? </th:block> <th:block th:case=Wert 2> Zu prüfender Wert=Was tun, wenn der Wert 2 ist? </th:block> </th:block>


 --Listen Sie die iterative Verarbeitung auf

#### **`th:each="{Variablenname wird wiederholt} , ${Name der Statusvariablen während der iterativen Verarbeitung} : ${Variablenname, der wiederholt werden soll}"`**

Sie können die folgenden Informationen zu "Name der Statusvariablen während der wiederholten Verarbeitung" erhalten.

Eigentum Erläuterung
index Indexnummer in der Schleife (Wert von 0)
count In Schleife zählen (Wert von 1)
size Listengröße für die Schleife
current Elemente in der Schleife
even Ob es sich um eine gerade Linie handelt oder nicht (Boolescher Wert)
odd Ob es sich um eine ungerade Zeile handelt oder nicht (Boolescher Wert)
first Ob es die erste Zeile ist (boolean)
last Ob es die letzte Zeile ist (boolean)

Implementierungsbeispiel mit jeder Funktion

demo\src\main\resources\templates\templateTest\index.html


<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="common :: head('Vorlagentest',~{::link},~{::script})">
	<!--Bildschirmspezifisches CSS, JS-->
	<link rel="stylesheet" th:href="@{/css/index.css}" />
	<script type="text/javascript" th:src="@{/js/index.js}"></script>
	<script>
		console.log("Bildschirmspezifische JS");
	</script>
</head>

<body>

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

	<section>
		<h1>Geben Sie den Wert von controllerValue aus</h1>
		th:Textverwendung:<span th:text="${controllerValue}"></span>
		<br>
		th:Text nicht verwendet:[[${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 = 'Wert von Hensu'">
			hensu = [[${hensu}]]
		</th:block>
	</section>

	<br>

	<section>
		<th:block th:switch="${conditionVal}">
			<th:block th:case=1>
				conditionVal=Ausgabe wenn 1
			</th:block>
			<th:block th:case=2>
				conditionVal=Ausgabe bei 2
			</th:block>
		</th:block>
	</section>

	<br>

	<section>
		<h1>Iterierte Liste</h1>
		<table border="1">
			<thead>
				<tr>
					<th>ID</th>
					<th>name</th>
					<th>Schleifeninformationen</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">

        <!--Bildschirmspezifischen Titel festlegen-->
        <title th:text="${title}"></title>

        <!--CSS und JS sind allen Bildschirmen gemeinsam-->
        <link rel="stylesheet" th:href="@{/css/common.css}" />
        <script type="text/javascript" th:src="@{/js/common.js}"></script>

        <!--Zum Ersatz durch bildschirmspezifisches CSS und JS-->
        <th:block th:replace="${links} ?: _" />
        <th:block th:replace="${scripts} ?: _" />
    </head>

    <header th:fragment="header()">
Header
    </header>
    
    <footer th:fragment="footer()">
Fusszeile
    </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 {
        //Zur iterativen Verarbeitung
        List<Company> companyList = new ArrayList<>();
        companyList.add(new Company(1, "Firma A."));
        companyList.add(new Company(2, "Firma B."));
        model.addAttribute("companyList", companyList);

        model.addAttribute("controllerValue", "Zeichenfolge vom Controller übergeben");

        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

Bildschirm
Bildschirmübergangsmethode
Bildschirmübergangsmemorandum
Bildschirmaufnahme unter Ubuntu 20.04
Anordnung der Bildschirmteile