Thymeleaf is a relatively new template engine; the first version was released in 2011. Thymeleaf is pretty similar to HTML, which doesn't require any servlet containers to preview content in a browser. This is exploited in order to allow designers to work on the look and feel of the application, without deploying it.
Let's review how to convert a web template build, using HTML and Bootstrap, into a Thymeleaf template, in order to see that this template engine is not intrusive. The following code represents a very basic HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Default title</title>
<meta name="viewport" content="width=device-width,
initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MVC Demo</a>
</div>
<ul class="nav navbar-nav">
<li><a href="/index">Home</a></li>
<li><a href="/notifications">My notification channels</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/login"><span class="glyphicon glyphicon-user">
</span> Login</a>
</li>
<li>
<a href="/logout">
<span class="glyphicon glyphicon-log-in"></span>
Logout
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
Page content goes here
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>
Since this is a regular HTML file, you can open it in a browser to see how it looks:
Now, let's implement a few requirements, to make our template work in a more realistic way:
- The Logout option should be present only when the user is logged in
- The My notification channels option should not be present if the user is not logged in
- The Login option should not be present once the user is logged in
- Once the user is logged in, the Home option should show a welcome message using their username
These requirements are trivial when we are creating web applications, and fortunately, they are also easy to implement using Thymeleaf.
In order to show/hide certain elements in a web page once the user is logged in, we need to include an additional library to deal with this stuff.
To include the library with Gradle, use the following command:
compile('org.thymeleaf.extras:thymeleaf-extras-springsecurity4')
To include the library with Maven, use the following command:
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity4</artifactId>
</dependency>
Now, we need to add a tag declaration in the HTML file, in order to use Thymeleaf and the new extension that was added:
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
Once we have included these tags, we will have the ability to use the provided built-in functionality. When you need to hide/show a certain element, depending on whether or not the user is logged in, you can use the isAuthenticated() condition, as follows:
<ul class="nav navbar-nav navbar-right">
<li sec:authorize="!isAuthenticated()">
<a href="/login"><span class="glyphicon glyphicon-user"></span> Login</a>
</li>
<li sec:authorize="isAuthenticated()">
<a href="/logout">
<span class="glyphicon glyphicon-log-in"></span>
Logout
</a>
</li>
</ul>
It's also quite common to restrict access, depending on the user roles assigned. These checks are also easy to implement using the added extension, as shown in the following code:
<li sec:authorize="hasRole('ROLE_ADMIN')"><a href="/a">Admins only</a></li>
<li sec:authorize="hasRole('ROLE_EDITOR')"><a href="/b">Editors only</a></li>
To finish, if you need to show the username on a web page, you can use the following tag inside of your HTML file:
<p>Hello, <span sec:authentication="name"></span>!</p>
Alternatively, once the template has been created by our designers or frontend experts, we will want to use it across the whole application, to keep a consistent look and feel. In order to achieve this goal, we need to define which part of the page will be replaced by specific content in the template, using the layout tags:
<div class="col-md-6" layout:fragment="content">
Page content goes here
</div>
The pages will then need to define the template name and the content that should be shown in the defined fragments, as follows:
<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
layout:decorator="default-layout">
<head>
<title>Home</title>
</head>
<body>
<div layout:fragment="content">
// Content here
</div>
</body>
</html>
We mentioned earlier that Thymeleaf is not intrusive at all, and we are going to show you why. Once all of the desired logic has been implemented using the Thymeleaf tags, you can open the template again using a regular browser, without deploying the application in a servlet container. You will get the following result:
We have duplicate menu options, and we can still see the login and logout options, because the browser is not able to interpret the Thymeleaf tags. However, the good news is that the introduced code is not harming the template at all. This is exactly why your web designers can keep working and still have a preview in the browser. No matter how many Thymeleaf tags you have introduced in the template, these tags are not intrusive to the existing HTML code.