Template engine

Prof. Me. Danilo Bueno

Abordagem inicial

HTML misturando com código JAVA

@GetMapping("/segundos")
@ResponseBody
public String mostrarSegundos() {
    return "<h1>Segundos:</h1>" + 
           "<p>" + LocalTime.now().getSecond() + "</p>";
}

Problemas:

• HTML inline: Construção manual da string HTML
• Sem separação de conceitos: Lógica Java misturada com apresentação
• Limitações: Dificuldade de manutenção, sem reutilização de templates

Abordagem profissional

HTML e JAVA separados!

Passo 1: Controller com Model

import org.springframework.ui.Model;

@GetMapping("/segundos")
public String mostrarSegundos(Model model) {
    model.addAttribute("segundos", LocalTime.now().getSecond());
    return "tempo"; // Nome do template Thymeleaf
}

Passo 2: Arquivo HTML (src/main/resources/templates/tempo.html)

  <!-- o resto do HTML está sendo omitido !-->
  <h1>Segundos:</h1>
  <p th:text="${segundos}">00</p> <!-- Placeholder estático -->

O que é o Model?

• Container de dados: Uma “caixa de transporte” entre Controller e View
• Origem: org.springframework.ui.Model (já vem no Spring Boot!)
• Funcionalidade: Leva dados processados no Java para o HTML

public String mostrarSegundos(Model model) {

O método addAttribute

model.addAttribute("chave", valor);

1. Recebe um nome (String) → Identificador único
2. Recebe um valor (qualquer tipo!) → Dado a ser enviado
3. Armazena na “caixa” Model

layout: fact

Como acessar os dados na visão?

layout: image-right image: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRNmOXzM9OW69iXtuPO0fKQrEYxPGOyU5fxh0bg1j8ViZJW1e9TmgD_icpJ-qIvD-3Bxiva4FOLv2wi8z56yRdQSf4LZfHj8mtN1BPtZCD9RlluYPsMT23CcBlgNKGZiGpzvPmCU3LsA/s1600/thymeleaf.png backgroundSize: contain

Thymeleaf

• um mecanismo de templates para aplicações Web em Java de código aberto
• um software que une objetos JAVA em um documento HTML
• permite a reutilização dos documentos HTML
• possui integração com Spring Framework
• permite a utilização de estruturas de lógica de programação
• https://www.thymeleaf.org/index.html

layout: image image: ./images/itpweb2.template-engine.png backgroundSize: contain title: exemplo template engine

Configuração

1. Adicione no pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. Estrutura de Pastas

src/
└── main/
    └── resources/
        ├── static/      # CSS/JS estáticos
        └── templates/   # Arquivos .html

Variable Expressions

• Para acessar os dados do objeto Model o Thymeleaf utiliza de um conceito chamado expressões variáveis
• A sintaxe das expressões variáveis são compostas de 3 pedaços: sinal de cifrão ($), chaves ({}) e o nome do atributo do Model
• Por exemplo, para acessar o atributo nome do Model, basta escrever ${nome}.
• Para funcionar no HTML, essa expressões devem vir acompanhadas de um dialeto definido pelo Thymeleaf

Dialetos do thymeleaf

• Esse dialeto são atributos que o Thymeleaf entende
• Os atributos são incorporados em tags HTML
• Esses atributos começam com o prefixo th
• O atributo mais simples é o th:text para exibir algum texto dentro da tag
• Exemplo:

<h1 th:text="${nome}"></h1>

Existe a opção de utilizar expressões em linha:

<h1>[[${nome}]]</h1>

Juntando os pedaços

Usando Model + Thymeleaf

Passo 1: Controller com Model

@GetMapping("/segundos")
public String mostrarSegundos(Model model) {
    model.addAttribute("segundos", LocalTime.now().getSecond());
    return "tempo"; // Nome do template Thymeleaf
}

Passo 2: Arquivo HTML (src/main/resources/templates/tempo.html)

  <!-- o resto do HTML está sendo omitido !-->
  <h1>Segundos:</h1>
  <p th:text="${segundos}">00</p> <!-- Placeholder estático -->

Diferenças

Fluxo de Dados

1. Requisição chega no Controller
   GET /segundos → mostrarSegundos()

2. Controller popula o Model
   model.addAttribute("segundos", valor)

3. Spring identifica o template
   return "tempo" → busca templates/tempo.html

4. Thymeleaf processa o template
   Substitui ${segundos} pelo valor do Model

5. HTML final é gerado

   <h1>Segundos:</h1>
   <p>35</p> <!-- Valor dinâmico -->

Links importantes

• Criando novas rotas
• Enviando dados para a Visão

layout: center class: text-center

Obrigado!

[email protected] · website/docs · github