Aprenda na prática construindo um projeto real — por pouco tempo! Garanta agora
Java: Construindo Sua Primeira Página com Thymeleaf
Thymeleaf é um motor de template Java popular, amplamente utilizado para criar páginas web dinâmicas em aplicações Spring Boot. Neste artigo, vamos guiá-lo passo a passo para construir sua primeira página com Thymeleaf.
Se você ainda não conhece o Spring Boot recomendo a leitura do: Java: Entendendo Maven, Spring Framework e Spring Initializr
Pré-requisitos
Antes de começarmos, certifique-se de ter o seguinte instalado em sua máquina:
- Java JDK 8 ou superior
- Maven
- IDE de sua escolha (como IntelliJ IDEA, Eclipse e VSCode)
Passo 1: Configurando o Projeto Spring Boot
Criar um Projeto Spring Boot
Primeiro, crie um novo projeto Spring Boot. Você pode fazer isso usando o Spring Initializr (https://start.spring.io/) ou diretamente na sua IDE. Certifique-se de incluir as dependências
Spring Web e Thymeleaf.<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
Passo 2: Criando o Controller
Em seguida, crie um controlador para lidar com as requisições e enviar dados para a visualização Thymeleaf.
package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HomeController { @GetMapping("/home") public String home(Model model) { model.addAttribute("message", "Bem-vindo ao Thymeleaf!"); return "home"; } }
Passo 3: Criando o Template Thymeleaf
Agora, vamos criar o template Thymeleaf. No diretório
src/main/resources/templates, crie um arquivo chamado home.html.<!DOCTYPE html> <html xmlns:th="<http://www.thymeleaf.org>"> <head> <title>Thymeleaf Example</title> </head> <body> <h1 th:text="${message}">Mensagem aqui</h1> </body> </html>
Neste exemplo, estamos utilizando a expressão
${message} para exibir a mensagem passada pelo controlador.Passo 4: Configurando o Arquivo application.properties
Não precisamos de nenhuma configuração especial para o Thymeleaf, pois o Spring Boot configura automaticamente o diretório de templates e outras propriedades necessárias. No entanto, você pode adicionar algumas configurações opcionais no
application.properties para customizar o comportamento do Thymeleaf:spring.thymeleaf.cache=false spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.suffix=.html
Passo 5: Executando a Aplicação
Agora, execute sua aplicação Spring Boot. Você pode fazer isso diretamente da sua IDE ou usando o Maven:
mvn spring-boot:run
Abra seu navegador e navegue até
http://localhost:8080/home. Você deverá ver a mensagem "Bem-vindo ao Thymeleaf!".Passo 6: Adicionando Estilos e Fragmentos
Para tornar nossa página mais estilosa e modular, vamos adicionar um pouco de CSS e usar fragmentos de template.
Criar um Arquivo CSS
Crie um diretório
static dentro de src/main/resources e adicione um arquivo CSS chamado styles.css.body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; }
Incluir o CSS no Template
No arquivo
home.html, inclua o CSS:<!DOCTYPE html> <html xmlns:th="<http://www.thymeleaf.org>"> <head> <title>Thymeleaf Example</title> <link rel="stylesheet" th:href="@{/styles.css}"> </head> <body> <h1 th:text="${message}">Mensagem aqui</h1> </body> </html>
Criar Fragmentos de Template
Para reutilizar partes do HTML, crie um diretório
fragments dentro de templates e adicione um arquivo header.html.<!-- src/main/resources/templates/fragments/header.html --> <header> <h1>Meu Site</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">Sobre</a></li> </ul> </nav> </header>
Inclua o fragmento no template principal:
<!DOCTYPE html> <html xmlns:th="<http://www.thymeleaf.org>"> <head> <title>Thymeleaf Example</title> <link rel="stylesheet" th:href="@{/styles.css}"> </head> <body> <th:block th:replace="fragments/header :: header"></th:block> <h1 th:text="${message}">Mensagem aqui</h1> </body> </html>
Parabéns! Você construiu sua primeira página com Thymeleaf. Exploramos desde a configuração inicial do projeto Spring Boot, criação de controladores e templates, até a inclusão de estilos CSS e fragmentos de template. O Thymeleaf oferece muitas outras funcionalidades avançadas que você pode explorar, como manipulação de formulários, internacionalização e muito mais.
Para aprofundar seus conhecimentos, consulte a documentação oficial do Thymeleaf e continue experimentando em seus projetos.
