Blog

Hey guys in this post, we will discuss integrating spring boot with the Thymeleaf template engine.

Overview

Thymeleaf is a Java XML/XHTML/HTML5 template engine that can work both in web and non-web environments. It is better suited for serving XHTML/HTML5 at the view layer of MVC-based web applications, but it can process any XML file even in offline environments. It provides full Spring Framework integration.

In this post, we will create a simple spring boot project, add the Thymeleaf template engine support and display the current date and time inside the Thymeleaf view template.

Complete example

Let’s create a step-by-step spring boot project and display the current date and time.

Create spring boot project

There are many different ways to create a spring boot application, you can follow the below articles to create one –

>> Create spring boot application using Spring initializer
>> Create spring boot application in Spring tool suite [STS]
>> Create spring boot application in IntelliJ IDEA

Add maven dependencies

Open pom.xml and add the following dependencies –

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.4.4</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>in.bushansirgur</groupId>
	<artifactId>springboot-thymeleaf</artifactId>
	<version>v1</version>
	<name>springboot-thymeleaf</name>
	<description>Spring boot thymeleaf</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

spring-boot-starter-web dependency for building web applications using Spring MVC. It uses the tomcat as the default embedded container. We have added the spring-boot-starter-thymeleafdependency for Thymeleaf support. We have also added the spring-boot-devtools dependency for automatic reloads or live reload of applications.

Create a controller

Create HomeController.java inside the in.bushansirgur.springboot.controller package and add the following content

package in.bushansirgur.springboot.controller;

import java.util.Date;

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

@Controller
public class HomeController {
	
	@GetMapping("/datetime")
	public ModelAndView getCurrentDateAndTime() {
		ModelAndView mav = new ModelAndView("home");
		mav.addObject("currentDateAndTime", new Date());
		return mav;
	}
}

We have created a handler method getCurrentDateAndTime() which is mapped to the URI /datetime which is annotated with @GetMapping annotation.




Inside this handler method, we have created ModelAndView which will hold the data and view name. We have added the current date and time by creating a new Date() object and added it to the ModelAndView with the key name as  currentDateAndTime. We also added the view name as home to ModelAndView constructor and we will return the ModelAndView back to the client.

Since we have specified the view name as home, we need to create an HTML file with the name home.html inside the src/main/resources of templates folder. By default, all Thymeleaf templates reside inside the templates folder.

Create a view

Inside the templates folder, create home.html file and add the following content

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p th:text="'The current date and time is '+${currentDateAndTime}"></p>
</body>
</html>

First, at the top we specify the Thymeleaf schema xmlns:th="http://www.thymeleaf.org"

Next, we will create an <p> element to display the data which we added to the ModelAndView in the HomeController. We will make use of th:text to display the date inside the <p> element.

Run the app

Run the application using the below maven command –

mvn spring-boot:run

Open the browser and enter the following URL – http://localhost:8080/datetime