Enviando dados para a Visão

Até então mandamos um arquivo HTML como resposta para o cliente que fez a requisição. Porém esse HTML é um arquivo fixo, ou seja, sempre que o cliente acessar a rota /home o mesmo arquivo HTML será retornado.

Mas e se quisermos manipular o HTML antes de enviar a resposta? Por exemplo, se quisermos retornar um HTML com o nome do usuário logado, ou com o nome de um produto que o usuário pesquisou, ou com uma lista de produtos que o usuário comprou, etc.

Para isso, precisamos enviar dados para a visão. No Spring Boot, precisaremos adicionar um novo parâmetro ao método a ser chamado. Esse parâmetro será do tipo Model, que é uma classe do Spring Boot que representa o modelo de dados a ser enviado para a visão.

Imagine o Model como sendo a cola entre o controlador e a visão. Esse modelo é o container que guarda os dados a serem usados na visão. Qualquer método dentro do controller pode acessar o Model.

1
import org.springframework.ui.Model;
2


3
@GetMapping("/home")
4
@ResponseBody
5
public String home(Model model) {
6
    model.addAttribute("message", "Ola Mundo");
7
    return "home.html";
8
}

Agora, para enviar dados para a visão, basta adicionar um atributo ao Model. O método addAttribute() recebe dois parâmetros, o primeiro é o nome do atributo e o segundo é o valor do atributo.

Até aqui estamos armazenando os dados que gostariamos de exibir na visão nessa classe Model. Porém, como acessar esses dados na visão?

Thymeleaf

Para isso, precisamos de mais uma peça do quebra-cabeça, o Thymeleaf. O Thymeleaf é um motor de templates que permite que o desenvolvedor crie páginas HTML dinâmicas.

Para utilizar o Thymeleaf, precisamos adicionar a dependência no arquivo pom.xml:

1
<dependency>
2
    <groupId>org.springframework.boot</groupId>
3
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
4
    <version>2.3.3.RELEASE</version>
5
</dependency>

A versão do Thymeleaf deve ser a mesma versão do Spring Boot.

Após adicionar a dependência ao seu projeto o VSCode deve tentar baixar e sincronizar a dependência automaticamente. Caso isso não aconteça, você pode executar o comando manualmente através do terminal:

Terminal window
1
mvn clean install

Feita a instalação suba novamente o servidor e acesse a rota /home no navegador. Você deve perceber que ela não está mais funcionando. Isso porque ao adicionar o Thymeleaf ao projeto o Spring Boot passa a procurar os arquivos HTML na pasta src/main/resources/templates e não mais na pasta src/main/resources/static. Mova o arquivo para a respectiva pasta e tente novamente. Dessa vez você deve ver o arquivo HTML sendo retornado como resposta.

Você pode omitir .html ao retornar o nome do arquivo. Por exemplo, return "home"; é o mesmo que return "home.html";

Agora que o Thymeleaf está configurado podemos acessar os dados guardados na classe especial Model que definimos no método do controlador.

O Thymeleaf usa um conceito chamado Variable Expression para acessar os dados do Model. 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}.

As expressões de variáveis devem ser acompanhadas de um dialeto definido pelo Thymeleaf. Esse dialeto adiciona atributos as tags HTML para que o Thymeleaf possa interpretar as expressões variáveis.

Vamos começar adicionando o dialeto mais simples, para exibir algum texto. Para isso vamos usar o dialeto th:text. Combinando o dialeto th:text com a expressão variável ${nome} temos o seguinte código (o resto do código foi omitido para focarmos na parte importante):

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

Agora, ao acessar a rota /home no navegador, você deve ver a mensagem “Ola Mundo” - definida na classe Java do controlador - aparecer na tela.

Exercícios

Para realizar os exercícos abaixo crie um novo projeto chamado controlador-para-visao usando o start.spring.io. Adicione a dependência do motor de template thymeleaf. Crie um controlador chamado EnviandoStringController.java e nele:

  1. Crie uma nova rota que envia um dado para a visão e renderiza (mostra) no documento HTML. Para isso:
  1. Crie uma nova rota que envia três valores para a visão e renderiza (mostra) no documento HTML. Para isso:

Para os exercícios a seguir crie um novo controller chamado EnviandoObjetoController.java.

  1. Crie uma nova rota que envia um objeto a visão e renderiza os valores do objeto no documento HTML. Para isso:
  1. Crie uma nova rota que envia um objeto a visão e renderiza os valores do objeto no documento HTML. Para isso: