Thymeleaf: dialeto de layout personalizado
1. Introdução
Thymeleaf é um mecanismo de template Java para processar e criar HTML, XML, JavaScript, CSS e texto simples. Para uma introdução de Thymeleaf e Spring, dê uma olhada emthis write-up.
Neste artigo, vamos nos concentrar em modelos - algo que sites razoavelmente complexos precisam fazer de uma maneira ou de outra. Simplificando, as páginas precisam compartilhar componentes comuns da página, como cabeçalho, rodapé, menu e potencialmente muito mais.
O Thymeleaf trata disso com dialetos customizados - você pode construir layouts usandoThymeleaf Standard Layout System ouLayout Dialect - que usa o padrão de decorador para trabalhar com os arquivos de layout.
Neste artigo, discutiremos alguns recursos deThymeleaf Layout Dialect - que podem ser encontrados emhere. Para ser mais específico, discutiremos seus recursos, como criar layouts, títulos personalizados ou mesclar elementos de cabeçalho.
2. Dependências do Maven
Primeiro, vamos ver a configuração necessária para integrar o Thymeleaf ao Spring. A bibliotecathymeleaf-spring é necessária em nossas dependências:
org.thymeleaf
thymeleaf
3.0.9.RELEASE
org.thymeleaf
thymeleaf-spring4
3.0.9.RELEASE
Observe que, para um projeto Spring 4, a bibliotecathymeleaf-spring4 deve ser usada em vez dethymeleaf-spring5. A versão mais recente das dependências pode ser encontradahere.
Também precisaremos de uma dependência para o dialeto de layouts personalizados:
nz.net.ultraq.thymeleaf
thymeleaf-layout-dialect
2.3.0
A versão mais recente pode ser encontrada emMaven Central Repository.
3. Configuração do dialeto do layout do Thymeleaf
Nesta seção, discutiremos como configurar o Thymeleaf para usarLayout Dialect. Se você quiser dar um passo para trás e ver como configurar o Thymeleaf 3.0 em seu projeto de aplicativo da web, verifique estetutorial.
Depois de adicionar a dependência Maven como parte de um projeto, precisaremos adicionarLayout Dialect ao nosso mecanismo de modelo Thymeleaf existente. Podemos fazer isso com a configuração Java:
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.addDialect(new LayoutDialect());Ou usando a configuração do arquivo XML:
Ao decorar as seções dos modelos de conteúdo e layout, o comportamento padrão é colocar todos os elementos de conteúdo após os de layout.
Às vezes, precisamos de uma fusão mais inteligente de elementos, permitindo agrupar elementos semelhantes (js scripts, folhas de estilo, etc.).
Para conseguir isso, precisamos adicionar uma estratégia de classificação à nossa configuração - no nosso caso, será a estratégia de agrupamento:
engine.addDialect(new LayoutDialect(new GroupingStrategy()));ou em XML:
A estratégia padrão é acrescentar elementos. Com o mencionado acima, teremos tudo classificado e agrupado.
Se nenhuma das estratégias atender às nossas necessidades, podemos implementar o próprioSortingStrategye passá-lo para o dialeto como acima.
4. Recursos de processadores de namespace e atributos
Depois de configurados, podemos começar a usar o namespacelayout e cinco novos processadores de atributos:decorate,title-pattern,insert,replace efragment.
Para criar o modelo de layout que queremos usar para nossos arquivos HTML, criamos o seguinte arquivo, denominadotemplate.html:
...
Como podemos ver, mudamos o namespace do padrãoxmlns:th=”http://www.thymeleaf.org” paraxmlns:layout=”http://www.ultraq.net.nz/thymeleaf/layout”.
Agora podemos começar a trabalhar com processadores de atributos em nossos arquivos HTML.
4.1. layout:fragment
Para criar seções personalizadas em nosso layout ou modelos reutilizáveis que podem ser substituídos por seções que compartilham o mesmo nome, usamos o atributofragment dentro de nosso corpotemplate.html:
New dialect example
Your page content goes here
Observe que há duas seções que serão substituídas pelo nosso HTML personalizado - conteúdo e rodapé.
Também é importante escrever o HTML padrão que será usado se algum dos fragmentos não for encontrado.
4.2. layout:decorate
O próximo passo que precisamos fazer é criar um arquivo HTML, que será decorado pelo nosso layout:
Layout Dialect Example
This is a custom content that you can provide
Como é mostrado na 3ª linha, usamoslayout:decoratee especificamos a fonte do decorador. Todos os fragmentos do arquivo de layout que correspondem aos fragmentos em um arquivo de conteúdo serão substituídos por sua implementação personalizada.
4.3. layout:title-pattern
Dado queLayout dialect substitui automaticamente o título do layout por aquele que é encontrado no modelo de conteúdo, você pode preservar partes do título encontrado no layout.
Por exemplo, podemos criar migalhas de pão ou manter o nome do site no título da página. O processadorlayout:title-pattern vem com uma ajuda nesse caso. Tudo que você precisa especificar no seu arquivo de layout é:
example Portanto, o resultado final para o arquivo de layout e conteúdo apresentado no parágrafo anterior terá a seguinte aparência:
example - Layout Dialect Example 4.4. layout:insert/layout:replace
O primeiro processador,layout:insert, é semelhante aoth:insert original do Thymeleaf, mas permite passar todos os fragmentos HTML para o modelo inserido. É muito útil se você tiver algum HTML que deseja reutilizar, mas cujo conteúdo é muito complexo para determinar ou construir apenas com variáveis de contexto.
O segundo,layout:replace, é semelhante ao primeiro, mas com o comportamento deth:replace, que na verdade vai substituir a tag do host pelo código do fragmento definido.
5. Conclusão
Neste artigo, descrevemos algumas maneiras de implementar layouts no Thymeleaf.
Observe que os exemplos usam o Thymeleaf versão 3.0; se você quiser saber como migrar seu projeto, siga esteprocedure.
A implementação completa deste tutorial pode ser encontrada emthe GitHub project.
How to test? Nossa sugestão é brincar primeiro com um navegador e, em seguida, verificar também os testes JUnit existentes.
Lembre-se de que você pode construir layouts usandoLayout Dialect mencionado acima ou pode facilmente criar sua própria solução. Felizmente, este artigo fornece mais informações sobre o tópico e você encontrará sua abordagem preferida, dependendo de suas necessidades.