Open the menu

    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.