O Thymeleaf é um substituto do JSP que tem total integração com o
Spring, trabalhando com layouts e fazendo a integração das páginas XHTML, HTML5
e XML com o Java no lado servidor.
Dito isto, para quem usa Spring MVC com Spring Boot precia
adicionar as dependências no pom.xml da seguinte forma:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Quem não usa o Spring Boot deve colocar:
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.0.BETA02</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>3.0.0.BETA02</version>
</dependency>
E adicionar o seguinte namespace no layout principal e das
páginas:
xmlns:th="http://www.thymeleaf.org"
Desta
forma, já possível usar as TAGS do Thymeleaf
nos arquivos XHTML, HTML5 e XML. Porém o foco desse post é o uso do Thymeleaf para encapsular a chamada de
recursos estáticos como imagens, arquivos Javascript e CSS, etc., fazendo com
que o Thymeleaf mapeie de forma
dinâmica o caminho absoluto desses recursos. Isso é muito útil, principalmente
para quem usa o Spring Boot com o Tomcat
embutido, no desenvolvimento, porém vai fazer o deploy em um servidor de
aplicação mais robusto ou mesmo em um Tomcat externo, pois o context-path (caminho do contexto) muda
e causa vários transtornos.
Vou
apresentar a maneira com e sem o Thymeleaf para percebermos a diferença. Primeiro vamos à maneira comum, sem o uso do Thymeleaf, onde nós somos responsáveis por mapear o caminho dos
recursos:
<a class="btn btn-link
link-panel" href="/carros">Carros</a>
<form class="form-horizontal"
method="POST" action="/carro">
<script src="/js/jquery-2.2.2.min.js"></script>
<link rel="stylesheet"
type="text/css" th:href="/css/estyle.css"/>
<img src="/images/logo.png" width="200dp" />
E agora vamos ver como ficam esses recursos
com o Thymeleaf:
<a class="btn btn-link
link-panel" th:href="@{/titulos}">Carros</a>
<form class="form-horizontal"
method="POST" th:action="@{/carro}">
<script th:src="@{/js/jquery-2.2.2.min.js}"></script>
<link rel="stylesheet"
type="text/css" th:href="@{/css/estyle.css}"/>
<img th:src="@{/images/logo.png}" width="200dp" />
Veja
que praticamente todos os casos foram abordados: imagens, scripts, action de
forms, e estilos CSS. Tudo o que apresenta um caminho, pode ser encapsulado com
o Thymeleaf. O que tivemos que
acrescentar foi o namespace th: antes das propriedades que guardam o caminho dos
recursos, e englobar os caminhos com @{}. Muito simples
não é mesmo? Dessa forma, mudando o context-path,
não é preciso me preocupar, pois os recursos serão trazidos da mesma maneira.
Espero
ter ajudado. Abraços.
