Spring Boot with Thymeleaf

Thymeleaf is a modern server-side Java template engine for web and standalone environments. This guide covers the key concepts and steps for using Thymeleaf with Spring Boot, including setting up dependencies, creating controllers, designing templates, and rendering views.

Key Concepts of Spring Boot with Thymeleaf

Template Engine: Thymeleaf is a template engine for processing and creating HTML, XML, JavaScript, CSS, and text.
Template Resolver: Thymeleaf uses template resolvers to find and process templates.
Context: A data container used for passing variables to templates.
Expressions: Thymeleaf provides various expression types for variable substitution, text, and URL creation.

Setting Up Dependencies

Include the Spring Boot Starter Thymeleaf dependency in your pom.xml file:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Creating a Controller

Create a controller to handle web requests and return Thymeleaf templates:

Example: HomeController.java

// HomeController.java
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "Hello, Thymeleaf!");
        return "index";
    }
}

Designing Templates

Create Thymeleaf templates to render HTML views. Place your templates in the src/main/resources/templates directory:

Example: index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Spring Boot with Thymeleaf</title>
</head>
<body>
    <h1>Welcome to Spring Boot with Thymeleaf</h1>
    <p th:text="${message}">This is a static message.</p>
</body>
</html>

Rendering Views

When the controller method returns a view name, Spring Boot will resolve the view using Thymeleaf and render the template:

// HomeController.java
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("message", "Hello, Thymeleaf!");
        return "index";
    }
}

Using Thymeleaf Expressions

Thymeleaf provides various expression types for variable substitution, text, and URL creation:

Variable Expressions: ${...}
Selection Variable Expressions: *{...}
Message Expressions: #{...}
Link Expressions: @{...}
Fragment Expressions: ~{...}

Example: Using Thymeleaf Expressions

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Expressions</title>
</head>
<body>
    <h1>Thymeleaf Expressions</h1>
    <p>Variable Expression: <span th:text="${message}">Default message</span></p>
    <p>Link Expression: <a th:href="@{/}">Home</a></p>
</body>
</html>

Handling Form Submissions

Thymeleaf provides support for handling form submissions:

Example: UserController.java

// UserController.java
package com.example.demo.controller;

import com.example.demo.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class UserController {

    @GetMapping("/user")
    public String showForm(Model model) {
        model.addAttribute("user", new User());
        return "userForm";
    }

    @PostMapping("/user")
    public String submitForm(User user, Model model) {
        model.addAttribute("user", user);
        return "userResult";
    }
}

Example: userForm.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>User Form</title>
</head>
<body>
    <h1>User Form</h1>
    <form th:action="@{/user}" th:object="${user}" method="post">
        <label>Name: <input type="text" th:field="*{name}" /></label><br/>
        <label>Email: <input type="email" th:field="*{email}" /></label><br/>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

Example: userResult.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>User Result</title>
</head>
<body>
    <h1>User Result</h1>
    <p>Name: <span th:text="${user.name}">Default name</span></p>
    <p>Email: <span th:text="${user.email}">Default email</span></p>
</body>
</html>

Key Points

Template Engine: Thymeleaf is a template engine for processing and creating HTML, XML, JavaScript, CSS, and text.
Template Resolver: Thymeleaf uses template resolvers to find and process templates.
Context: A data container used for passing variables to templates.
Expressions: Thymeleaf provides various expression types for variable substitution, text, and URL creation.
Include the Spring Boot Starter Thymeleaf dependency in your pom.xml file.
Create controllers to handle web requests and return Thymeleaf templates.
Design Thymeleaf templates to render HTML views and place them in the src/main/resources/templates directory.
Use Thymeleaf expressions for variable substitution, text, and URL creation in templates.
Handle form submissions using Thymeleaf and Spring Boot.

Conclusion

Spring Boot and Thymeleaf provide a powerful combination for building modern web applications. By understanding and using the capabilities of Thymeleaf with Spring Boot, developers can create dynamic and maintainable web applications with ease. Happy coding!