Découverte de Spring-javascript (Spring-js)

Ce billet est vraiment particulier car il aborde le développement côté - client (côté présentation).

L'objet est de présenter brièvement spring-javascript (spring-js).

Spring-js est une petite couche d'abstraction permettant d'accéder aux librairies javascript (JS) tel Dojo, Ext.

Cette couche d'abstraction facilite l'accès à l'Ajax de façon uniformisée (interface commun) comme le fait si bien Spring.

Spring-js repose sur l'AOP et la méthode centrale nommée addDecoration permet d'ajouter des comportements riches et des appels AJax aux éléments de la page de présentation.

L'apparition de l'AOP dans le monde html/javascript est vraiment enrichissant.

A l'aide d'une démo très pratique, toutes les étapes de configuration de spring-js et de son implémentation dojo sont expliquées.

Du coup, trois fichiers js sont à inclure dans les pages jsp concernées: spring.js, spring-dojo.js et dojo.js.

Ces fichiers js sont fournis dans les jars de la dépendance maven comme illustré à l'étape 1 ci-après.

Voici toutes les étapes allant de la configuration de spring-js à sa mise en place dans une application web basée sur spring-mvc.

Il est préférable de partir du projet de mon billet ou de télécharger ce zip.

Dézipper le contenu dans le workspace de votre IDE eclipse puis lancer la commande mvn eclipse:eclipse.

Enfin, importer le projet dans eclipse.

Les étapes suivantes partent de ce projet et pas à pas complètent chacun des fichiers: pom.xml, web.xml, applicationContext.xml et view.jsp.

ETAPE 1. Configurations nécessaires

ETAPE 1.1. Ajouter la dépendance dans le pom

Pour cela, compléter le pom.xml du projet avec ces lignes:

  <!-- spring-js -->
 <dependency>
	<groupId>org.springframework.webflow</groupId>
	<artifactId>spring-js</artifactId>
	<version>2.3.1.RELEASE</version>
 </dependency>

Cette déclaration ajoute deux jars avec des librairies js : spring.js, spring-dojo.js, dojo.js,.. et bien d'autres.

Après la commande mvn package vous pourrez jeter un œil sur ces deux jars présents dans le répertoire lib du war.

ETAPE 1.2. Configurer le web.xml

Pour introduire spring-js dans les pages de présentation, configurer le fichier web.xml comme suit:

<!-- Serves static resource from .jar files -->
<servlet>
    <servlet-name>Resource Servlet</servlet-name>
    <servlet-class>org.springframework.js.resource.ResourceServlet</servlet-class>
</servlet>
        
<!--Map resources requests to the Resource Servlet for handling-->
<servlet-mapping>
    <servlet-name>Resource Servlet</servlet-name>
    <url-pattern>/resources/*</url-pattern>
</servlet-mapping>

ETAPE 3. Enrichir la page jsp

L'étape 3 se décompose aussi en deux phases. La première permet d'inclure les librairies js utiles.
Et la seconde permet de décorer les éléments du formulaire avec des comportements riches et de la validation côté client.

ETAPE 3.1. Déclarer les inclusions dans l'entête jsp

Voici les éléments à inclure dans l'entête (tag <head>) de chaque page jsp utilisant spring-js:

....

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

......

<head>
.....

<script djconfig="parseOnLoad: true"
 src="<c:url value="/resources/dojo/dojo.js"/>" type="text/javascript"></script>
<script type="text/javascript"
 src="<c:url value="/resources/spring/Spring.js" />"> </script>
<script type="text/javascript"
 src="<c:url value="/resources/spring/Spring-Dojo.js" />"></script>

<style type="text/css" media="screen">
 @import url("<c:url value="/resources/dojo/resources/dojo.css"/>");
 @import url("<c:url value="/resources/dijit/themes/tundra/tundra.css"/>");
 </style>     

<script type="text/javascript">dojo.require("dojo.parser");</script>

....

</head>

Noter la déclaration de la taglib jstl.

L'import des css permet de mieux présenter les effets et décorations qui vont être ajoutées à l'étape suivante.

ETAPE 3.2. Enrichir le formulaire

Le fichier view.jsp déclarait un formulaire comme suit:

<body>
<div>

 <form:form  modelAttribute="person" action="valider.html">
 <label for="name">Nom:</label>
 <form:input path="name" />

<label for="name">Date naissance:</label>
<form:input path="dateBirth" />

<input type="submit" id="ok" value="OK" />

</form:form> 

A présent, voici les décorations ajoutées aux deux éléments input de type texte (un pour le nom et l'autre pour une date) et au bouton submit du formulaire.

<body>
<div>
 <form:form  modelAttribute="person" action="valider.html">
 <label for="name">Nom:</label>
 <form:input path="name" />
 <form:errors path="name" cssClass="errors"/>
<script type="text/javascript">
 Spring.addDecoration(new Spring.ElementDecoration({
 elementId : "name",
 widgetType : "dijit.form.ValidationTextBox",
 widgetAttrs : {
 promptMessage: " Saisir un nom [minimum 3 car.]",
 required : true}}));
</script>
<label for="name">Date naissance:</label>
<form:input path="dateBirth" />
<script type="text/javascript">
 Spring.addDecoration( new Spring.ElementDecoration({
 elementId : "dateBirth",
 widgetType : "dijit.form.DateTextBox",
 widgetAttrs : {
  promptMessage: " Saisir une date [ex.10/09/1982]",
  datePattern : "dd/MM/yyyy",
  required : true}}));
</script>
<input type="submit" id="ok" value="OK" />
<script type="text/javascript">
 Spring.addDecoration(
 new Spring.ValidateAllDecoration({
 elementId:'ok',
 event:'onclick'}));
</script>
</form:form> 

Trois décorations sont appliquées.

Une première décoration est appliquée au champ input texte "name" qui permet d'afficher un popup avec ce message:

"Saisir un nom [minimum 3 car.]".

Pour le second champ texte de saisie de date, la décoration affiche un calendrier aidant à choisir la date.

Enfin, pour le bouton submit, la décoration ne fait qu'activer la validation côté-client avant de soumettre les données du formulaire.

La validation côté client est activée avec l'attribut required=true.

ETAPE 4. Tester

Lancer la commande:

mvn jetty:run 

ou

mvn tomcat:run

Puis lancer l'uri localhost:8080/NOM_CONTEXT/user.html.

Voici une capture illustrant l'apport des décorations de spring-js à la couche de présentation:

decorate-spring-js.PNG

Je vous laisse découvrir les autres effets et la validation.

@Enjoy

2 commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.