Java - Thymeleaf Template Engine

About

Thymeleaf is a Java template engine where the template conforms to the targeted content type.

ie:

• If the document created is an HTML document, the template is HTML conform
• If the document created is an Javascript document, the template is Javascript conform
• …

Syntax

• Quick Construct

• Type of language

Snippet

Internationalization

when the internationalization message are set setTemplateEngineMessageSource using the greeting message

greeting=Hello, {0} (in no specific language)!

• In a text template,

[( #{greeting(${name})} )]

if

• If greater than in Text template

[# th:if="${name.length() gt 10}"]Wow! You've got a long name (more than 10 chars)![/]

• if not null in html template

<td th:text="${user?.address?.city}"></td>
<!-- A null value is evaluated to false -->
<td th:text="${not user}"></td>
<!-- With equality -->
<div th:if="${user.isAdmin()} == false"> 
<!-- null literal -->
<div th:if="${variable.something} == null"> 

Logical

• And
• Or

Date

• date format (Text template)

Send Date [( ${#dates.format(sendDate)} )].

• html

<p th:text="${#dates.format(next.Date, 'dd-MMM-yyyy')}"></p>

Link URL

¹⁾

• An email ²⁾

<a 
    th:href="@{mailto:{to}(to=${nextTouche.email})}" 
    th:if="${nextTouche.email != null}"
    th:text="${nextTouche.name}">
    Name To Contact
</a>

Loop

Called Iteration in the documentation.

• In a text template

Your hobbies are:
[# th:each="hobby : ${hobbies}"]
 - [( ${hobby} )]
[/]

• In a markup template

<tr th:each="prod : ${prods}">
	<td th:text="${prod.name}">Onions</td>
	<td th:text="${prod.price}">2.41</td>
	<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>

Language

Javascript

The inline Script element can be defined as a text template with the data-th-inline attribute. Ref

Example with Json

<script data-th-inline="javascript" data-th-if="${goToAction != null}" type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "EmailMessage",
  "potentialAction": {
    "@type": "ViewAction",
    "url": "[(${goToAction.url})]",
    "name": "[(${goToAction.name}]]"
  },
  "description": "[(${goToAction.description})]"
}
</script>

Inline Css

<span data-th-style="'background-color:${primaryColor};border-color:${primaryColor}'"></span>
<!-- To append without overwritting -->
<span data-th-styleappend="'background-color:${primaryColor};border-color:${primaryColor}'"></span>