Aprenda como integrar esse mecanismo de modelo em seus aplicativos Spring.

Thymeleaf é um mecanismo de modelo Java. Ele desenvolve modelos para aplicativos web e autônomos. Este mecanismo de template usa o conceito Natural Templates para injetar lógica em seu layout, sem comprometer seu design. Com o Thymeleaf, você terá controle sobre como um aplicativo processará os modelos que você criar.

Você pode usar o Thymeleaf para processar seis tipos de modelos: HTML, XML, Texto, JavaScript, CSS e RAW. Thymeleaf refere-se a cada um dos modelos como um modo de modelo, sendo HTML o modelo mais popular criado neste mecanismo.

Inicializando o Thymeleaf em seu aplicativo

Existem duas maneiras de adicionar o Thymeleaf ao seu aplicativo Spring Boot. Você pode selecionar Thymeleaf como uma dependência ao gerar seu padrão com Ferramenta inicializadora do Spring. Você também tem a opção de adicioná-lo posteriormente ao arquivo de especificação de construção na seção de dependências.

Se você selecionou uma das opções de projeto Gradle, o arquivo que contém as dependências é o

construir.gradle arquivo. No entanto, se você escolheu Maven, esse arquivo será pom.xml.

Seu pom.xml arquivo deve conter a seguinte seção de dependência:

<dependency>
<groupId>org.springframework.bootgroupId>


<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

Enquanto seu construir.gradle arquivo deve conter a seguinte seção de dependência:

dependencies {
 implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}

O aplicativo de exemplo usado no artigo está disponível neste Repositório GitHub e é gratuito para você usar sob a licença do MIT.

Ao adicionar o Thymeleaf ao seu aplicativo Spring, você obterá acesso à sua biblioteca principal, que permite usar o Spring Standard Dialect do Thymeleaf. O Spring Standard Dialect contém atributos e sintaxe exclusivos que você pode usar para adicionar diferentes recursos aos seus layouts.

Usando Thymeleaf no Spring Boot

Ao usar o Thymeleaf em seu aplicativo Spring, a primeira etapa é criar seu documento modelo. Para este aplicativo de amostra, o documento modelo é HTML. Você deve sempre criar seus modelos Thymeleaf no Spring Boot's modelos pasta, que está disponível no arquivo de recursos.

O arquivo home.html

html>
<htmlxmlns: th="http://www.thymeleaf.org">


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

O modelo Thymeleaf acima é um modelo HTML5 geral, com um atributo estrangeiro (xmlns: th). O propósito do xmlns: th atributo é fornecer o escopo para todos os º:* atributos que você usará neste documento HTML. Os outros atributos e tags em um modelo Thymeleaf são tradicionais Tags e atributos HTML.

Criando um cabeçalho

Um dos primeiros e mais importantes aspectos de qualquer site ou aplicativo é o cabeçalho. Ele informa do que se trata o aplicativo (por meio do logotipo) e ajuda você a navegar facilmente pelo seu aplicativo. Um cabeçalho básico deve conter um logotipo, além de vários links de navegação.

html>
<htmlxmlns: th="http://www.thymeleaf.org">


 <body>


<divid="nav">


<h1>LOGOh1>


<ul>


<li><aid="current">Home a>li>


<li><a>Abouta>li>


<li><a>Servicesa>li>


ul>


div>


 body>


html>

Thymeleaf permite que você adicione o cabeçalho acima a qualquer página do seu aplicativo da web usando o º: inserir atributo. O º: inserir e º: substituir atributos aceitam o que Thymeleaf chama de valores de expressão de fragmento. As expressões de fragmento permitem colocar fragmentos de marcação em qualquer local do layout.

<divth: insert="~{header:: #nav}">div>

