In this tutorial, you will learn five types of Thymeleaf Standard Expressions - Variable, Selection, Message, Link, and Fragment expressions.
Thymeleaf Standard Expressions
There are five types of Thymeleaf standard expressions:
- ${...}: Variable expressions
- *{...} : Selection expressions
- #{...} : Message (i18n) expressions
- @{...} : Link (URL) expressions
- ~{...}: Fragment expressions
Let's understand each of these Thymeleaf Standard Expressions with an example.
Let's create a Spring boot project using the spring initializr and add Spring Web and Thymeleaf dependencies:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>Next, let's create a User model class with the following content into it:
package net.javaguides.thymeleaf.model;
public class User {
private String name;
private String email;
private String role;
private String gender;
public User(String name, String email, String role, String gender) {
this.name = name;
this.email = email;
this.role = role;
this.gender = gender;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getRole() {
return role;
}
public void setRole(String role) {
this.role = role;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}1. Variable expressions
Variable expressions are the most commonly used ones in the Thymeleaf templates. These expressions help bind the data from the template context(model) into the resulting HTML(view).
1. Create a handler method to handle the http://localhost:8080/variable-expression request
@GetMapping("variable-expression") public String variableExpression(Model model){ User user = new User("ramesh","ramesh@gmail.com", "ADMIN", "M"); model.addAttribute("user", user); return "variable-expression"; }
2. Thymeleaf template with Variable expressions
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
>
<head>
<meta charset="UTF-8">
<title>Variable Expression</title>
</head>
<body>
<h1>Variable Expression Demo:</h1>
<h2>User Details</h2>
<div>
<p>Name: <strong th:text="${user.name}"></strong></p>
<p>Email: <strong th:text="${user.email}"></strong></p>
<p>Role: <strong th:text="${user.role}"></strong></p>
<p>Gender: <strong th:text="${user.gender}"></strong></p>
</div>
</body>
</html>Demo:
Run the Spring boot application and hit the below link in the browser:
2. Selection expressions
1. Create a handler method to handle the http://localhost:8080/variable-expression request
@GetMapping("selection-expression")
public String selectionExpression(Model model){
User user = new User("ramesh","ramesh@gmail.com", "ADMIN", "M");
model.addAttribute("user", user);
return "selection-expression";
}2. Thymeleaf template with Selection expressions
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
>
<head>
<meta charset="UTF-8">
<title>Selection Expression</title>
</head>
<body>
<h1>Selection Expression Demo:</h1>
<h2>User Details</h2>
<div th:object="${user}">
<p>Name: <strong th:text="*{name}"></strong></p>
<p>Email: <strong th:text="*{email}"></strong></p>
<p>Role: <strong th:text="*{role}"></strong></p>
<p>Gender: <strong th:text="*{gender}"></strong></p>
</div>
</body>
</html>Demo: Run the Spring boot application and hit the below link in the browser:
3. Message Expressions
1. Create messages.properties file and add the following content
app.name=Blog Application
welcome.message=Hello, welcome to our blog application 2. Create a handler method to handle the http://localhost:8080/message-expression request
@GetMapping("message-expression")
public String messageExpression(){
return "message-expression";
}3. Thymeleaf template with Message expressions
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
>
<head>
<meta charset="UTF-8">
<title>Message Expression</title>
</head>
<body>
<h1>Message Expression Demo:</h1>
<h2 th:text="#{app.name}"></h2>
<h2 th:text="#{welcome.message}"></h2>
</body>
</html>Demo: Run the Spring boot application and hit the below link in the browser:
4. Link Expressions
1. Create a handler method to handle the http://localhost:8080/message-expression request
@GetMapping("link-expression")
public String linkExpression(Model model){
model.addAttribute("id", "1");
return "link-expression";
}2. Thymeleaf template with Link expressions
- How to define a link in the Thymeleaf template
<a th:href="@{/message}"> HelloWorld Link</a>- How to define a link for the external CSS file
<link th:href="@{/css/demo.css}" rel="stylesheet" />- How to define a parameter in a URL using Link expressions
<a th:href="@{/message/{id}(id=${id})}"> Link with Parameter</a>Complete code:
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
>
<head>
<meta charset="UTF-8">
<title>Link Expressions</title>
<link th:href="@{/css/demo.css}" rel="stylesheet" />
</head>
<body>
<a th:href="@{/message}"> HelloWorld Link</a>
<a th:href="@{/message/{id}(id=${id})}"> Link with Parameter</a>
</body>
</html>Demo: Run the Spring boot application and hit the below link in the browser:
5. Fragment Expressions
Create header.html and footer.html fragment files in a resources/templates/common folder:
common/header.html
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
>
<head>
<meta charset="UTF-8">
<title>Header</title>
</head>
<body>
<div th:fragment="header">
<h1>Header Part</h1>
<hr/>
</div>
</body>
</html>common/footer.html
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
>
<head>
<meta charset="UTF-8">
<title>Footer</title>
</head>
<body>
<div th:fragment="footer">
<hr/>
<h1>Footer Part</h1>
</div>
</body>
</html>Create handler method
@GetMapping("fragment-expression")
public String fragmentExpression(){
return "fragment-expression";
}Thymeleaf template with fragment expressions
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org"
>
<head>
<meta charset="UTF-8">
<title>Fragment Expression</title>
</head>
<body>
<div th:replace="~{common/header :: header }"></div>
<div>
<h1> Page Body</h1>
</div>
<div th:replace="~{common/footer :: footer}"></div>
</body>
</html>Demo: Run the Spring boot application and hit the below link in the browser:
Comments
Post a Comment