Thymeleaf Introduction

3,459 views

Published on

presentation for TWJUG @ 2013.03.30

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
3,459
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
48
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Thymeleaf Introduction

  1. 1. ThymeleafIntroduction2013.3 anthonychen
  2. 2. Thymeleaf 簡介● Java 實現的 template engine● 以 XML / XHTML/HTML5 為基礎● 可以在非 web 的環境下運作● 完全取代 JSP & JSTL
  3. 3. Thymeleaf 的優點● HTML 5● 對 Web art designer 友善● 與 Spring MVC 無縫整合● 豐富的 ecosystem● 擴充性高的 dialect 架構
  4. 4. 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
  5. 5. Dialects● Spring Dialect (build-in)● Pages Dialect for Thymeleaf● Layout Dialect● Dandelion-DataTables Dialect● Joda Time Dialect● Apache Shiro Dialect
  6. 6. 開始使用 Thymeleaf1. 建立 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
  7. 7. 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}"/>
  8. 8. 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>
  9. 9. 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 : 處理國際化語言文字
  10. 10. 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.setSplitList 物件處理: ${#lists.size(list)}, ${#lists.isEmpty(list)}, ${#lists.contains(list,element)}聚合運算: ${#aggregates.sum(array), ${#aggregates.avg(array)}國際化: ${#messages.msg(‘msgKey’)}, ${#messages.msg(‘msgKey’, param1,param2)}
  11. 11. 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
  12. 12. 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>
  13. 13. Thymeleaf + Spring MVC 3 (2)在 Spring configuration file 設定 View resolver<!-- Thymeleaf 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>
  14. 14. 擴充 Thymeleaf ● 建立 attribute 或 element processor (IProcessor Interface) ● 建立 dialect - 繼承 AbstractDialect ● 將 dialect 加入 thymeleaf 設定SAY HELLO! EXTENDING THYMELEAF IN 5 MINUTESHTTP://WWW.THYMELEAF.ORG/SAYHELLOEXTENDINGTHYMELEAF5MINUTES.HTMLSAY HELLO AGAIN! EXTENDING THYMELEAF EVEN MORE IN ANOTHER 5 MINUTESHTTP://WWW.THYMELEAF.ORG/SAYHELLOAGAINEXTENDINGTHYMELEAFEVENMORE5MINUTES.HTML
  15. 15. 參考資源● 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)
  16. 16. 你還可以...● 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
  17. 17. Thank You!

×