Inserindo a marcação acima na parte superior do página inicial.html tag irá inserir a marcação do cabeçalho na parte superior da sua página inicial. Uma expressão de fragmento possui vários componentes, dois são opcionais e dois são obrigatórios:

  • Um til (~), que é opcional.
  • Um par de chaves ({}), que é opcional.
  • O nome do modelo que contém a marcação que você deseja inserir (cabeçalho.html).
  • O seletor CSS da marcação que você deseja inserir (#nav).

Portanto, a marcação a seguir produz o mesmo resultado acima.

"header:: #nav">

Preenchendo o corpo do seu modelo

Thymeleaf permite que você use cinco tipos de expressões em seus modelos:

  • Expressão de fragmento (~{…})
  • Expressão de mensagem (#{…})
  • Expressão do URL do link (@{…})
  • Expressão variável (${…})
  • Expressão de variável de seleção (*{…})

Uma expressão de mensagem permite adicionar fragmentos de texto externalizados ao seu layout. Com expressões de mensagem, você pode substituir ou reutilizar facilmente o texto em seu layout. Ao usar uma expressão de mensagem, você deve sempre colocar os fragmentos de texto externos em um .propriedades arquivo sob o recursos pasta.

Para este aplicativo de exemplo, esse arquivo é mensagens.properties, que contém o seguinte fragmento de texto:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

Você deve observar que o fragmento de texto (ou mensagem) acima possui uma chave exclusiva (espaço reservado.texto). Isso ocorre porque cada arquivo de mensagem pode conter uma coleção de mensagens diferentes. Portanto, você precisará de uma chave para inserir uma mensagem específica em seu layout.

<pth: text="#{placeholder.text}">p>

Inserir a marcação acima no corpo do seu arquivo HTML exibirá efetivamente o texto do espaço reservado como um parágrafo na sua visualização. Ao contrário da expressão de fragmento, todos os aspectos da expressão da mensagem são obrigatórios. Uma expressão de mensagem requer:

  • Um sinal numérico (#).
  • Um par de chaves ({}).
  • A chave que contém a mensagem que você deseja inserir (espaço reservado.texto).

Estilizando seu modelo

Outro arquivo importante no recursos pasta é o arquivo estático. Este arquivo armazena seus arquivos CSS e quaisquer imagens que você planeja usar em seu aplicativo. Para vincular seu arquivo CSS externo ao modelo HTML Thymeleaf, você precisará usar a expressão link URL. Os processos de expressão de URL do link URLs relativos e absolutos.

<linkrel="stylesheet"th: href="@{/css/style.css}" />

Inserindo a marcação acima no do seu arquivo HTML permitirá que você estilize seu modelo usando um estilo.css arquivo. Este arquivo está disponível em um css pasta sob o estático seção do recursos arquivo do aplicativo de amostra. Você deve sempre atribuir a expressão do URL do link ao º: href atributo.

Thymeleaf fornece vários outros atributos que você pode usar para aprimorar o design do seu layout. Um desses atributos é o º: estilo atributo, que você pode usar para adicionar imagens ao seu layout.

<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

A marcação acima usa o º: estilo atributo para adicionar uma imagem de fundo a uma seção específica do seu layout. Thymeleaf tem mais de cem atributos diferentes que você pode usar para adicionar estilo e funcionalidade aos seus layouts.

A expressão variável

As expressões variáveis ​​são as expressões mais populares e possivelmente as mais complexas que o Thymeleaf usa. As expressões variáveis ​​do Thymeleaf permitem coletar dados do contexto do aplicativo ou de um objeto no aplicativo e injetar esses dados no modelo. Dependendo da origem dos dados que você deseja renderizar em sua visualização, há dois tipos de expressões variáveis ​​que você pode usar.

A expressão da variável primária usa o cifrão e permite coletar dados do contexto do aplicativo (que são dados associados às diferentes tarefas que estão em execução no aplicativo). Por exemplo, se você deseja capturar os dados de um usuário de um modal, a expressão variável do cifrão é a escolha mais prática. Se você executar o projeto de amostra e navegar até http://localhost: 8080/ no seu navegador, você verá o seguinte modal:

Depois de fechar o modal ou enviar um nome, o aplicativo navegará para a página inicial. Na página inicial, você verá um site genérico que exibe a palavra “Bem-vindo”, seguida da string que você acabou de enviar no modal.

O aplicativo de amostra usa a expressão variável para concluir esse processo. A forma simples no modal.html arquivo tem a seguinte marcação:

<formid="form"th: action="@{/home}"method="post">
<inputtype="text"name="userName"class="form-control"placeholder="Your Name" />


<buttontype="submit"class="btn">Submitbutton>


form>

Quando um usuário envia o formulário, ele aciona o º: ação atributo que tem o valor de uma URL de postagem, que você pode encontrar no WebController aula.

@PostMapping("/home")
public String processName(String userName, Model model){


 model.addAttribute("userName", userName);


return"home";
 }

O nome do processo() O método aceita a string que o usuário fornece ao modal e, em seguida, atribui essa string a uma variável chamada nome de usuário. Usando a expressão variável, o controlador injeta a variável username no layout.

<h1>Welcome <spanth: text="${userName}">span>!h1>

A expressão da variável de seleção usa um asterisco e é mais útil quando você lida com aplicativos mais complexos. Por exemplo, um aplicativo que exige que os usuários façam login pode usar a expressão da variável de seleção. Você pode coletar o nome de usuário do objeto de usuário e inseri-lo no layout.

Opções alternativas de modelo e estilo

Embora Thymeleaf seja a opção de modelo mais popular para aplicativos Spring Boot, existem várias outras opções igualmente viáveis. Isso inclui JavaServer Pages (JSP), modelos baseados em Groovy, modelos FreeMarker e modelos Moustache. Além de criar um estilo CSS personalizado, você também pode optar por usar uma estrutura CSS para estilizar seu layout.