Thymeleaf Introduction

Thymeleaf
Introduction
2013.3 anthonychen

Thymeleaf 簡介

● Java 實現的 template engine
● 以 XML / XHTML/HTML5 為基礎
● 可以在非 web 的環境下運作
● 完全取代 JSP & JSTL

Thymeleaf 的優點

● HTML 5
● 對 Web art designer 友善
● 與 Spring MVC 無縫整合
● 豐富的 ecosystem
● 擴充性高的 dialect 架構

Ecosystem
● Thymeleaf module for Play Framework 1.2
http://www.playframework.com/modules/thymeleaf-1.0/home
● Thymeleaf + Tiles 2
https://github.com/thymeleaf/thymeleaf-extras-tiles2
● Thymeleaf + Spring Security 3
https://github.com/thymeleaf/thymeleaf-extras-springsecurity3
● Thymeleaf eclipse IDE plugin
https://sourceforge.net/projects/thymeleaf/files/thymeleaf-extras-eclipse-plugin
● Thymeleaf + Spring MVC Maven archetype
http://www.lordofthejars.com/2012/01/once-upon-time-and-long-ago-i-heard.html
● Thymeleaf + Conditional Comments https://github.com/thymeleaf/thymeleaf-extras-
conditionalcomments

Dialects
● Spring Dialect (build-in)
● Pages Dialect for Thymeleaf
● Layout Dialect
● Dandelion-DataTables Dialect
● Joda Time Dialect
● Apache Shiro Dialect

開始使用 Thymeleaf
1. 建立 html檔案並加上 HTML 5 及 thymeleaf xmlns宣告
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">

2. Expression 語法 - OGNL or Spring Expression Language
● 存取變數 expressions
● Selection expressions
● 文字處理與國際化 expressions
● URL expressions

Thymeleaf Expressions (1)
● 存取變數 expressions
<td th:text="${#session.user.name}">Name</td>

<h1 th:text="${message}">Hello, world!</h1>

<tr th:each="user: ${userList}">

<legend th:if="${#lists.isEmpty(userList)}">No data</legend>

● Selection (asterisk) expressions
<form id="userForm" name="userForm" action="#" method="POST"
th:action="@{/user/save}" th:object="${user}">

<input type="text" id="inputAccount" placeholder="Account" th:
field="*{account}"/>

Thymeleaf Expressions (2)
● 文字處理與國際化 expressions
<table>
...
<th th:text="#{header.address.city}">...</th>
<th th:text="#{header.address.country}">...</th>
...
</table>

● URL expressions
<div shiro:authenticated="false">
<a href="#login" th:href="@{/login(id=${userId})}">
Login
</a>
</ul>

Thymeleaf Helper Objects
#dates: 處理 java.util.Date 物件。包括建立、格式化、取得年/月/日...等
#calendars: 類似 #dates，用來處理 java.util.Calendar 物件
#numbers: 格式化或轉換數字格式
#strings: 處理字串物件
#objects: 單純處理物件的工具，例如 Null Safe 判斷
#bools: 判斷物件或陣列 boolean 值的工具.
#arrays:: 陣列工具
#lists: java.utils.List 工具
#sets: java.utils.Set 工具
#maps: java.utils.Map 工具
#aggregates: 處理 Collection 或 Array 聚合運算，例如計算陣列內容加總或平均
#messages : 處理國際化語言文字

