An Introduction to Using Thymeleaf in Spring boot

This blog explains how Thymeleaf can be integrated with the Spring boot Framework and show you how to develop a simple Spring Boot application using Thymeleaf java library in which thymeleaf act as a template engine to display data on front end.

Spring framework is one of the leading frameworks in the JAVA world for developing reliable and high-quality Enterprise-level applications with zero XML configuration and embedded web server.

What is Thymeleaf?

Thymeleaf is a open-source Java library used to create a web application. It is a server-side Java template engine for both web or servlet based and standalone or nonweb applications .

It provides full integration with Spring Framework. Thymeleaf is very fast when compared with other popular template engines such as JSP. It is built on the concept of natural templates, we can easily open and display these template file normally in the browser. Jsp don't have capablity to do this.

By default, Thymeleaf comes with 6 templates namely:

XML

Valid XML

XHTML

Valid XHTML

HTML5

Legacy HTML5

Developers consider thymeleaf ideal for HTML5 web development because it provides more flexibility and easy to use than other templates.

How to integrate thymeleaf with spring boot

For a Spring Boot Thymeleaf web application, we have maven dependencies that we have to put on pom.xml file.

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

Spring Boot configures template engine to read template files from the default template directory src/main/resources/templates.

Attributes in thymeleaf

Thymeleaf will read a template or html file and then it will read combine data and set the values according to fields of the model object.. We can handle this data in backend easily using attribute “@Model Attribute” annotation.

th:text=”${person.firstName}” tag attribute is used to display the value of model data

members like id, name etc.

If we talk about collection of objects then the th:each tag attribute can be used to iteration.

For example:

1.Here we define a pojo class with two fields-

 public class Person implements Serializable {  
 private String firstName;  
 private String lastName;  
 // standard getters and setters  
 }  

2. Define a controller and add a list of persons as model attribute

 List<Person> students = new ArrayList<Person>();  
 model.addAttribute("persons", persons);  

3. Finally we have a thymeleaf template html code in which we iterate the list and display both fields values.

 <tr th:each="person: ${persons}">  
 <td th:text="${person.firstName}" />  
 <td th:text="${person.lastName}" />  
 </tr>  

If we want handle user input with a simple form then th:action=”@{url}” , th:object=”${object}” and th:field=”*{name}” attributes are used. Action tag attribute is used to provide url of our spring boot rest api which we create in inside the controller class. Object tag attribute represents object in which the submit data will be bound. Field tag attribute is used for mapping the individual field present in the model class.

For example:

1. Thymleaf template with a simple submit form

 <form action="#" th:action="@{/savePerson}" th:object="${person}" method="post">  
 <tr>  
 <td><label th:text="#{person.firstName}" /></td>  
 <td><input type="text" th:field="*{firstName}" /></td>  
 </tr>  
 <tr>  
 <td><label th:text="#{person.lastName}" /></td>  
 <td><input type="text" th:field="*{lastName}" /></td>  
 </tr>  
 <tr>  
 <td><input type="submit" value="Submit" /></td>  
 </tr>  
 </table>  
 </form>  

2. Person controller for handling form submission

 @Controller  
 public class PersonController {  
 @RequestMapping(value = "/savePerson", method = RequestMethod.POST)  
 public String savePerson(@ModelAttribute Person person, BindingResult errors, Model model) {  
 }