A view template is an HTML-oriented document that a view engine processes into the page shown in a browser. In a Spring MVC application, the controller supplies data and the template renders that data as HTML. section 1.3 section 2.1
Thymeleaf templates remain mostly ordinary HTML, adding attributes that guide rendering. Spring copies model data into servlet request attributes before handing the request to the view, allowing Thymeleaf to access it. section 2.1.3
Common Thymeleaf template features include:
- Use th:text with a ${...} expression to replace an element’s body with a request-attribute value. section 2.1.3
- Use th:each to repeat an HTML fragment for every item in a collection, binding each item to a template variable. section 2.1.3
- Use th:value, th:field, and th:object to connect form controls with submitted or displayed application data. section 2.1.3
- Use context-relative expressions such as @{/images/TacoCloud.png} and @{/styles.css} to reference static resources. section 1.3.2 section 2.1.3
Taco Cloud home page
A small template can display a welcome message and logo while remaining recognizable as HTML. The logo belongs under /src/main/resources/static/images/TacoCloud.png so the context-relative image path can resolve it. section 1.3.2
Listing 2.5 The complete design-a-taco page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<title>Taco Cloud</title>
<link rel="stylesheet" th:href="@{/styles.css}" />
</head>
<body>
<h1>Design your taco!</h1>
<img th:src="@{/images/TacoCloud.png}"/>
<form method="POST" th:object="${taco}">
<div class="grid">
<div class="ingredient-group" id="wraps">
<h3>Designate your wrap:</h3>
<div th:each="ingredient : ${wrap}">
<input th:field="*{ingredients}" type="checkbox"
th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="proteins">
<h3>Pick your protein:</h3>
<div th:each="ingredient : ${protein}">
<input th:field="*{ingredients}" type="checkbox"
th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="cheeses">
<h3>Choose your cheese:</h3>
<div th:each="ingredient : ${cheese}">
<input th:field="*{ingredients}" type="checkbox"
th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="veggies">
<h3>Determine your veggies:</h3>
<div th:each="ingredient : ${veggies}">
<input th:field="*{ingredients}" type="checkbox"
th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
<div class="ingredient-group" id="sauces">
<h3>Select your sauce:</h3>
<div th:each="ingredient : ${sauce}">
<input th:field="*{ingredients}" type="checkbox"
th:value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span><br/>
</div>
</div>
</div>
<div>
<h3>Name your taco creation:</h3>
<input type="text" th:field="*{name}"/>
<br/>
<button>Submit Your Taco</button>
</div>
</form>
</body>
</html>
Inspect a complete Thymeleaf page that renders ingredient groups, binds taco selections, references static assets, and posts a form. section 2.1.3
