テンプレートエンジンNight＠Pixiv 2014年10月17日（金）のLT資料

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