Thymeleaf Helper Object 範例
日期格式化: ${#dates.format(date, ‘dd/MMM/yyyy HH:mm’)}
建立日期物件以取得現在時間: ${#dates.createNow()}
檢查字串 empty 或 null: ${#strings.isEmpty(name)}
其他字串處理: #strings.indexOf, #strings.substring, #strings.replace, #strings.
prepend, #strings.append, #strings.toUpperCase, #strings.toLowerCase,
#strings.trim, #strings.length, #strings.abbreviate
字串集合物件處理: #strings.listJoin, #strings.arrayJoin, #strings.setJoin, strings.
listSplit, strings.arraySplit, strings.setSplit
List 物件處理: ${#lists.size(list)}, ${#lists.isEmpty(list)}, ${#lists.contains(list,
element)}
聚合運算: ${#aggregates.sum(array), ${#aggregates.avg(array)}
國際化: ${#messages.msg(‘msgKey’)}, ${#messages.msg(‘msgKey’, param1,
param2)}

Template 運用
● Apache Tiles
○ https://github.com/thymeleaf/thymeleaf-extras-tiles2
● Thymol - th:include
○ http://sourceforge.net/u/jjbenson/wiki/thymol/
● Layout Dialect
○ https://github.com/ultraq/thymeleaf-layout-dialect

Thymeleaf + Spring MVC 3 (1)
在 Spring configuration file 設定 Spring Standard Dialect

<bean id="templateResolver"
class="org.thymeleaf.templateresolver.ServletContextTemplateResolver" >
<property name="cacheable" value="false"/>
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".html"/>
<property name="templateMode" value="HTML5"/>
<property name="characterEncoding" value="UTF-8"/>
</bean>


<bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine" >
<property name="templateResolver" ref="templateResolver" />
<property name="dialects" >
<set>
<bean class="org.thymeleaf.spring3.dialect.SpringStandardDialect" />
</set>
</property>
</bean>

Thymeleaf + Spring MVC 3 (2)
在 Spring configuration file 設定 View resolver

<bean id="viewResolver" class="org.thymeleaf.spring3.view.
ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine"/>
<property name="characterEncoding" value="UTF-8"/>
</bean>

如果你需要客製自己的 View bean
<bean name="main" class="org.thymeleaf.spring3.view.ThymeleafView" >
<property name="staticVariables" >
<map>
<entry key="header" value="Hello" />
<entry key="footer" value="Create by anthonychen" />
</map>
</property>
</bean>

擴充 Thymeleaf
● 建立 attribute 或 element processor (IProcessor Interface)

● 建立 dialect - 繼承 AbstractDialect

● 將 dialect 加入 thymeleaf 設定

SAY HELLO! EXTENDING THYMELEAF IN 5 MINUTES
HTTP://WWW.THYMELEAF.ORG/SAYHELLOEXTENDINGTHYMELEAF5MINUTES.HTML

SAY HELLO AGAIN! EXTENDING THYMELEAF EVEN MORE IN ANOTHER 5 MINUTES
HTTP://WWW.THYMELEAF.
ORG/SAYHELLOAGAINEXTENDINGTHYMELEAFEVENMORE5MINUTES.HTML

參考資源
● Getting started
○ Getting started with the Standard dialects in 5 minutes
http://www.thymeleaf.org/standarddialect5minutes.html
○ Standard URL Syntax
http://www.thymeleaf.org/standardurlsyntax.html
● Documentation http://www.thymeleaf.org/documentation.html
○ Using Thymeleaf
○ Thymeleaf + Spring 3
○ Extending Thymeleaf
● User forum http://forum.thymeleaf.org/
● Other resource
○ Rich HTML email in Spring with Thymeleaf (http://www.thymeleaf.org/springmail.html)
○ Using Thymeleaf with Spring MVC (http://blog.zenika.com/index.php?
post/2013/01/21/using-thymeleaf-with-spring-mvc)

你還可以...
● Thymeleaf + Ajax
JQuery, Dojo, Spring JavaScript (part of Spring WebFlow)
● Thymeleaf + Responsive CSS Framework
Bootstraps, Foundation, Skeleton
● Thymeleaf + JRebel
● 寫個 dialect 吧
○ JSP taglib --> Thymeleaf dialect
○ JQuery plugin --> Thymeleaf dialect

Thymeleaf Introduction

More Related Content

What's hot

Viewers also liked

Recently uploaded

Thymeleaf Introduction