The main page for the Retro Board will be a page similar to the design shown in the previous section, implemented using Spring Thymeleaf, Bootstrap, and Font Awesome along with some plain HTML, CSS, and so on.
When you take a closer look at the preceding code, it seems it is mostly very familiar HTML, with some special syntax for Spring Thymeleaf. One of the most notable sections is in the HTML element where the namespace for Spring Thymeleaf is:
<html xmlns:th="http://www.thymeleaf.org">
The structure of the page is divided into three parts as follows:
- Header: This section has the page title and logout button
- Body: This section has all the comments and text areas to submit a comment
- Footer: This section has author information
In order to correctly structure this, Bootstrap-specific styling classes in HTML element attributes are used to define how the UI needs to be rendered responsively:
<div class="container">
For a full list of such styling classes, the Bootstrap documentation can be referred to, at https://getbootstrap.com/docs/4.0/getting-started/introduction/.
Another notable piece of code is the Cross-Site Request Forgery (CSRF) protection token submitted with the POST request when saving comments:
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
This will be explained in detail in the Using Spring Security for authentication and authorization section, but in simple terms it is used to verify that all mutable requests come only from authorized forms. Take note of the Spring Thymeleaf syntax th:name and th:value, which will be rendered into the input name and input value attribute respectively.
From the diagram displayed in the previous section, we can see that there is a main form that has comments for pluses, deltas, and stars along with text areas for submitting comments. Consider the following code:
<form action="/comment" method="POST">
<div class="row form-row">
<input type="hidden" th:name="${_csrf.parameterName}"
th:value="${_csrf.token}" />
<div class="col-md-4"><i class="fa fa-plus"></i> Pluses
<hr/>
<div id="pluses" th:each="plus : ${plusComments}">
<div class="alert alert-info" role="alert">
<strong th:text="${plus.createdBy}"></strong>
<p th:text="${plus.comment}"></p>
</div>
</div>
<textarea id="plusComment" name="plusComment" class="form-
control" style="min-width: 100%"></textarea>
</div>
...
...
In the preceding code snippet, Spring Thymeleaf's th:each tag is used to iterate through the list plusComments sent from the server and render createdBy and comment respectively. Take note that a variable named plus is used to refer to each plus comment individually. The same is true for deltaComments and starComments also.
Eventually, there is a footer section, where copyright and author information will be usually placed, as follows:
<footer class="fixed-bottom" style="position: fixed; bottom: 0">
<div class="container">
<span class="text-muted">Retro Board by Shazin Sadakath.</span>
</div>
</footer>
The complete source code is available in this chapter's GitHub repository.