Blog sobre tecnologia
Toggle navigation

Criando as primeiras telas

Agora que compreendemos minimamente a estrutura do projeto do Spring Framework e configuramos a conexão com o banco de dados, vamos iniciar o desenvolvimento de um cadastro simples de Paciente. Mas antes vamos entender o funcionamento de um framework que utiliza o padrão MVC (Model – View – Control). Para isso, vamos criar um novo pacote dentro da nossa aplicação, clique com o botão direito do mouse sobre o pacote java\br\univille\devspringboot -> New -> Folder. Crie uma pasta com o nome controller. Dentro desta pasta crie um novo arquivo com o nome HomeController.java

IMPORTANTE: todo o código fonte Java deverá ficar abaixo do pacote principal da aplicação que é br.univille.devspringboot, caso contrário esse código não será considerado pelo framework.

Agora vamos codificar nosso controlador, primeiro vamos colocar a anotação @Controller sobre a declaração da classe HomeController, importante realizar o import desta anotação. Utilize sempre o atalho Ctrl + . , para solucionar os imports pendentes. Crie um método público index() com retorno String e coloque sobre ele a anotação @RequestMapping(“/”) e @ResponseBody. Dentro do método retorne uma string qualquer.

package br.univille.devsprinboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HomeController {
    @GetMapping("/")
    @ResponseBody
    public String index(){
        return "Eu não acredito";
    }   
}

Antes de compreender o funcionamento das anotações vamos ver nosso código em execução. Para isso clique pressione F5 ou vá até o menu da esquerda SPRING BOOT DASHBOARD e clique no botão de play.

Ao inicializar o processo, você vai observar que o console do Eclipse irá apresentar o log de execução da aplicação, ele é uma ferramenta importante para entender o que esta acontecendo na aplicação. Importante observar que ele informa no log a porta 8080 onde a aplicação foi carregada.

Por fim basta abrir um navegador e digitar http://localhost:8080, para receber o retorno a seguir:

Para melhor compreender o funcionamento de uma aplicação que utiliza o padrão MVC, ilustramos o processo utilizando o diagrama de componentes da UML. Temos neste estilo arquitetural três componentes principais:

  • Cliente – representado pelo componente Navegador
  • Servidor
    • Representado pela aplicação Spring
    • e pelo servidor de banco de dados

MVC é uma sigla que significa Model – View – Control, portanto nossa aplicação será dividia dentro de pelo menos esses três componentes, cujo objetivos são:

  • Model – são classes que representam os dados que serão manipulados pela aplicação, por esse motivo estão diretamente ligados as regras de negócio da solução;
  • View – são classes ou arquivos HTML que tem por responsabilidade desenhar a interface gráfica que será apresentada ao usuário final como resultado de uma requisição;
  • Control – são classes responsáveis por todo o controle do funcionamento da aplicação.

Quando o usuário digita uma URL no navegador, essa requisição é transmitida pela rede/internet até alcançar o servidor, essa chamada é realizada pelo protocolo HTTP (Hyper Text Transfer Protocol). Quando a requisição chega ao servidor, ela é analisada e o mecanismo do Spring Framework identifica pela URL na requisição, qual controlador possui um RequestMapping que é similar ao solicitado. Então o Controlador é instanciado o método específico é executado. Neste método pode haver a necessidade de consulta de dados do banco de dados, para isso o controlador irá utilizar a camada de persistência através da API JPA e do provedor de persistência Hibernate, que fará a conexão com o banco de dados, a execução de consultas SQL no banco, a recepção dos dados retornados que serão mapeados para objetos de modelo, também conhecidos como entidades. Esses objetos model, serão retornado para o controlador que por sua vez irá utilizá-los para preencher as view que são os componentes responsáveis por criar as interfaces de visualização dos dados. E por fim a view será retornada automaticamente para o navegador cliente como resposta da requisição enviada.

Primeira interface

Agora que já entendemos como funcionam os controladores, e como testar o seu resultado, vamos criar nossa primeira interface gráfica. Para isso vamos inicialmente utilizar a biblioteca Thymeleaf (https://www.thymeleaf.org), que se trata de uma engine para controlar templates do lado servidor. Lembre-se que quando criamos nosso projeto Spring, incluímos o Thymeleaf como uma das dependências. O Thymeleaf, inclui ao HTML algumas tags XML que simplificam o desenvolvimento da aplicação.

Nosso objetivo agora é construir uma tela que liste dados de pacientes. Como primeiro passo precisamos configurar o Thymeleaf, incluindo no final do arquivo application.properties as seguintes linhas:

  • spring.thymeleaf.check-template-location força o Spring a verificar a existência da pasta contendo os arquivos de layout;
  • spring.thymeleaf.prefix – indica o caminho base do template;
  • spring.thymeleaf.suffix – indica a extensão dos arquivos que serão considerados como templates.
#MANTENHA O QUE JÁ HAVIA NO ARQUIVO
spring.thymeleaf.check-template-location=true
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

Para melhor organizar nosso código, vamos criar um conjunto de pastas para separar cada interface HTML para seu respectivo controlador. Então dentro da pasta src/main/resources/templates, clique com o botão direito do mouse new ->Folder e crie uma pasta chamada paciente. Dentro da pasta paciente crie um arquivo chamado index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>Home</h1>
    </body>
</html>

IMPORTANTE: todas as páginas que utilizam o gerenciador de template Thymeleaft devem ter o namespace th carregados no tag HTML.

Para que o HTML possa ser renderizado e retornado ao cliente, devemos fazer uma alteração no código do controlador para que ele carregue o template HTML e devolva para o cliente. Primeiro incluímos uma nova anotação o @RequestMapping para informar ao gerenciador de rotas do Spring Boot que a classe HomeController irá responder a todas as requisições para o endereço “/”. Em seguida anotamos o método index com a anotação que mapeia as requisições do tipo GET para este método, o tipo do retorno do método foi modificado para ModelAndView para que ele possa fazer a junção do template HTML com os dados do pacote model. Por fim o método cria uma instância da classe ModelAndView passando para o construtor o caminho relativo do template HTML que deve ser retornado.

package br.univille.devsprinboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;


@Controller
@RequestMapping("/")
public class HomeController {
    
    @GetMapping
    public ModelAndView index(){
        return new ModelAndView("paciente/index");
    }   
}

Ao acessar novamente a URL da aplicação voce vai observar que o template HTML foi retornado para o navegador do cliente.

Agora para que o template possa receber informações do controlador precisamos alterar o código do controlador para que ele envie juntamente com o template a ou as variáveis contendo os dados que queremos incluir na interface.

package br.univille.devsprinboot.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;


@Controller
@RequestMapping("/")
public class HomeController {
    
    @GetMapping
    public ModelAndView index(){
        var mensagem = "Bem-vindo";
        return new ModelAndView("paciente/index","msg",mensagem);
    }   
}

Em seguida alteramos o template HTML para incluir uma nova TAG e utilizamos o atributo customizado th:text (da biblioteca de TAGs do Thymeleaf) para incluir a variável msg na tela.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>Home</h1>
        <h3 th:text="${msg}"></h3>
    </body>
</html>