This document introduces Thymeleaf, an XML/XHTML/HTML5 template engine for Java. It can be used with the Spring Framework and is designed to be developer friendly. The document provides an overview of Thymeleaf and demonstrates how to use it through examples of basic syntax for text replacement, conditionals, iteration, JavaScript inlining, and internationalization.

1. Introducing Thymeleaf
2014/10/17 Template Engine Night at Pixiv
@eiryu

2. Who am I?
● Twitter @eiryu
○ http://eiryu.com
● Background
○ Web application engineer
■ Java
● Spring Framework
■ Groovy
■ JavaScript
■ PostgreSQL
● Nowadays
○ Infrastructure engineer
○ Infomation system

3. What is Thymeleaf?
● “Thymeleaf is a Java library. It is an XML /
XHTML / HTML5 template engine”
● Designer friendly
● Powerful Spring Framework integration
● JSP killer

4. How to use?
● Prepend “th:” to HTML attributes
● Use “th:text” if you replace textnode

5. At a glance
(Demo)

6. Basics
<span th:text="${name}">bob</span>
<input type="text" value="red"
th:value="blue"/>

7. Conditional Evaluation
<button th:if=”${registered}”>clear</button>
<button th:unless=”${registered}”>register</button>

8. Iteration
<tr th:each=”user : ${users}”>
<td th:text=”${user.name}”>name</td>
<td th:text=”${user.age}”>age</td>
</tr>

9. JavaScript inlining
● /*[[...]]*/ expression
var endpoint = /*[[@{/user/}]]*/ ‘default’;
● JavaBeans to JSON
var user = /*[[${user}]]*/ ‘{}’
↓
var user = {‘name’:’bob’, ‘age’:20};

10. i18n
1. Prepare properties files
○ Messages_en.properties
■ hello=hello
○ Messages_fr.properties
■ hello=bonjour
2. Specify key in #{...} expression
e.g.) locale=fr_FR
<h1 th:text=”#{hello}”>hello</h1>
↓
<h1>bonjour</h1>

11. fin