Community for developers to learn, share their programming knowledge. Register!
Using Spring Boot's Built-in Features

Integrating Spring Boot with Thymeleaf

You can get training on our article, "Integrating Spring Boot with Thymeleaf," which serves as a comprehensive guide for developers looking to leverage Spring Boot's built-in features to create dynamic web applications. In this guide, we'll explore how to set up Thymeleaf, create dynamic web pages, and handle forms with this powerful template engine, all while taking advantage of Spring Boot's seamless integration capabilities.

Setting Up Thymeleaf in Spring Boot

To begin integrating Thymeleaf with Spring Boot, the first step is to set up the necessary dependencies in your project. If you are using Maven, you can include the Thymeleaf starter dependency in your pom.xml file:

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

If you are using Gradle, add the following line to your build.gradle:

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

Once you have the dependency set up, you can create a simple Spring Boot application. Here’s a basic setup:

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ThymeleafApplication {
    public static void main(String[] args) {
        SpringApplication.run(ThymeleafApplication.class, args);
    }
}

Next, you need to configure Thymeleaf in your application. By default, Spring Boot automatically configures Thymeleaf with sensible defaults, but you can customize the properties in the application.properties file. For instance, to set the prefix and suffix for your templates, you can use:

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

With this configuration, Thymeleaf will look for HTML templates in the src/main/resources/templates directory. You can create a simple HTML file called index.html within this directory to test your setup.

Here’s a sample index.html template:

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>Thymeleaf Example</title>
</head>
<body>
    <h1>Welcome to Thymeleaf with Spring Boot!</h1>
</body>
</html>

To serve this template, you need to create a controller:

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

@Controller
public class HomeController {
    @GetMapping("/")
    public String home() {
        return "index"; // Returns the index.html template
    }
}

When you run your Spring Boot application and navigate to http://localhost:8080, you should see the welcome message rendered by Thymeleaf. This foundational setup allows you to build more complex web applications using Thymeleaf's powerful features.

Creating Dynamic Web Pages with Thymeleaf

One of the key strengths of Thymeleaf is its ability to create dynamic web pages. It allows you to bind data from your Spring Boot application to the HTML templates seamlessly. Let’s explore how to achieve this by creating a simple model and displaying it on a web page.

First, define a simple model class:

public class User {
    private String name;
    private int age;

    // Constructors, getters, and setters
    public User(String name, int age) {
        this.name = name;
        this.age = age;
    }
    
    public String getName() {
        return name;
    }
    
    public int getAge() {
        return age;
    }
}

Next, modify the HomeController to include a method that adds a User object to the model:

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;

@Controller
public class HomeController {
    @GetMapping("/")
    public String home(Model model) {
        User user = new User("Alice", 30);
        model.addAttribute("user", user);
        return "index"; // Returns the index.html template
    }
}

Now, update the index.html template to display the user’s name and age:

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>Thymeleaf Example</title>
</head>
<body>
    <h1>Welcome to Thymeleaf with Spring Boot!</h1>
    <p th:text="'Name: ' + ${user.name}"></p>
    <p th:text="'Age: ' + ${user.age}"></p>
</body>
</html>

In this updated template, the th:text attribute is used to dynamically display the user's name and age. When you run the application and navigate to the root URL, you should see the name and age displayed on the web page.

Thymeleaf also supports various conditional expressions and iteration constructs, allowing you to create more complex, dynamic content. For example, you can use a th:if statement to conditionally display elements based on the model state.

Using Thymeleaf for Form Handling

Handling forms is a crucial aspect of web applications, and Thymeleaf makes this process straightforward. Let’s create a simple form to capture user input and display it back on the web page.

First, modify the User class to include a default constructor, which is necessary for form binding:

public class User {
    private String name;
    private int age;

    // Default constructor
    public User() {}

    // Other constructors, getters, and setters...
}

Next, add a method in the HomeController to display the form:

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

Now, create a new template called userForm.html in the templates directory:

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>User Form</title>
</head>
<body>
    <h1>User Form</h1>
    <form action="#" th:action="@{/submitUser}" th:object="${user}" method="post">
        <label>Name:</label>
        <input type="text" th:field="*{name}" /><br/>
        
        <label>Age:</label>
        <input type="number" th:field="*{age}" /><br/>
        
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

In this form, the th:object attribute binds the form to the user model attribute, and the th:field attributes bind the input fields to the properties of the User object.

Next, add a method to handle the form submission:

@PostMapping("/submitUser")
public String submitUser(@ModelAttribute User user, Model model) {
    model.addAttribute("user", user);
    return "userResult"; // A new template to display the result
}

Finally, create a userResult.html template to display the submitted user data:

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>User Result</title>
</head>
<body>
    <h1>User Submitted Details</h1>
    <p th:text="'Name: ' + ${user.name}"></p>
    <p th:text="'Age: ' + ${user.age}"></p>
</body>
</html>

With this setup, you can navigate to http://localhost:8080/userForm to see the form, fill it out, and submit it. The submitted data will be displayed on the userResult.html page.

Summary

In this article, we explored how to integrate Thymeleaf with Spring Boot to create dynamic web applications using Spring Boot's built-in features. We covered the setup process, how to create dynamic web pages, and how to handle forms effectively. By leveraging Thymeleaf's capabilities, developers can create engaging and responsive web applications that enhance user experience.

Thymeleaf is a powerful tool for any Java developer looking to build web applications, thanks to its intuitive syntax and seamless integration with Spring Boot. As you continue to develop your applications, consider exploring more advanced features of Thymeleaf, such as layout dialects and internationalization, to take your projects to the next level. For further reference, consult the official Thymeleaf documentation and the Spring Boot reference guide.

Last Update: 28 Dec, 2024

Topics:
Spring Boot
Spring Boot

This website uses cookies to ensure you get the best experience on our website. Learn more. Accept