Thymeleaf is an open template engine with the ability to handle many other languages such as HTML, XML, Javascript, CSS. Users can use it to customize the template according to their needs. In this tutorial, I will guide you all some basic steps to use Thymeleaf in your Spring MVC application.
First, I will create a new Maven project as an example:
If you do not know how to create a Spring MVC project, just refer to this tutorial. Here, I edited the version of the dependencies as follows:
|
1 2 3 4 5 6 7 8 9 |
<properties> <maven.compiler.source>21</maven.compiler.source> <maven.compiler.target>21</maven.compiler.target> <org.springframework-version>6.1.10</org.springframework-version> <org.slf4j-version>2.0.13</org.slf4j-version> <org.junit-version>5.10.2</org.junit-version> <jakarta.servlet-api-version>6.1.0</jakarta.servlet-api-version> </properties> |
To use Thymeleaf, we need to add its dependencies:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Thymeleaf --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring6</artifactId> <version>3.1.2.RELEASE</version> </dependency> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>3.1.2.RELEASE</version> </dependency> |
To run this example, I will use the Maven Jetty Plugin:
|
1 2 3 4 5 |
<plugin> <groupId>org.eclipse.jetty</groupId> <artifactId>jetty-maven-plugin</artifactId> <version>11.0.21</version> </plugin> |
Before I start on the subject of this tutorial, I want to talk to you a little bit about the dialect concept in Thymeleaf …
As I said, Thymeleaf allows us to customize our template easily. This customization will use the objects specified by Thymeleaf. We will have logical processing in these objects so these objects are also known as processors and a set of processor objects called a dialect.
By default, Thymeleaf provides us with two dialects: one is Standard Dialect and another one is SpringStandard Dialect with some support for the Spring framework. In this tutorial, we will use the SpringStandard Dialect.
To use Thymeleaf in Spring MVC, we first need to declare Thymeleaf’s SpringTemplateEngine object in the Spring container. This object will help us declare Thymeleaf’s ViewResolver with Spring.
Let’s open the servlet-context.xml file located in the /src/main/webapp/WEB-INF/spring/appServlet directory, removing the default viewResolver:
|
1 2 3 4 5 |
<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory --> <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <beans:property name="prefix" value="/WEB-INF/views/" /> <beans:property name="suffix" value=".jsp" /> </beans:bean> |
then add the declaration of Thymeleaf’s SpringTemplateEngine object:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<beans:bean id="viewResolver" class="org.thymeleaf.spring6.templateresolver.SpringResourceTemplateResolver"> <beans:property name="prefix" value="/WEB-INF/views/" /> <beans:property name="suffix" value=".html" /> <beans:property name="cacheable" value="false" /> </beans:bean> <beans:bean id="engine" class="org.thymeleaf.spring6.SpringTemplateEngine"> <beans:property name="templateResolver" ref="viewResolver" /> </beans:bean> <beans:bean id="" class="org.thymeleaf.spring6.view.ThymeleafViewResolver"> <beans:property name="templateEngine" ref="engine" /> </beans:bean> |
As you can see, to declare Thymeleaf’s SpringTemplateEngine object in the Spring container, we have to declare another object called SpringResourceTemplateResolver to configure the location of the template files. And the ThymeleafViewResolver object will use this TemplateEngine object.
The configuration of the SpringResourceTemplateResolver is similar to the InternalResourceViewResolver object, the only difference being that we will work on .html files, not .jsp files anymore. That’s a better template since in the .jsp file we can declare the Java code in it.
Now, I will rename the home.jsp file located in /src/main/webapp/WEB-INF/views/ to home.html for using with Thymeleaf. The contents of the home.html file are now as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page session="false" %> <html> <head> <title>Home</title> </head> <body> <h1> Hello world! </h1> <P> The time on the server is ${serverTime}. </P> </body> </html> |
By using Thymeleaf’s namespace, I will edit the contents of the home.html file as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html xmlns:th="http://www.thymeleaf.org"> <head> <title>Home</title> </head> <body> <h1> Hello world! </h1> <P> The time on the server is <label th:text="${serverTime}"></label>. </P> </body> </html> |
As you can see, here I have declared Thymeleaf’s namespace and used it as an attribute of the HTML tag.
The result is the same when you run with InternalResourceViewResolver:
