Spring Boot & Thymeleaf

Introduction

Thymeleaf is a modern server-side Java template engine for both web and standalone environments.

Thymeleaf's main goal is to bring elegant natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes, allowing for stronger collaboration in development teams.

With modules for Spring Framework, a host of integrations with your favorite tools, and the ability to plug in your own functionality, Thymeleaf is ideal for modern-day HTML5 JVM web development — although there is much more it can do.

Thymeleaf is commonly used to generate the HTML views for web apps And can be used outside of webApps as well. The thymeleaf project is not a part of spring project addressed by spring.io

Lets begin understanding the purpose of Thymeleaf with a few questions.

What is a Thymeleaf Template ?

• Can be an HTML page with some Thymeleaf Expressions
• Include dynamic content from Thymeleaf expressions.

Where is a Thymeleaf template processed ?

• In a web app, Its processed on the server
• Results are contained in HTML and returned to browser

In the diagram

1. Browser Sends a request to the Spring MVC controller
2. MVC controller Processes the request and sets data to the Model and The same mode is attached to a view.
3. The View now prepared is sent to the Browser.

Setting up the project

Thymeleaf is available as a starter dependency for spring boot projects over spring initializer platform Or The Thymeleaf can be added to Maven pom file

Writing a Spring MVC Controller

Since we have the dependency in the Maven Pom. Spring will auto-configure to use Thymeleaf. This means Spring will automatically look for a file named “helloworld.html” in its default template path src/main/resources/templates/helloworld.html

Bonus Point : @Controller is used to declare common web controllers which can return HTTP response but @RestController is used to create controllers for REST APIs which can return JSON. In Spring MVC, both @Controller and @RestController annotations are used to define web controllers as per MVC Design pattern.

Create a Thymeleaf Temaplate 

The Term ${theDate} is binded to the Model we had given a value in the Controller Method.

Explaining the entire flow :

1. The controller method sayHello(Model model) will execute when the

• HTTP GET call is made over {{application_host_address}}/ URL.
• The theDate is set to hold the current System Date value. Which will then be substituted over helloworld.html page’s ${theDate} value.

2. This will process the template at server-side and a fully ready HTML will be sent to the browser to render an output such as

Since we have seen here how the Thymeleaf template engine works with a hands-on example. It should now be easy to understand topics based on this foundational concept.

Additional Features Thymeleaf supports:

1. Looping and Conditionals : That can help to render UI based on conditions specified as per the values of a model. Or Help over rendering Java Collections to Some HTML <table> tag and its subsequent Data. https://www.baeldung.com/thymeleaf-iteration
2. CSS and JavaScript Integration : That eventually delivers a Good Look (User-Interface) and end-user browser level processing capacity to the HTML page independently (User-Experience).
3. https://www.baeldung.com/spring-thymeleaf-css-js

Template Layouts and Fragments : That help reusability of redundant items (HTML snippets) over multiple Pages and keep the User Interface consistent.

https://www.thymeleaf.org/doc/articles/layouts.html