🚀 5.4 Layouts de Elite: Fragmentação e Reuso
Em aplicações de Engenharia Premium, evitamos a repetição de código a todo custo. O Thymeleaf oferece o recurso de Layouts Padrão, permitindo definir uma estrutura mestre (com navegação, rodapé e scripts) que é herdada por todas as outras páginas.
O Dialeto de Layout
Para uma experiência de elite, utilizamos o Thymeleaf Layout Dialect. Ele permite que definamos “buracos” no layout mestre que serão preenchidos pelas páginas filhas.
1. Criando o Layout Mestre (layout.html)
Localizado em src/main/resources/templates/layout.html, este arquivo define a casca do sistema.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<meta charset="UTF-8">
<title>Green Dog Delivery - Premium</title>
<!-- Assets via Starters & WebJars -->
<link th:href="@{/css/main.css}" rel="stylesheet">
</head>
<body>
<header class="navbar">
<a th:href="@{/}">
<img th:src="@{/img/logo.png}" alt="Logo">
</a>
<nav>
<a th:href="@{/clientes}">Clientes</a>
<a th:href="@{/pedidos}">Pedidos</a>
</nav>
</header>
<main class="container">
<!-- Onde o conteúdo dinâmico será injetado -->
<section layout:fragment="content">
<p>Conteúdo Padrão (Mockup)</p>
</section>
</main>
<footer class="footer">
<p>© 2026 Green Dog Delivery - Engenharia de Elite</p>
</footer>
</body>
</html>2. Decorando a Página Filha (index.html)
Para usar o layout, basta usar o atributo layout:decorate.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout}"> <!-- Refere-se ao templates/layout.html -->
<body>
<section layout:fragment="content">
<h1>🚀 Bem-vindo ao Sistema de Elite</h1>
<p>Dashboard operacional da Green Dog.</p>
</section>
</body>
</html>Adeus Compatibilidade Legada
IMPORTANT
Spring Boot 3.5+ nativo: Diferente de versões anteriores, o Spring Boot 3.5 já traz o Thymeleaf 3.x e o Layout Dialect compatível por padrão. Você não precisa mais sobrescrever versões de propriedades no seu
pom.xml. O ecossistema já está otimizado para a máxima performance e segurança.
Por Que Fragmentar?
- Manutenibilidade: Altere o rodapé uma vez e ele mudará em 100 páginas.
- Consistência Visual: Garante que todos os formulários e tabelas sigam o mesmo padrão de UX.
- Performance: O Spring Boot faz o cache dos fragmentos, acelerando a renderização.
No próximo capítulo, veremos como o Controller faz o papel de ponte entre esses arquivos e nossos dados reais.