Spring Boot: View
Spring Boot View
In Spring Boot, the Model-View-Controller (MVC) pattern is used to separate the application logic into three components: Model - View -Controller
📘 View
The view is responsible for presenting the data to the user.
In Spring Boot, views are typically implemented using template engines such as:
Thymeleaf: ThymeleafFreeMarker: Apache FreeMarker™ is a template engine: a Java library to generate text output (HTML web pages, e-mails, configuration files, source code, etc.) based on templates and changing data.Groovy: Spring Boot officially provided starter to use Groovy Template for MVC and offline rendering.
The view can access the model and use it to generate the HTML, JSON or XML that is sent to the user’s browser.
1 Example1: Model
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Home</title>
</head>
<body>
<h1 th:text="${message}">Hello, World!</h1>
</body>
</html>In this template, the th:text attribute is used to set the text of the <h1> tag to the value of the message attribute in the model. The expression ${message} evaluates to the value of the message attribute.
Assuming that this template is saved in a file named home.html in your application’s templates directory, the HomeController will render a message that says:
“Welcome to my Spring Boot app!”
when you visit theURL /
The value of the message attribute is set in the home() method of the controller.
2 Example2: @PathVariable and @RequestBody
Thymeleaf templates that can be used with the hello(), createUser(), and getUserById() methods:
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello</title>
</head>
<body>
<h1 th:text="${message}">Hello, World!</h1>
</body>
</html>In this template, the th:text attribute is used to set the text of the <h1> tag to the value of the message attribute in the model. The value of message is set in the hello() method of the controller.
user.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>User</title>
</head>
<body>
<h1 th:text="${user.name}">User</h1>
<p th:text="${user.email}"></p>
</body>
</html>In this template, the th:text attribute is used to set the text of the <h1> tag to the value of the name property of the user object in the model.
The th:text attribute of the <p> tag is used to set its text to the value of the email property of the user object in the model.
Assuming that these templates are saved in files named hello.html and user.html, respectively, in your application’s templates directory, the hello() method will render a message that says:
“Hello, World!”
when you visit the URL /hello
The createUser() method doesn’t return a view, so it doesn’t need a Thymeleaf template.
Finally, the getUserById() method will render a page that displays the details of a user when you visit the URL /users/{id}, where {id} is the ID of the user.
The details of the user are passed to the template using the model.addAttribute() method.
The th:text attribute is used to set the text of the <h1> tag to the name of the user, and the th:text attribute of the <p> tag is used to set its text to the email of the user.
3 Example3: @RequestParam
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Example</title>
</head>
<body>
<h1 th:text="'Hello, ' + ${message}">Hello, World!</h1>
</body>
</html>In this template, the th:text attribute is used to set the text of the <h1> tag to the value of the message attribute in the model.
The expression 'Hello, ' + ${message} concatenates the string "Hello, " with the value of the message attribute.
Assuming that this template is saved in a file named hello.html in your application’s templates directory, the ExampleController will render a message that says:
For example, if you visit the URL /hello?name=John, the message will say “Hello, John!”.
“Hello, {name}!”
when you visit the URL:
/hello?name=John
where {name} is the value of the name parameter in the query string.
4 Thymeleaf
4.1 ThymeLeaf Templates Engine
Most Thymeleaf attributes allow their values to be set as or containing expressions, which we will call Standard Expressions because of the dialects they are used in. These can be of five types:
- ${…} : Variable expressions.
- *{…} : Selection expressions.
- #{…} : Message (i18n) expressions.
- @... : Link (URL) expressions.
- ~{…} : Fragment expressions.
- __{…} : use an element inside another
Attributes th:
- message:
<p th:text="#{msg.welcome}">Welcome everyone!</p> - list:
<li th:each="book : ${books}" th:text="${book.title}">En las Orillas del Sar</li> - link:
<form th:action="@{/createOrder}"> - action:
<input type="button" th:value**="#{form.submit}" /> - path:
<a th:href="@{/admin/users}">
How to write th:
