Hello World com Spring Boot e Thymeleaf

E aí, pessoal. Como estão? Hoje eu venho abordar um tema super interessante, uma forma de criar aplicações monolíticas com Java e Thymeleaf. Embora hoje seja comum vermos muito microserviços, aplicações segmentadas em front-end e back-end, ainda há muitos projetos que optam por desenvolver o famoso monolito, e com Java, certamente uma boa opção para esse tipo de desenvolvimento é Spring Boot e Thymeleaf. O sugerido para esse artigo é que se tenha conhecimento básico de Spring Boot, nesse artigo vamos focar em implementar e explicar o Thymeleaf porém também usaremos algumas funcionalidades do Spring Boot.

O que é o Thymeleaf

O Thymeleaf é um mecanismo de modelo Java XML/XHTML/HTML5 que pode funcionar em ambientes da Web e não Web. Ele é mais adequado para servir XHTML/HTML5 na camada de visualização de aplicativos da Web baseados em MVC, mas pode processar qualquer arquivo XML mesmo em ambientes offline.

Criando projeto Spring Boot

Agora criaremos o nosso projeto Spring Boot normal, porém adicionando a dependência do Thymeleaf. Para criar o projeto, podemos fazer dentro até mesmo da nossa IDE, ou iremos no site do Spring Initializr.

Segue os dados para criação do projeto via link Spring Initializr:

Com o conhecimento prévio em Spring Boot já irão entendendo exatamente o que tem nessa tela, e é assim que utilizaremos o projeto, apenas duas dependências, para mapearmos a nossa requisição a partir do controller e recebe-la usando o Spring Web.

O projeto virá normal e nós vamos fazer dois passos, criamos a nossa camada de controllers para receber a requisição, isso não é necessário, é questão de organização. E também criar a nossa classe para o “Hello World” dentro de controllers. Após isso, também iremos criar um arquivo HTML dentro de resources/templates, porque esse é o caminho que o Thymeleaf vai buscar os arquivos HTML referenciados.

Hello world estático

Para nós fazermos um “Hello World” básico e estático é super simples, relembrando a hierarquia de arquivos que iremos usar é a seguinte:

Começando em templates, iremos criar um arquivo hello.html e simplesmente adicionar um h1 com o Hello World desejado, pode ser de qualquer forma, nesse exemplo usei apenas isso dentro do arquivo: <h1>Hello World!</h1>

Até agora super simples, agora vamos fazer um método pra gente chamar esse nosso arquivo HTML.

Partindo para a camada de “controllers” onde vamos criar a classe Java “PrimeiroController” e então configurarmos ele. O código é o seguinte:

@Controller
public class PrimeiroController {

    @GetMapping("/hello-world")
    public String HelloWorld(){
        return "hello";
    }
}

O que estamos fazendo aqui é apenas receber uma requisição do tipo GET e essa requisição está mapeada para o endpoint /hello-world. No corpo desse método nós estamos retornando uma String, e essa String deve ser o nome do seu arquivo HTML criado, assim que o Thymeleaf vai identificar qual página HTML ele deve renderizar. Então return "nomeDoArquivoHTML"; é o necessário para que ele encontre o seu arquivo HTML, e não precisa fornecer a extensão, nesse caso seria “.html”.

No momento que seu projeto estiver com esses códigos basta rodar sua aplicação Spring Boot e acessar o localhost:8080/nome mapeado, se foi feito igual o que está aqui, será esse o link para acessar: http://localhost:8080/hello-world

Pronto, o seu Hello World com Thymeleaf e Spring Boot está pronto! Super simples, não é?

Bônus: Passando mensagem dinâmica para o HTML

Beleza, já fizemos o Hello World, agora vamos passar uma mensagem qualquer para que o Thymeleaf adicione no nosso HTML!

Primeiramente no nosso arquivo HTML, iremos adicionar o seguinte código:

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

Um simples h1 do HTML seguido de uma propriedade do Thymeleaf para mensagens, logo após a propriedade devemos passar um texto, então nesse momento estamos interpolando uma variável “mensagem” que irá conter uma mensagem.

Para fazermos essa mensagem ser renderizada conforme um parâmetro que iremos passar, vamos fazer o seguinte método no nosso controller:

@GetMapping("/dinamico/{msg}")
    public String dinamico(Model model, @PathVariable String msg){
        model.addAttribute("mensagem", msg);
        return "hello";
    }

Note que aqui estamos recebendo alguns parâmetros e também uma Model, essa Model é usada para enviarmos valores e objetos para o nosso HTML. Nosso método está recebendo por uma URL personalizada e por meio dessa URL também estamos recebendo uma “mensagem”, a mensagem armazenamos na variável “msg” para usarmos depois. Nesse momento nós chamamos nosso objeto Model pela instancia “model” e iremos adicionar um atribulo nele usando o método addAttribute, para usarmos o método primeiro iremos dizer o nome do atributo e depois o valor dele, nesse caso o nome vai ser “mensagem” ( esse será o nome do nosso atributo que iremos interpolar no HTML) e também iremos inserir o valor da variável “msg” que é o valor que recebemos por meio da URL, esse valor não precisa ser necessariamente o recebido pela url, porém, como nossa intenção é mudar esse valor durante a aplicação rodando, é dessa forma que vai funcionar, considere o método addAttribute

E não se esqueça o return “nomeDoHtml" deve estar correto e sem a extensão do arquivo, isso irá gerar erro caso não esteja correto!

Para acessar novamente, basta rodar a aplicação Spring Boot e acessar o endpoint mapeado corretamente. Por fim, se o mapeamento foi feito conforme esse artigo, a nossa URL vai ficar assim: http://localhost:8080/dinamico/ {Aqui vai estar quaisquer coisa que você deseja renderizar na tela}

Super interessante, não? Esse é só o começo do que o Thymeleaf pode fazer, ele realmente é capaz de muito mais!

Conclusão

Finalizando esse artigo espero que vocês tenham ideia do básico do Thymeleaf e que conheçam um pouco melhor também, é uma forma bem simples e prática de criar aplicações um pouco menores e que não possuem necessidade de ser segmentadas em front-end e back-end, o que é muito comum.

Realmente espero ter passado algum conhecimento para vocês e possam assim conhecer e talvez optarem por ver mais a fundo sobre o Thymeleaf e até mesmo criarem os próprios projetos!

Segue o link desse projeto no GitHub:https://github.com/geraldodf/hello-world-thymeleaf-cod3r