Developing the Web UI using Thymeleaf
In this lesson, you will be introduced to developing the Web UI Thymeleaf.
We'll cover the following...
In the previous lesson, you learned about the Controller and RestController. In this lesson, you will learn about Thymeleaf for templating server-side response.
As this course aims at understanding Spring Boot and using Thymeleaf for templating, we will not deep-dive into the Web UI development much.
Let us see how to use Thymeleaf to render the complete HTML using the data that is bound with the template HTML by the Controller.
Adding Thymeleaf namespace
The first step for writing a Thymeleaf template HTML is to add the namespace. With this namespace added, the Thymeleaf engine will be able to manipulate and render the corresponding HTML.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
....
</html>
After adding the namespace, we can apply Thymeleaf templating to all the HTML tags and attributes. Whichever attribute has <span th:*="...." /> will be parsed by the Thymeleaf engine.
Accessing local static file
<link rel="shortcut icon" th:href="@{/favicon.png}" type="image/x-icon">
In the above code, the resource file favicon.png has a relative path. As it has the th: namespace prefix, @{/favicon.png} will be replaced with the complete path by the Thymeleaf engine.
By default, all the static resources are placed under src/main/resources/static. @{/favicon.png} means the file favicon.png is present inside src/main/resources/static. If we are going to place it in subfolders under src/main/resources/static, we ...