{"id":895,"date":"2012-04-14T22:22:25","date_gmt":"2012-04-14T20:22:25","guid":{"rendered":"http:\/\/doanduyhai.wordpress.com\/?p=895"},"modified":"2012-04-14T22:22:25","modified_gmt":"2012-04-14T20:22:25","slug":"spring-mvc-part-iv-thymeleaf-advanced-usage","status":"publish","type":"post","link":"https:\/\/www.doanduyhai.com\/blog\/?p=895","title":{"rendered":"Spring MVC part IV: ThymeLeaf advanced usage"},"content":{"rendered":"

This post follows on from the previous post on Thymeleaf integration with Spring MVC<\/a>.<\/p>\n

Today we’ll look at some advanced features of Thymeleaf<\/p>\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 Fragments inclusion<\/h1>\n

All the examples in this chapter can be found in the demo application on GitHub https:\/\/github.com\/doanduyhai\/ThymeLeafDemo<\/a>, as example4<\/strong>.<\/p><\/blockquote>\n

A) General usage<\/h3>\n

A notheworthy templating engine has to provide a fragment system to avoid duplicating code. Fortunately Thymeleaf is shipped with a fragment inclusion system we’ll see shortly.<\/p>\n

The main entry point for fragment inclusion is the th:include<\/strong> attribute. The syntax is: th:include=”fragment_file<\/strong> :: fragment_name|[DOM_selector]<\/strong>“<\/em>.<\/p>\n

The fragment_name<\/strong> or DOM_selector<\/strong> will be used to select the DOM object in the fragment_file<\/strong> file and inject it in the current document. The expression parsing and variable resolution will be performed after the fragment injection, not before<\/strong>. Please note that the DOM_selector needs to be put in square brackets<\/strong>. The DOM_selector uses a subset of XPath syntax, more details here<\/a>.<\/p>\n

Let’s define a template file common.html<\/strong> used as fragment container:<\/p>\n

\n&lt;html xmlns=&quot;http:\/\/www.w3.org\/1999\/xhtml&quot;\n\txmlns:th=&quot;http:\/\/www.thymeleaf.org&quot;&gt;\n&lt;head id=&quot;headerFragment&quot; th:fragment=&quot;headerFragment&quot;&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;..\/assets\/css\/bootstrap.css&quot; th:href=&quot;@{\/assets\/css\/bootstrap.css}&quot; \/&gt;\n\t&lt;link rel=&quot;stylesheet&quot; href=&quot;..\/assets\/css\/thymeleaf-demo.css&quot; th:href=&quot;@{\/assets\/css\/thymeleaf-demo.css}&quot; \/&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div class=&quot;container&quot;&gt;\n\t&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n
Please notice the usage of th:fragment<\/strong> to define the fragment_name<\/strong>.<\/p>\n
Now let’s write an example4.html<\/strong> page to test it:<\/p>\n
\n&lt;head th:include=&quot;fragment\/common :: headerFragment&quot; \/&gt;\n&lt;body&gt;\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;hero-unit&quot;&gt;\n\t    &lt;h1&gt;ThymeLeaf is awesome !&lt;\/h1&gt;\n\t    &lt;p&gt;This is a simple hero-unit layout to demonstrate the fragment inclusion system&lt;\/p&gt;\n\t    &lt;p&gt;\n\t    \t&lt;a class=&quot;btn btn-primary btn-large&quot; href=&quot;http:\/\/www.thymeleaf.org&quot; target=&quot;_blank&quot;&gt;\n\t    \tLearn more about ThymeLeaf ...\n\t    \t&lt;\/a&gt;\n\t    &lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n<\/pre>\n
headerFragment<\/em> indicates the fragment_name<\/strong> defined in the common.html<\/strong> file previously.<\/p>\n
If we wish to use DOM_Selector<\/strong> instead of fragment_name<\/strong>, the example4.html<\/strong> page should be modified as follow:<\/p>\n
\n&lt;head th:include=&quot;fragment\/common :: [\/\/head]&quot; \/&gt;\n...\n<\/pre>\n
In this case there is no need to define the fragment_name<\/strong> with th:fragment<\/strong> in the common.html<\/strong> file.
\n <\/p>\n
B) Fragment container<\/h3>\n
With the powerfull selection mechanism for fragment, we can define several fragments in a same container file and include them in any of our page.<\/p>\n
Let’s define a footer fragment in common.html<\/strong><\/p>\n
\n&lt;footer id=&quot;center-footer&quot;&gt;\n\t&lt;div id=&quot;footerText&quot; class=&quot;span12&quot; &gt;Copyright 2012 &lt;a href=&quot;http:\/\/doanduyhai.wordpress.com&quot;&gt;doanduyhai&lt;\/a&gt; |\n       \t \t&lt;a href=&quot;https:\/\/github.com\/doanduyhai\/ThymeLeafDemo&quot;&gt;Fork ThymeLeaf Demo on Github&lt;\/a&gt; |\n        \t&lt;a href=&quot;https:\/\/twitter.com\/#!\/doanduyhai&quot;&gt;Follow @doanduyhai on Twitter&lt;\/a&gt;\n\t&lt;\/div&gt;\n&lt;\/footer&gt;\n<\/pre>\n
And then include it in our example4.html<\/strong> page:<\/p>\n
\n...\n&lt;div th:include=&quot;fragment\/common :: [\/\/footer[@id='center-footer']]&quot;&gt;&lt;\/div&gt;\n...\n<\/pre>\n
Please note the quite verbose DOM selector expression to select the footer element. A simpler expression like “[\/\/footer]<\/em>” would be sufficient but I let it as is for the tutorial purpose.
\n <\/p>\n
C) Static preview and fragment inclusion<\/h3>\n
There is one problem with our fragment inclusion, it does not work at all for static page preview.<\/p>\n
Below is the static display of the previous example:<\/p>\n
\"thymeleaf-exemple4-static-fragment-preview\"<\/a><\/p>\n
The rendering at runtime is:<\/p>\n
\"thymeleaf-exemple4-runtime-fragment-render\"<\/a><\/p>\n
The reason of this discrepancy is that in the static version the CSS styles are not available since there is no fragment inclusion.<\/p>\n
To fix this, we simply add the stylesheet <rel> tags in the header of the static page. All this will be removed anyway at runtime by the fragment inclusion.<\/del><\/p>\n
 Edit: I’ve been informed by Daniel Fern\u00e1ndez<\/a> and Brian Keeter<\/a> about Thymol<\/a>,a javascript-base solution to perform fragment inclusion for static template preview. So there is no restriction anymore for static fragment inclusion.<\/em><\/p>\n
 <\/p>\n
