Thymeleaf學習
1.介紹
Thymeleaf (麝香草葉子), /ˈtaɪmˌlɪːf/ 是一個服務端java模板引擎框架,它能夠處理多種數據格式，包括HTML, XML, JavaScript, CSS以及普通文本。
2.簡單的示例
<!DOCTYPE html>
<!--聲明 th 名稱空間-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Good Thymes Virtual Grocery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all"
href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
</head>
<body>
<!-- 引用文本-->
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>
</body>
</html>
Thymeleaf使用th:* 給現有HTML標簽增加屬性,因此直接打開模板也能預覽效果,很方便 。使用時首先需要像在jsp中一樣，在html標簽內聲明th名稱空間，然后就可以使用了。
3.Standard Expression Syntax(標准表達式語法)
- Variable Expressions(變量表達式):
${...} - Selection Variable Expressions(選擇變量表達式):
*{...} - Message Expressions(消息表達式):
#{...} - Link URL Expressions(鏈接url表達式):
@{...} - Fragment Expressions(代碼片段表達式):
~{...}
(1).Messages (信息)
該表達書主要為了實現i18n國際化，需要將多語言的文本放在/WEB-INF/templates目錄下，如下
/WEB-INF/templates/home_en.properties英文的翻譯./WEB-INF/templates/home.properties默認的文本
<!--常用使用方法-->
<p th:text="#{home.welcome}">Hello World</p>
<!--unescaped text 不轉義文本-->
<p th:utext="#{home.welcome}">
也可以傳參給文本
#home.properties文件
home.welcome=hello, {0}!
<!-- Thymeleaf解析后會將p標簽中的Welcome User!替換為th:text指定的文本 -->
<p th:text="#{home.welcome(${session.user.name})}">
Welcome User!
</p>
<!--消息的key也可以通過動態去獲取 -->
<p th:utext="#{${welcomeMsgKey}(${session.user.name})}">
Welcome User!
</p>
(2).Variables(變量)
Thymeleaf的 ${...}是OGNL (Object-Graph Navigation Language) expressions 語法格式，跟jsp中使用方法差不多,使用示例
/*
* Access to properties using the point (.). Equivalent to calling property getters.
*/
${person.father.name}
/*
* Access to properties can also be made by using brackets ([]) and writing
* the name of the property as a variable or between single quotes.
*/
${person['father']['name']}
/*
* If the object is a map, both dot and bracket syntax will be equivalent to
* executing a call on its get(...) method.
*/
${countriesByCode.ES}
${personsByName['Stephen Zucchini'].age}
/*
* Indexed access to arrays or collections is also performed with brackets,
* writing the index without quotes.
*/
${personsArray[0].name}
/*
* Methods can be called, even with arguments.
*/
${person.createCompleteName()}
${person.createCompleteNameWithSeparator('-')}
表達式基本對象(Expression Basic Objects)，#開始
-
#ctx: the context object. -
#vars:the context variables. -
#locale: the context locale. -
#request: (only in Web Contexts) theHttpServletRequestobject. -
#response: (only in Web Contexts) theHttpServletResponseobject. -
#session: (only in Web Contexts) theHttpSessionobject. -
#servletContext: (only in Web Contexts) theServletContextobject.
####### 表達式工具對象
#execInfo: information about the template being processed.#messages: methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.#uris: methods for escaping parts of URLs/URIs#conversions: methods for executing the configured conversion service (if any).#dates: methods forjava.util.Dateobjects: formatting, component extraction, etc.#calendars: analogous to#dates, but forjava.util.Calendarobjects.#numbers: methods for formatting numeric objects.#strings: methods forStringobjects: contains, startsWith, prepending/appending, etc.#objects: methods for objects in general.#bools: methods for boolean evaluation.#arrays: methods for arrays.#lists: methods for lists.#sets: methods for sets.#maps: methods for maps.#aggregates: methods for creating aggregates on arrays or collections.#ids: methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).
<!--表達式工具對象的使用-->
<p>
Today is: <span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>
</p>
(3).Expressions on selections (asterisk syntax)(選擇表達式 - 星號語法)
<div th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>
<!-- 等價於 -->
<div>
<p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>
<!-- 還可以混合使用-->
<div th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>
<!-- #object 引用表達式的對象 -->
<div th:object="${session.user}">
<p>Name: <span th:text="${#object.firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>
th:object定義選擇的對象,在標簽內使用*{...}來取出對象中相應的數據，如果沒有選擇的對象直接使用*{...}等價於#{...}
(4).Link URLs(鏈接URL)
<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html"
th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
(5).Literals(文本)
<!-- 基本的使用-->
<p>
Now you are looking at a <span th:text="'working web application'">template file</span>.
</p>
<p>The year is <span th:text="2013">1492</span>.</p>
<!-- ==false 需要寫在{}外面才交由thymeleaf處理，寫在里面時交由 OGNL/SpringEL處理 -->
<div th:if="${user.isAdmin()} == false"> </div>
<div th:if="${user.isAdmin() == false}"></div>
<!--判空-->
<div th:if="${variable.something} == null">
<!-- 文本鏈接 -->
<span th:text="'The name of the user is ' + ${user.name}">
<!-- 文本替換,(免去+號鏈接字符串),需要寫在 || 之間
僅變量，信息表達式可以使用${...}, *{...}, #{...}
-->
<span th:text="|Welcome to our application, ${user.name}!|">
(6).Arithmetic operations(算術操作)
<!-- 也可以使用文本 div (/), mod (%).-->
<div th:with="isEven=(${prodStat.count} % 2 == 0)">
(7).Comparators and Equality(比較)
html起止標簽的緣故，大於，小於等需要使用轉義
gt (>), lt (<), ge (>=), le (<=), not (!) eq (==), neq/ne (!=).
<div th:if="${prodStat.count} > 1">
<span th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"
(8).Conditional expressions(條件表達式)
<!--C中的三元運算符 -->
<tr th:class="${row.even}? 'even' : 'odd'">
</tr>
<!-- 省略-->
<tr th:class="${row.even}? 'alt'">
...
</tr>
(9). Default expressions (Elvis operator) 默認表達式
<div th:object="${session.user}">
<p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p>
</div>
<!-- 等價於,省略表達式為true時的語句 -->
<p>Age: <span th:text="*{age != null}? *{age} : '(no age specified)'">27</span>.</p>
(10). The No-Operation token(空操作符)
空操作符( No-Operation token)使用下划線表示_，它允許原生頁面定義的文本為默認值,便於模板的設計
<span th:text="${user.name} ?: 'no user authenticated'">...</span>
<span th:text="${user.name} ?: _">no user authenticated</span>
(11). Data Conversion / Formatting (數據轉換/格式化)
Thymeleaf 定義了雙花括號語法用於變量${...}和選擇表達式*{...}
<td th:text="${{user.lastAccessDate}}">...</td>
4.Iteration(遍歷)
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
</table>
th:each說明
prod保存每次遍歷的對象，iterStat保存遍歷的相關信息
- The current iteration index, starting with 0. This is the
indexproperty. 遍歷索引，從0開始 - The current iteration index, starting with 1. This is the
countproperty. 遍歷計數，從1開始 - The total amount of elements in the iterated variable. This is the
sizeproperty. 被遍歷對象的大小 - The iter variable for each iteration. This is the
currentproperty. 當前遍歷的對象 - Whether the current iteration is even or odd. These are the
even/oddboolean properties. 奇偶布爾值 - Whether the current iteration is the first one. This is the
firstboolean property. 是否是遍歷第一個 - Whether the current iteration is the last one. This is the
lastboolean property. 是否是遍歷最后一個
被遍歷的對象類型
- Any object implementing
java.util.Iterable - Any object implementing
java.util.Enumeration. - Any object implementing
java.util.Iterator, whose values will be used as they are returned by the iterator, without the need to cache all values in memory. - Any object implementing
java.util.Map. When iterating maps, iter variables will be of classjava.util.Map.Entry. - Any array.
- Any other object will be treated as if it were a single-valued list containing the object itself.
5.Conditional Evaluation(條件表達式)
if和unless語句
<!-- 如果if表達式成立則顯示該標簽-->
<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>
<!--還可以使用相反的表達式unless -->
<a href="comments.html"
th:href="@{/comments(prodId=${prod.id})}"
th:unless="${#lists.isEmpty(prod.comments)}">view</a>
if遵循的規則
- If value is not null:
- If value is a boolean and is
true. - If value is a number and is non-zero
- If value is a character and is non-zero
- If value is a String and is not “false”, “off” or “no”
- If value is not a boolean, a number, a character or a String.
- If value is a boolean and is
- (If value is null, th:if will evaluate to false).
switch/case語句
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p> <!--默認值-->
</div>
6.Template Layout (模板布局)
使用th:fragment定義需要復用的代碼片段，th:insert或th:replac引用片段
~{templatename::selector} 引用片段
~{templatename}引用整個文件
~{::selector}或~{this::selector}引用自身的代碼片段
<!--定義代碼片段 -->
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
</body>
</html>
<!-- 引用代碼片 -->
<body>
<div th:insert="footer :: copy"></div>
</body>
<!-- 根據條件引用-->
<div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>
<!-- 根據id引用 css選擇器語法類似-->
<div id="copy-section">
© 2011 The Good Thymes Virtual Grocery
</div>
<div th:insert="~{footer :: #copy-section}"></div>
th:insert , th:replace ,th:include
-
th:insertis the simplest: it will simply insert the specified fragment as the body of its host tag. (在定義的標簽體內引用代碼片段) -
th:replaceactually replaces its host tag with the specified fragment.(將定義標簽替換為引用的代碼片段) -
th:includeis similar toth:insert, but instead of inserting the fragment it only inserts the contents of this fragment.(Thymeleaf 3.0后不推薦使用)參數化方式引用代碼片段(Parameterizable fragment signatures)
<!--定義參數化代碼片段--> <div th:fragment="frag (onevar,twovar)"> <p th:text="${onevar} + ' - ' + ${twovar}">...</p> </div> <!--使用 使用參數名時順序不重要 --> <div th:replace="::frag (${value1},${value2})">...</div> <div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div> <div th:replace="::frag (twovar=${value2},onevar=${value1})">...</div>
7.Local Variables(局部變量)
<!-- 使用th:with定義,可以再標簽體中使用-->
<div th:with="firstPer=${persons[0]}">
<p>
The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
</p>
</div>
8.參考資料
1.Thymleaf Document(http://www.thymeleaf.org/documentation.html)
2.屬性優先級(http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#attribute-precedence)
3.可用屬性(http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes)