What is Thymeleaf? How to use Thymeleaf in Spring Boot application Picture 1

You can use Thymeleaf to process 6 types of templates: HTML, XML, Text, JavaScript, CSS, and RAW. Thymeleaf views each template as a template mode, where HTML is the most common.

Initialize Thymeleaf in your application

You have two ways to add Thymeleaf to your Spring Boot application. You can choose Thymeleaf as a dependency when creating boilerplate using Spring's initializer. You also have the option of adding it to the build spec file in the dependencies.

If you have selected one of the Gradle project options, this file contains the build.gradle dependencies . However, if you choose Maven , that file is pom.xml .

The pom.xml file will contain the following dependencies:

 org.springframework.boot spring-boot-starter-thymeleaf 

The build.gradle file will contain the following dependencies:

dependencies { implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' }

By adding Thymeleaf to your Spring application, you will gain access to its main library, allowing you to use Thymeleaf's Spring Standard Dialect. Spring Standard Dialect contains unique properties and syntax that you can use to add different features to the layout.

Using Thymeleaf in Spring Boot

When using Thyemleaf in a Spring application, the first step is to create a template document. In this example application, the sample document is HTML. You always create Thymeleaf templates in Spring Boot's templates directory, which is available in the source file.

File home.html

 Generic Website 

The above Thymeleaf template is a common HTML5 template, with an external attribute (xmlns:th). The purpose of xmlns:th is to provide scope for the th:* attribute that you will use in your HTML document. Other attributes & tags in a Thymeleaf template are the traditional HTML tags and attributes.

Create header

One of the first and most important aspects of any web or application is the header. It indicates the app content via a logo, and makes it easy to navigate the app. A basic header with a logo and some navigational links.

LOGO

1. Home
2. About
3. Services

Thymeleaf allows you to add the above header to any page in your web application using the th:insert attribute . th:insert and th:replace accept what Thymeleaf calls a fractional expression value. Segment expressions allow you to place markers anywhere in the layout.

Insert the above markup at the top of the home.html tag which inserts the header markup at the top of the home page. A fractional expression has several components, of which two are optional and two are required:

1. The tilde (~), is optional.
2. A pair of curly braces ({}), which are optional.
3. The name of the template containing the markup you want to insert (header.html).
4. The CSS selector of the markup you want to insert (#nav).

The following markup gives the same result as the one above:

Fill in the form content

Thymeleaf allows you to use 5 types of expressions in templates:

1. Fractional expression (~{…})
2. Message expression (#{…})
3. Link URL expression (@{…})
4. Variable expression (${…})
5. Selection variable expression (*{…})

Announcement expressions allow you to add external text snippets to the layout. With this expression, you can easily replace or reuse text in the layout. When using message expressions, you always need to place the external text in the .properties file in the resource s directory .

In this simple application, that file is messages.properties , which contains the following text:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

You should note that the above text (or message) has a special key ( placeholder.text ). This is because each message file can contain a different collection of messages. For that, you will need a key to insert a specific message into the layout.

Inserting the above markup into the body of the HTML file will effectively display the placeholder text as a paragraph in your viewport. Unlike fragment expressions, every aspect of message expressions is mandatory. A message expression requires:

1. A number symbol (#).
2. A pair of curly braces ({}).
3. The key holds the message you want to insert (placeholder.text).

Styling the template

Another important file in the resources folder is the static file. This file stores your CSS files and any images you plan to use in your application. To link your external CSS file to the Thymeleaf HTML template, you will need to use the link URL expression. The binding URL expression handles both relative and absolute URLs.

Inserting the above markup into the HTML file will allow you to style your template with the style.css file . This file is available in the css folder in the static section of the resource file from the sample app. You should always assign the link URL expression to the th:href attribute.

Thymeleaf provides several other properties that you can use to enhance your layout design, such as th:style that adds an image to the layout.

Variable expression

Variable expressions are the most common and arguably the most complex expressions used by Thymeleaf. Thymeleaf variable expressions allow you to collect data from an application context or an object within an application and include that data in a template. Depending on the data source that you want to expose to your view, there are two types of variable expressions that you can use.

Regular expression uses the dollar sign and allows you to collect data from the application context (which is data associated with the various tasks running in the application). For example, if you want to collect user data from a method, a dollar sign variable expression is a more realistic choice. If you execute the sample project and navigate to http://localhost:8080/ in your browser, you will see the following method:

What is Thymeleaf? How to use Thymeleaf in Spring Boot application Picture 2

After closing the modal or submitting the name, the app will navigate to the home page. On the home page you will see a generic web page displaying the word "Welcome", followed by the string you just submitted in the modal.

What is Thymeleaf? How to use Thymeleaf in Spring Boot application Picture 3

The sample application uses variable expressions to complete this process. The simple form in the modal.html file has the following markup:

 Submit 

When the user submits this form, it triggers the th:action attribute with the value of an article URL, which you can find in the WebController class .

@PostMapping("/home") public String processName(String userName, Model model) { model.addAttribute("userName", userName); return "home"; }

The processName() method accepts a string the user provides to the method, and then assigns that string to a variable named userName. Then using a variable expression the controller injects the username variable into the layout.

Welcome !

Selection variable expressions use an asterisk and it is most useful when you are dealing with more complex applications. For example, an application that requires the user to be logged in could use a selection variable expression. You can collect the username from the user object and insert it into the layout.

Above is how to use Thymeleaf in Spring app . Hope the article is useful to you.

Micah Soto

Update 28 August 2023