Die Anleitung zu Spring Boot und Thymeleaf

1- Was ist Thymeleaf ?

Thymeleaf ist ein Java  Java XML/XHTML/HTML5 Template Engine, das auf die Web-Umgebung und die Nicht-Web-Umgebung funktionieren kann. Es funktioniert besser bei der Umgang mit    XHTML/HTML5 auf View Layer von der Applikation  Web nach der Struktur MVC. Es kann eine File XML behandeln, sogar auf die offline Umgebung. Es unterstützt voll bei der Interaktion mit Spring Framework.
Die Template File von Thymeleaf ist eine normalen Text-File mit der Format XML/XHTML/HTML5. Thymeleaf Engine  wird eine Template File lesen und mit den Objekte Java verbinden um ein anderes Dokument zu erstellen (generate) .
Thymeleaf kann benutzt werden um JSP auf  View Layer der Applikation  Web MVC zu ersetzen. Thymeleaf ist eine Open Source Code Software, die die Lizenz  Apache 2.0. erhaltet
Unten ist das Bild der Applikation, die wir in dieser Unterricht durchführen

2- Die Erstellung von der Applikation

Auf  Eclipse wählen Sie:
  • File/New/Other...
Geben Sie ein
  • Name: SpringBootThymeleaf
  • Group: org.o7planning
  • Artifact: SpringBootThymeleaf
  • Description: Spring Boot and Thymeleaf
  • Package: org.o7planning.thymeleaf
Wählen Sie 2 Technologie Web und  Thymeleaf aus
Ihr Projekt wird erstellt

3- Thymeleaf Template

Thymeleaf Template ist die Template File. Ihre Inhalt liegt in der Format von XML/XHTML/HTML5. Wir werden 3 File erstellen und in den Verzeichnis  src/main/resources/templates legen
index.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8" />
      <title>Welcome</title>
      <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
   </head>
   <body>
      <h1>Welcome</h1>
      <h2 th:utext="${message}">..!..</h2>
      
      <!--  
      
         In Thymeleaf the equivalent of
         JSP's ${pageContext.request.contextPath}/edit.html
         would be @{/edit.html}
         
         -->
         
      <a th:href="@{/personList}">Person List</a>  
      
   </body>
   
</html>
 
personList.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8" />
      <title>Person List</title>
      <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
   </head>
   <body>
      <h1>Person List</h1>
      <a href="addPerson">Add Person</a>
      <br/><br/>
      <div>
         <table border="1">
            <tr>
               <th>First Name</th>
               <th>Last Name</th>
            </tr>
            <tr th:each ="person : ${persons}">
               <td th:utext="${person.firstName}">...</td>
               <td th:utext="${person.lastName}">...</td>
            </tr>
         </table>
      </div>
   </body>
</html>
 
addPerson.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8" />
      <title>Add Person</title>
      <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
   </head>
   <body>
      <h1>Create a Person:</h1>
      
      <!--  
         In Thymeleaf the equivalent of
         JSP's ${pageContext.request.contextPath}/edit.html
         would be @{/edit.html}         
         -->
         
      <form th:action="@{/addPerson}"
         th:object="${personForm}" method="POST">
         First Name:
         <input type="text" th:field="*{firstName}" />    
         <br/>
         Last Name:
         <input type="text" th:field="*{lastName}" />     
         <br/>
         <input type="submit" value="Create" />
      </form>
      
      <br/>
      
      <!-- Check if errorMessage is not null and not empty -->
      
      <div th:if="${errorMessage}" th:utext="${errorMessage}"
         style="color:red;font-style:italic;">
         ...
      </div>
      
   </body>
</html>
Oben habe ich 3 File HTML erstellt. Die File HTML oben müssen den Standards vom  XML befriedigen. Alle Tags müssen die Öffnung und die Schließung haben. Zum Beispiel
<div>A div tag</div>

<br />

<meta charset="UTF-8" />
Alle File HTML sollen die Benutzung von T hymeleaf Namespace erklären:
<!-- Thymeleaf Namespace -->

<html xmlns:th="http://www.thymeleaf.org">
In die Template File gibt es die Thymeleaf Marker (die Markierung vom Thymeleaf). Sie sind die Anweisung, die   Thymeleaf Engine bei der Datenverarbeitung hilft.  Thymeleaf Engine analysiert die Template file und verbindet mit der Java Daten um ein neues Dokument zu erstellen (generate).
Unten sind das die Beispiele zur Benutzung  von Context-Path im  Thymeleaf:
<!-- Example 1:  -->

<a th:href="@{/mypath/abc.html}">A Link</a>

Output: ==>

<a href="/my-context-path/mypath/abc.html">A Link</a>


<!-- Example 2:  -->

<form th:action="@{/mypath/abc.html}"
          th:object="${personForm}" method="POST">

Output: ==>

<form action="/my-context-path/mypath/abc.html"  method="POST">
 

4- Static Resource & Properties File

Mit der static Ressourcen wie die File  css, javascript, image,.. sollen Sie sie in dem Verzeichnis src/main/resources/static oder seinen Sub-Verzeichnis legen
style.css
h1 {
    color:#0000FF;
}

h2 {
    color:#FF0000;
}

table {
    border-collapse: collapse;
}

table th, table td {
    padding: 5px;
}
application.properties

welcome.message=Hello Thymeleaf
error.message=First Name & Last Name is required!

5- Model, Form, Controller classes

Person.java
package org.o7planning.thymeleaf.model;

public class Person {

    private String firstName;
    private String lastName;

    public Person() {

    }

    public Person(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

}
Die Klasse  PersonForm vertritt die Daten vom FORM wenn Sie eine   Person auf die Seite    addPerson erstellen.
PersonForm.java
package org.o7planning.thymeleaf.form;
 

public class PersonForm {

    private String firstName;
    private String lastName;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
    
}
MainController ist eine Klasse  Controller, die die Anforderung vom Benutzer behandelt und den Strom (flow) der Applikation kontrolliert.
MainController.java
package org.o7planning.thymeleaf.controller;

import java.util.ArrayList;
import java.util.List;

import org.o7planning.thymeleaf.form.PersonForm;
import org.o7planning.thymeleaf.model.Person;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MainController {

	private static List<Person> persons = new ArrayList<Person>();

	static {
		persons.add(new Person("Bill", "Gates"));
		persons.add(new Person("Steve", "Jobs"));
	}

	// Aus Application.properties abspritzen (inject).
	@Value("${welcome.message}")
	private String message;

	@Value("${error.message}")
	private String errorMessage;

	@RequestMapping(value = { "/", "/index" }, method = RequestMethod.GET)
	public String index(Model model) {

		model.addAttribute("message", message);

		return "index";
	}

	@RequestMapping(value = { "/personList" }, method = RequestMethod.GET)
	public String personList(Model model) {

		model.addAttribute("persons", persons);

		return "personList";
	}

	@RequestMapping(value = { "/addPerson" }, method = RequestMethod.GET)
	public String showAddPersonPage(Model model) {

		PersonForm personForm = new PersonForm();
		model.addAttribute("personForm", personForm);

		return "addPerson";
	}

	@RequestMapping(value = { "/addPerson" }, method = RequestMethod.POST)
	public String savePerson(Model model, //
			@ModelAttribute("personForm") PersonForm personForm) {

		String firstName = personForm.getFirstName();
		String lastName = personForm.getLastName();

		if (firstName != null && firstName.length() > 0 //
				&& lastName != null && lastName.length() > 0) {
			Person newPerson = new Person(firstName, lastName);
			persons.add(newPerson);

			return "redirect:/personList";
		}

		model.addAttribute("errorMessage", errorMessage);
		return "addPerson";
	}

}

6- Die Applikation laufen

Klicken Sie auf dem Projekt und wählen..., um die Applikation zu laufen
  • Run As/Spring Boot App.
Die Applikation wird auf einem Embedded Web Server ausgefahrt (deploy)
Laufen Sie den folgenden URL auf dem Browser

View more categories: