Ce tutoriel a pour but de vous initier à Ajax et Dojo dans un environnement MVC2 avec le framework Struts 2. Je vous recommande, avant de commencer, de réaliser le tutoriel l’accès au base de données SQL avec struts 2

Dans cet exemple je vais vous expliquer la mise en ouvre et le fonctionnement du Tag autocompleter. Ce tag affiche une liste déroulante d’autocomplétion en ajax (sans recharger la page). Lorsque qu’un utilisateur choisi une entrée dans la liste déroulante celle-ci est automatiquement renseignée dans le champ input.

Téléchargez l’exemple suivant et intégrez le dans votre Workspace (Eclipse).

I – Les librairies :

Si vous n’utilisez pas l’exemple ci-dessus ou le jar est présent, pour implémenter Dojo et utiliser le tag <sx:autocompleter/> vous devez télécharger ici le jar struts2-dojo-plugin-2.1.6.jar puis le déposer dans le dossier lib de votre projet.

Pour notre exemple nous allons intégrer l’ensemble des jars comme ceci :

puis les exporter

II – Structure du projet

Notre projet doit ressembler à ceci :

III РLa base SQL associ̩e au projet.

Pour finaliser le montage de ce projet il est nécessaire d’installer MYSQL ( via wamp ou easyPhp par exemple ). Une fois installé votre package server ouvrez PHPmyAdmin et créez une base nommée login.

il vous suffit maintenant d’importer le fichier login.sql présent dans le projet.

cliquez ensuite exécuter.

Votre environnement est près.

Lancez votre projet (tomcat doit être installer sur votre machine ) .

IV – Le tag <sx:autocompleter/>

Si l’application se lance correctement vous devez obtenir ceci en page d’accueil :

Explication :

Le fichier JSP :

La directive taglib

est nécessaire à l’utilisation des différents tag sx: de dojo. Cette déclaration de taglib fait référence a la dtd ( document type définition ) contenue dans votre jar struts2-dojo-plugin-2.1.6.jar

Nous insérons ensuite la balise

qui est également nécessaire à l’utilisation des autres taglib dojo. (plus de détail ici ). Nous pouvons maintenant utiliser la balise <sx: autocomplete/>.

Détaillons quelques-uns des attributs les plus utilisés.

L’attribut value : value= »" : Il définit la valeur par défaut du champ input.

L’attribut list : list= »loginList » : Récupère la liste des entrées auto-complétées. Cette liste est récupérée par notre classe d’action UtilisateurAction.java après accès au model ( UtilisateurModel.action ).

L’attribut autoComplete : autoComplete= »true » permet d’afficher la suggestion directement dans le champ texte (ou non si il est positionné à false).

L’attribut keyName : Cet attribut permet de désigner le domaine auquel la clé sélectionnée sera attribuée. Ici utilisateur.identifiant.

L’attribut keyValue : Cet attribut permet d’initialiser la valeur de départ de la clé.

L’ensemble des attributs de ce tag sont plus précisément décrit ici : struts.apache.org/2.0.14/docs/autocompleter.html

V – Le tag <sx:datetimepicker/>

Un autre exemple de l’implémentation de dojo dans Struts 2, ici le tag simple <sx:datetimepicker/> :

l’utilisation de ce tag est apriori sans ambiguïté. Vous trouverez une description de ses attributs ici : struts.apache.org/2.0.14/docs/datetimepicker.html

Si vous rencontrez des difficultés sur ce tutoriel n’hésitez pas à poser vos questions en commentaire. J’y répondrais.