Usando o Thymeleaf para mapear automaticamente recursos estáticos (Imagens, scripts, estilos CSS, etc...)

     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.