Styles in Thymeleaf
Thymeleaf is a template language based on HTML. Its syntax is simpler, but less powerful when compared to styles in Javascript or Groovy.
Below are some examples of styles in Thymeleaf.
Quick list of Calls
In this style, you can note:
th:each="current : ${ lum_controls['list.tabulardata'].data.row }"
-
This attribute indicates that the
article
tag (including its contents) will be repeated for eachrow
object inth:each="lum_controls['list.tabulardata'].data
.
At each iteration, the current object will be available in the variablecurrent
. th:object="${ current }"
-
This attribute indicates that the
current
object will be available in the context. This means that its attributes can be accessed more easily through the directive*{ attribute }
. th:if="*{ image.href }"
-
This attribute indicates that the
div
containing the call image will only be rendered if the context object (thecurrent
object) has animage
attribute that in turn has ahref
attribute. th:src="*{ image.href }"
-
This attribute indicates that the
src
attribute of theimg
tag will receive the value*{ image.href }
(which is thehref
attribute of theimage
attribute of the object in thecurrent
context). th:text="*{ title }"
-
This attribute indicates that the content of the
h1
tag will be replaced by thetitle
attribute of the context object (current
). th:utext="*{ content }"
-
The
th:utext
attribute is similar toth:text
, but it does not escape HTML characters. Typically, when including HTML-type fields, theth:utext
attribute should be used instead ofth:text
, as the latter escapes HTML characters.
Main Menu of Hierarchical Content
In this style, you can note:
th:fragment="menuItem(pContentId)"
-
This attribute indicates to Thymeleaf that the containing
ul
element is a fragment that can be reused. This fragment will be called later by anotherul
element, using theth:insert
attribute. th:with="parentContentId = ${ pContentId } ?: '' "
-
This attribute creates a variable called
parentContentId
that will receive as value:- The value of the
pContentId
variable, if it exists. - An empty string (
''
) otherwise.
parentContentId
variable will be available from this moment on. - The value of the
th:remove="${ (parentContentId=='') ? 'none' : 'tag' }"
-
This attribute tells Thymeleaf that it should remove the tag itself, leaving the children untouched if the
parentContentId
is not an empty string. th:each="menuitem, iterStat : ${ lum_xpath.getMaps('//data/row[parentContentId=\'__${parentContentId}__\']') }"
-
This attribute is like the iteration from the previous example. However, there are some peculiarities:
-
menuitem, iterStat
: in this iteration, besides making the current object available in themenuitem
variable, the iteration status is also made available in theiterStat
variable. -
${ lum_xpath.getMaps('//data/row[parentContentId=\'__${parentContentId}__\']')
: in this block, we can see that the value of theparentContentId
variable is being inserted into the value passed to thelum_xpath.getMaps
method via__${parentContentId}__
. This technique is called preprocessing. Consequently, the result of the expression'//data/row[parentContentId=\'__${parentContentId}__\']'
(a string) is preprocessed before being used inlum_xpath.getMaps( ... )
.
-
th:classappend="${ (menuitem.type == '3') ? 'lum-link-attachment' : '' }"
-
This attribute indicates that, if
menuitem.type == '3'
, a class calledlum-link-attachment
should be added to the existing class on the element. th:attr=".... onclick = ${ #maps.containsKey(menuitem, '$onClick') ? menuitem.$onClick : '' }"
-
In this attribute, you can notice the use of a utility map method
to check if the
menuitem
object has anonClick
attribute.
Thymeleaf has a security mechanism that prevents the value ofmenuitem.$onClick
from being inserted directly into theonclick
attribute of the element usingth:onclick="..."
. Thus, it is necessary to add this value via theth:attr="...."
attribute. th:insert="~{:: menuItem(${ menuitem.contentId })}"
-
This attribute makes the
menuItem
fragment included in place, passing the valuemenuitem.contentId
as a parameter to it.
If you need more information, see the official Thymeleaf documentation.