Thymeleaf is a Java template engine for processing HTML, XML, JavaScript, CSS, and text. In this Spring Boot Thymeleaf Example, we will learn how to configure Thymeleaf with Spring Boot Application and build a simple Employee Details app.
Integrate Thymeleaf with Spring Boot
In a Spring MVC application, we need to configure Thymeleaf Template Engine where as integrating Thymeleaf with Spring Boot is pretty simple, all we need to do is to add the following spring-boot-starter-thymeleaf dependency in our pom.xml
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
By Default, Spring Boot configures the Thymeleaf template engine to read template files from /src/main/resources/templates, So we need to make sure to place our html files under the templates folder
Folder Structure:
- Create a Maven project (maven-archetype-quickstart) “SpringBootThymeleaf” and create a package for our source files “com.javainterviewpoint” under src/main/java
- Now add the following dependency in the POM.xml
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.javainterviewpoint</groupId> <artifactId>SpringBootThymeleaf</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>SpringBootThymeleaf</name> <url>http://maven.apache.org</url> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.3.RELEASE</version> </parent> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
- Create the Java classes App.java, Employee.java and EmployeeController.java under com.javainterviewpoint folder.
- Now create a new folder “templates” under src/main/resources. Now place the index.html and employeeDetails.html under it.
The spring-boot-starter-parent is a special starter, it provides useful Maven defaults. Since we are developing a web application, we also need to add spring-boot-starter-web dependency.This will add dependencies such Tomcat, Jackson, Spring boot etc which are required for our application.
Spring Boot Thymeleaf Example
Dependency Tree
[INFO] ------------------------------------------------------------------------ [INFO] Building SpringBootThymeleaf 0.0.1-SNAPSHOT [INFO] ------------------------------------------------------------------------ [INFO] [INFO] --- maven-dependency-plugin:2.10:tree (default-cli) @ SpringBootThymeleaf --- [INFO] com.javainterviewpoint:SpringBootThymeleaf:jar:0.0.1-SNAPSHOT [INFO] \- org.springframework.boot:spring-boot-starter-thymeleaf:jar:1.5.3.RELEASE:compile [INFO] +- org.springframework.boot:spring-boot-starter:jar:1.5.3.RELEASE:compile [INFO] | +- org.springframework.boot:spring-boot:jar:1.5.3.RELEASE:compile [INFO] | | \- org.springframework:spring-context:jar:4.3.8.RELEASE:compile [INFO] | +- org.springframework.boot:spring-boot-autoconfigure:jar:1.5.3.RELEASE:compile [INFO] | +- org.springframework.boot:spring-boot-starter-logging:jar:1.5.3.RELEASE:compile [INFO] | | +- ch.qos.logback:logback-classic:jar:1.1.11:compile [INFO] | | | \- ch.qos.logback:logback-core:jar:1.1.11:compile [INFO] | | +- org.slf4j:jcl-over-slf4j:jar:1.7.25:compile [INFO] | | +- org.slf4j:jul-to-slf4j:jar:1.7.25:compile [INFO] | | \- org.slf4j:log4j-over-slf4j:jar:1.7.25:compile [INFO] | +- org.springframework:spring-core:jar:4.3.8.RELEASE:compile [INFO] | \- org.yaml:snakeyaml:jar:1.17:runtime [INFO] +- org.springframework.boot:spring-boot-starter-web:jar:1.5.3.RELEASE:compile [INFO] | +- org.springframework.boot:spring-boot-starter-tomcat:jar:1.5.3.RELEASE:compile [INFO] | | +- org.apache.tomcat.embed:tomcat-embed-core:jar:8.5.14:compile [INFO] | | +- org.apache.tomcat.embed:tomcat-embed-el:jar:8.5.14:compile [INFO] | | \- org.apache.tomcat.embed:tomcat-embed-websocket:jar:8.5.14:compile [INFO] | +- org.hibernate:hibernate-validator:jar:5.3.5.Final:compile [INFO] | | +- javax.validation:validation-api:jar:1.1.0.Final:compile [INFO] | | +- org.jboss.logging:jboss-logging:jar:3.3.1.Final:compile [INFO] | | \- com.fasterxml:classmate:jar:1.3.3:compile [INFO] | +- com.fasterxml.jackson.core:jackson-databind:jar:2.8.8:compile [INFO] | | +- com.fasterxml.jackson.core:jackson-annotations:jar:2.8.0:compile [INFO] | | \- com.fasterxml.jackson.core:jackson-core:jar:2.8.8:compile [INFO] | +- org.springframework:spring-web:jar:4.3.8.RELEASE:compile [INFO] | | +- org.springframework:spring-aop:jar:4.3.8.RELEASE:compile [INFO] | | \- org.springframework:spring-beans:jar:4.3.8.RELEASE:compile [INFO] | \- org.springframework:spring-webmvc:jar:4.3.8.RELEASE:compile [INFO] | \- org.springframework:spring-expression:jar:4.3.8.RELEASE:compile [INFO] +- org.thymeleaf:thymeleaf-spring4:jar:2.1.5.RELEASE:compile [INFO] | +- org.thymeleaf:thymeleaf:jar:2.1.5.RELEASE:compile [INFO] | | +- ognl:ognl:jar:3.0.8:compile [INFO] | | +- org.javassist:javassist:jar:3.21.0-GA:compile [INFO] | | \- org.unbescape:unbescape:jar:1.1.0.RELEASE:compile [INFO] | \- org.slf4j:slf4j-api:jar:1.7.25:compile [INFO] \- nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:jar:1.4.0:compile [INFO] \- org.codehaus.groovy:groovy:jar:2.4.10:compile
index.html
All our templates are placed under src/main/resources/templates directory
<html lang="en">
<head>
<title>Spring Boot Thymeleaf Example</title>
</head>
<body>
<form action="display" method="post">
<h1>Employee Details Forms</h1>
<table>
<tr>
<td><label for="Name">Name</label></td>
<td><input type="text" name="name"></input></td>
</tr>
<tr>
<td><label for="Age">Age</label></td>
<td><input type="text" name="age"></input></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></input></td>
</tr>
</table>
</form>
</body>
</html>
employeeDetails.html
<html xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Display Employee Details</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr th:each="employee : ${employeeList}">
<td th:text="${employee.name}">Name</td>
<td th:text="${employee.age}">Age</td>
</tr>
</table>
<strong><a href="/">Click here to go back</a></strong>
</body>
</html>
- In the first line we are setting the XML Namespace for Thymeleaf
- Thymeleaf th:each will enable us to iterate a collection, we will be iterating each employee object in the employeeList
<tr th:each="employee : ${employeeList}">
- Using th:text we can access the individual values name and age.
<td th:text="${employee.name}">Name</td>
<td th:text="${employee.age}">Age</td>
EmployeeController.java
package com.javainterviewpoint;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class EmployeeController
{
private static List employeeList = new ArrayList();
@RequestMapping("/")
public String home()
{
return "index";
}
@RequestMapping(value = "/display", method = RequestMethod.POST)
public ModelAndView saveEmployee(@ModelAttribute Employee employee)
{
ModelAndView mav = new ModelAndView();
mav.setViewName("employeeDetails");
employeeList.add(employee);
mav.addObject("employeeList", employeeList);
return mav;
}
}
- We have created our EmployeeController under com.javainterviewpoint package
- We have 2 methods in the controller
- home() – This method will redirect the user to index template page.
- saveEmployee() – This method will add the employee object to the employeeList and will be redirected to the employeeDetails template page.
Employee.java
Employee Class is a simple POJO consisting of the getters and setters for the properties name and age.
package com.javainterviewpoint;
public class Employee {
String name;
String age;
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public String getAge()
{
return age;
}
public void setAge(String age)
{
this.age = age;
}
}
App.java
package com.javainterviewpoint;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class App {
public static void main(String[] args) throws Exception {
SpringApplication.run(App.class, args);
}
}
- @SpringBootApplication annotation does the work of @EnableAutoConfiguration, @Configuration and @ComponentScan annotations together
Output:
Select the Project –>Run As –> Run Configuration –>Maven –> New. In the Main tab, key in the Goals as “spring-boot:run” and click on Run.
Leave a Reply