O que é o Thymeleaf e como pode ser utilizado nas suas aplicações Spring Boot?
Thymeleaf é um motor de modelos Java. Desenvolve modelos para aplicações web e autónomas. Este motor de templates utiliza o conceito de Natural Templates para injetar lógica no seu layout, sem comprometer o seu design. Com o Thymeleaf, terá controlo sobre a forma como uma aplicação processará os modelos que criar.
O Thymeleaf suporta o processamento de vários formatos de modelos, incluindo HTML, XML, Texto, JavaScript, CSS e RAW. Entre estes, o HTML é o formato de modelo mais comummente utilizado na estrutura do Thymeleaf.
Inicializando o Thymeleaf em seu aplicativo
Como alternativa, é possível incorporar o Thymeleaf em seu projeto Spring Boot, optando por sua inclusão durante a geração de código boilerplate por meio da ferramenta initializr do Spring ou, então, incluindo-o posteriormente no arquivo de especificações de compilação sob o título dependências.
No caso de ter optado por uma opção de projeto Gradle, o ficheiro de configuração que especifica as dependências do projeto é referido como o ficheiro “build.gradle”. Por outro lado, se tiver escolhido o Maven como solução de gestão de dependências, o ficheiro de configuração correspondente terá o título “pom.xml”.
O ficheiro XML que especifica as dependências do seu projeto, referido como “pom.xml”, deve incluir uma secção específica que descreva essas dependências.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
De facto, é imperativo que o seu ficheiro build.gradle incorpore um segmento específico de dependências como se segue:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
O artigo acima mencionado apresenta uma aplicação ilustrativa que pode ser acedida através de um repositório específico do GitHub, que concede aos utilizadores permissão para a utilizar sem custos ao abrigo dos termos da licença permissiva MIT.
Integrar o Thymeleaf numa aplicação Spring garante a vantagem de utilizar a sua biblioteca fundamental, permitindo o emprego do Spring Standard Dialect for Thymeleaf. Este dialeto apresenta atributos e estilos de expressão distintos, facilitando a incorporação de várias capacidades na estrutura de conceção.
Usando o Thymeleaf no Spring Boot
Para utilizar o Thymeleaf em um aplicativo Spring, é necessário começar criando o documento de modelo. Neste exemplo específico, o formato escolhido para o modelo é um arquivo HTML. Recomenda-se que todos os modelos do Thymeleaf sejam criados dentro do diretório “templates” localizado nos arquivos de recursos do Spring Boot.
O ficheiro home.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Generic Website</title>
</head>
<body></body>
</html>
O modelo Thymeleaf fornecido apresenta uma marcação HTML convencional, incluindo um prefixo de espaço de nome estranho, xmlns:th , que serve de base para empregar qualquer um dos atributos anotados por th: no presente documento HTML. Todos os outros atributos e elementos do modelo Thymeleaf estão em conformidade com a sintaxe e as convenções HTML padrão.
Criar um cabeçalho
O cabeçalho desempenha um papel essencial na transmissão do objetivo de um sítio Web ou aplicação através do seu logótipo, ao mesmo tempo que facilita a navegação dos utilizadores. Os componentes essenciais de um cabeçalho básico incluem um logótipo e várias hiperligações de navegação que fornecem acesso fácil a várias secções do site ou da aplicação.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div id="nav">
<h1>LOGO</h1>
<ul>
<li> <a id="current">Home </a> </li>
<li> <a>About</a> </li>
<li> <a>Services</a> </li>
</ul>
</div>
</body>
</html>
O Thymeleaf oferece um meio conveniente para incorporar o cabeçalho especificado em qualquer página web da sua aplicação web, utilizando o atributo th:insert . Este atributo é compatível tanto com th:insert como com th:replace , que são aceites pelo Thymeleaf como ‘valores de expressão de fragmento’. Estas expressões de fragmento fornecem a capacidade de inserir porções de conteúdo estruturado em vários pontos ao longo da composição do seu layout.
<div th:insert="~{header :: #nav}"></div>
A incorporação da marcação acima mencionada na etiqueta de abertura no ficheiro home.html resultará no aparecimento do cabeçalho na página inicial. O fragmento de expressão tem vários constituintes, dos quais dois são electivos e os restantes dois são obrigatórios.
⭐Um til (~), que é opcional.
Um conjunto opcional de parêntesis curvos, denotado por {}
O modelo HTML acima mencionado, que engloba a marcação pretendida, é designado pela etiqueta “header.html”.
Para executar com êxito o código JavaScript fornecido, é necessário garantir que o ficheiro HTML contém um elemento com um atributo ID definido como “nav”. Isto pode ser conseguido adicionando a marcação apropriada dentro da etiqueta do documento HTML e atribuindo o valor de ID desejado em conformidade.
De facto, a utilização da marcação acima mencionada produzirá resultados idênticos aos obtidos através da abordagem alternativa detalhada anteriormente.
<div th:insert="header :: #nav"></div>
Preenchendo o corpo do modelo
O Thymeleaf suporta uma variedade de formatos de expressão em sua estrutura de modelo, abrangendo cinco categorias distintas, como segue:
⭐Expressão de fragmento (~{{€¦}})
⭐Expressão de mensagem (#{€¦})
⭐Expressão de URL de link (@{{€¦}})
⭐Expressão de variável (${{€¦})
⭐Expressão de variável de seleção (*{€¦¦})
A utilização de uma expressão de mensagem permite a incorporação de elementos textuais estranhos numa apresentação com facilidade. Ao utilizar esta abordagem, é possível substituir ou reutilizar sem problemas o conteúdo presente no seu design. É imperativo, quando se implementa uma expressão de mensagem, que os componentes textuais associados sejam armazenados num ficheiro situado sob o diretório resourcesfolder .
O exemplo fornecido utiliza um ficheiro de recursos específico chamado “messages.properties”, que inclui o excerto fornecido:
placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.
Tenha em consideração que a passagem extraída contém um identificador conhecido como “placeholder.text”. Esta designação é atribuída devido ao facto de cada componente de envio de mensagens poder ser constituído por várias comunicações. Por conseguinte, torna-se necessário incorporar um ponto de referência para integrar uma determinada mensagem na configuração.
<p th:text="#{placeholder.text}"></p>
A incorporação do fragmento de código fornecido no corpo do documento HTML garante que o conteúdo do marcador de posição aparece como um parágrafo coeso na interface do utilizador. Ao contrário da expressão de fragmento, todos os componentes da expressão de mensagem são obrigatórios e indispensáveis. A expressão de mensagem requer a inclusão de cada elemento especificado, sem quaisquer omissões ou substituições.
⭐Um sinal de número (#).
⭐Um par de chavetas ({}).
O conteúdo textual contido no elemento designado por “placeholder” é a mensagem que se pretende transmitir, à qual se pode aceder através do seu atributo ou propriedade associada, como “placeholder.text”.
Estilizar o seu modelo
O outro componente crucial do diretório “resources” diz respeito ao ficheiro estático, que serve de repositório para as folhas de estilo CSS e os elementos visuais essenciais ao funcionamento da sua aplicação Web. Para estabelecer uma ligação entre um ficheiro CSS alojado externamente e o modelo HTML do Thymeleaf, deve ser utilizada a expressão URL de ligação. Esta expressão versátil tem a capacidade de lidar com URLs relacionais e absolutos, proporcionando flexibilidade e facilidade na integração de componentes de design essenciais com a base do seu projeto.
<link rel="stylesheet" th:href="@{/css/style.css}" />
Incorporar o código fornecido no elemento do seu documento HTML permite estilizar utilizando um ficheiro separado style.css , que pode ser encontrado no diretório static/css dos ficheiros de recursos da aplicação de exemplo. É essencial garantir que o atributo th:href seja atribuído com uma expressão de URL apropriada ao criar uma ligação a este ficheiro CSS.
O Thymeleaf oferece uma variedade de atributos que permitem aos desenvolvedores refinar o design de suas páginas. Entre esses atributos está o atributo th:style , que permite a integração de elementos visuais no layout.
<div id="showcase" th:style="'background: url(/images/background.jpg) no-repeat center center fixed;'">
A marcação emprega o atributo th:style para imbuir uma imagem de fundo num segmento particular do layout. O Thymeleaf possui mais de cem atributos, que podem ser utilizados para conferir características estilísticas e funcionais ao layout.
A Expressão Variável
As expressões variáveis são um aspeto prevalente e intrincado da sintaxe do Thymeleaf, permitindo a recuperação de informação quer do contexto da aplicação quer de um objeto dentro dele para incorporação em modelos. Existem duas variedades de expressões variáveis disponíveis com base na natureza dos dados destinados a serem exibidos na visualização.
A utilização do sinal de dólar como parte de uma expressão variável permite extrair informações relativas às tarefas específicas que ocorrem no contexto de uma aplicação. Uma ilustração pertinente envolve a obtenção de detalhes relativos a um utilizador a partir de um determinado modal. Ao executar o projeto de amostra fornecido e navegar para http://localhost:8080/ num navegador Web, o indivíduo encontra uma interface modal.
Ao fechar a janela modal ou ao submeter um nome através dela, a aplicação será redireccionada para a sua página inicial. Ao chegar à referida página inicial, os utilizadores deparam-se com um sítio Web padrão que apresenta a saudação “Bem-vindo” e, subsequentemente, exibe o texto introduzido a partir do modal dentro da cadeia.
A aplicação acima mencionada emprega a utilização de expressões variáveis para atingir o seu objetivo. No documento modal.html, a estrutura básica é apresentada através da incorporação da marcação que se segue:
<form id="form" th:action="@{/home}" method="post">
<input type="text" name="userName"class="form-control" placeholder="Your Name" />
<button type="submit" class="btn">Submit</button>
</form>
Após a submissão de um formulário por um utilizador, é acionado o atributo th:action, cujo valor corresponde a um URL POST encontrado na classe WebController.
@PostMapping("/home")
public String processName(String userName, Model model) {
model.addAttribute("userName", userName);
return "home";
}
O método processName() recebe como entrada a cadeia de caracteres fornecida pelo utilizador através do modal e armazena-a numa variável denominada userName . Subsequentemente, utilizando a expressão de variável, o controlador insere a variável userName no layout.
<h1>Welcome <span th:text="${userName}"></span>!</h1>
A utilização da expressão de variável de seleção com asterisco torna-se cada vez mais valiosa à medida que a complexidade dos sistemas de software aumenta. Uma ilustração prática envolve mecanismos de autenticação em que a recolha de nomes de utilizador a partir de objectos de utilizador e a sua incorporação na conceção da interface exemplifica eficazmente esta funcionalidade.
Opções alternativas de modelo e estilo
Embora o Thymeleaf tenha ganhado destaque como a solução de modelo preferida para projetos do Spring Boot, é importante considerar opções alternativas que oferecem funcionalidade comparável. Entre essas alternativas estão JavaServer Pages (JSP), que fornece geração de código Java do lado do servidor; modelos Groovy, que permitem a criação de conteúdo dinâmico usando a linguagem de script Groovy; modelos FreeMarker, um mecanismo de modelo de código aberto com suporte para várias linguagens de programação; e modelos Mustache, conhecidos por sua simplicidade e facilidade de integração. Além disso, os programadores têm a flexibilidade de empregar estilos CSS personalizados ou utilizar estruturas CSS pré-existentes para conceber os layouts das suas páginas.