II Thymeleaf and Spring EL (SpEL)<\/h1>\n
All the examples in this chapter can be found in the demo application on GitHub https:\/\/github.com\/doanduyhai\/ThymeLeafDemo<\/a>, as example5<\/strong>.<\/p><\/blockquote>\n
When used in conjunction with Spring MVC, the default dialect used in the template files is Spring EL. It leverages Thymeleaf  and offers a tremendous flexibility to manipulate data directly in the view.
\n <\/p>\n
A) Bean references & method invocation<\/h3>\n
Thymeleaf exposes a special object, beans<\/strong>, to let you access all Spring beans in the current application context.<\/p>\n
Let’s define a dateFormatter<\/strong> bean as follow:<\/p>\n
\n...\n&lt;bean id=&quot;dateFormatter&quot; class=&quot;doan.thymeleaf.demo.util.DateFormatter&quot;\/&gt;\n...\n<\/pre>\n
The source code of the bean is quite straightforward:<\/p>\n
\npublic class DateFormatter\n{\n\tprivate static final String DATE_FORMAT = &quot;yyyy-MM-dd HH:mm:ss&quot;;\n\n\tpublic String getCurrentDate()\n\t{\n\t\treturn new DateTime(new Date()).toString(DATE_FORMAT);\n\t}\n}\n<\/pre>\n
This bean defines a public getCurrentDate()<\/em> method we’ll use in our page.<\/p>\n
\n...\n&lt;span th:text=&quot;${'Current date is : '+beans.dateFormatter.getCurrentDate()}&quot;&gt;Current date is : 2012-04-14 17:30:00&lt;\/span&gt;\n...\n<\/pre>\n
To access our bean named “dateFormatter<\/strong>“, we have to use the helper object “beans<\/strong>” provided by Thymeleaf. Under the hood beans<\/strong> is simply a Map which contains all references to the beans registered in the Spring context. There is really no magic here.
\n <\/p>\n
B) Static fields & methods<\/h3>\n
Spring EL provides the T( )<\/strong> operator to access a class level(static) field or method.<\/p>\n
\n...\n&lt;span th:text=&quot;${'The application name is : '+T(doan.thymeleaf.demo.util.Constants).APPLICATION_NAME}&quot;&gt;The application name is : Test&lt;\/span&gt;\n...\n<\/pre>\n
This can be usefull to access some constants defined in the classpath without having to add the constant in the Model map.
\n <\/p>\n
C) Projection & selection on collection<\/h3>\n
Projection and selection are vocabulary from the relational world (SQL<\/strong>). Selection<\/strong> corresponds to row filtering<\/strong> (with WHERE clause) and projection<\/strong> corresponds to column restriction<\/strong> (the SELECT clause).<\/p>\n
When applied to a collection of elements in Java:<\/p>\n