La boîte à prog

Historique: des composants côté serveur, des templates aux composants modernes Des JSP aux frameworks front-end modernes, la manière de construire des interfaces web a beaucoup évolué. Pourtant, une question reste la même : comment produire du HTML dynamique, réutilisable et facile à maintenir ? Les premiers templates Java : générer du HTML depuis le serveur Les premiers templates Java : générer du HTML depuis le serveur Au début du web dynamique en Java, les servlets permettaient de répondre aux requêtes et de générer des pages. Fabriquer une page HTML en concaténant des chaînes Java devenait vite pénible : le code applicatif et le balisage se retrouvaient entremêlés. Les JSP (JavaServer Pages, arrivé en 1999) ont popularisé une approche inverse : écrire du HTML dans lequel on insère des éléments dynamiques. Elles ont rendu la création de pages plus naturelle pour les développeurs front-end, mais l’usage de code Java directement dans le template pouvait vite brouiller la séparation en...

La solution qui est présentée se base sur thymeleaf et boostrap 3.  Interface utilisateur Depuis le tout début de ma carrière, à chaque emploi j'ai eu à créer de nombreuses interfaces web pour des applications de gestion. Ce n'est pas nécessairement très intéressant, c'est redonnant et c'est de plus en plus complexe pour au final prendre des données, les afficher à l'utilisateur, lui permettre de les modifier et finalement les retourner au serveur. Après avoir fait du jsp, jsf, asp, php, struts, gwt, gxt, gwt-ext, jquery, thymeleaf j'avais de grosse attente envers les nouveaux framework / librairie frontend. J'ai été malheureusement fortement déçu après avoir fait quelques nouvelles applications from scratch en angular / react. Encore plus complexe qu'auparavant, mais plus découpé. Courbe d'apprentissage assez élevé et maintenance coûteuse. Le temps et argent pris pour constamment mettre à jour des libraires c'est du temps, argent en moins pour ...

Thymeleaf est un moteur de template serveur régulièrement utilisé le monde Java, principalement avec le framework Spring. Dans cet article, nous présentation quelques architectures possibles avec ce framework ainsi que l'utilisation de Htmx afin de rendre les applications thymeleaf plus dynamiques.    Architecture d'application Voici un ensemble d'architecture varié qu'il est possible de faire avec Thymeleaf     La première étant la plus simple et la plus utilisée dans les exemples montrés sur la toile. J'ai pu expérimenter la cinquième. Le mvc était utilisé pour construire les interfaces utilisateurs, par contre toutes les opérations de suppression, de mise à jour ou de création de données utilisaient une architecture rest. Le javascript était utilisé afin de reloader la page. C'est une solution simple et rapide à mettre en place face à une solution SPA avec Angular, React ou bien Vue. HDA L'augmentation du temps de développement, la complexité des framew...

Dans cet exemple qui utilise Thymeleaf, nous allons effectuer un post en ajax. Les données envoyés sont de type json. Ce qui a un impact sur le body devant être envoyé et sur l'annotation à employé dans le controller spring.  Le formulaire est composé de 3 champs. <form class ="row g-3" id ="createAdsForm" th :action ="@{/ads}" > <input name ="id" type ="hidden" /> <div class ="col-md-12" > <label for ="adsTitle" class ="form-label" th :text ="#{ads.title}" > Title </label> <input type ="text" class ="form-control" id ="adsTitle" name ="title" > </div> <div class ="col-md-12" > <label for ="descriptionAds" class ="form-label" th :text ="#{ads.description}" > Example textarea </label> <textarea class =...

Dans le précédent article de thymeleaf , nous avons utilisé l'approche par défaut des templates. Nous avions une page principal, product et about. Pour chacune d'elle, nous avions un fragment menu, footer. Tous ces pages avaient une structure similaire.  Nous allons maintenant utiliser une approche différente. Nous allons utiliser le patron décorateur. Nous allons utiliser le même exemple, mais avec cette approche.Le header sera mis dans un fragment cette fois. Les sources sont disponibles sur github Le fragment header <head th :fragment ="my-header" > <title> Good Thymes Virtual Grocery </title> <meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> <link rel ="stylesheet" type ="text/css" media ="all" href ="../../css/main.css" th :href ="@{/css/main.css}" /> </head>   Layout Decorator Nous allons créer un fichier main-layout avec l...

Nous allons traiter une des particularités de Thymleaf, les fragments. Nous avons vue jusqu'à maintenant les templates. Nous utiliserons spring boot et la structure du projet sera. Les sources sont disponible ici .     Un template peut être vue comme une page html, javascript, css.  Par exemple, dans un fichier index.html <!DOCTYPE html> < html xmlns: th = " http://www.thymeleaf.org " > < head > < title > Good Thymes Virtual Grocery </ title > < meta http-equiv = " Content-Type " content = " text/html; charset = UTF-8 " /> < link rel = " stylesheet " type = " text/css " media = " all " href = " ../../css/main.css " th: href = " @{/css/main.css} " /> </ head > < body > < p th: text = " #{home.welcome} " > Welcome to our grocery store! </ p > < p > Today is: < sp...