Thymeleaf - Reaproveitando código com fragments \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 02 Horas 44 Min 23 Seg Tempo restante da oferta: 02 44 23 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Thymeleaf - Reaproveitando código com fragments [ Java ](https://www.treinaweb.com.br/blog/categoria/java) # Thymeleaf - Reaproveitando código com fragments Neste artigo veremos como utilizar a funcionalidade de fragments da template engine Thymeleaf para reaproveitarmos o código de nossos templates. [ Cleyson Lima ](https://www.treinaweb.com.br/blog/autor/cleyson-lima) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/thymeleaf-reaproveitando-codigo-com-fragments.png) No [último artigo](https://www.treinaweb.com.br/blog/thymeleaf-estruturas-de-condicao-e-repeticao/) 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](https://www.treinaweb.com.br/blog/o-que-e-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. ![Página com o resultado do uso de fragents do Thymeleaf](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/pagina-com-uso-de-fragments-do-thymeleaf.png) 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. ![Página com o resultado do uso das três propriedades de inclusão de fragents do Thymeleaf](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/pagina-com-uso-das-tres-propriedades-de-inclusao-de-fragments-do-thymeleaf.png) 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 propriedade `th:fragment` foi utilizada. [ ![Spring Framework - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/spring-boot.svg) Curso Spring Framework - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/spring-framework-fundamentos) ## Conclusã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. - [ #Spring Boot ](https://www.treinaweb.com.br/blog/tag/spring-boot) - [ #thymeleaf ](https://www.treinaweb.com.br/blog/tag/thymeleaf) - [ #desenvolvimento web ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-web) Autor ![Cleyson Lima](//secure.gravatar.com/avatar/db30efb102ffa5d5204cebe12060b111?d=mm) ## Cleyson Lima Professor, programador, fã de One Piece e finge saber cozinhar. Cleyson é graduando em Licenciatura em Informática pelo IFPI - Campus Teresina Zona Sul, nos anos de 2019 e 2020 esteve envolvido em vários projetos coordenados pela secretaria municipal de educação da cidade de Teresina, onde o foco era introduzir alunos da rede pública no mundo da programação e robótica. Hoje é instrutor dos cursos de Spring na TreinaWeb, mas diz que seu coração sempre pertencerá ao Python. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/cleyson-lima) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/thymeleaf-reaproveitando-codigo-com-fragments-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf - Herança de Templates ](https://www.treinaweb.com.br/blog/thymeleaf-heranca-de-templates) Neste artigo veremos como implementar a herança de templates com os fragments parametrizados da template engine Thymeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/THYMELEAF-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf - Estruturas de condição e repetição ](https://www.treinaweb.com.br/blog/thymeleaf-estruturas-de-condicao-e-repeticao) Neste artigo veremos como utilizar estruturas de condição e as estruturas de repetição da template engine Thymeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/THYMELEAF-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Thymeleaf, veja como enviar e exibir dados em seus templates ](https://www.treinaweb.com.br/blog/thymeleaf-veja-como-enviar-e-exibir-dados-em-seus-templates) Neste artigo veremos como enviar informações de aplicação Spring Boot para serem exibidas em templates do Thyemeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/THYMELEAF-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ O que é o Thymeleaf? ](https://www.treinaweb.com.br/blog/o-que-e-o-thymeleaf) Neste artigo veremos o que é e os principais recursos de uma das template engines mais utilizadas no ecossistema Java, o Thymeleaf. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/01/WEB-JARS-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ WebJars: Simplifique o gerenciamento de dependências front-end ](https://www.treinaweb.com.br/blog/webjars-simplifique-o-gerenciamento-de-dependencias-front-end) Otimize seu desenvolvimento Java! Descubra como o WebJars simplifica o gerenciamento de dependências front-end. Integre com facilidade e eficiência. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/spring-framework-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 3 anos atrás ## [ Spring Boot - Trabalhando com Controllers ](https://www.treinaweb.com.br/blog/spring-boot-trabalhando-com-controllers) Veja nesse artigo como trabalhar com controllers em uma aplicação Spring Web MVC com Spring Boot. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/o-que-e-o-spring-boot-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 6 anos atrás ## [ O que é o Spring Boot? ](https://www.treinaweb.com.br/blog/o-que-e-o-spring-boot) Neste artigo veremos o que é o Spring Boot e como ele pode nos auxiliar no desenvolvimento de aplicações Spring. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/deploy-de-uma-aplicacao-spring-boot-no-heroku-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Deploy de uma aplicação Spring Boot no Heroku ](https://www.treinaweb.com.br/blog/deploy-de-uma-aplicacao-spring-boot-no-heroku) Neste artigo veremos como podemos realizar o deploy de uma aplicação Spring Boot na nuvem com o Heroku. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/12/13150804/template-engine-1-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ O que é Template Engine? ](https://www.treinaweb.com.br/blog/o-que-e-template-engine) Veja neste artigo o que é Template Engine e as principais opções do mercado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/DEPLOY-SPRING-DIGITAL-OCEAN-400x280.jpg) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 3 anos atrás ## [ Deploy de uma aplicação Spring Boot na DigitalOcean ](https://www.treinaweb.com.br/blog/deploy-de-uma-aplicacao-spring-boot-na-digitalocean) Aprenda nesse artigo como realizar o Deploy de uma aplicação Spring Boot em uma VPS da DigitalOcena, usando ferramentas como o Nginx. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Configurando ambiente de desenvolvimento Spring Boot no MacOS ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos) Aprenda como instalar e configurar o ambiente de desenvolvimento Spring Boot no MacOS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/configurando-ambiente-de-desenvolvimento-spring-boot-no-linux-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Configurando ambiente de desenvolvimento Spring Boot no Linux ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-spring-boot-no-linux) Aprenda como instalar e configurar o ambiente de desenvolvimento Spring Boot no Linux Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **02h 44min 23s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58