How do you create a Thymeleaf template in Spring Boot?

Table of Contents

Introduction

In Spring Boot, creating a Thymeleaf template involves setting up a basic HTML structure with Thymeleaf-specific syntax that allows dynamic rendering of content. Thymeleaf is a modern templating engine for Java, often used with Spring Boot to build dynamic, server-side rendered web applications. The integration of Thymeleaf with Spring Boot makes it easy to create views that are populated with data from Spring controllers.

In this guide, we will walk you through the steps of creating a Thymeleaf template in a Spring Boot application, including setting up the template, passing data from controllers, and rendering dynamic content.

Steps to Create a Thymeleaf Template in Spring Boot

1. Add the Thymeleaf Dependency

First, ensure that you have the spring-boot-starter-thymeleaf dependency in your project. This starter provides the necessary setup for Thymeleaf, allowing Spring Boot to handle template rendering automatically.

For Maven, add the following to your pom.xml:

For Gradle, add this to your build.gradle:

This dependency will pull in Thymeleaf and configure it with Spring Boot, making the integration seamless.

2. Create the Thymeleaf Template

By default, Spring Boot expects your Thymeleaf templates to be stored in the /src/main/resources/templates/ directory. You can create a new HTML file here to start building your Thymeleaf template.

Create a new file, for example, home.html inside the /templates directory:

In this template:

  • The th:text attribute is used to dynamically insert the value of name from the model into the <span> tag. If name is not available, "Guest" is displayed as the default text.
  • The xmlns:th="http://www.thymeleaf.org" attribute is necessary to use Thymeleaf-specific attributes like th:text.

3. Create a Spring Controller to Handle Requests

To render the Thymeleaf template with dynamic data, you need to create a Spring controller. The controller will handle incoming HTTP requests, prepare data, and pass it to the template via a Model object.

Here is an example of a simple controller that passes a name attribute to the home.html template:

In this example:

  • The @Controller annotation marks the HomeController class as a Spring controller.
  • The @GetMapping("/") annotation maps the root URL (/) to the home() method.
  • The model.addAttribute("name", "John Doe") adds the name attribute with the value "John Doe" to the model. This data will be injected into the home.html template where th:text="${name}" is used.

4. Run the Application

Once the controller and template are set up, run your Spring Boot application using either the Maven command:

Or from your IDE, if you're running the application locally. The application will start on the default port 8080 (unless otherwise configured).

5. Access the Template in the Browser

Navigate to http://localhost:8080/ in your web browser. You should see the rendered home.html template with the dynamically injected content:

Advanced Features in Thymeleaf Templates

1. Iterating Over Collections

Thymeleaf allows you to iterate over collections (like lists and arrays) directly in the template. For example, if you have a list of items, you can display them in an unordered list.

In the items.html template:

In this example:

  • The th:each="item : ${items}" attribute iterates over the items list and renders each item as a list item (<li>).
  • The th:text="${item}" inserts the name of the item into the HTML.

2. Using Forms in Thymeleaf

Thymeleaf integrates seamlessly with Spring Boot’s form handling. You can bind form data to Java objects and render form fields.

Here’s an example of a form in Thymeleaf:

In this example:

  • The th:action="@{/submit}" generates the action URL for form submission.
  • The th:field="*{name}" binds the form field to the name property of the user object.

3. Conditional Rendering

Thymeleaf also allows you to conditionally render HTML content using th:if and th:unless. For example, to display a message if a certain condition is met:

In this example:

  • The th:if="${name != null}" attribute checks if the name is not null and displays the paragraph accordingly.

Conclusion

Creating a Thymeleaf template in Spring Boot is a straightforward process. By adding the spring-boot-starter-thymeleaf dependency, you can set up and render dynamic HTML templates easily. With Thymeleaf’s powerful features, including conditionals, iteration, form binding, and localization support, you can create rich and interactive web applications with Spring Boot and Thymeleaf.

Share
Similar Questions