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.简单数据转换（数字，日期）
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>
这里的 ${#numbers.formatDecimal(product.price, 1, 2)} 一般用来表示价格，是两位小数的double型数据， ${#dates.format(product.availableFrom, 'yyyy-MM-dd')} 一般用
来表示自定义格式的日期。注意：这里的product.price和product.available为后台传过来的数据，注意数据类型不要出错。
2.国际化
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
3.转义和非转义文本
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代码为：
1 <div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div> 2 <div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
4.多条件判断
1 <td th:switch="${customer.gender?.name()}"> 2 <img th:case="'MALE'" src="../../../images/male.png" th:src="@{/images/male.png}" alt="Male" /> <!-- Use "/images/male.png" image --> 3 <img th:case="'FEMALE'" src="../../../images/female.png" th:src="@{/images/female.png}" alt="Female" /> <!-- Use "/images/female.png" image --> 4 <span th:case="*">Unknown</span> 5 </td>
类似java中的switch case方法只有匹配到信息的才会显示。
5.Spring表达式语言
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 10</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 10: Spring Expression language</h1> 10 11 <h2>Arithmetic expressions</h2> 12 <p class="label">Four multiplied by minus six multiplied by minus two module seven:</p> 13 <p class="answer" th:text="${4 * -6 * -2 % 7}">123</p> 14 15 <h2>Object navigation</h2> 16 <p class="label">Description field of paymentMethod field of the third element of customerList bean:</p> 17 <p class="answer" th:text="${customerList[2].paymentMethod.description}">Credit card</p> 18 19 <h2>Object instantiation</h2> 20 <p class="label">Current time milliseconds:</p> 21 <p class="answer" th:text="${new java.util.Date().getTime()}">22-Jun-2013</p> 22 23 <h2>T operator</h2> 24 <p class="label">Random number:</p> 25 <p class="answer" th:text="${T(java.lang.Math).random()}">123456</p> 26 </body> 27 </html>
页面中的操作分别为：页面计算，直接操作list里的某个对象，显示当前时间，取随机数
6.内联
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <title>Thymeleaf tutorial: exercise 13</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 13: inlining</h1> 10 <h2>Birthday email</h2> 11 <form action="#" method="post"> 12 <label for="body">Message body:</label> 13 <textarea id="body" name="body" th:inline="text"> 14 Dear [[${customerName}]], 15 16 it is our sincere pleasure to congratulate your in your birthday: 17 Happy birthday [[${customerName}]]!!! 18 19 See you soon, [[${customerName}]]. 20 21 Regards, 22 The Thymeleaf team 23 </textarea> 24 <input type="submit" value="Send mail" /> 25 </form> 26 </body> 27 </html>
thymeleaf内联有三种，text，javascript，none
1.text
1 <p th:inline="text">Hello, [[${session.user.name}]]!</p>
2.javascript
1 <script th:inline="javascript"> 2 /*<![CDATA[*/ 3 var welcome = [[${welcome}]]; 4 //通过th:inline="javascript"方式 5 // alert('th:inline="javascript"'+welcome); 6 /*]]>*/ 7 </script>
在这里需要对以上代码进行一下说明，js内联代码中需要加入 /*<![CDATA[*/ ...... /*]]>*/ 代码块，thymeleaf才能正确解析一些运算符(<等)和操作符号&/&&等。
另外,javascript内联时有以下两个特性：
(1)javascript附加代码
语法： /*[+ +]*/ 如：
1 /*[+ 2 var msg = 'This is a working application'; 3 +]*/
(2)javascript移除代码
语法： /*[- */ /* -]*/ 如：
1 /*[- */ 2 var msg = 'This is a non-working template'; 3 /* -]*/
参考: http://www.cnblogs.com/dreamfree/p/4158557.html
http://blog.csdn.net/sun_jy2011/article/details/40300001