Open the menu

    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 each row object in th:each="lum_controls['list.tabulardata'].data.
    At each iteration, the current object will be available in the variable current.
    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 (the current object) has an image attribute that in turn has a href attribute.
    th:src="*{ image.href }"
    This attribute indicates that the src attribute of the img tag will receive the value *{ image.href } (which is the href attribute of the image attribute of the object in the current context).
    th:text="*{ title }"
    This attribute indicates that the content of the h1 tag will be replaced by the title attribute of the context object (current).
    th:utext="*{ content }"
    The th:utext attribute is similar to th:text, but it does not escape HTML characters. Typically, when including HTML-type fields, the th:utext attribute should be used instead of th: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 another ul element, using the th: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.
    The parentContentId variable will be available from this moment on.
    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 the menuitem variable, the iteration status is also made available in the iterStat variable.
    • ${ lum_xpath.getMaps('//data/row[parentContentId=\'__${parentContentId}__\']'): in this block, we can see that the value of the parentContentId variable is being inserted into the value passed to the lum_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 in lum_xpath.getMaps( ... ).
    th:classappend="${ (menuitem.type == '3') ? 'lum-link-attachment' : '' }"
    This attribute indicates that, if menuitem.type == '3', a class called lum-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 an onClick attribute.
    Thymeleaf has a security mechanism that prevents the value of menuitem.$onClick from being inserted directly into the onclick attribute of the element using th:onclick="...". Thus, it is necessary to add this value via the th:attr="...." attribute.
    th:insert="~{:: menuItem(${ menuitem.contentId })}"
    This attribute makes the menuItem fragment included in place, passing the value menuitem.contentId as a parameter to it.

     

    If you need more information, see the official Thymeleaf documentation.