原文：
http://blog.csdn.net/pdw2009/article/details/44700897
Thymeleaf是個XML/XHTML/HTML5模板引擎，可以用於Web與非Web應用。
Thymeleaf的主要目標在於提供一種可被瀏覽器正確顯示的、格式良好的模板創建方式，因此也可以用作靜態建模。你可以使用它創建經過驗證的XML與HTML模板。相對於編寫邏輯或代碼，開發者只需將標簽屬性添加到模板中即可。接下來，這些標簽屬性就會在DOM（文檔對象模型）上執行預先制定好的邏輯。Thymeleaf的可擴展性也非常棒。你可以使用它定義自己的模板屬性集合，這樣就可以計算自定義表達式並使用自定義邏輯。這意味着Thymeleaf還可以作為模板引擎框架。
Thymeleaf的模板還可以用作工作原型，Thymeleaf會在運行期替換掉靜態值。例如下面的html文件，當作為靜態文件時，product name顯示為Red Chair，當運行在容器中並提供product這個對象時，product name的值會自動替換為product.description對應的值。
1.bean值替換
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 2</title> 5 <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" /> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <h1>Thymeleaf tutorial - Answer for exercise 1: bean values</h1> 10 <h2>Product information</h2> 11 <dl> 12 <dt>Product name</dt> 13 <dd th:text="${product.description}">Red Chair</dd> 14 15 <dt>Product price</dt> 16 <dd th:text="${product.price}">350</dd> 17 18 <dt>Product available from</dt> 19 <dd th:text="${product.availableFrom}">2014-12-01</dd> 20 </dl> 21 </body> 22 </html>
2.簡單數據轉換（數字，日期）
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 2</title> 5 <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" /> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <h1>Thymeleaf tutorial - Answer for exercise 2: bean values</h1> 10 <h2>Product information</h2> 11 <dl> 12 <dt>Product name</dt> 13 <dd th:text="${product.description}">red Chair</dd> 14 15 <dt>Product price</dt> 16 <dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd> 17 18 <dt>Product available from</dt> 19 <dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</dd> 20 </dl> 21 </body> 22 </html>
3.字符串拼接
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 3</title> 5 <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" /> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <h1>Thymeleaf tutorial - Answer for exercise 3: string concatenation</h1> 10 <h2>Product information</h2> 11 <dl> 12 <dt>Product price</dt> 13 <dd th:text="${'$'+product.price}">235</dd> 14 </dl> 15 </body> 16 </html>
4.國際化
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title th:text="#{tutorial.exercise4}">Thymeleaf tutorial: exercise 4</title> 5 <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" /> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <h1 th:text="#{tutorial.exercise4}">Thymeleaf tutorial - Solution for exercise 4: internationalization</h1> 10 <h2 th:text="#{product.info}">Product information</h2> 11 <dl> 12 <dt th:text="#{product.name}">Product name</dt> 13 <dd th:text="${product.description}">Red chair</dd> 14 15 <dt th:text="#{product.price}">Product price</dt> 16 <dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">350</dd> 17 18 <dt th:text="#{product.available}">Product available from</dt> 19 <dd th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</dd> 20 </dl> 21 </body> 22 </html>
此時html需要相應的配置文件。例如如下配置文件：
en：
tutorial.exercise4=Thymeleaf tutorial - exercise 4: internationalization
product.info=Product information
product.name=Product name
product.price=Product price
product.available=Product available from back=Back
fr
tutorial.exercise4=Tutorial De Thymeleaf - exercice 4: l'internationalisation product.info=Information du produit product.name=Nom du produit product.price=Prix du produit product.available=Produit disponible depuis back=Revenir
5.轉義和非轉義文本
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 5</title> 5 <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" /> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <h1>Thymeleaf tutorial - Solution for exercise 5: escaped and unescaped text</h1> 10 <div th:text="${html}"> 11 Some escaped text 12 </div> 13 <div th:utext="${html}"> 14 Some unescaped text 15 </div> 16 </body> 17 </html>
上述兩個div分別生成的html代碼為
<div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div> <div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
6.迭代
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 6</title> 5 <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" /> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <h1>Thymeleaf tutorial - Answer for exercise 6: iteration</h1> 10 <h2>Product list</h2> 11 <table> 12 <thead> 13 <tr> 14 <th>Description</th> 15 <th>Price</th> 16 <th>Available from</th> 17 </tr> 18 </thead> 19 <tbody th:remove="all-but-first"> 20 <tr th:each="product:${productList}"> 21 <td th:text="${product.description}">Red Chair</td> 22 <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$123</td> 23 <td th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</td> 24 </tr> 25 <tr> 26 <td>White table</td> 27 <td>$200</td> 28 <td>15-Jul-2013</td> 29 </tr> 30 <tr> 31 <td>Reb table</td> 32 <td>$200</td> 33 <td>15-Jul-2013</td> 34 </tr> 35 <tr> 36 <td>Blue table</td> 37 <td>$200</td> 38 <td>15-Jul-2013</td> 39 </tr> 40 </tbody> 41 </table> 42 </body> 43 </html>
7.迭代統計
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 7</title> 5 <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" /> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <h1>Thymeleaf tutorial - Solution for exercise 7: iteration stats</h1> 10 <h2>Product list</h2> 11 <table> 12 <thead> 13 <tr> 14 <th>Index</th> 15 <th>Description</th> 16 <th>Price</th> 17 <th>Available from</th> 18 </tr> 19 </thead> 20 <tbody th:remove="all-but-first"> 21 <tr th:each="product : ${productList}"> 22 <td th:text="${productStat.count}">1</td> 23 <td th:text="${product.description}">Red chair</td> 24 <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$350</td> 25 <td th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</td> 26 </tr> 27 <tr> 28 <td>2</td> 29 <td>White table</td> 30 <td>$200</td> 31 <td>15-Jul-2013</td> 32 </tr> 33 <tr> 34 <td>3</td> 35 <td>Reb table</td> 36 <td>$200</td> 37 <td>15-Jul-2013</td> 38 </tr> 39 <tr> 40 <td>4</td> 41 <td>Blue table</td> 42 <td>$200</td> 43 <td>15-Jul-2013</td> 44 </tr> 45 </tbody> 46 </table> 47 </body> 48 </html>
8.條件判斷
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 8</title> 5 <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" /> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <h1>Thymeleaf tutorial - Answer for exercise 8: conditions</h1> 10 <h2>Product list</h2> 11 <table> 12 <thead> 13 <tr> 14 <th>Description</th> 15 <th>Price</th> 16 <th>Available from</th> 17 <th></th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr th:each="product : ${productList}"> 22 <td th:text="${product.description}">Red chair</td> 23 <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$350</td> 24 <td th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</td> 25 <td> 26 <span th:if="${product.price lt 100}" class="offer">Special offer!</span> 27 </td> 28 </tr> 29 </tbody> 30 </table> 31 </body> 32 </html>
9.更多條件判斷
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 9</title> 5 <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" /> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <h1>Thymeleaf tutorial - Answer for exercise 9: more on conditions</h1> 10 <h2>Customer list</h2> 11 <table> 12 <thead> 13 <tr> 14 <th>First name</th> 15 <th>Last name</th> 16 <th>Gender</th> 17 <th>Payment method</th> 18 <th>Balance</th> 19 </tr> 20 </thead> 21 <tbody th:remove="all-but-first"> 22 <tr th:each="customer : ${customerList}"> 23 <td th:text="${customer.firstName}">Peter</td> 24 <td th:text="${customer.lastName}">Jackson</td> 25 <!-- 26 Use th:switch for selecting content based on ${customer.gender}. 27 As genre can be null if unknown, better use ${customer.gender?.name()} 28 for obtaining its name. 29 --> 30 <td th:switch="${customer.gender?.name()}"> 31 <img th:case="'MALE'" src="../../../images/male.png" th:src="@{/images/male.png}" alt="Male" /> <!-- Use "/images/male.png" image --> 32 <img th:case="'FEMALE'" src="../../../images/female.png" th:src="@{/images/female.png}" alt="Female" /> <!-- Use "/images/female.png" image --> 33 <span th:case="*">Unknown</span> 34 </td> 35 <td> 36 <span th:text="${customer.paymentMethod.description}">Direct debit</span> 37 <!-- Show next message only when paymentMethod is not CREDIT_CARD --> 38 <span th:unless="${customer.paymentMethod.name() == 'CREDIT_CARD'}" class="warn"> 39 Payment must be done in the next 4 days 40 </span> 41 </td> 42 <!-- Add class="enhanced" when balance is greater than 10000 --> 43 <td th:class="${customer.balance gt 10000} ? 'enhanced'" th:text="${customer.balance}">350</td> 44 </tr> 45 <tr> 46 <td>Mary</td> 47 <td>Johanson</td> 48 <td><img src="../../../images/female.png" /></td> 49 <td><span>Credit card</span></td> 50 <td>5000</