Thymeleaf Introduction
Upcoming SlideShare
Loading in...5
×
 

Thymeleaf Introduction

on

  • 1,704 views

presentation for TWJUG @ 2013.03.30

presentation for TWJUG @ 2013.03.30

Statistics

Views

Total Views
1,704
Views on SlideShare
1,703
Embed Views
1

Actions

Likes
8
Downloads
22
Comments
1

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 請問我想要判斷 Selection Variable *{Variable} 是否為 null 應該如何撰寫呢?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Thymeleaf Introduction Presentation Transcript

  • 1. ThymeleafIntroduction2013.3 anthonychen
  • 2. Thymeleaf 簡介● Java 實現的 template engine● 以 XML / XHTML/HTML5 為基礎● 可以在非 web 的環境下運作● 完全取代 JSP & JSTL
  • 3. Thymeleaf 的優點● HTML 5● 對 Web art designer 友善● 與 Spring MVC 無縫整合● 豐富的 ecosystem● 擴充性高的 dialect 架構
  • 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. Dialects● Spring Dialect (build-in)● Pages Dialect for Thymeleaf● Layout Dialect● Dandelion-DataTables Dialect● Joda Time Dialect● Apache Shiro Dialect
  • 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. 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. 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. 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. 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. 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. 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. 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. 擴充 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. 參考資源● 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. 你還可以...● 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. Thank You!