10 de novembro de 20233 min de leitura

Como passar um objeto para a view

No artigo anterior, você aprendeu a enviar dados simples, como uma String, para uma view usando Thymeleaf. Mas e se quisermos enviar um objeto completo, como um produto com nome, descrição e preço? Vamos explorar como fazer isso de forma prática e entender os conceitos por trás do processo.

Criando a Classe do Objeto

Primeiro, precisamos definir a estrutura do objeto que será passado para a view. Vamos criar uma classe Product com atributos básicos e métodos getters e setters:

public class Product {
    private String name;
    private String description;
    private double price;

    public Product() {} // Construtor vazio (obrigatório para o Spring)

    // Construtor com parâmetros
    public Product(String name, String description, double price) {
        this.name = name;
        this.description = description;
        this.price = price;
    }

    // Getters e Setters (métodos de acesso)
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }

    public String getDescription() { return description; }
    public void setDescription(String description) { this.description = description; }

    public double getPrice() { return price; }
    public void setPrice(double price) { this.price = price; }
}

Essa classe representa um produto e será usada para armazenar e transportar dados entre o controller e a view.

Criando o Controller

Agora, vamos criar um ProductController responsável por preparar o objeto e enviá-lo para a view. O Spring Boot usa a interface Model para adicionar atributos que serão acessíveis no template Thymeleaf:

@Controller
public class ProductController {

    @RequestMapping("/products")
    public String index(Model model) {
        Product product = new Product("Notebook", "Notebook Dell", 3500.00); // Criando um produto de exemplo

        model.addAttribute("product", product); // Adicionando o objeto ao Model

        return "product.html"; // Retornando o nome da view (arquivo HTML)
    }
}

Aqui, o método index cria um objeto Product, adiciona-o ao Model usando model.addAttribute("product", product), e retorna a view product.html - que deve estar dentro da pasta templates

Criando a View com Thymeleaf

A view é o arquivo HTML que exibirá os dados do objeto. Usando Thymeleaf, podemos acessar os atributos do objeto com a sintaxe ${objeto.atributo}. Veja como ficaria:

<!--Omitimos aqui o HTML completo-->
<h1>Produto:</h1>
<p th:text="${product.name}">Nome do produto</p>
<p th:text="${product.description}">Descrição do produto</p>
<p th:text="${product.price}">Preço do produto</p>

Cada th:text substitui o conteúdo estático do HTML pelo valor correspondente do objeto product. Por exemplo, ${product.name} chama o método getName() do objeto, a diretiva ${product.description} chama o método getDescription().

Além da sintaxe tradicional com th:text, o Thymeleaf oferece uma alternativa mais direta para exibir valores no HTML: a sintaxe de inlining [[${objeto.atributo}]]. Essa abordagem permite inserir valores diretamente no conteúdo do elemento, sem a necessidade do atributo th:text. Veja como ficaria:

<body>
    <h1>Produto:</h1>
    <p>[[${product.name}]]</p>
    <p>[[${product.description}]]</p>
    <p>[[${product.price}]]</p>
</body>

Quando usar cada uma?

• Use th:text quando quiser substituir totalmente o conteúdo de um elemento.
• Prefira [[${}]] para inserir valores em meio a textos estáticos ou em atributos HTML. Por exemplo:

  <p>Preço: <span>[[${product.price}]]</span> à vista.</p>

Ambas as formas funcionam, mas a escolha depende do contexto e da legibilidade que você deseja para o seu template.

O que está acontecendo debaixo do capô?

Quando você acessa a URL /products, o Spring Boot executa os seguintes passos:

1. O método index do ProductController é chamado.
2. Um objeto Product é instanciado e adicionado ao Model.
3. O Spring Boot renderiza o template product.html e substitui as expressões Thymeleaf pelos valores do objeto.
4. O HTML final é enviado ao navegador, exibindo os dados dinâmicos.

Se você cometer um erro de digitação no nome do atributo (por exemplo, escrever ${prodcut.description} em vez de ${product.description}), o Thymeleaf ignorará a expressão e manterá o texto estático padrão, mas não lançará um erro. Por isso, atenção aos detalhes!

Após criar a view product.html na pasta resources/templates, reinicie o servidor e acesse http://localhost:8080/products. Você verá os dados do produto exibidos corretamente, graças à integração entre o Spring Boot e o Thymeleaf.