No último artigo dessa série vimos como utilizar as estruturas de condição e repetição do Thymeleaf para conseguirmos construir layouts mais dinâmicos em nossas aplicações.
Continuando essa série de artigos sobre o Thymeleaf, veremos como podemos reaproveitar o código de nossos templates com o recurso de fragments.
O que são fragments?
Os fragments são uma forma de conseguirmos isolar um trecho de código dos nossos templates em um arquivo separado e então inclui-los em outros templates de acordo com a nossa necessidade.
Imagine um fragment como uma função em uma linguagem de programação, se existe muita repetição de um determinado trecho de código nos templates da nossa aplicação, podemos isolar esse trecho de código e então apenas fazer a sua inclusão nos locais necessários.
A grande vantagem desse recurso é que caso seja necessário realizar alguma alteração nesse fragment, precisaremos alterar o código em apenas um único local e a alteração irá repercutir para todos os templates que estão utilizando o fragment em questão.
Os fragments também podem ser utilizados para divisão dos códigos dos nossos templates, é comum que ao longo do desenvolvimento de uma aplicação mais robusta que tenhamos arquivos de templates gigantescos, o que os torna difíceis de dar manutenção, então podemos utilizar os fragments para subdividir templates maiores em diferentes arquivos menores e assim aumentar a manutenibilidade da aplicação.
Criando um fragment
O processo de criação de um fragment é bem simples, é preciso apenas criar um novo arquivo HTML como o código que se deseja fazer o reaproveitamento e então utilizar o atributo th:fragment na tag que envolve o código a ser reaproveitado.
Vejamos um exemplo prático, vamos criar um arquivo chamado cabecalho.html em nosso projeto, lembrando que estamos utilizando a mesma aplicação Spring Boot dos artigos passados desta série.
Utilizando um fragment
Para utilizar um fragment previamente criado, podemos utilizar três diferentes propriedades do Thymeleaf, são elas th:insert, th:replace e th:include. Cada uma possui um comportamento diferente que irei explicar logo mais. Por hora vamos utilizar a propriedade th:replace.
Agora vamos criar um outro arquivo de template que irá utilizar o fragment criado, esse arquivo será o arquivo home.html
A propriedade th:replace recebe como parâmetro o nome do arquivo onde se encontra o fragment e em seguida o nome do fragment desejado, sendo que o nome do fragment nós definimos na propriedade th:fragment no arquivo cabecalho.html.
E por fim o nosso arquivo HomeController.java que irá chamar o template home.html.
Com tudo pronto podemos executar a aplicação e então acessar o endereço http://localhost:8080 no navegador e então a seguinte página será exibida.
Se pedirmos para o navegador exibir o código fonte da página veremos que o Thymeleaf gerou o seguinte código HTML.
Podemos observar que a tag div na qual utilizamos a propriedade th:replace foi substituída pelo conteúdo do fragment selecionado.
Diferença entre th:insert, th:replace e th:include
Para que vejamos a diferença entre estas três propriedades possíveis para o uso de fragments em nossos templates, vamos alterar o arquivo home.html e fazer três inclusões do fragment cabecalho onde em cada uma das inclusões iremos utilizar uma propriedade diferente.
Vamos então atualizar a página e veremos o seguinte resultado.
Visualmente não aparenta haver nenhuma diferença no uso das três propriedades, mas para que isso fique claro vamos ver o código gerado pelo Thymeleaf.
Ao solicitar para o navegador exibir o código fonte da página iremos ver esse resultado.
Veja que cada propriedade tem um comportamento diferente:
-
th:insert: Mantem a tag em que foi utilizado e insere todo o conteúdo do fragment dentro da mesma. -
th:replace: Substitui a tag onde foi utilizado pelo conteúdo do fragment. -
th:include: Mantem a tag em que foi utilizado e insere apenas o conteúdo interno da tag em que a propriedadeth:fragmentfoi utilizada.
Curso Spring Framework - Fundamentos
Conhecer o cursoConclusão
Neste artigo vimos como podemos fazer reaproveitamento do nosso código com os fragments do Thymeleaf, tornando assim os nossos templates mais simples e fáceis de manter.
No próximo artigo dessa série veremos como podemos utilizar o conceito de herança de templates no Thymeleaf.
