Switch from JSP + JSTL to Thymeleaf

It is the 7th day of Assoview Advent Calendar 2019.

This is Azuma, a brown mouse from the backend development team. This time, I will introduce the correspondence table when replacing the JSP + JSTL function that has been used for a long time in Java Web applications with Thymeleaf.

Transfer from JSP + JSTL to Thymeleaf

JSP used to be the de facto method for creating Java Web applications, but now that Spring Boot has adopted Thymeleaf, there are cases where the presentation is replaced from JSP to Thymeleaf with the replacement of existing applications [^ 2].

This time, I will introduce how to replace the function used in JSTL of the JSP + tag library used in the old Java Web application with Thymeleaf, along with the function correspondence table.

[^ 2]: Originally, HTML was output as a character string by a Servlet, but JSP makes it possible to write Java code by regarding HTML as one template. However, the operation speed of JSP is not good, the readability deteriorates because the tag is overlaid in the tag, and the JSP code is added to the original HTML, so if the screen design or layout is modified, the HTML and JSP The maintainability was not good, such as correcting the difference.

What is targeted this time

In addition to JSTL tags, we will also introduce things related to how to use JSP and EL expressions.

Not applicable

[^ 1]: There is a method to refer to and output the data source from the Spring management bean, especially the class with @Service and @Repository, using Thymeleaf-Spring plugin. However, proper transaction management and resource allocation should be performed, and cached contents should be returned as needed.

Core (namespace: c)

The core tag is a frequently used tag such as value output and conditional branching.

Now, I will introduce each function and usage example while comparing them.

th: text: Output to tag text (= element value)

Output to element value

<div>message</div>

To display this, let's compare the case of passing by name: message and value: message.

In Thymeleaf, the text characters written in the element value of the div are output as the contents of th: text. In JSP, it is displayed even if it is not output via <c: out>, but it always goes through JSTL's <c: out> to sanitize the output value.

Output to attribute value

<input type="text" value="message" />

In order to display this, the way to write when passing by name: message, value: message,

The value is rewritten as ** Specify the same attribute name as the attribute you want to output **, which is also a feature of Thymeleaf. On the other hand, in JSP / JSPL, it is a little difficult to read because it is a description that outputs the value inside the attribute value of the tag and further encloses it in the tag.

String concatenation

String concatenation is also possible within the attributes in Thymeleaf. When writing the character string directly, enclose it in single quotes.

<div th:text="'this is,' + ${message} + 'is'">text</div>

The output result of this is

<div>This is a message</div>

th: with: Store value in a temporary variable

When you are outputting HTML, you can use the output value repeatedly, or you can reassign the value to change the output content.

Temporary variables defined in Thymeleaf templates can be referenced by the elements that define the temporary variables and their child elements. To Thymeleaf Name: message, Value: When passed as a message

<div th:with="anotherMessage='this is,' + ${message} + 'is'" th:text="${anotherMessage}">text</div>

The output result of this is

<div>This is a message</div>

Define multiple temporary variables

If you want to define multiple temporary variables, use commas to connect them. Of course, character string processing and calculation are possible even if multiple definitions are described.

<div th:with="i=3, anotherMessage=${message} + 'is'">
	<span th:text="${anotherMessage}">text</span>
	<span th:text="${i}">text</span>
</div>

The output result of this is

<div>
	<span>Is a message</span>
	<span>3</span>
</div>

Define the same variable name

What if I store them in the same variable name?

<div th:with="message=${message} + 'is'">
	<span th:text="${message}">Text 1</span>
</div>
<div th:text="${message}">Text 2</div>

In this case, ** message assignment is performed only within the ** th: with element.

<div>
	<span>Is a message</span>
</div>
<div>message</div>

The value temporarily defined in th: with of Thymeleaf is ** valid only for that element and its child elements **. On the other hand, JSP + JSTL retains the stored contents and the same contents up to the output of text 2. This is a big difference. Therefore, in JSP, the value is deleted with <c: remove> and the subsequent processing is continued.

When dealing with temporary variables in Thymeleaf, use it in combination with subsequent attributes such as conditional branching and loop processing such as th: if and th: each.

Output child element & process subsequent thymeleaf attribute when th: if condition is met

Output the contents of the child element or execute the tag of the child element only when certain conditions are met. This is the same for JSP / JSTL and Thymeleaf, but Thymeleaf outputs the elements that define th: if. Also, the thymeleaf attribute (th: 〇〇) in the same element is executed.

You can use almost the same method and method of writing conditional expressions in attribute values.

Basic system of conditional expression

To Thymeleaf Name: message, Value: When passed as a message

<div th:if="${message == 'message'}">
	<span th:text="${message}">text</span>
</div>

This output result is

<div>
	<span>message</span>
</div>

Use Java code for conditional expressions

Various Java code can be written in the conditional expression of th: if. The most used method is to call a method of Java class, and it is possible to incorporate it in a conditional expression or output a display-only value.

<div th:if="${message.startsWith('Messe')}">
	<span th:text="${message}">text</span>
</div>

Since the variable message was a message with String, startsWith () is true, so this output result is

<div>
	<span>message</span>
</div>

It will be.

For the output when the condition is not met, for example, the following determines whether the length of the character string of the variable message is 256 or more.

<div th:if="${message.length() >= 256}">
	<span th:text="${message}">text</span>
</div>

If the condition of this if statement is not satisfied, the element and child elements will not be output in their entirety. In other words, this

<div th:switch="${message}">
	<span th:case="message" th:text="${message}"></span>
	<span th:case="*">There was no corresponding message</span>
</div>

<div>
	<span>message</span>
	
</div>

<div>
	
	<span>There was no corresponding message</span>
</div>

<div th:switch="${price}">
	<span th:case="100" th:text="${price}">price</span>
	<span th:case="200" th:text="${price}">price</span>
	<span th:case="300" th:text="${price}">price</span>
	<span th:case="*" th:text="There is no applicable price"></span>
</div>

<div>

	<span>200</spam>


</div>

<div>



	<span>There is no applicable price</spam>
</div>

public enum Direction {
	North, South, East , West ;

	public String getValue() {
		return name();
	}
}

<div th:switch="${direction.getValue()}">
	<span th:case="North" th:text="North"></span>
	<span th:case="East" th:text="east"></span>
	<span th:case="South" th:text="South"></span>
	<span th:case="West" th:text="West"></span>
	<span th:case="*" th:text="Not applicable"></span>
</div>

<select>
  <c:forEach var="result" items="${list}">
    <option value="<c:out value="${result.value}" />"><c:out value="${result.label}" /></option>
  </c:forEach>
</select>

<select>
  <option th:each="result : ${list}" th:value="${result.value}" th:inline="text">[[${result.label}]]</option>
</select>