Embed Size (px)
DESCRIPTION
presentation for TWJUG @ 2013.03.30
Citation preview
Thymeleaf Introduction2013.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宣告
2. Expression 語法 - OGNL or Spring Expression Language● 存取變數 expressions
● Selection expressions
● 文字處理與國際化 expressions
● URL expressions
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
Thymeleaf Expressions (1)
● 存取變數 expressions
● Selection (asterisk) 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>
<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
● URL expressions
<table> ... <th th:text="#{header.address.city}">...</th> <th th:text="#{header.address.country}">...</th> ... </table>
<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
<!-- Thymeleaf template recolver --><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>
<!-- Thymeleaf template engine --><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
如果你需要客製自己的 View bean
<!-- Thymeleaf view resolver --><bean id="viewResolver" class="org.thymeleaf.spring3.view.ThymeleafViewResolver"> <property name="templateEngine" ref="templateEngine"/> <property name="characterEncoding" value="UTF-8"/></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 MINUTESHTTP://WWW.THYMELEAF.ORG/SAYHELLOEXTENDINGTHYMELEAF5MINUTES.HTML
SAY HELLO AGAIN! EXTENDING THYMELEAF EVEN MORE IN ANOTHER 5 MINUTESHTTP://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 + AjaxJQuery, 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
Thank You!
