{"id":841,"date":"2012-04-14T16:07:20","date_gmt":"2012-04-14T14:07:20","guid":{"rendered":"http:\/\/doanduyhai.wordpress.com\/?p=841"},"modified":"2012-04-14T16:07:20","modified_gmt":"2012-04-14T14:07:20","slug":"spring-mvc-part-iii-thymeleaf-integration","status":"publish","type":"post","link":"https:\/\/www.doanduyhai.com\/blog\/?p=841","title":{"rendered":"Spring MVC part III: ThymeLeaf integration"},"content":{"rendered":"

Today we are going to look into Thymeleaf<\/a>, a very innovative and full HTML5-oriented<\/strong> templating engine. <\/p>\n

Thymeleaf<\/strong>, by definition, can be used as a standalone engine but when associated with Spring MVC, it gives the best of its essence.<\/p>\n

Once you start using Thymeleaf<\/strong>, it’s very hard to go back to the good old JSP. JSP is good, JSP served us well during a decade but now we’re in 2012 and HTML 5 is the future so it’s time to look ahead.
\n<\/p>\n

Please note that all the examples in this post can be found in a demo application on GitHub https:\/\/github.com\/doanduyhai\/ThymeLeafDemo<\/a><\/p><\/blockquote>\n

I Introduction<\/h1>\n

Unlike many Java templating engines of its kind, Thymeleaf is a full HTML engine, meaning that the template file itself is a HTML file that can be rendered by any Web browser. <\/p>\n

How can it be possible ? Well, Thymeleaf is an attribute-based<\/strong> template engine, in the sense that all the language syntax relies heavily on HTML tag attributes. For example (see example1<\/strong> in the tutorial code):<\/p>\n

\n&lt;html lang=&quot;en&quot;\n\txmlns=&quot;http:\/\/www.w3.org\/1999\/xhtml&quot; \n\txmlns:th=&quot;http:\/\/www.thymeleaf.org&quot;&gt;\n\t...\n\t...\n&lt;div class=&quot;container&quot;&gt;\n\t&lt;br\/&gt;\n\t&lt;br\/&gt;\n\t&lt;br\/&gt;\n\t&lt;div class=&quot;span4 offset4 row-fluid&quot;&gt;\n\t\t&lt;div id=&quot;userMain&quot; class=&quot;span1 table-bordered&quot;&gt;\n\t\t\t&lt;a href=&quot;#&quot;&gt;\n\t\t\t\t&lt;img id=&quot;picture&quot; src=&quot;http:\/\/www.gravatar.com\/avatar\/&quot;\n\t\t\t\t\tdata-user=&quot;duyhai&quot;\n\t\t\t\t\tth:src=&quot;${'http:\/\/www.gravatar.com\/avatar\/'+currentUser.gravatar+'?s=64'}&quot;\n\t\t\t\t\tth:attr=&quot;data-user=${currentUser.login}&quot;&gt;\n\t\t\t\t&lt;\/img&gt;\n\t\t\t&lt;\/a&gt;\n\t\t&lt;\/div&gt;\n\t\t&lt;div class=&quot;span3 table-bordered&quot;&gt;\n\t\t\t&lt;h2&gt;\n\t\t\t\t&lt;span id=&quot;firstName&quot; th:text=&quot;${currentUser.firstName}&quot;&gt;DuyHai&lt;\/span&gt; \n\t\t\t\t&lt;span id=&quot;lastName&quot; th:text=&quot;${currentUser.lastName}&quot;&gt;DOAN&lt;\/span&gt;\n\t\t\t&lt;\/h2&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/html&gt;\n<\/pre>\n
 As we can see at lines 15,16,22 & 23<\/strong>, the template file is a mere HTML file with some special attribute prefixed by the Thymeleaf namespace th<\/strong>. A web browser will simply ignore these additional attributes whereas the template engine will process them.<\/p>\n
As fas as I know, the only other attribute-based template engine out there is TAL<\/a> (Template Attribute Language) using Python language.<\/p>\n
 The fact that the template itself can be displayed in a web browser is an important feature. Indeed while developing an Web page, people first start designing the static part of the GUI (css, color, layout) before focusing on the dynamic part (data injection, conditional rendering). With JSP you start creating an empty web page template before injecting all the <\/strong> tag soup<\/em> with the risk of altering the initial static design. With Thymeleaf there is no such headache, we do not need to add any new tag, just new attributes.<\/p>\n
 Below is an example of a static page design<\/strong> (see example2<\/strong> in the tutorial code):<\/p>\n
 \"thymeleaf-static-design\"<\/a><\/p>\n
As you can see, error<\/strong> and info<\/strong> message panels are all rendered at the same time and we also have some mocked<\/strong> search results.<\/p>\n
At runtime, we get something similar to:<\/p>\n
\"thymeleaf-runtime-result\"<\/a><\/p>\n
 All mocked<\/strong> lines have been removed, only true search results are displayed (we’ll see later in this post how mocks are removed).
\n <\/p>\n
II How does it work<\/h2>\n
All the examples in this chapter can be found in the demo application on GitHub https:\/\/github.com\/doanduyhai\/ThymeLeafDemo<\/a>, as example1<\/strong>.<\/p><\/blockquote>\n
 It’s time to see how Thymeleaf work under the hood. If we go back to the example 1<\/strong><\/p>\n
 Below is the static rendering:<\/p>\n
\"thymeleaf-exemple1-static\"<\/a><\/p>\n
Now let’s focus in the template code:<\/p>\n
\n&lt;img id=&quot;picture&quot; \n\tsrc=&quot;http:\/\/www.gravatar.com\/avatar\/&quot;\n\tdata-user=&quot;duyhai&quot;\n\tth:src=&quot;${'http:\/\/www.gravatar.com\/avatar\/'+currentUser.gravatar+'?s=64'}&quot;\n\tth:attr=&quot;data-user=${currentUser.login}&quot;&gt;\n&lt;\/img&gt;\n<\/pre>\n
 We can see there are 2 Thymeleaf attributes: th:src<\/strong> & th:attr<\/strong>. What happens at runtime is that Thymeleaf will parse your HTML document, pick any th<\/strong> attributes and perform substitution. Above, the src=”http:\/\/www.gravatar.com\/avatar\/”<\/em> attribute will be replaced by an URL evaluated against the variable currentUser.gravatar<\/strong> (we’ll see soon where the variable comes from).<\/p>\n
 Similarly the <span id=”firstName” th:text=”${currentUser.firstName}”>DuyHai<\/span><\/em>
\nwill be rendered as <span id=”firstName” >REAL_FIRSTNAME<\/span><\/em> at runtime, the existing DuyHai<\/em> value is there only for the static preview<\/strong> of the template.<\/p>\n
 At runtime, we’ll get something similar to:<\/p>\n
\"thymeleaf-exemple1-dynamic\"<\/a><\/p>\n
 The general rule is that all static content & attributes will be replaced by dynamic one at runtime by the engine.<\/p>\n
 At that time, you attentive reader should say: “hey Dude, it means there should be as many Thymeleaf attributes as there are HTML 5 tag attributes!<\/em>” and you’re almost right, almost, because Thymeleaf also exposes additional attributes for flow control.<\/p>\n
 Below is a list (not comprehensive) of some existing attributes:<\/p>\n