No último artigo dessa série, vimos como utilizar os fragments do Thymeleaf para obter um maior reaproveitamento dos códigos de nossos templates. .
Continuando essa série de artigos sobre Thymeleaf, veremos como podemos utilizar uma das funcionalidades mais interessantes das template engines, a herança de templates.
Sobre a herança de templates
Durante o desenvolvimento de nossas aplicações web é bem comum que por diversas vezes nossas páginas web possuam características semelhantes, como por exemplo uma barra de navegação, um rodapé, importações de arquivos css e js, etc.
Uma forma de resolver esse problema seria com o uso dos fragments que falamos no post passado, porém da forma que foi apresentada não é uma solução muito boa, pois os fragments são um pequeno bloco de código que representa um determinado componente de nossas páginas, então teríamos um fragment para a barra de navegação e outro para o rodapé por exemplo, e todos esses fragments teriam que ser incluídos nas nossas páginas.
Uma solução mais interessante seria sermos capazes de criar um template base que possui o que é comum para os demais templates da nossa aplicação e então os demais templates iriam herdar desse template base, logo iriam possuir todas as características do template base que foi herdado e também teriam suas próprias características.
Na teoria tudo parece funcionar, mas na prática nos encontramos um problema, o Thymeleaf não possui uma funcionalidade de herança de templates. Então quer dizer que o Thymeleaf é uma template engine inferior? De maneira alguma, o que acontece é que o Thymeleaf não possui uma funcionalidade específica para a herança de templates como a maioria das template engines, porém é possível alcançar o mesmo resultado utilizando os fragments parametrizados.
Fragments parametrizados
Antes de falarmos sobre a implementação da herança de templates, primeiro precisamos falar sobre o que são e como utilizar fragments parametrizados.
Podemos imaginar um fragment parametrizado como sendo uma função com parâmetros, então é basicamente um fragment que pode receber parâmetros e que pode ter seu comportamento ou exibição alterada de acordo com o parâmetro que for passado.
Criando fragments parametrizados
Para criarmos um fragment parametrizado é bem similar a criação de fragments que não recebem parâmetros, primeiro é preciso criar novo arquivo HTML que conterá o código do fragment, utilizamos novamente o atributo th:fragment na tag que envolve todo o código, a única diferença é que após o nome do fragment colocamos entre parênteses quais os parâmetros que o fragment em questão precisa receber.
Vejamos um exemplo prático, vamos recriar o fragment do artigo passado, só que dessa vez ele irá receber um parâmetro.
No exemplo acima o fragment cabecalho recebe um parâmetro chamado texto que deve ser passado por quem chamar esse fragment e então o valor passado para o parâmetro texto será inserido na tag h1 pelo atributo th:text.
Utilizando fragments parametrizados
Para utilizar um fragment parametrizado não é muito diferente do que vimos no artigo passado, podemos utilizar um dos atributos th:insert, th:include ou th:replace, a diferença é que além de informamos qual fragment vamos inserir também devemos informar o valor dos parâmetros necessários.
Vejamos o exemplo abaixo:
Importante notar que o valor que está sendo passado como parâmetro na chamada do fragment cabecalho está entre aspas simples, pois o valor é um dado do tipo string.
Com isso, quando o template acima for renderizado pelo Thymeleaf iremos obter o seguinte resultado em HTML:
Dessa maneira o nosso fragment cabecalho é mais flexível, pois não exibe apenas valores estáticos e sim valores que são dinâmicos de acordo com os parâmetros que forem passados para o mesmo.
Criando o template base
Entendido o que são e como funcionam os fragments parametrizados, agora vamos ver como podemos utilizar tal funcionalidade para implementar uma herança de templates em nossos layouts.
O primeiro passo é criarmos o nosso template base, é esse template que irá conter toda a estrutura base que os outros templates irão herdar, ou seja tudo aquilo que é comum em todas as páginas de nossa aplicação.
Para isso vamos criar um template chamado base.html com o seguinte conteúdo:
O que estamos fazendo no código acima é criando um fragment chamado layout que recebe um parâmetro chamado conteudo, perceba que o valor do parâmetro conteudo está sendo colocado na tag main através do atributo th:include, ou seja, o valor esperado pelo parâmetro conteudo é um outro fragment e isso é perfeitamente possível de ser feito com o Thymeleaf.
Herdando o template base
Agora que já possuímos nosso template base, estamos prontos para herdá-lo e, assim, reaproveitar boa parte do código HTML nas páginas filhas de nosso projeto.
Para isso, é muito simples, basta fazer uso do fragment layout passando como parâmetro o conteúdo a ser inserido no template base.
Para exemplificar, teremos dois templates, um para listagem de funcionários e outro para listagem de clientes, veja o código dos templates filhos abaixo.
O que está acontecendo acima é que estamos dizendo que todo o conteúdo HTML de nossos templates filhos serão substituídos pelo conteúdo do fragment layout definido em nosso template base.html, porém estamos passando para o parâmetro do fragment layout toda a nossa tag main.
Veja que durante a passagem do parâmetro estamos utilizando a sintaxe do Thymeleaf quando trabalhamos com fragments, o que você pode estar estranhando é que estamos passando um fragment chamando main mas não estamos informando o local onde o fragment está localizado, o que acontece é que quando omitimos o arquivo onde se localiza o fragment, o Thymeleaf busca por tal fragment no arquivo de template atual e também não é necessário definirmos a tag main como um fragment, pois é possível informar uma tag diretamente, como estamos fazendo nos exemplos acima.
Agora, para ver isso funcionando vamos criar duas rotas para acessar as páginas com seus dados em questão, vamos então criar duas actions no nosso arquivo HomeController.java.
Agora ao acessar a rota /clientes e /funcionarios teremos os seguintes resultados:
Toda a estrutura da página HTML criada no template base foi herdado, inclusive o cabeçalho e o rodapé definidos no arquivo base.html e apenas o conteúdo das páginas em questão foram alterados.
Agora, para cada página que precisamos criar, basta herdar o nosso fragment layout e assim aproveitar toda a estrutura já pronta.
Curso Spring Framework - Templates com Thymeleaf
Conhecer o cursoConclusão
Nesse artigo vimos como podemos fazer uso da herança de templates com uso dos fragments parametrizados do Thymeleaf.
E com isso damos fim a nossa série de artigos sobre o Thymeleaf, mas os estudos não param por aqui, ainda existem diversas funcionalidades no Thymeleaf que não foram abordadas nessas série e recomendo fortemente que continuem seus estudos nessa incrível template engine do ecossistema Java, uma ótima fonte de estudo é a documentação oficial.
