Découvrir Thymeleaf

Le panorama des solutions en Javascript est large, et parfois,  certaines apportent des éléments vraiment intéressant, et qui facilite pas mal les choses, c’est le cas de Thymeleaf, qui est un moteur de template HTML, XML et Javascript, écrit en Java, et qui apporte le concept de templates naturels en utilisant des attributs HTML spécifiques et non intrusif.Ce framework apporte une meilleure séparation des responsabilités entre l’affichage et le contenu. Les développeurs et les web designers peuvent ainsi travailler sur le même partie du code, avec un impact modéré sur le travail de l’autre.

Ci dessous quelques exemples d’utilisation des tags Thymeleaf

Attributs simples

Le champs texte Bienvenue! sera remplacé par la valeur de l’attribut home.welcome

Collections d’attributs

  • Itération sur une collection d’objets,
  • Affichage de l’attribut d’un objet,
  • Règles de gestion déportées au niveau de l’affichage.

Je vous invite à consulter la documentation officielle, très fournie et commentée, pour avoir un aperçu de l’ensemble des fonctionnalités de Thymeleaf : usingthymeleaf.html

Exemple de Projet Web avec Thymeleaf

La création d’une application Web custom utilise une approche top-down (en partant des IHMs), les maquettes HTMLS et chartes graphiques sont généralement des entrants au projet. La « dynamisation » de ces entrants avec des données métiers se fait généralement au détriment de l’évolutivité et de la maintenabilité générale de la partie graphique du site :

  • Coûts souvent importants lors de mise à jour de charte graphique,
  • Évolution des templates initiaux,
  • Séparation du fond et de la forme non respectée.

L’objectif pour la suite de cet article est double :

  • Voir comment démarrer une application web avec Thymeleaf,
  • Développer d’une application web dynamique à partir d’une maquette statique avec Thymeleaf.

Démarrer le projet

Nous allons ici utiliser une maquette de blog disponible sur le site officiel de Bootstrap.

Vous pouvez télécharger ici : https://getbootstrap.com/examples/blog/

Nous allons intégrer la maquette avec Thymeleaf, ajouter des contenus de test et voir les étapes nécessaires pour créer l’application web. Nous ne verrons dans la suite que des extraits du code de l’application. L’ensemble des sources et procédures d’exécution sont disponibles à la fin

Configuration maven

Fichier pom.xml

Spring est ici utilisé pour initialiser le contexte applicatif et les objets. Spring MVC est utilisé uniquement pour la gestion du modèle et contrôleur. La vue est déléguée à Thymeleaf pour le rendu de la page Web.

Configuration Thymeleaf

Fichier ThymeleafConfig.java

Le “ViewResolver” par defaut de Spring MVC est ici remplacé par celui de Thymeleaf.

Pour la configuration de Thymeleaf, il faut instancier deux objets : le moteur de rendu (templateEngine) et le chargeur de template(templateResolver).

Le controleur : AppControlleur.java

Fichier index.html

Ajouts des namespaces et dialectes Thymeleaf

Modification des urls relatives pour les fichiers css et js

Le moteur de rendu remplacera la valeur href dans l’environnement d’exécution par la valeur th:href.

Remplacement des titres et descriptions par du contenu métier :

Affichage des liste d’articles

Il est ainsi possible d’itérer sur une liste d’article tout en conservant un exemple d’article pour un affichage statique. Il est aussi possible d’appliquer des règles d’affichages métier (concaténation de texte, conversion de dates, internationalisation, etc …)  tout en conservant cela au niveau de la vue.

Affichage du site

Après modification et exécution du site, ci dessous le rendu de la page que nous avons modifié :

  • en haut le rendu de la page index.html directement dans un navigateur,
  • en bas la même page via le conteneur d’application et chargement de contenu.

Sans trop dénaturer la maquette originale, nous avons réussi à rendre dynamique le site sans perdre en contrepartie l’évolutivité et maintenabilité de la maquette. Essayez d’arriver à un résultat aussi proche avec un autre framework de présentation!

Voila, en espérant que cela vous a donné envie d’essayer Thymeleaf ou en tout cas, vous permet de savoir ce qu’il pourrait vous apporter !!

L’ensemble des sources de cet exemple sont disponibles ici:

https://github.com/soprasteria/thymeleaf-example

Liens utiles

Leave a Reply

Your email address will not be published. Required fields are marked *