Thymeleaf Introduction and Best Practices

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 and Best Practices

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Thymeleaf Introduction and Best Practices

Ähnlich wie Thymeleaf Introduction and Best Practices (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Thymeleaf Introduction and Best Practices