Spring Boot + Thymeleaf  Example

By Dhiraj Ray, 05 December,2016  

As we know Thymeleaf has all the capabilities and even more than of traditional JSP.Today let us discuss about what is Thymeleaf, why Thymeleaf is required and also about how to integrate Thymeleaf with Spring Boot with a simple example.

What is Thymeleaf?

As per wiki, Thymeleaf is a Java XML/XHTML/HTML5 template engine that can work both in web (Servlet-based) 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. In web applications Thymeleaf aims to be a complete substitute for JSP, and implements the concept of Natural Templates: template files that can be directly opened in browsers and that still display correctly as web pages.

Why Thymeleaf?

ThymeLeaf is a healthy open source project: new features coming up each month, good documentation, responsive user forums? Though JSP is more or less like HTML but it is not completely compatible with HTML like Thymeleaf. Thymeleaf template file will open and display normally in a browser, while a JSP file does not. Thymeleaf has also support for variable expressions (${...}) like Spring EL and execute on model attributes, asterisk expressions (*{...}) execute on the form backing bean, hash expressions (#{...}) are for internationalization and link expressions (@{...}) rewrite URLs. Unlike JSPs, Thymeleaf works well for Rich HTML emails.

Spring Boot and Thymeleaf integration

Spring boot has some default configurations and settings provided for Thymeleaf. Hence, it has made very simple to integrate Thymeleaf to integrate with spring boot. Let us see how we can integrate Thymeleaf with Spring Boot using a simple example. Following will be our project structure.

spring-boot-thymeleaf-example-project-structure

Maven Dependencies

By including spring-boot-starter-thymeleaf in our pom file, Spring boot provides required Thymeleaf template engine to us. Also, it provides some default stati file location configurations. e.g. Spring Boot configures the Thymeleaf template engine to read template files from /resources/templates.

pom.xml
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.developerstack</groupId> <artifactId>spring-boot-thymeleaf-example</artifactId> <version>0.1.0</version> <properties> <java.version>1.7</tjava.version> </properties> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.3.5.RELEASE</version> </parent> <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-starter-thymeleaf</artifactId> </plugin> </plugins> </build> </project>

Spring Bean Configuration

@SpringBootApplication annotation is equivalent to using @Configuration, @EnableAutoConfiguration and @ComponentScan with their default attributes:

Application.java
package com.developerstack.config; import org.springframework.boot.SpringApplication; import org.springframework.boot.builder.SpringApplicationBuilder; import org.springframework.boot.context.web.SpringBootServletInitializer; importorg.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class Application extends SpringBootServletInitializer { private static Class applicationClass = Application.class; public static void main(String[] args) { SpringApplication.run(Application.class, args); } @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder application) { return application.sources(applicationClass); } }

Now let us define our controller that will serve the response to the client.

EmailController.java
package com.developerstack.controller; import java.util.Arrays; import java.util.List; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.servlet.ModelAndView; @Controller public class EmailController { @RequestMapping(value = "/email", method = RequestMethod.GET) public ModelAndView hello(@RequestParam(value = "id", required = false, defaultValue = "123") Integer id) { ModelAndView model = new ModelAndView(); model.addObject("email", getEmail(id)); model.setViewName("hello"); return model; } private String getEmail(int id) { switch (id) { case 123: return "dhiraj123@gmail.com"; case 345: return "amit345@yahoo.co.in"; default: return "default@test.com"; } }

Client Side

At client side we have simple .html and cs files. Spring Boot will automatically serves static resources from the path /resources/static. So, following is the configuration about how we can achieve sering static content in spring boot.

hello.html
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <link href="../static/welcome.css" th:href="@{/welcome.css}" rel="stylesheet" media="screen"/> <title>Hello Thymeleaf!</title> </head> <body> Your email address is <span th:text=" ${email} + '!'"> </body> </html>
dashboard.css
body { color: red; }

Run Application

1. Run Application.java as a java application.

2. Open browser and hit url http://localhost:8080/email?id=123

3. Based on the id passed, email address wll be displayed as below:

spring-boot-thymeleaf-example

Conclusion

I hope this article served you that you were looking for. If you have anything that you want to add or share then please share it below in the comment section.

Download the source

References: Spring Framework References Spring Boot References Spring Thymeleaf Integration

Suggest more topics in suggestion section or write your own article and share with your colleagues.

Is this page helpful to you? Please give us your feedback below. We would love to hear your thoughts on these articles, it will help us improve further our learning process.

Further Reading: