Estilos em Thymeleaf

Thymeleaf é uma linguagem de template que tem como base o HTML. Sua sintaxe é mais simples, mas menos poderosa ao se comparar com estilos em Javascript ou Groovy.

A seguir encontram-se alguns exemplos de estilos em Thymeleaf.

Lista rápida de Chamadas

Nesse estilo, pode-se notar:

th:each="current : ${ lum_controls['list.tabulardata'].data.row }"

Esse atributo indica que a tag article (incluindo seu conteúdo) será repetido para cada objeto row em th:each="lum_controls['list.tabulardata'].data.
A cada iteração, o objeto atual ficará disponível na variável current.

th:object="${ current }"

Esse atributo indica que o objeto current será disponibilizado no contexto. Isso implica que seus atributos poderão ser acessados mais facilmente através da diretiva *{ atributo }.

th:if="*{ image.href }"

Esse atributo indica que a div que contém a imagem da chamada só será renderizada caso o objeto do contexto (objeto current) possua um atributo image que por sua vez possua um atributo href.

th:src="*{ image.href }"

Esse atributo indica que o atributo src da tag img receberá o valor *{ image.href } (que é o atributo href do atributo image do objeto no contexto current).

th:text="*{ title }"

Esse atributo indica que o conteúdo da tag h1 será substituído pelo atributo title do objeto do contexto (current).

th:utext="*{ content }"

O atributo th:utext é parecido com o th:text, porém, não escapa caracteres HTML. Normalmente, ao incluir campos do tipo HTML, o atributo th:utext deveria ser utilizado em detrimento do th:text, pois o último escapa caracteres HTML.

Menu Principal de Conteúdos Hierárquicos

Nesse estilo, pode-se notar:

th:fragment="menuItem(pContentId)"

Esse atributo indica ao Thymeleaf the o elemento ul que o contém é um fragmento que pode ser reaproveitado. Esse fragmento será chamado posteriormente por outro elemento ul, utilizando o atributo th:insert.

th:with="parentContentId = ${ pContentId } ?: '' "

Esse atributo cria uma variável chamada parentContentId que receberá como valor:

• O valor da variável pContentId, caso a mesma exista.
• Uma string vazia ('') caso contrário.

A variável parentContentId passa a estar disponível a partir desse momento.

th:remove="${ (parentContentId=='') ? 'none' : 'tag' }"

Esse atributo indica ao Thymeleaf que ele deve remover a própria tag, deixando os filhos intocados, caso a variável parentContentId não seja uma string vazia.

th:each="menuitem, iterStat : ${ lum_xpath.getMaps('//data/row[parentContentId=\'__${parentContentId}__\']') }"

Esse atributo é como a iteração do exemplo anterior. Porém, há algumas particularidades:

• menuitem, iterStat: nessa iteração, além de disponibilizar o objeto corrente na variável menuitem, também é disponibilizado o estado do iterador, disponibilizado na variável iterStat.
• ${ lum_xpath.getMaps('//data/row[parentContentId=\'__${parentContentId}__\']'): nesse bloco, podemos notar que o valor da variável parentContentId está sendo inserido no valor passado para o método lum_xpath.getMaps através de __${parentContentId}__. Essa técnica chama-se preprocessamento. Isso faz com que o resultado da expressão '//data/row[parentContentId=\'__${parentContentId}__\']' (uma string) seja preprocessado antes de ser utilizado em lum_xpath.getMaps( ... ).

th:classappend="${ (menuitem.type == '3') ? 'lum-link-attachment' : '' }"

Esse atributo indica que, caso menuitem.type == '3', uma classe chamada lum-link-attachment deve ser adicionada à classe existente no elemento.

th:attr=".... onclick = ${ #maps.containsKey(menuitem, '$onClick') ? menuitem.$onClick : '' }"

Nesse atributo, pode-se notar o uso de um método utilitário de mapas para verificar se o objeto menuitem possui um atributo onClick.
O Thymeleaf possui um mecanismo de segurança que impede que o valor de menuitem.$onClick seja inserido diretamente no atributo onclick do elemento usando th:onclick="...". Assim, é necesário adicionar esse valor via um atributo th:attr="....".

th:insert="~{:: menuItem(${ menuitem.contentId })}"

Esse atributo faz com que o fragmento menuItem seja incluído no local, passando como parâmetro para o mesmo o valor menuitem.contentId.

Caso necessite de mais informações, veja a documentação oficial do Thymeleaf.