Spring Boot – Introduction to Thymeleaf

Introduction to Thymeleaf

In this lesson, I would teach you how to display date in html form. We would use Thymeleaf to achieve this.

 

Overview of Thymeleaf

According to the Thymeleaf website, “Thymeleaf is a modern server-side Java template engine for both web and standalone environment”. Thymeleaf is capable of processing JavaScript, HTML, XML, CSS and plain text.

Before now, we use jsp (Java Server Pages) to process dynamic content. I would not spend time on why Thymeleaf is better than jsp. But we can be sure that Thymeleaf is easier to work with and likely would completely replace jsp.

So let’s get started!

 

In this Tutorial…

First we are going to display all our entities in form (like a list).

Next, we would add a data entry form for each of the entities.

Finally we would add feature for Update and Delete of records

Further in the tutorial, we would implement a login form using Spring Security.

 

Add Thymeleaf and other dependencies

Add the following Thymeleaf dependency to your pom.xml file

 

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

<dependency>
   <groupId>org.springframework</groupId>
   <artifactId>spring-context</artifactId>
</dependency>
    
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-web</artifactId>
</dependency>

 

Save the file so the dependencies are downloaded to the classpath

 

Set up the Home Page

Create an index.html file inside the templates folder in the src/main/resources folder

The content of the file would be as shown below:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Thymeleaf Tutorial</title>
</head>
<body>

<h2>Welcome to Thymeleaf!</h2>

</body>
</html>

 

Create a file called HomeController inside the com.kindsonthegenius.social package.

Annotate the class with @Controller directive

Write a method inside this file to return the index page you created.

The content of the HomeController file would be as shown below.

@Controller
public class HomeController {
	
	@RequestMapping(value="/home")
	public static String welcome() {
		return "index";
	}	
}

Save the file and launch the application

Visit http://localhost:8080 and confirm that the page displays  as shown below.

Thymeleaf

 

Add a navigation bar. This you do by modifying the index.html file as shown below. Just add the code below in the <body> </body> section

 

<div align="center"> 

<a th:href="@{posts}">Posts</a> | 
<a th:href="@{students}">Students</a> | 
<a th:href="@{users}">Users</a>Users | 
<a th:href="@{locations}">Locations</a> 

</div>

 

Now, create four more html pages. Name them posts.html, students.html, users.html and location.html.

Next, Copy across the content of index.html file into these pages.

 

We would start by working on the LocationController file. We would make the controller send a list of locations to the locations.html file.

Open the LocationController file. Change the @RequestController annotation to @Controller

Modify the getAllLocations function to the one below:

 

 @RequestMapping(value = "/locations")
 public String getAllLocations(Model model) 
 {				
	model.addAttribute("locations", locationService.getAllLocations());		
	return "locations";		
 }

 

Finally, add the code below to the locations.html file.

 

<ul>
    <li th:each="location : ${locations}">
        <span th:text="${location.name}">Default</span>
    </li>
</ul>

 

Launch the application and visit http://localhost:8080.

Navigate to Locations and notice that you have list of locations displayed as a bulleted list.

If you have challenges, I would recommend you watch the video.

In the next lesson, we would see how work on other entities but I try to do it yourself first.