- Rapport de stage Étude de solutions pour l intégration de fonctionnalités

Transcription

1 - Étude de solutions pour l intégration de fonctionnalités de client riche dans une application de type J2EE 1.4 à l aide de frameworks Auteur: AZIZI Naoual Tuteur de stage: NICOD Jean-Marc Master 2 - Mention Informatique

2 page 2 of 69

3 Remerciements Je tiens d abord à remercier mon maitre de stage Jean-François Bellet pour m avoir proposé un sujet aussi intéressant et pour m avoir, par la même occasion, permis d évoluer au sein d une SSII. Je remercie aussi Loïc Gouillet, chargé de mon suivi personnel, pour m avoir guidé dans cette entreprise rendant, par la même, mon intégration au centre de service de Lyon plus aisée. Par ailleurs, je remercie Bruno Baudru, l expert Technique responsable de mon sujet, qui a toujours su se montrer disponible pour m aider dans mon travail, n hésitant pas à se déplacer depuis Grenoble quand cela était nécessaire. Enfin, je remercie mon tuteur de stage, Jean-Marc Nicod, pour avoir toujours été disponible pour moi. page 3 of 69

4 Sommaire 1 Présentation de Logica Introduction Quelques chiffres Logica en France : Contexte du stage Sujet de stage Introduction Présentation du framework Struts Présentation de la technologie Ajax Travail réalisé Recherche de frameworks permettant la création de fonctionnalités Ajax Définition des critères de comparaison des frameworks Comparatifs des frameworks recensés Mise en place des solutions choisies Présentation de l application Mailreader Fonctionnement de l application Mailreader Modifications effectuées sur la structure de l application Mailreader Description des fonctionnalités Ajax à ajouter dans notre application Environnement de développement Ajout de fonctionnalités Ajax dans l application Mailreader...31 Ajout de fonctionnalités Ajax dans l application Mailreader via le framework Ajaxtags...31 Ajout de fonctionnalités Ajax dans l application Mailreader via le framework Dojo Comparaison des deux frameworks Conclusion Organisation du travail Contexte : Gestion du temps de travail : Formations suivies :...60 Conclusion 62 Bibliographie...64 Glossaire 66 Table des figures...68 page 4 of 69

5 1 Présentation de Logica 1.1 Introduction Logica est une société de services informatique spécialisée dans le conseil, l intégration de systèmes et l externalisation. Elle a été fondée en 1964 et son chiffre d affaire en 2007 s élevait à près de 4,5 milliards d euros. Il s agit de la septième plus grande société européenne de services IT en matière de revenue et le quatrième acteur de conseil en France depuis l acquisition de la compagnie Unilog en Le groupe dispose ainsi de près de 9000 collaborateurs en France. Aujourd hui, Logica est présent dans 36 pays au monde mais est surtout ancrée dans la plupart des puissances européennes et notamment le Royaume-Uni, les pays nordiques, la France et le Portugal (Annexe 1). Figure 1 : Logica en Europe Cependant, elle s est aussi externalisée vers des pays tels que l Inde, les Philippines, le Maroc, la Pologne, la rendant ainsi plus compétitive au niveau mondial. Par ailleurs, près de 70% des services financiers tels que les banques dépendent de Logica. En outre, Logica est présent dans le domaine spatial depuis une quarantaine d années et a notamment participé au projet de la mise en place de la sonde Huygens sur Titan, le plus gros satellite de Saturne. Figure 2 : Logica dans le monde 1.2 Quelques chiffres Logica est présent dans une large diversité de secteurs tels que l Industrie, les finances, les télécommunications (Annexe 2). Elle dispose ainsi d un grand nombre de partenaires dont les plus renommés sont les suivants : page 5 of 69

6 1.3 Shell, le leader pétrolier Ford, le constructeur automobile américain Vodafone, le groupe de télécommunication britannique EADS, «European Aeronautic Defense and Space company», correspondant au groupe industriel de l aéronautique et de la défense tant dans le secteur civile que militaire. Il s agit du premier groupe de défense en Europe. Ministère des finances en France Ministère de la défense au Royaume-Uni Logica en France : La société Logica s organise en différents axes en France. Elle dispose d abord de cinq «lines of business» (LOB) permettant de gérer les secteurs des finances, de l industrie, du transport, du service public, et des télécommunications. A coté de cela, elle dispose de trois pôles principaux : le pôle conseil, le pôle IT Services et les centres de services (Annexe 3).Ces derniers sont alors subdivisés selon leur localisation. Ainsi, le CSRA (centre de service Rhône-Alpes) permet de regrouper à la fois les centres de services de Lyon et de Grenoble. Lille Amiens Brest Rennes CSW (Centre de service Ouest) Effectif 160 Metz Paris Le Mans Strasbourg Orléans Nantes ClermontFerrand Lyon CSRA (Centre de service RhôneAlpes) Effectif 270 Niort CSG (Centre de service de Bordeaux Grenoble Gironde) Nice Effectif 270 Toulouse Aix Pau Montpellier Figure 3 : Les centres de services en France page 6 of 69

7 Au sein du CSRA, la cellule d amélioration continue, permet à la société à la fois d effectuer de la veille technologie afin de toujours rester à jour concernant les différentes technologies utilisées. Cette cellule permet aussi d anticiper les demandes des clients en recherchant de nouvelles solutions qui pourraient satisfaire leurs besoins. C est dans ce cadre que mon sujet de stage a été imaginé. page 7 of 69

8 2 Contexte du stage 2.1 Sujet de stage Introduction Dans un monde qui s articule autour du net, de nombreux langages permettent, avec une architecture différente, de produire des pages web. Alors qu auparavant, les sites étaient majoritairement écrits avec des langages tels que html ou php, les contraintes de sécurité et de performance ont amené de telles structures à disparaître peu à peu pour laisser la place à des frameworks mieux architecturés. C est dans ce cadre que le framework J2EE Struts a fait son apparition. Celui-ci permet en effet, de séparer les couches métiers de la couche de présentation, visible par les internautes. Ainsi, de plus en plus d applications web ont été crée selon ce modèle. Parallèlement, de nouvelles techniques de développement permettant de rendre les pages web plus ergonomiques et plus rapides ont fait leur apparition. Parmi elles, la technologie Ajax est la plus prometteuse. En effet, celle-ci prévoit de ne plus avoir à recharger entièrement une page web lorsqu il ne faut en modifier qu une partie. La communication entre le client et le serveur sera alors plus rapide car la quantité de données qui transite sera sensiblement réduite. Ajax est qualifiée de technologie car elle fait appel à différents langages et en particulier javascript et XML. Il existe ainsi aujourd hui de nombreuses solutions permettant de créer des fonctionnalités Ajax. Le but de ce stage sera d étudier les solutions permettant la mise en place de modules Ajax dans des applications web existantes de type Struts, afin de rendre ces dernières plus conviviales et rendre la communication avec le serveur plus fluide. En effet, les applications Struts sont structurées, et il serait intéressant de pouvoir ajouter des fonctionnalités Ajax sans avoir à bouleverser cette architecture. Il nous faudra ensuite comparer ces frameworks afin de déterminer ceux qui ont le moins d impacte sur la structure existante et qui s intègrent le mieux à l application initiale Présentation du framework Struts Regardons d abord comment s organise une application Struts. Elle respecte le modèle d architecture MVC (Modèle-Vue-Contrôleur) qui se présente comme suit : La partie «Modèle» permet de représenter les données du système. Elle regroupe notamment les composants permettant l accès à des bases de données. La «Vue» comporte la partie qui sera visible par l utilisateur de l application, comme les pages Html par exemple. Celle-ci est généralement constituée par des pages Jsp, permettant ainsi d entrelacer du code html avec du code Java. Ce dernier permet d accéder à nos données. Toutefois, Struts dispose d un certain nombre de librairies de balises («tags») qui permettront de limiter la quantité de code Java dans nos pages. Les plus connues sont les librairies : o «Bean» permettant de manipuler les beans o «Html» permettant de manipuler nos formulaires o «Logic» permettant d effectuer des conditions ou des itérations. page 8 of 69

9 Enfin, la partie «Contrôleur» permet de faire le lien entre la vue et le modèle. Pour cela, nous disposons d un fichier de configuration au format Xml («strutsconfig.xml») qui permet de définir le «mapping» des actions, c est-à-dire que l on définit pour chaque cas, la page à afficher. On y définit donc des actions qui ne sont rien d autres que des objets de la classe «Action» décrite dans le package «org.apache.struts.action» et qui permettent de faire le lien entre le contrôleur et le modèle. Nous créons aussi des «BeanForm» qui correspondent à des objets de la classe «ActionForm» permettant de représenter la couche métier de l application c est-à-dire celle réservée à l accès aux données. Le descripteur de l application web, chargé au démarrage de notre application, sera configuré dans un ficher Xml appelé «web.xml». On y décrira le nom de la servlet à utiliser. Ainsi, toutes les requêtes devront transiter par cette servlet, qui est en faite un objet de la classe «ActionServlet». Utilisateur 5. Répond 1. Effectue une requête 3. Redirige Contrôleur Vue 4. Consulte 2. Modifie Modèle Figure 4 : Schéma de l architecture MVC (Modèle Vue - Contrôleur) En outre, le framework Struts permet de gérer les messages d erreur via des classes dédiées spécialement à cela : «ActionMessage», «ActionMessages» et «ActionErrors» permettent ainsi respectivement d encapsuler les messages d erreurs, d encapsuler une collection de messages d erreurs ou d effectuer les deux à la fois. Il est aussi possible de valider les données. Pour cela, il suffit que le «BeanForm» associé à notre formulaire, hérite de la classe «ValidatorForm». Il suffira alors d implémenter, si nécessaire, les méthodes «reset» et «validate» en pensant bien à définir à chaque fois les messages d erreurs. Enfin, pour préciser le type attendu de chacun des champs de notre formulaire, nous allons faire appel au fichier de configuration «validation.xml». Celui-ci permet aussi de préciser si la saisie d un champ est obligatoire ou non et offre aussi la possibilité de préciser la taille minimale et maximale d un champ. Enfin, Struts supporte le mécanisme d internationalisation et permet de rendre nos applications multilingues en indiquant simplement, dans le fichier de configuration «strutsconfig.xml», le package dans lequel se situent les ressources c est-à-dire les fichiers «properties» permettant de définir les labels et messages en différentes langues. page 9 of 69

10 Figure 5: Organisation d une application Struts Présentation de la technologie Ajax Habituellement, la communication entre l utilisateur d une application web et le serveur s effectue par l envoie de la part de l utilisateur de requêtes http que le serveur interprétera en déclenchant l affichage adéquat. La communication entre le client et le serveur étant directe, nous la qualifierons de «synchrone». Cependant, lorsque seulement une partie de la page est modifiée, il faudra recharger complètement la page, faisant ainsi transiter une grande quantité de données. Cela a pour conséquence de rendre les applications web très lentes. Requête HTTP Serveur (Avec Base de données) Client Réponse HTTP Figure 6 : Organisation d une application web sans Ajax Afin de remédier à cela, il a été imaginé de trouver un système dans lequel la communication entre le client et le serveur impliquerait uniquement la circulation des données nécessaires. Pour cela, un intermédiaire entre client et serveur a été mis en place. Ainsi, plutôt que de devoir envoyer des requêtes http au serveur, le client effectuera des «appels javascript» qui seront gérés directement par le moteur Ajax, dans les cas où il ne sera pas nécessaire de récupérer des données chez le serveur. Sinon, le moteur Ajax enverra une requête au serveur sous le format xml : celles-ci seront nommées «Xml http Request» ou xhr. Ainsi, la quantité de données transitant de part et d autre sera amplement réduite rendant ainsi les applications web plus rapides. Dans ce cas, nous avons eu recours à un intermédiaire page 10 of 69

11 entre le client et le serveur, ce qui nous permet de qualifier la communication d «asynchrone». C est de là que provient le nom de la technologie ajax, puisqu elle signifie «Asynchronous Javascript And Xml» (Javascript et Xml asynchrone). Appels Javascript Client Moteur AJAX Xml http Request (xhr) Serveur (Avec Base de données) Requête/réponse HTTP Figure 7: Organisation d une application web avec Ajax page 11 of 69

12 3 Travail réalisé Le but de ce stage est de trouver la ou les solutions les plus adaptées pour intégrer des fonctionnalités Ajax dans une application Struts existante. Pour cela nous allons d abord décrire certains des frameworks les plus appropriés à l usage que l on souhaite en faire parmi tous ceux qui sont disponibles actuellement, puis nous les comparerons pour ne conserver que le ou les frameworks les plus intéressants. Pour cela, nous devrons préalablement définir les critères selon lesquels nous comparerons ces frameworks. Une fois que nous aurons conservé le ou les frameworks qui nous intéressent, nous utiliseront une application Struts existante, dans laquelle nous intégrerons des fonctionnalités Ajax définies auparavant, en utilisant tour à tour les frameworks choisis Recherche de frameworks permettant la création de fonctionnalités Ajax Définition des critères de comparaison des frameworks Nous souhaitons trouver des frameworks avec lesquels il serait possible d intégrer des fonctionnalités Ajax dans une application web existante de type Struts. Il faut aussi que la prise en main soit rapide pour que l intégration avec le framework s effectue rapidement. Parallèlement, il faudra aussi que le framework dispose d une documentation riche qui nous permettra à la fois une bonne prise en main, mais aussi qui nous permettra de connaître l étendu des capacités de ce framework. Il sera aussi primordial que, malgré l ajout de nouvelles fonctionnalités, la structure de l application demeure la plus inchangée possible. Enfin, il sera préférable que le framework soit bien référencé tant sur des sites internet que dans des livres pour offrir, en cas de problèmes, un support au développeur chargé de la mise en place des fonctionnalités Ajax Comparatifs des frameworks recensés Près de cinq mille solutions permettant la mise en place de fonctionnalités Ajax sont disponibles à l heure actuelle. Aussi, seuls ceux qui correspondent à nos attentes seront exposés et comparés. Après les avoir testés sur un exemple, voici ce qui en ressort : Dojo : Dojo est un framework Open Source de développement javascript qui est parfaitement adapté pour mettre en place la technologie Ajax. Il dispose d une librairie complète de widgets et offre même la possibilité aux développeurs d en créer eux-mêmes s ils le désirent. Même si ce framework est très lourd, il faut savoir qu il existe un package allégé réservé à la technologie Ajax. En outre, Dojo propose une gestion des XmlHttpRequest plus aisée puisqu il n est plus nécessaire de traiter différents cas selon le navigateur web utilisé. En effet, Internet Explorer s appuie sur des objets ActiveXObject et se distingue des autres navigateurs web. Ainsi, lors de la création des XmlHttpRequest, la gestion n est pas la même. Or avec Dojo, nous n avons plus à nous préoccuper du type de navigateur. De plus, les dernières versions de Dojo disposent des packages distincts offrant des fonctionnalités différentes ou un rendu plus convivial. Le package Dojox permet, par page 12 of 69

13 exemple, l affichage de diagrammes. De même, le package «Dijit» permet d obtenir un rendu des widgets plus ergonomique. Par ailleurs, ce framework s installe très facilement suite au téléchargement du package adapté. A noter aussi qu il ne dispose pas d une documentation complète. Cependant, de nombreux sites, forums et exemples lui sont dédiés. Enfin, ce framework s intègre bien dans les applications web de type Struts. D ailleurs, Dojo est directement intégré dans la version 2 de Struts. DWR : Direct Web Remoting (DWR) est une librairie RCP (Rich Client Platform) permettant notamment de faire de l Ajax inversé c est-à-dire que le code javascript appellera des fonctions java se trouvant côté serveur. Ce framework permet aussi de générer dynamiquement du javascript à partir de classes java. Par ailleurs, il peut s intégrer dans des applications web de type Struts car il suffira qu une servlet java traite les requêtes et les réponses côté serveur tandis que le javascript côté client (ici le navigateur web) enverra les requêtes et mettra dynamiquement à jour les pages. Toutefois, il existe que très peu de documents ou d exemples de son intégration avec Struts. En outre, DWR ne dispose pas d une librairie de widgets très riche. Aussi, même s il génère automatiquement une partie du code javascript nécessaire aux fonctionnalités Ajax, il aurait été préférable de disposer de widgets afin d avoir un minimum de changement à effectuer à l application Struts. Enfin, son installation est facile puisqu il suffit de télécharger le fichier «dwr.jar». DWR dispose aussi d un fichier de configuration «dwr.xml» qui se place dans le répertoire WEBINF/lib de notre application. Prototype : Prototype est l un des frameworks javascript les plus utilisés. Son installation est extrêmement aisée puisqu il n exige le téléchargement que d un seul fichier («Prototype.js»). Les frameworks Rico et Scriptaculous, tous deux basés sur Prototype, permettre aussi de créer des fonctionnalités Ajax. Scriptaculous, en particulier, s intègre bien avec le framework MVC «Ruby on rail» tandis que Prototype s intègre avec Struts. Toutefois, toute la gestion coté serveur serait à effectuer à la main. Par ailleurs, la documentation du framework «Prototype» est correcte. Ajaxtags : Le framework Ajaxtags se compose d une librairie de tags JSP permettant de créer des fonctionnalités Ajax en ajoutant uniquement des balises, évitant ainsi d avoir à écrire des fonctions javascript. Les tags contiennent alors un parser par défaut qui va gérer la réponse retournée au format Xml. Il est toutefois possible de définir soi-même un parser. Seul un nombre réduit de tags est défini (environ une douzaine). Ce framework a été spécifiquement créé dans le but de s intégrer dans des applications de type Struts. C est pourquoi, côté serveur, nous avons la possibilité de créer des réponses en page 13 of 69

14 utilisant des classes «helper» qui nous permettent de créer aisément des documents Xml. Rappelons que, par ailleurs, la gestion côté client s effectue à l aide d un parser prédéfini. Souvent, un attribut permettra de définir la servlet à appeler directement dans nos tags. Nous aurons aussi la possibilité d envoyer des valeurs vers cette servlet sans avoir à écrire de javascript. Son installation est simple mais nécessite aussi le téléchargement d autres librairies javascript (Prototype, Scriptaculous et overlibmws) dont dépend Ajaxtags. Un package d installation contenant toutes les librairies nécessaires est cependant disponible. Une documentation complète est accessible sur le site officiel d Ajaxtags. Elle décrit un à un chacun des tags et leurs attributs respectifs. De nombreux sites web et exemples sont consacrés à ce framework. GWT : Google Web Toolkit (GWT) n est pas un framework javascript mais plutôt une solution alternative permettant de créer des fonctionnalités Ajax. Il s agit d un framework Open Source qui a la particularité de pouvoir transcrire du code java en javascript. On peut donc utiliser ce framework de la même façon que l on développerait une application client lourd (avec du Swing par exemple). GWT sert donc principalement à la couche vue de l architecture MVC de Struts. Son installation est moins aisée que pour les autres frameworks puisqu il ne s agit plus de télécharger la librairie puis d inclure les fichiers javascript dont on a besoin. Il nous faut désormais placer les fichiers «gwt-user.jar» et «gwt-servlet.jar» respectivement dans le path de notre projet et dans le répertoire WebContent/WEB-INF/lib de notre application. Il existe cependant un plugin Eclipse permettant de remédier à cela. Cependant, peu d exemples de son intégration à une application Struts sont disponibles. Le fait qu il faille écrire du code java à la place du code javascript habituel implique des modifications plus importantes sur la structure de l application Struts initiale. Tableau Récapitulatif : Intégrable dans une application Struts Prise en main Bien rapide/installation documenté Le moins d impacte possible sur la structure Suffisamment référencé Dojo DWR Prototype Ajaxtags GWT page 14 of 69

15 On choisira finalement d utiliser d abord le framework Dojo. En effet, compte-tenu de la richesse de sa librairie de widgets, la quasi-totalité des fonctionnalités Ajax à rajouter sera géré coté client uniquement, garantissant, ainsi, un impacte minimal sur la structure existante. Il faudra cependant être prudent étant donné l absence d une documentation complète. Pour diversifier nos frameworks, nous allons opter pour le framework Ajaxtags. Celuici ne correspond pas à un framework javascript mais dépend d un certain nombre de bibliothèques javascript. En utilisant ces tags, nous aurons la possibilité de gérer principalement la communication côté serveur, puisque du côté client, les tags «gèreront» la réponse Mise en place des solutions choisies Afin d évaluer les capacités des frameworks choisis, nous allons tenter de rajouter des fonctionnalités Ajax dans une application Struts existante. Pour comprendre où se situent les modifications que l on va effectuer dans cette application, nous allons commencer par décrire son architecture complète Présentation de l application Mailreader L application que nous avons choisie pour tester nos deux frameworks est l application Mailreader. Celle-ci, disponible dans le package complet du frameworks Struts, permet à des utilisateurs inscrits de consulter les informations sur les comptes de messageries qu ils ont sauvegardés préalablement. Cette application est nommée Mailreader puisqu à l origine, il était prévu qu elle permette aux utilisateurs de consulter le courrier électronique de tous leurs comptes enregistrés dans l application. Notre version de l application ne contiendra pas cette fonctionnalité. Ainsi, dans notre Mailreader, nous disposons d un formulaire permettant aux utilisateurs non inscrit de s enregistrer. Ils pourront alors s authentifier pour accéder à la page contenant leur profil personnel. En plus de contenir les informations saisies lors de l inscription, cette page permet d afficher un tableau contenant la liste des informations concernant les comptes de messagerie. Il sera alors possible pour l utilisateur de modifier ses données personnelles, mais aussi, de modifier ou de supprimer des comptes existants ou d en ajouter de nouveaux. Elle se présente alors comme suit : page 15 of 69

16 Figure 8: Schéma de l organisation des différentes pages JSP de l application L utilisateur accède d abord à une page d accueil. Celle-ci contient alors une première série de deux liens html grâce auxquels les utilisateurs pourront soit accéder au formulaire d enregistrement d un nouveau compte, soit s authentifier s ils sont déjà répertoriés dans la liste des utilisateurs enregistrés. Figure 9 : Aperçu de la page d accueil par défaut de l application Mailreader Parallèlement, il faut savoir que l application est disponible en trois langues différentes : l anglais, le japonais et le russe. Ainsi, l ensemble de liens html suivant, intitulé «Language Options», permet à l utilisateur de modifier la langue s il le souhaite. De cette façon, tous les labels et messages apparaitront dans la langue choisie. page 16 of 69

17 Figure 10 : Aperçu de la page d accueil de l application Mailreader : A gauche, en japonais et à droite en russe Enfin, le dernier lien intitulé «A Walking Tour of the MailReader Demonstration Application» permet d accéder une page html dans laquelle est expliqué le fonctionnement de l application. En cliquant sur le premier lien, intitulé «Register with the Mailreader Application Demonstration», les utilisateurs de cette application auront la possibilité de s enregistrer en complétant un formulaire : ce formulaire permet alors de renseigner les informations relatives à l inscription d un nouvel utilisateur. Celui-ci devra indiquer un nom d utilisateur, un mot de passe à saisir deux fois pour remédier aux erreurs de saisies, et son adresse mail. Il aura la possibilité de préciser l adresse mail à partir de laquelle il souhaite envoyer des mails, et celle à laquelle il souhaiterait recevoir des mails. La saisie de cette dernière est facultative. Une fois ce formulaire complété, il faut le soumettre en pressant le bouton «Save». En cas d erreur de saisie, l utilisateur peut réinitialiser tous les champs avec le bouton «reset» qui efface les valeurs saisies dans chacune des zones. Enfin, si un utilisateur qui vient d accéder à ce formulaire, réalise qu il ne souhaite pas le saisir, parce qu il est déjà inscrit par exemple, il pourra appuyer sur le bouton cancel et sera alors rediriger vers la page d authentification des utilisateurs. Figure 11 : Aperçu de la page d enregistrement d un nouvel utilisateur de l application Mailreader Lorsqu un utilisateur accède à la page d authentification, il devra saisir son nom et son mot de passe. page 17 of 69

18 Figure 12 : Aperçu de la page d authentification des utilisateurs enregistrés dans l application Mailreader S il ne fait pas parti des utilisateurs enregistrés, un message d erreur lui demandera de saisir à nouveau son mot de passe. Sinon, il accèdera à son menu principal. Figure 13 : Aperçu de la page d authentification des utilisateurs enregistrés dans l application Mailreader suite à la saisie d un nom d utilisateur erroné Dans le menu principal d un utilisateur, deux liens sont disponibles : l un lui permettant d accéder à son profile personnel, l autre de se déconnecter de l application. Si l utilisateur se déconnecte, il accèdera à la page d accueil. Figure 14 : Aperçu du menu principal d un utilisateur authentifié Le profile personnel d un utilisateur se présente comme suit : page 18 of 69

19 Figure 15 : Aperçu de la page contenant le profile personnel d un utilisateur authentifié On peut distinguer deux parties différentes dans cette page : la première affiche les données saisies par l utilisateur lors de son inscription (mis à part les mots de passe). Ceux-ci sont alors modifiables : il suffit pour cela de remplacer la valeur qui était affichée avec une nouvelle valeur puis de presser le bouton «save». Le bouton «reset» permet aussi de réinitialiser le formulaire en effaçant les valeurs saisies à ce moment-là. En effet, seules les modifications seront effacées tandis que les valeurs renseignées lors de l inscription demeureront inchangées. Le bouton «cancel» permettra à l utilisateur de revenir à son menu principal pour éventuellement se déconnecter. La seconde partie contiendra un tableau dans lequel seront indiquées les informations concernant les comptes de messageries de l utilisateur. Ces informations seront modifiables à l aide du lien «Edit» ou supprimables avec le lien «Delete». Pour pouvoir enregistrer les données sur un compte, l utilisateur dispose du bouton «add» situé au bas du tableau qui redirige l utilisateur vers un formulaire lui permettant de saisir les informations concernant un nouveau compte. Le formulaire d ajout d un nouveau compte se présente somme suit : Figure 16 : Aperçu du formulaire d enregistrement d un nouveau compte de messagerie électronique pour un utilisateur authentifié Le champ «Host Name» permettra d indiquer le nom de l hôte du compte de messagerie tandis que le champ «Mail Username» indiquera le nom d utilisateur utilisé pour ce compte mail. L utilisateur doit aussi saisir son mot de passe lui permettant l accès à son page 19 of 69

20 compte mail. Il précise aussi le type du serveur («Mail Server») et l indicateur permettant de déterminer si l utilisateur souhaite se connecter automatiquement à son compte ou non. Cet indicateur, appelé «Auto Connect», correspondra à un booléen prenant la valeur «true» si l utilisateur souhaite être connecté automatiquement à son compte de messagerie et «false» dans le cas contraire. La saisie du type de serveur s effectue via une liste déroulante contenant deux valeurs correspondant aux deux types de protocoles d accès au courrier électronique les plus utilisés : il s agit des protocoles IMAP (Internet Message Access Protocol) et POP3 (Post Office Protocol version3). Enfin, notons que les boutons «save», «reset» et «cancel» permettent, comme précédemment, de sauvegarder les données, d effacer les informations saisies et de quitter cette page pour ré-accéder à son profil personnel. Le diagramme de cas d utilisation contenu dans l Annexe 5 permet d indiquer le fonctionnement de l application comme décrit ci-dessus Fonctionnement de l application Mailreader Rappelons que l application Mailreader correspond à une application web de type Struts. Cela signifie qu elle respecte l architecture MVC comme suit : Figure 17 : Schéma simplifié de l organisation de l application Mailreader Reprenons chacune de nos pages une à une afin d observer l enchainement des différentes actions : Accueil : La page d accueil par défaut («index.jsp») nous redirige vers l action «/Welcome». Cette action a été définie dans le fichier de configuration «struts-config.xml» relatif au «mapping» des actions. <action path="/welcome" forward="/welcome.jsp"/> page 20 of 69

21 Elle indique que l on va être redirigé vers la page «welcome.jsp». C est dans cette page que seront créés les liens html permettant d accéder soit à la page d enregistrement d un nouvel utilisateur, soit à la page d authentification, soit à la page expliquant le fonctionnement de l application. Ces liens ne seront pas définis de façon usuelle en indiquant le nom du fichier qui sera la cible de ce lien : en effet, les pages seront appelées via des actions. Ces actions seront elles aussi décrites dans le fichier de configuration «strutsconfig.xml». Ainsi, pour accéder à la page d enregistrement d un nouvel utilisateur, nous appellerons l action «/EditRegistration» tandis que pour accéder à la page d authentification, nous appellerons l action «/Logon». Enfin, l action «/Tour» appellera la page html expliquant le fonctionnement de l application. Enregistrement d un nouvel utilisateur : Lorsque l action «/EditRegistration» est appelée, elle affichera le formulaire d enregistrement. Ce dernier est défini dans le fichier «registration.jsp». Ce fichier permet de gérer à la fois la page d enregistrement d un utilisateur et le profile personnel de cet utilisateur. En effet, puisque dans le profile personnel il faut afficher d abord les données saisies lors de l inscription, le même fichier sera utilisé. Puisque l affichage ne sera pas exactement le même dans les pages, un attribut («task») a été défini dans le bean associé à ce formulaire. Cet attribut prendra tour à tour la valeur «create» lors de l inscription d un nouvel utilisateur, et «edit» pour le profile personnel de l utilisateur. Ainsi, il faudra simplement tester, via les balises «logic», si l attribut a pour valeur «edit» ou «create» et déterminer quels composants seront à afficher dans chacun des cas. Une fois sur la page d enregistrement d un nouvel utilisateur, celui-ci devra obligatoirement renseigner tous les champs sauf celui concernant l adresse mail de réception («Reply To Address») puisqu elle est, le plus souvent, identique à l adresse d envoie («From Address»). Dès que le formulaire est complété, il sera soumis via le bouton «save». Cela appellera alors l action «/SaveRegistration» et entrainera l enregistrement des données. Les données seront toutefois préalablement validée à l aide du «validator» de Struts et devront, de ce fait, respecter un certain nombre de contraintes : ainsi, tous les champs sauf «Reply To Address» doivent impérativement être saisis, le «username» et les mots de passe devront contenir plus de trois caractères et moins de seize et les adresses mail devront avoir le format adéquat. Toutes ces exigences sont définies dans le fichier «validation.xml». Dans l exemple suivant, nous précisons que l adresse mail d envoie doit obligatoirement être saisie et qu il s agit d une adresse comme suit : <form-validation> <formset> <form name="registrationform"> <field property="fromaddress" depends="required, "> </field> <arg key="prompt.fromaddress"/> </formset> </form-validation> page 21 of 69

22 On remarquera au passage que le bean associé à notre formulaire d enregistrement d un nouvel utilisateur se nomme «RegistrationForm». Si toutes ces contraintes ne sont pas respectées, un message d erreur indiquera le problème. Celui-ci est précisé par l attribut «arg» dont la clé fait référence au message défini dans le fichier «properties» permettant de rendre l application multilingue. Dans la classe «RegistrationAction.java» qui permet de gérer les actions relatives au formulaire d enregistrement, la méthode «save()» sera appelée et provoquera la validation des données. Elle entraînera ensuite la création d un nouvel utilisateur : en effet, après avoir vérifié que le nom d utilisateur n existait pas déjà, on récupère la base de données courante pour y ajouter le nouvel utilisateur. Cette base de données est en faite modélisée par la classe «UserDatabase». Plutôt que d utiliser une base de données conventionnelle, les utilisateurs sont stockés, le temps d une session, via des objets java, en suivant cette architecture : La base de données est modélisée par la classe «MemoryUserDatabase» qui implémente l interface «UserDatabase». On représente l ensemble des utilisateurs avec une «hashmap» appelé «users» dans laquelle on ne conserverait que les noms d utilisateurs. Ainsi, il sera plus simple de déterminer si un utilisateur est déjà stocké dans la base de données ou pas. Sont aussi définis des attributs pour stocker le chemin dans lequel sera placé le fichier xml contenant nos données, ainsi que des méthodes pour ajouter, rechercher ou supprimer des utilisateurs. Parallèlement, sont aussi définies les classes «MemoryUserCreationFactory» et «MemorySubscriptionCreationFactory» qui implémentent toutes deux l interface «ObjectCreationFactory». Celles-ci permettront de construire les utilisateurs et leurs comptes en créant des objets «User» et «Subscriptions» à partir d un fichier xml puisque les données sont d abord stockées dans un fichier xml avant la construction d objets. MemoryUserDatabase <<interface>> UserDatabase +createuser(string username): User +close() +finduser(string username): User +findusers(): User[] +isopen(): boolean +open() +removeuser(user user) +save() +log: Log +users: HashMap +open: boolean +pathname: String +pathnameold: String +pathnamenew: String +getpathname(): String +close() +createuser(string username): User +finduser(string username): User +findusers(): User[] +open() +removeuser(user user) +save() +isopen(): boolean Figure 18 : Portion du diagramme de classe permettant de modéliser la base de données des utilisateurs Dans notre cas, nous ferons surtout appel à la méthode «save ()» qui permettra d écrire les données dans un document xml. Pour cela, il faut boucler sur le nombre d utilisateurs et parcourir les utilisateurs un à un pour pouvoir les afficher en faisant appel à leur méthode «tostring()». Il faut procéder de la même manière avec chacun des comptes des utilisateurs comme suit : page 22 of 69

23 File filenew = new File(pathnameNew); PrintWriter writer = null; try { FileOutputStream fos = new FileOutputStream(fileNew); OutputStreamWriter osw = new OutputStreamWriter(fos); writer = new PrintWriter(osw); writer.println("<?xml version='1.0'?>"); writer.println("<database>"); User yusers[] = findusers(); for (int i = 0; i < yusers.length; i++) { writer.print(" "); writer.println(yusers[i]); Subscription subscriptions[] = yusers[i].getsubscriptions(); for (int j = 0; j < subscriptions.length; j++) { writer.print(" "); writer.println(subscriptions[j]); writer.print(" "); writer.println("</subscription>"); } writer.print(" "); writer.println("</user>"); } writer.println("</database>"); L Annexe 6 est un exemple typique de document que l on peut obtenir. Comme nous avons pu le constater, nous manipulons des objets «User». Ceux-ci permettent de modéliser les utilisateurs. Ainsi, la classe Abstraite «AbstractUser» implémente l interface «User». Cette classe contient la définition de chacun des champs saisis dans le formulaire d enregistrement d un nouvel utilisateur. Une «hashmap» est aussi définie pour pouvoir stocker les comptes de messageries. Pour chacun des attributs, sont définis des accesseurs (méthodes «get») et des modificateurs (méthode «set»). Enfin, la base de données utilisée est aussi définie. La classe «MemoryUser» va donc hériter de la classe «AbstractUser».C est dans cette classe que l on va définir la méthode «tostring()» grâce à laquelle on va afficher les utilisateurs dans un document xml. page 23 of 69

24 AbstractUser <<interface>> User +getdatabase(): UserDatabase +getfromaddress(): String +getfullname(): String +setfullname(string fullname) +getpassword(): String +setpassword(string password) +getreplytoaddress(): String +setreplytoaddress(string replytoaddress) +getsubscriptions(): Subscription[] +getusername(): String +createsubscription(string host): Subscription +findsubscription(string host): Subscription +removesubscription(subscription subscription) +database: UserDatabase +subscriptions: HashMap +username: String +fromaddress: String +fullname: String +password: String +replytoaddress: String +getdatabase(): UserDatabase +getfromaddress(): String +setfromaddress(string fromaddress) +getfullname(): String +setfullname(string fullname) +getpassword(): String +setpassword(string password) +getreplytoaddress(): String +setreplytoaddress(string replytoaddress) +getsubscriptions(): Subscription[] +getusername(): String +createsubscription(string host): Subscription +findsubscription(string host): Subscription +removesubscription(subscription subscription) MemoryUser +tostring(): String Figure 19 : Portion du diagramme de classe permettant de modéliser les utilisateurs de l application Mailreader Enfin, les comptes de messageries de chacun des utilisateurs sont représentés via la classe abstraite «AbstractSubscription» qui implémente l interface «Subscription». On y définit tous les champs saisis lors de l ajout d un nouveau compte puis on définit, pour chacun des attributs, leur accesseur et modificateur respectifs. On définit aussi une méthode «tostring()» qui permet d afficher les informations concernant les comptes de messageries dans le document xml (Annexe 4). AbstractSubscription <<interface>> Subscription +getautoconnect(): boolean +setautoconnect(boolean autoconnect) +gethost(): String +getpassword(): String +setpassword(string password) +gettype(): String +settype(string type) +getuser(): User +getusername(): String +setusername(string username) +host: String +user: User +autoconnect: boolean +password: String +type: String +username: String +getautoconnect(): boolean +setautoconnect(boolean autoconnect) +gethost(): String +getpassword(): String +setpassword(string password) +gettype(): String +settype(string type) +getuser(): User +getusername(): String +setusername(string username) +tostring(): String MemorySubscription Figure 20 : Portion du diagramme de classe permettant de modéliser les comptes de messagerie électronique des utilisateurs de l application Mailreader Cette structure permet donc de sauvegarder les utilisateurs et leur compte de messageries. Enfin, lorsque l on appuie sur le bouton «reset» du formulaire d enregistrement d un nouvel utilisateur, cela déclenche un appel à la méthode «reset» située dans le bean «RegistrationForm» associé. Cette méthode repasse à la valeur nulle chacun des champs du formulaire. Authentification des utilisateurs page 24 of 69

25 Lorsqu un utilisateur atteint le formulaire d authentification, il doit renseigner son nom d utilisateur et son mot de passe et en soumettre les données. L action «SubmitLogon» va donc appeler la méthode «execute» de la classe «LogonAction», comme c est défini dans le fichier de configuration «struts-config.xml». Cette méthode vérifie si le nom d utilisateur et le mot de passe saisis existent bien dans notre base de données. Si c est le cas, l utilisateur sera dirigé vers son menu principal. Sinon, un message d erreur indiquera un problème. Menu principal d un utilisateur connecté Lorsque l utilisateur accède à cette page, deux liens lui seront présentés : l un permet l accès au profile de l utilisateur tandis que l autre permet à l utilisateur de se déconnecter. Profil personnel d un utilisateur connecté Par ailleurs, lorsque l utilisateur demande l accès à son profile en cliquant sur le lien correspondant, l action «EditRegistration» va de nouveau être appelée. Elle enclenchera l affichage de la page «registration.jsp». L attribut «task» aura cette fois-ci la valeur «edit». Ainsi, les valeurs qui avaient été saisies lors de l inscription de l utilisateur seront réaffichées (mis à part les mots de passe) grâce à l appel de balises «<bean :write>» qui permettront d écrire la valeur des attributs d un bean (ici, «RegistrationForm»). Le tableau des comptes mails sera affiché car il ne peut l être qu à condition que l attribut «task» ai la valeur «edit». La balise «<logic :iterate>» permet d effectuer des appels itératifs sur les beans. Elle permettra donc, dans ce cas, de parcourir un à un les comptes de l utilisateur pour pouvoir les afficher avec une balise «<bean :write>». Ainsi, sera appelé le bean «SubscriptionForm» associé au formulaire d ajout d un compte de messagerie. Saisie d un nouveau compte Lorsqu un utilisateur clique sur le lien «add» situé sous le tableau des comptes dans la page son profile personnel, l action «EditSubscription» est appelée. Elle nous dirigera vers le formulaire d ajout d un nouveau compte définie dans le fichier «Subscription.jsp». De façon similaire à l enregistrement d un nouvel utilisateur, le bouton «save» appellera l action «SaveSubscription» tandis que le bouton cancel nous redirige vers la page précédente. Déconnection Lorsque l utilisateur se déconnecte, l action «Logoff» est appelée. Elle va rediriger l utilisateur vers la page d accueil compte-tenu de sa définition dans le fichier de configuration «struts-config.xml». Parallèlement, la méthode «execute» de la classe «LogoffAction» qui lui est associée va effacer les attributs de la session courante Modifications effectuées sur la structure de l application Mailreader Avant d ajouter de nouvelles fonctionnalités dans notre application, nous allons d abord ajouter une nouvelle section dans le formulaire d enregistrement d un nouvel utilisateur, ceci dans le but d avoir plus de matière pour mettre en place de nouveaux modules. Cette section permettra à l utilisateur de saisir ses coordonnées personnelles avant d avoir à saisir les informations plus spécifiques à son authentification dans le Mailreader. Pour cela, il nous faut d abord définir les champs à intégrer. L utilisateur devra saisir son prénom et son nom. Il devra ensuite préciser son sexe et sa date de naissance. Enfin, nous souhaitons aussi connaître la localisation de l utilisateur : il faudra donc qu il précise son pays page 25 of 69

26 et sa ville de résidence. Afin de rendre la saisie de ces informations plus rapide, l utilisateur devra utiliser des listes déroulantes pour sélectionner son sexe, son pays et sa ville de résidence. Pour effectuer ces modifications, il ne faudra pas perdre de vue que l application est de type Struts et, qu en conséquence, elle doit respecter l architecture MVC. Ainsi, la modification de notre formulaire n aura pas que des répercutions sur la vue mais aussi sur les deux autres couches du modèle MVC. Modifications sur le modèle : Étant donné que l on va rajouter les coordonnées des utilisateurs, il faut que l on rajoute ces informations dans notre modèle pour qu elles soient enregistrées. Rappelons que le modèle représentant les utilisateurs se présente comme suit : AbstractUser <<interface>> User +getdatabase(): UserDatabase +getfromaddress(): String +getfullname(): String +setfullname(string fullname) +getpassword(): String +setpassword(string password) +getreplytoaddress(): String +setreplytoaddress(string replytoaddress) +getsubscriptions(): Subscription[] +getusername(): String +createsubscription(string host): Subscription +findsubscription(string host): Subscription +removesubscription(subscription subscription) +database: UserDatabase +subscriptions: HashMap +username: String +fromaddress: String +fullname: String +password: String +replytoaddress: String +getdatabase(): UserDatabase +getfromaddress(): String +setfromaddress(string fromaddress) +getfullname(): String +setfullname(string fullname) +getpassword(): String +setpassword(string password) +getreplytoaddress(): String +setreplytoaddress(string replytoaddress) +getsubscriptions(): Subscription[] +getusername(): String +createsubscription(string host): Subscription +findsubscription(string host): Subscription +removesubscription(subscription subscription) MemoryUser +tostring(): String Figure 21 : Rappel de la portion du diagramme de classe permettant de modéliser les utilisateurs de l application Mailreader Il nous faut donc rajouter les informations pour décrire le prénom, le nom, le sexe, la date de naissance, le pays et la ville de l utilisateur définis respectivement par les attributs «firstname», «lastname», «gender», «dateofbirth», «country» et «city» dans la classe «AbstractUser».On défini, pour chacun de ces attributs, les accesseurs et modificateurs correspondants. Ceux-ci devront alors être déclarés dans l interface «User». Enfin, dans la classe «MemoryUser», il nous faut compléter la méthode «tostring()» afin de permettre l affichage de ces nouvelles informations dans le fichier xml dans lequel seront stockées nos données. Enfin, nous allons devoir modifier la méthode «createobject» de la classe «MemoryUserCreationFactory» puisque cette méthode permet de créer un utilisateur à partir du fichier xml contenant les informations relatives à cet utilisateur. Or, nous avons intégrer les nouvelles informations dans le document xml de stockage, donc il va nous falloir récupérer ces nouvelles données pour créer un objet «user» qui tiennent compte de ces données. Modifications sur la vue : page 26 of 69

27 Nous allons donc rajouter dans le formulaire d enregistrement d un nouvel utilisateur, les champs définis précédemment. Les champs «firstname» et «lastname» décrivant respectivement les prénom et nom de l utilisateur correspondront à des champs de saisie de texte. Il en sera de même pour la date de naissance. Cependant, pour le sexe de l utilisateur ainsi que sa ville et son pays de résidence, nous utiliserons des listes déroulantes. Pour chacun de ces champs, il faudra préciser un label. Or, il ne faut pas oublier que notre application est disponible en plusieurs langues. Aussi, nous définirons les labels de nos nouveaux champs, de la même façon qu étaient définis les champs existants préalablement, en utilisant des fichiers de «properties». On précisera donc pour chacun de nos labels, sa valeur en anglais, japonais puis russe. Modifications sur le contrôleur : Nous avons ajouté de nouveaux champs à notre formulaire. Il faut désormais modifier le bean «RegistrationForm» qui lui est associé en rajoutant les attributs représentant ces champs ainsi que leur accesseur et modificateur respectif. On y modifie aussi la méthode «reset» qui attribuait la valeur «null» à chacun des attributs en y rajoutant nos nouveaux attributs que l on passera aussi à «null». Dans le fichier de configuration de Struts appelé «struts-config.xml», nous avions défini chacun de nos beans et en particulier «RegistrationForm» en décrivant chacun de ses attributs. Il faut donc rajouter les attributs associés à nos nouveaux champs ainsi que leur type respectif comme suit : <form-bean name="registrationform" extends="baseform"> <form-property name="firstname" type="java.lang.string"/> <form-property name="lastname" type="java.lang.string"/> <form-property name="gender" type="java.lang.string"/> <form-property name="dateofbirth" type="java.lang.string"/> <form-property name="country" type="java.lang.string"/> <form-property name="city" type="java.lang.string"/> <form-property name="fromaddress" type="java.lang.string"/> <form-property name="password2" type="java.lang.string"/> <form-property name="replytoaddress" type="java.lang.string"/> </form-bean> Enfin, il ne faut pas oublier que nous utilisons le validateur de Struts et qu il faut donc définir les contraintes sur nos nouveaux champs. Chacun des champs nouvellement défini devra obligatoirement être saisi, excepté pour le sexe de l utilisateur. Il faudra donc, à chaque fois, préciser le message à afficher s ils sont manquants. Ceux-ci devront aussi être décrits dans des fichiers de «properties» pour chacune des langues (Annexe 7) Description des fonctionnalités Ajax à ajouter dans notre application Afin d être complètement impartial quant aux l implémentation sur cette exemple, nous allons définir fonctionnalités Ajax qu il nous faudra ajouter dans fonctionnalités seront ajoutées aussi bien avec la librairie Dojo. conclusions à tirer suite à préalablement un ensemble de l application Mailreader. Ces Ajaxtags qu avec le framework Fonctionnalités à ajouter au formulaire d enregistrement d un nouvel utilisateur : page 27 of 69

28 Le formulaire d enregistrement d un nouvel utilisateur se présente de la façon suivante : On dispose de deux sections : l une est réservée à la saisie des données personnelles de l utilisateur tandis que l autre permet de saisir les informations relatives à l inscription au Mailreader Figure 22 : Aperçu de la page d enregistrement d un nouvel utilisateur suite à l ajout de la section réservée à la saisie des informations personnelles des utilisateurs Afin d éviter des erreurs de saisies, nous allons lier les listes déroulantes de sélection des pays et celles des villes afin que la sélection d un pays provoque la mise à jour de la liste des villes : de cette façon, il ne sera pas possible, pour un utilisateur de choisir une ville qui ne soit pas dans le pays sélectionné préalablement. Cette mise à jour devra faire intervenir une fonctionnalité Ajax afin d éviter de devoir rafraîchir toute la page lorsqu un pays sera sélectionné. Cette fonctionnalité est particulièrement intéressante puisqu elle devra nécessairement récupérer des données côté serveur, et nous permettra donc d évaluer la façon dont le client communique avec le serveur pour chacun des deux frameworks. Par ailleurs, même si Struts dispose d un validateur des données saisies, celui-ci n intervient que lors de la soumission du formulaire. L idée serait donc d indiquer en temps réel à l utilisateur s il a effectué une erreur de saisie. Ces contrôles seront particulièrement intéressants pour des champs comme des dates ou des adresses . Fonctionnalités à ajouter dans la page contenant le profile personnel d un utilisateur Le profile personnel d un utilisateur inscrit est composé d abord du formulaire d inscription pré-rempli, ainsi que du tableau des comptes de cet utilisateur. Nous souhaitons, dans un premier temps, avoir la possibilité de trier le tableau des comptes par colonne, c està-dire que l on trierait les lignes du tableau selon la colonne dont on sélectionnera l entête. Ainsi, si on clique sur l entête de la colonne «username», les lignes du tableau seraient triées selon l ordre alphabétique de leur nom d utilisateur («username»). page 28 of 69

29 On souhaiterait aussi avoir la possibilité de rechercher des comptes de messagerie selon leur nom d utilisateur. Pour ce faire, on doit d abord mettre en place un champ texte qui permettra de saisir le nom d utilisateur du compte recherché. Afin de rendre cette recherche plus rapide et efficace, ce champ texte sera complété automatiquement à la manière de «google suggest» c est-à-dire que dès la saisie des premières lettres, une liste déroulante contenant des noms d utilisateur débutant par ces lettres apparaîtra. Une fois qu un nom d utilisateur sera sélectionné parmi la liste des suggestions, le tableau des comptes sera mis à jour. Autre fonctionnalité Enfin, afin d expliquer la mise en place des onglets, nous allons les utiliser pour rendre plus conviviale la page effectuant le tour d horizon de l application. Le passage d un onglet à l autre devra être fluide pour que cette fonctionnalité ait une véritable utilité. Remarquons que chacune des fonctionnalités décrites précédemment devra être rapide et utilisera donc la technique de développement Ajax Environnement de développement IDE : Puisque nous allons travailler à partir d une application J2EE 1.4 de type Struts, nous utiliserons la version 3.3 de l IDE Eclipse JEE. Cet IDE est, en effet, parfaitement adapté à notre cas puisqu il permet de faire du développement J2EE. Serveur d application : Nous devons ensuite choisir un serveur d application. Tomcat est l un des plus populaires mais son utilisation avec une application J2EE 1.4 nécessite l utilisation d un package spécifique pour éviter toute incompatibilité. Aussi, nous opterons plutôt pour Glassfish. Celuici s intègre parfaitement dans Eclipse et est compatible tant avec la version 1.4 que la version 5.0 du JDK. Cette précision a son importance puisqu il ne faut pas perdre de vue que nous souhaitons travailler avec une application J2EE 1.4. Struts : Nous allons utiliser la dernière version de Struts 1 (version 1.3.8). Celle-ci est téléchargeable sur son site officiel Il suffira alors de placer ses fichiers jars dans le répertoire WEB-INF/lib de notre application web. Nous choisirons de prendre le package complet (Full distribution) puisqu il contient quelques exemples et notamment notre application Mailreader. Ajaxtags : Ajaxtags est un projet Open Source donc nous pouvons le télécharger à l adresse On téléchargera et désarchivera alors le fichier «ajaxtags-1.3-beta-rc7-bin.zip». Pour utiliser nos tags, il nous suffira alors de récupérer le fichier «ajaxtags-1.3-beta-rc7-bin.jar» ainsi que tous les jars contenus dans le répertoire lib et de les placer dans le répertoire WEB-INF/lib de notre application. Puisque Ajaxtags dépend d un certain nombre de librairies javascript, il faut récupérer le répertoire web/js et le placer dans le répertoire «webcontent» de notre application. On procèdera de la même façon avec le page 29 of 69

30 répertoire «css» contenant les feuilles de style associées à nos tags. On récupère donc le fichier «css» qui était dans le répertoire «web» de l archive et on le place dans le répertoire «webcontent». Enfin, il ne faudra pas oublier à la fois de déclarer chacun des fichiers javascript utilisés mais aussi le fichier TLD (Tag library Descriptor) dans lequel sont définis nos tags Ajaxtags. Dojo: Nous allons opter pour le package Ajax du framework Dojo puisqu il nous offre toutes les fonctionnalités dont on pourrait avoir besoin. Celui-ci est téléchargeable à l adresse download.dojotoolkit.org/release-0.4.0/dojo ajax/ Nous allons ensuite placer les fichiers «dojo.js», «dojo.js.uncompressed.js» ainsi que tout le contenu du répertoire «src» dans un nouveau répertoire que l on nommera «dojo». On placera ce dernier dans le répertoire «webcontent/js» de notre application Ajout de fonctionnalités Ajax dans l application Mailreader Nous allons, à présent, intégrer dans notre application Mailreader, les fonctionnalités Ajax que l on a définies auparavant. Nous commencerons par les intégrer en utilisant la librairie de tags «Ajaxtags» avant d ensuite utiliser le framework javascript Dojo. Ajout de fonctionnalités Ajax dans l application Mailreader via le framework Ajaxtags o Mise en place de listes déroulantes liées pour la saisie du lieu de résidence de l utilisateur : Nous souhaitons permettre à l utilisateur de saisir son lieu de résidence en sélectionnant d abord un pays dans une première liste déroulante. Puis, en fonction de la valeur choisie, une seconde liste déroulante contiendra une liste de villes de ce pays. Nous allons donc devoir définir les pays ainsi que les villes qui leur sont associées. Pour cela, puisque nous ne disposons pas de base de données, nous allons construire des objets, grâce auxquels nous pourrons définir nos listes en dur. Nous utiliserons pour cela la structure suivante : Nous commencerons par définir une classe en java qui permettra de modéliser nos villes. Cette classe contiendra donc deux attributs : une chaine de caractères pour définir le nom du pays dans lequel se situe une ville et une autre pour définir le nom de la ville. Il faudra aussi veiller à ce que cette classe soit bien «serializable» puisque nos données transiteront entre client et serveur. Cette classe appelée «city» se présentera comme suit: public class City implements Serializable { private static final long serialversionuid = 1L; private String CityName; private String CountryName; } page 30 of 69

31 A cela nous rajouterons les constructeurs, les accesseurs et les modificateurs. Nous allons ensuite créer une classe dans laquelle nous définirons, «en dur», une liste des villes de cinq pays européens. Remarquons que puisqu il ne s agit là que d une application test, il ne sera pas nécessaire de rajouter plus de pays. On a donc définit cette classe comme suit : public class CitiesList { private static List<City> villes = new ArrayList<City>(); static { villes.add(new City("Lyon","France")); villes.add(new City("Paris","France"));... /** * Espana's biggest cities */ villes.add(new City("A Coruña","Espana")); villes.add(new City("Albacete","Espana"));... /** * England's biggest cities */ villes.add(new City("Bath","England")); villes.add(new City("Birmingham","England"));... /** * Germany's biggest cities */ villes.add(new City("Berlin","Deutschland")); villes.add(new City("Hamburg","Deutschland"));... /** * Italy's biggest cities */ villes.add(new City("Roma","Italia")); villes.add(new City("Milano","Italia")); } Nous possédons désormais une liste de «City» dans laquelle est définie chaque ville associée à son pays. Regardons maintenant comment nous allons procéder : nous allons commencer par construire la liste déroulante des pays. Étant donné que nous n utilisons que cinq pays, nous pouvons la construire manuellement comme suit : <select id="country"> <option value="">select a Country</option> <option value="france">france</option> <option value="espana">espana</option> <option value="england">england</option> <option value="deutschland">deutschland</option> page 31 of 69

32 <option value="italia">italia</option> </select> Nous construisons ensuite une liste déroulante qui sera réservée à la liste des villes et qui sera vide jusqu à ce qu un pays soit sélectionné dans la liste des pays. Elle sera aussi désactivée avec l attribut «disabled». De cette façon, un utilisateur ne pourra pas sélectionner une ville sans avoir préalablement indiquer son pays de résidence. <select id="city" disabled="disabled"> <option value="">select a City</option> </select> Nous allons ensuite utiliser un tag Ajaxtags qui va nous permettre de faire le lien entre la liste déroulante des villes et celle des pays. Ce tag «<ajax :select>» nous permet de définir une source («source») et une cible («target») correspondant respectivement à la liste déroulante des pays («country») et la liste déroulante des villes («city»). Cela signifie que l on enverra au serveur le nom du pays sélectionné via l attribut «parameters» et qu une fois que l on aura filtré la liste complète des villes pour ne garder que celles qui appartiennent au pays sélectionné, on enverra alors une réponse vers la cible, c est-à-dire la liste déroulante des pays. Cette réponse sera créée dans la servlet définie par l attribut «baseurl». <ajax:select baseurl="${pagecontext.request.contextpath}/personalinformation.view" source="country" target="city" parameters="country={country}" prefunction="initprogress_dropdown" emptyoptionname="select a City" postfunction="resetprogress_dropdown" errorfunction="reporterror_dropdown" /> La servlet utilisée ici, «PersonalInformationServlet» va d abord récupérer la valeur du pays sélectionné grâce à l attribut «parameters». Elle va alors utiliser la structure «AjaxXmlBuilder», définie avec la librairie Ajaxtags afin de construire des documents xml, en ajoutant simplement un à un les éléments. Pour pouvoir utiliser cette structure, notre servlet doit hériter de la classe «BaseAjaxServlet», elle aussi étant spécifique à Ajaxtags. On va alors définir la méthode «getxmlcontent» qui construit la réponse comme suit : public String getxmlcontent(httpservletrequest request, HttpServletResponse response) throws Exception { String country = request.getparameter("country"); List<City> list = CitiesList.getCitiesByCountry(country); AjaxXmlBuilder xml = new AjaxXmlBuilder(); int c =0; for (int i=0;i<list.size();i++) { String bool = "false"; if (c==0) { bool = "true"; } c++; xml.additem(list.get(i).getcountryname(),true,list.get(i).getcountryname(),bool); } System.out.println(xml.toString() + " -- "); page 32 of 69

33 System.out.println("httpservlerrequest " + request.tostring()); return xml.tostring(); } Cette méthode prend en paramètre des objets «HttpServletRequest» et «HttpServletResponse» représentant respectivement la requête et la réponse. La requête nous permettra de récupérer le paramètre envoyé (ici, le nom du pays sélectionné). On construit alors la réponse en parcourant la liste des villes et en ne sélectionnant que celles qui appartiennent au pays sélectionné. Celles-ci seront alors ajoutée une à une à notre document xml. On retournera finalement la réponse au format xml convertie en une chaine de caractères qui sera de la forme suivante, lorsqu un utilisateur sélectionnera comme pays l Angleterre («England») : <?xml version="1.0" encoding="utf-8"?> <ajax-response> <response> <item> <name><![cdata[bath]]></name> <value><![cdata[bath]]></value> <value><![cdata[true]]></value> </item> <item> <name><![cdata[birmingham]]></name> <value><![cdata[birmingham]]></value> <value><![cdata[false]]></value> </item> <item> <name><![cdata[bradford]]></name> <value><![cdata[bradford]]></value> <value><![cdata[false]]></value> </item> <item> <name><![cdata[brighton & Hove]]></name> <value><![cdata[brighton & Hove]]></value> <value><![cdata[false]]></value> </item> </response> </ajax-response> Cette réponse est alors parsée à l aide du parser par défaut défini par Ajaxtags. Ainsi, puisque l on avait définie la liste déroulante des villes comme étant la cible, les valeurs vont être récupérées et vont alimenter cette liste déroulante comme suit : page 33 of 69

34 Figure 23 : Aperçu de la page d enregistrement d un nouvel utilisateur suite à l ajout des listes déroulantes liées permettant d indiquer le pays et la ville de résidence de l utilisateur: ici, en sélectionnant comme pays l Angleterre, on obtient une liste des villes d Angleterre. Pendant que la liste déroulante des villes sera construite, un indicateur permettra de préciser à l utilisateur que la mise à jour de la liste est en cours. Pour cela, nous avons précisé dans le paramètre «prefonction» de notre tag «<ajax :select>», qu il fallait appeler la méthode «initprogressdropdown». Cette méthode permet de créer une animation à l aide d une flèche dégradée. Pour la mettre en place, nous avons défini l emplacement de cet indicateur à l aide d une balise html «span» à laquelle on attribue un identifiant, et qui contient l image d une flèche. <span id="progressmsg" style="display:none;"><img alt="indicator" src="<%=request.getcontextpath()%>/img/indicator.gif" /> Loading...</span> La méthode «initprogressdropdown» correspond, en faite, à une fonction javascript qui se contente d appeler l image via l identifiant défini précédemment et de créer un effet dégradé avec la flèche. function initprogress_dropdown() { Element.show('progressMsg'); } Ainsi, lorsque l on sélectionne un pays, on obtiendra le résultat suivant : Figure 24 : Aperçu des listes déroulantes liées réservées à la sélection du pays et de la ville de résidence d un nouvel utilisateur: ici, suite à la sélection d un pays (Angleterre), la liste déroulante des pays d Angleterre est chargée et une animation indique que le chargement est en cours page 34 of 69

35 o Validation des données saisies dans le formulaire d inscription : Nous souhaitons désormais que des messages indiquent, en temps réel, la validité des données. Pour cela, nous allons d abord rappeler les contraintes sur chacun des champs du formulaire d enregistrement d un nouvel utilisateur : Les nom et prénom des utilisateurs correspondent à des chaines de caractères ne comportant pas de chiffres. La date de naissance doit avoir le format d une date européenne c est-à-dire de la forme jj/mm/aaaa Le nom d utilisateur correspond à une chaine de caractères quelconque (contenant lettres et chiffres) dont la taille doit être comprise entre trois et seize caractères Le mot de passe et le mot de passe de confirmation doivent tout deux être composés de caractères quelconque d au moins trois caractères et d au plus seize. Les adresses mail «fromaddress» et «ReplyToAddress» impérativement avoir le format d une adresse mail valide. Les champs «Gender», «Country» et «City» servant respectivement à saisir le sexe de l utilisateur, le pays et la ville de résidence ne nécessiteront pas de validation particulière puisqu il s agit de liste déroulante et que leur saisie n est pas obligatoire. Tous les champs sauf «ReplyToAdress», «Gender», «Country» et «City» doivent impérativement être renseignés. doivent Pour afficher des messages de validation, nous allons utilisé le tag Ajaxtags «<ajax :htmlcontent>». Ce tag est essentiel puisqu il permet d injecter du code html directement dans nos pages. De cette façon, non seulement nous pourrons afficher nos messages, mais nous pourrons aussi en modifier la couleur et la police. Regardons, par exemple, le cas de la validation de la date de naissance: Le tag «<ajax :htmlcontent >» fonctionne de façon similaire au tag «<ajax :select>». La source correspondra au champ de saisie de la date de naissance. On définit ensuite une zone dans la page à l aide d une balise <div> dont l identifiant correspondra à la cible de notre tag. Ainsi, le message que l on enverra sera affiché à cet emplacement lors d un évènement de type onchange, c est-à-dire lorsque l utilisateur aura saisie une valeur. On définit aussi une servlet qui construira la réponse. Celle-ci est déclarée via l attribut «baseurl». <ajax:htmlcontent baseurl="$ {pagecontext.request.contextpath}/birthdatevalidationformservlet.view" source="dateofbirth" target="validationdateofbirth" parameters="dateofbirth={dateofbirth}" page 35 of 69

36 eventtype="change"> </ajax:htmlcontent> La servlet va donc analyser la valeur saisie et déterminer si elle est valide en vérifiant si elle respecte l expression régulière que l on a définie. Pour pouvoir définir une expression régulière, on va utiliser la classe «Pattern». On va ensuite vérifier que chaque caractère respecte notre expression régulière. On souhaite, par ailleurs respecter l internationalisation. Aussi, nous allons créer un objet de type «Properties» qui va nous permettre d appeler les messages d erreurs que l on a définis préalablement dans nos fichiers «properties». Rappelons que l on souhaite que la date ait le format jj/mm/aaaa. On procèdera alors comme suit : response.setcontenttype("text/html"); response.setheader("cache-control", "no-cache"); String dateofbirth = request.getparameter("dateofbirth"); Properties pr = new Properties(); pr.load(new FileInputStream(Constants.PROPERTY_FILE)); Pattern p = Pattern.compile("^(?:(?:0?[1-9] 1\\d 2[0-8])(\\/ -)(?:0? [1-9] 1[0-2]))(\\/ -)(?: [1-9]\\d\\d\\d \\d[1-9]\\d\\d \\d\\d[1-9]\\d \\d\\d\\d[1-9])$ ^(?: (?:31(\\/ -)(?:0?[13578] 1[02])) (?:(?:29 30)(\\/ -)(?:0?[1,3-9] 1[0-2]))) (\\/ -)(?:[1-9]\\d\\d\\d \\d[1-9]\\d\\d \\d\\d[1-9]\\d \\d\\d\\d[1-9])$ ^(29(\\/ -)0?2)(\\/ -)(?:(?:0[48]00 [13579][26]00 [2468][048]00) (?:\\d\\d)?(?:0[48] [2468][048] [13579][26]))$"); String message = pr.getproperty("error.birthdate.invalid"); Matcher m = p.matcher(dateofbirth); boolean result = m.find(); while(result){ message = pr.getproperty("validation.birthdate"); result=m.find(); } PrintWriter out = response.getwriter(); out.println(message); Le message sera alors affiché dans la cible. Celle-ci correspond à un emplacement situé à proximité du champ texte en question. Rappelons qu un message d erreur sera affiché en rouge si une erreur de saisie a été effectuée. Sinon, un message de validation, écrit en vert, indiquera à l utilisateur que la valeur qu il a saisi est valide. On obtiendra alors le rendu suivant : Figure 25 : Validation de la saisie d une date de naissance: à droite, la date de naissance saisie est valide tandis qu à gauche, elles sont erronées. En effet, l une correspond à une chaine de caractères tandis que l autre ne respecte pas le format de date européen (jj/mm/aaaa) Remarquons que nous ne gérons ici, que les cas d invalidité. Toutefois, si ce champ devait obligatoirement être renseigné, il faudrait aussi gérer le cas où aucune valeur n a été saisie en affichant un message demandant à l utilisateur de renseigner ce champ. page 36 of 69

37 Nous procèderons alors de façon similaire pour valider chacun de nos champs en définissant à chaque fois l expression régulière correspondant au format attendu. On vérifiera aussi, lorsque cela sera nécessaire, si une valeur a bien été saisie ou non. Ainsi, selon le cas, on obtiendra un rendu différent : Figure 26 : Validation des données saisies dans le formulaire d enregistrement d un nouvel utilisateur: à gauche toutes les données sont valides tandis qu elles sont toutes erronées à droite o Affichage des comptes dans un tableau «triable» : Regardons à présent comment procéder pour pouvoir trier notre tableau de comptes selon la colonne sélectionnée. Rappelons d abord que le tableau de comptes se situe dans la page réservée au profile personnel d un utilisateur connecté. Ce tableau est construit de façon standard à l aide de la balise html <table>, dans lequel on commence par définir l entête comme suit : <table border="1" width="500" align="center"> <tr> <th align="left" width="100"> <bean:message key="heading.host" /> </th> <th align="left" width="100"> <bean:message key="heading.user" /> </th> <th align="left" width="110"> <bean:message key="heading.type" /> </th> <th align="left" width="90"> <bean:message key="heading.autoconnect" </th> <th align="left" width="100"> <bean:message key="heading.action" /> </th> </tr> /> page 37 of 69

38 On définit l intitulé de chaque colonne, en faisant appel à la balise <bean :message > afin d utiliser les labels définis dans nos fichiers «properties» et préserver ainsi l internationalisation. La balise <bean :write> servira à remplir le tableau en y inscrivant les valeurs du bean associé au formulaire d ajout d un compte. En effet, ce bean stocke les comptes de l utilisateur courant. Aussi, il nous suffira de boucler sur ces comptes avec une balise <logic :iterate> et d en afficher les valeurs comme suit : <logic:iterate name="user" property="subscriptions" id="subscription"> <tr> <td align="left"> <bean:write name="subscription" property="host"/> </td> <td align="left"> <bean:write name="subscription" property="username"/> </td> <td align="center"> <bean:write name="subscription" property="type"/> </td> <td align="center"> <bean:write name="subscription" property="autoconnect"/> </td> <td align="center"> <html:link action="/deletesubscription" paramname="subscription" paramid="host" paramproperty="host"> <bean:message key="registration.deletesubscription"/> </html:link> <html:link action="/editsubscription" paramname="subscription" paramid="host" paramproperty="host"> <bean:message key="registration.editsubscription"/> </html:link> </td> </tr> </logic:iterate> Remarquons que les balises <html :link> nous permettent de créer des liens html associés à une action Struts. Ainsi, le lien «delete» appellera l action «/DeleteSubscription» et permettra ainsi de supprimer uniquement le compte désiré. Nous souhaitons désormais trier les lignes du tableau selon la colonne sélectionnée. Pour cela, nous allons utiliser la librairie javascript «sortable» qui va rendre notre tableau triable simplement en ajoutant, dans la définition du tableau, l attribut suivant «classe= sortable». Le tableau deviendra alors triable. Seulement, nous souhaitons que le tri s effectue en faisant appel à une fonctionnalité Ajax afin de rendre le procédé plus rapide. Pour cela, nous allons utiliser la balise <ajax :area>. Cette dernière permet d «ajaxiser» une partie d une page en forçant tous les liens et toutes les ressources à être rechargés dans cette zone. Il nous suffit donc d envelopper notre tableau dans une balise <ajax :area> pour «ajaxiser» le tri de notre tableau. <ajax:area id="ajaxframe" style="width:100px; min-height:300px; height:300px;" styleclass="textarea" ajaxflag="true"> <table class="sortable" border="1" width="500" align="center"> </table> </ajax:area> page 38 of 69

39 L attribut «ajaxflag» permet de préciser si l on souhaite que le reste de la page soit ignoré ou pas. Puisque l on souhaite que seul le tableau soit rechargé lors d un tri, nous lui attribuons la valeur «true». On obtient alors un tableau de la forme suivante : Figure 27 : Aperçu de la table des comptes d un utilisateur authentifié dans laquelle les lignes sont par ordre alphabétique selon le nom d hôte à gauche tandis qu à droite, elles sont triées par ordre alphabétique inversé selon le type de serveur. o Recherche de compte : On souhaite désormais permettre à l utilisateur, non seulement d organiser ses comptes, mais aussi de pouvoir en rechercher un en particulier pour accéder aux données le concernant. Ainsi, l utilisateur devra, dans un premier temps, saisir le nom d utilisateur du compte qu il recherche. Pour faciliter cette étape, nous allons ajouter une fonctionnalité permettant l auto-complétion des valeurs saisies c est-à-dire qu à chaque fois que l utilisateur aura saisi un caractère, une liste de propositions contenant tous les noms d utilisateurs qui pourraient correspondre au nom d utilisateur du compte recherché, se mettra à jour automatiquement. Ensuite, selon la valeur sélectionnée dans la liste des propositions, le tableau se mettra à jour pour ne garder que la ou les lignes correspondant à notre recherche. Regardons d abord comment permettre l autocomplétion de la saisie d un nom d utilisateur. Il existe un tag Ajaxtags, appelé <ajax :autocomplete>, qui permet la mise en place de cette fonctionnalité. Celui-ci fonctionne de façon similaire aux précédentes. On définit une fois de plus une source et une cible. La différence ici, proviendra du fait que la cible et la source correspondront au même élément c est-à-dire au champ texte que l on souhaite auto-compléter. Enfin, on a la possibilité d indiquer le nombre minimum de caractères que l utilisateur doit saisir avant qu une liste de suggestions lui soit proposée avec l attribut «minimumcharacters». Nous pouvons aussi ajouter un indicateur qui précisera à l utilisateur que la liste des suggestions est en cours de création. <ajax:autocomplete source="username" target="username" baseurl="${pagecontext.request.contextpath}/autocompleteusername.view" page 39 of 69

40 classname="autocomplete" indicator="indicator" minimumcharacters="1"/> On va ensuite faire appel à une servlet qui va permettre de générer puis de mettre à jour la liste des noms d utilisateurs susceptibles de correspondre à notre saisie. Pour cela, on lui enverra la valeur de la source c est-à-dire la valeur saisie. De son côté, elle va récupérer et parcourir la liste de tous les «usernames» de l utilisateur courant pour ne conserver que ceux qui débutent par les caractères saisis. La réponse sera similaire à celle générée pour la mise à jour de la liste déroulante des villes et sera au format xml converti en une chaine de caractères. Cette réponse sera donc construite via la classe «AjaxXmlBuilder» qui permet de construire un document au format xml simplement en ajoutant un à un les éléments. Nous allons donc récupérer dans une liste les noms d utilisateur débutant par la valeur saisie puis nous les ajouterons un à un dans notre réponse. Pour cela, nous allons d abord récupérer les informations concernant l utilisateur de la session en cours. Nous allons ensuite obtenir le tableau des comptes qu il a enregistré afin d avoir une liste de tous les noms d utilisateurs des comptes enregistrés. On comparera alors la valeur saisie comme suit : public String getxmlcontent(httpservletrequest request, HttpServletResponse response)throws Exception { String username = request.getparameter("username"); HttpSession session = request.getsession(); User u = (User) session.getattribute(constants.user_key); Subscription[] tabsubscription = u.getsubscriptions(); AjaxXmlBuilder xml = new AjaxXmlBuilder(); username = username.touppercase(); for(int i=0;i<tabsubscription.length;i++){ if((tabsubscription[i].getusername().touppercase().startswith (username)) && (!username.equals(""))){ xml.additem(tabsubscription[i].getusername(), tabsubscription[i].getusername()); } } return xml.tostring(); } Ainsi, dès que l utilisateur aura saisi au moins un caractère, une liste de propositions apparaitra comme suit : Figure 28 : Aperçu de la section de recherche d un compte: suite à la saisie de la lettre «u», tous les noms d utilisateurs commençant par cette lettre sont proposés dans une liste déroulante. Dès la sélection de l un de ses noms d utilisateur, le tableau à droite se mettra à jour pour ne contenir que la ou les lignes correspond à ce nom d utilisateur page 40 of 69

41 Nous désirons que dès qu une valeur est sélectionnée dans la liste des propositions, le tableau des comptes se mettent à jour pour ne contenir que les comptes dont le nom d utilisateur débute par la valeur sélectionnée. Pour cela nous allons utiliser le tag Ajaxtags «ajax :htmlcontent». Nous l avions utilisé pour la validation des données saisies puisque ce tag a la particularité de pouvoir injecter du code html dans nos pages. Nous allons donc l utiliser pour afficher un tableau que l on mettra à jour selon la valeur sélectionnée puisqu un tableau est défini via du code html avec une balise <table>. <ajax:htmlcontent baseurl="${pagecontext.request.contextpath}/displaysubscriptiontable.view" source="username" target="affichagetableau" parameters="username={username}" eventtype="focus"> </ajax:htmlcontent> Pour utiliser ce tag, nous allons préalablement définir l emplacement de notre tableau avec une balise <div> contenant un identifiant. Cette zone correspondra donc à la cible tandis que la source sera bien entendu la zone de texte contenant un nom d utilisateur. On définit aussi la servlet qui va, à chaque fois, construire le tableau correspondant à la valeur du nom d utilisateur. Si celui-ci est vide, on affichera le tableau de tous les comptes de l utilisateur courant. Ce n est qu une fois qu une valeur sera sélectionnée que ce tableau va être mis à jour pour ne contenir que les comptes dont le nom d utilisateur débute par la valeur choisie. Nous avons donc du procéder comme pour l auto-complétion en récupérant les informations concernant l utilisateur courant et en filtrant le tableau de ses comptes comme suit : HttpSession session = request.getsession(); User u = (User) session.getattribute(constants.user_key); Subscription[] tabsubscription = u.getsubscriptions(); String message="<table border='1' width='100' align='center'>"; message+="<tr><th align='left' width='20'>host</th>"; message+="<th align='center' width='20'>username</th>"; message+="<th align='center' width='20'>type</th>"; message+="<th align='center' width='20'>autoconnect</th></tr>"; username = username.touppercase(); for(int i=0;i<tabsubscription.length;i++){ if(tabsubscription[i].getusername(). touppercase().startswith(username)){ message+="<tr><td align='left'>" + tabsubscription[i].gethost() +"</td>"; message+="<td align='left'>" + tabsubscription[i].getusername() +"</td>"; message+="<td align='left'>" + tabsubscription[i].gettype()+"</td>"; message+="<td align='left'>" + tabsubscription[i].getautoconnect() +"</td></tr>"; } } message+="</table>"; PrintWriter out = response.getwriter(); out.println(message); Nous obtiendront donc le rendu suivant en sélectionnant le nom d utilisateur «user1» : page 41 of 69

42 Figure 29 : Aperçu de la section de recherche d un compte: Après la sélection d un nom d utilisateur, le tableau à droite se mettra à jour pour ne contenir que la ou les lignes correspond à ce nom d utilisateur o Mise en place d onglets : Afin de préciser la mise en place d onglets dans une application web, nous allons découper en différentes pages la page «tour.html» qui contenait des explications concernant le fonctionnement de l application Mailreader. De cette façon, nous placerons le contenu de chacune des pages nouvellement créées dans des onglets différents, distinguant ainsi la description de chacune des sections importantes de cette application. La mise en place d onglets est très simple et ne nécessite pas d utiliser de servlet. Nous avons simplement à préciser les tags à utiliser. On définit donc d abord un container d onglets qui, comme son nom l indique, contiendra les onglets. Celui-ci se définit avec le tag Ajaxtags <ajax :tabpanel». Il faudra aussi en préciser le style décrit dans les feuilles de styles associées à Ajaxtags. Puis, il nous faut créer chacun des onglets avec le tag <ajax :tab> en précisant bien, à chaque fois, le nom qui apparaîtra sur l entête de notre onglet et en précisant l url de la page web dont on affichera le contenu : <ajax:tabpanel panelstyleid="tabpanel" contentstyleid="tabcontent" panelstyleclass="tabpanel" contentstyleclass="tabcontent" currentstyleclass="ajaxcurrenttab"> <ajax:tab caption="logon" baseurl="${pagecontext.request.contextpath}/tour/logon.html" defaulttab="true"/> <ajax:tab caption="main Menu" baseurl="${pagecontext.request.contextpath}/tour/mainmenu.html"/> <ajax:tab caption="registration" baseurl="${pagecontext.request.contextpath}/tour/registration.html"/> <ajax:tab caption="subscription" baseurl="${pagecontext.request.contextpath}/tour/subscription.html"/> </ajax:tabpanel> On a donc créé une page «tour.jsp» dans laquelle on fera appel à chacune des sections de la description de notre application pour obtenir le rendu suivant : page 42 of 69

43 Figure 30 : Aperçu de la page permettant de faire un tour d horizon des différentes fonctionnalités du Mailreader suite à la mise en place d onglets Remarquons que la mise en place d onglet dans cet exemple permet uniquement de démontrer avec quelle simplicité on peut intégrer cette fonctionnalité dans une application web. Toutefois, il était prévu à l origine d utiliser des onglets dès la page d accueil de l application pour pouvoir naviguer entre la page d enregistrement d un nouvel utilisateur, entre la page d authentification et la page d explication de l application. Toutefois, il semblerait que les tags Ajaxtags ne s imbriquent pas et que donc, on peut uniquement intégrer des pages ne contenant pas d autres tags Ajaxtags dans les onglets que l on a définis. Nous avons vu à travers cet exemple, comment s intègrent des fonctionnalités Ajax dans une application Struts à l aide de la librairie de tags Ajaxtags. Nous allons, à présent, observer cet intégration de modules Ajax avec le framewok Javascript Dojo. De la même façon que précédemment, nous allons ajouter les mêmes fonctionnalités dans l application Mailreader. Ajout de fonctionnalités Ajax dans l application Mailreader via le framework Dojo o Mise en place de listes déroulantes liées pour la saisie du lieu de résidence de l utilisateur : Nous allons donc commencer avec l intégration des listes déroulantes liées pour la saisie du pays et de la ville de résidence d un utilisateur qui s inscrit au Mailreader. Pour rappel, nous souhaitons que lorsque l utilisateur saisi un pays, la liste déroulante des villes se mettent à jour pour ne contenir que les villes de ce pays. Nous allons utiliser la même structure que lorsque l on utilisait la librairie Ajaxtags pour modéliser les villes et les pays. Contrairement à ce qui se fait habituellement en Dojo, il n existe pas de structure ou widgets Dojo permettant directement de pouvoir liés deux listes déroulantes. Nous allons donc procéder différemment en utilisant des tiles. Il s agit d une librairie permettant d organiser la mise en forme des pages d une application web mais permet aussi de définir les éléments communs dans une application afin de les réutiliser et éviter de dupliquer du code. page 43 of 69

44 Cette librairie va notamment nous permettre de ne déclarer qu une seule fois l utilisation de la librairie Dojo en le faisant dans le fichier de configuration «tiles-defs.xml». Parallèlement, nous allons associer un bean à la section du formulaire dédiée à la saisie du lieu de résidence de l utilisateur. Dans ce bean, nous allons commencer par définir une liste contenant l ensemble des pays que l on souhaite voir apparaître dans notre liste déroulante de pays. private static final List dropdowncountry = new ArrayList(6); static { dropdowncountry.add("select a country"); dropdowncountry.add("france"); dropdowncountry.add("espana"); dropdowncountry.add("deutschland"); dropdowncountry.add("england"); dropdowncountry.add("italia"); } Cette liste nous permettra de construire aisément la liste déroulante des pays en utilisant la balise <html :select> puisqu il est possible de créer une liste déroulante à partir d une collection avec la balise <html :options> en indiquant le nom du bean et le nom de sa propriété. Cette dernière doit alors être une collection. <html:select property="country" styleid="country" onchange="javascript:selectcities(this.value);"> <html:options name="locationform" property="dropdowncountry"/> </html:select> Nous obtiendrons bien une liste déroulante contenant les pays que l on a définis. Remarquons que lorsque l évènement «onchange» est enclenché, la fonction javascript «selectcities» est appelée. Cette fonction permet d appeler l action «locationsorted» grâce à la fonction «dojo.io.bind» qui va, en plus, envoyer la valeur du pays sélectionné avec l attribut «content». La fonction dojo.io.bind permet aussi de contrôler la gestion du bouton «back» du navigateur en stockant une à une les actions dans une pile. Ainsi, lorsque l utilisateur voudra visualiser la page précédente, il suffira simplement de dépiler. C est la raison pour laquelle on va déclarer une variable cachée «hidden» appelée «previouscountry», grâce à laquelle nous allons stocker la valeur du pays précédemment sélectionnée. Ainsi, lorsque l utilisateur cherchera à repartir en arrière, on appellera toujours l action «locationsorted» mais on enverra à l Action associée la valeur de «previouscountry» et non pas du pays actuellement sélectionné («country»). Le problème de gestion du bouton «back» est un problème récurrent avec des frameworks Ajax, et Dojo est l un des rares à proposer une solution pour y remédier. function selectcities(countryterm) { var previouscountryterm = dojo.byid("previouscountry").value; dojo.byid("previouscountry").value = countryterm; dojo.io.bind( { url: "locationsorted.do", content: {country: countryterm}, method: "POST", mimetype: "text/html", changeurl: false, page 44 of 69

45 }); load: function(type, value, evt) { dojo.byid("country").value = countryterm; processresponse(value); }, backbutton: function(){ dojo.io.bind({ url: "locationsorted.do", content: {country: previouscountryterm}, method: "POST", mimetype: "text/html", load: function(type, value, evt) { resetdropdown(previouscountryterm); processresponse(value); }, error: function(type, error) { alert("error: " + error); } }); }, error: function(type, error) { alert("error: " + error.reason); } } Lorsque l Action aura reçu la valeur du pays sélectionné, elle va récupérer la liste des villes et la filtrer pour ne garder que les villes dont le pays a été sélectionné. Pour cela, on va appeler la méthode «getcitiesbycountry» qui va mettre dans une liste toutes les villes dont le pays a été passé en paramètre. On va ensuite préciser que cette liste de villes correspondra à la liste de villes définie dans le bean «locationform» comme suit : LocationForm actionform = (LocationForm) form; List loc = (List) request.getsession().getattribute("locationlist"); String sorttype = request.getparameter("country"); loc = CitiesList.getCitiesByCountry(sortType); actionform.setpreviouscountry(sorttype); actionform.setlocationlist(loc); request.getsession().setattribute("locationlist", loc); Cette fois-ci, la réponse ne sera pas générée par la servlet, mais elle sera créée en appelant, depuis le bean, la liste de pays que l on vient de mettre à jour. On créera ainsi notre réponse après avoir été redirigé selon le mapping décrit dans le fichier «struts-config.xml». <ajax-response> <field id="locations" attribute="innerhtml"> <![CDATA[ <tiles:insert definition="loc" flush="true" > <tiles:put name="locationlist" beanname="locationform" beanproperty="locationlist"/> </tiles:insert> ]]> </field> </ajax-response> On obtiendra alors une réponse de ce type : <ajax-response> <field id="locations" attribute="innerhtml"> <![CDATA[ <select id= city > page 45 of 69

46 <option <option <option <option value= >A Coruña</option> value= >Albacete</option> value= >Alicante</option> value= >Badajoz</option> </select> ]]> </field> </ajax-response> Celle-ci sera alors traitée par la fonction javascript «processresponse», qui va utiliser le parser de Dojo afin de récupérer une à une les villes de notre liste. On remarquera, au passage, que Dojo possède des fonctions permettant de manipuler le DOM, comme c est le cas cidessous avec l appel à la méthode «dojo.dom.createdocumentfromtext( )». function processresponse(response) { alert("reponse:" + response); if (djconfig['isdebug']) { dojo.debug("ajax response: " + response); } if (response.tolowercase().indexof("<ajax-response>") < 0) { document.write(response); document.close(); return; } var xmldoc = dojo.dom.createdocumentfromtext(response); var fields = xmldoc.getelementsbytagname("field"); for (var var var var i = 0; i < fields.length; i++) { id = fields[i].getattribute("id"); attribute = fields[i].getattribute("attribute"); value = null; if (fields[i].haschildnodes()) { for (var j=0; j<fields[i].childnodes.length; j++) { var currentnode = fields[i].childnodes[j]; if(currentnode.nodename.tolowercase()=="#cdata-section") { value = currentnode.nodevalue; } } } eval("window.replacevalue = function(value) { dojo.byid('" + id + "')." + attribute + " = value;}"); replacevalue(value); } } Nous allons alors utiliser un «tile» pour définir la zone dans laquelle sera contenue la liste déroulante des villes puisque celle-ci sera régulièrement appelée. Cette zone sera marquée par un identifiant. De cette façon, nous pourrons la distinguer du reste de la page et ne recharger que cette partie lors de la sélection d un pays. <div id="locations"> <tiles:insert definition="loc" flush="true"> <tiles:put name="locationlist" page 46 of 69

47 </tiles:insert> beanname="locationform" beanproperty="locationlist" /> </div> En résumé, lorsqu un utilisateur sélectionnera un pays, celui-ci sera envoyé vers une Action qui va filtrer notre liste pour ne garder que les villes appartenant au pays choisi par l utilisateur. Cette liste sera alors transcrite sous la forme d une réponse ajax au format xml. Cette réponse sera alors parser côté client, pour envoyer la liste des villes vers la zone délimitée ci-dessus. Ainsi, on obtiendra deux listes déroulantes liées comme suit : Figure 31 : Aperçu du formulaire d enregistrement d un nouvel utilisateur : suite à la sélection de l Espagne dans la liste déroulante des pays, une liste des villes d Espagne est alors créée Il est à noter qu ici nous utilisons des actions et que donc il ne faut pas omettre de définir leur «mapping» dans le fichier de configuration «struts-config.xml». o Validation des données saisies dans le formulaire d inscription : Nous allons maintenant gérer la validation des données saisies par l utilisateur. Pour cela, il faut savoir qu il existe des widgets Dojo permettant de gérer automatiquement la validation des données saisies. Ces widgets permettent de valider tous types de données (somme d argent, adresse IP, url, adresse , code postal, numéro de téléphone ) uniquement côté client, en utilisant le widget adapté au type attendu (IpAddressTextbox, UrlTextbox, Textbox, UsZipTextbox, UsPhoneNumberTextbox ). Il nous suffira de préciser les messages à afficher en cas d erreurs ou si l utilisateur a omis de saisir une valeur lors de l utilisation de ces widgets. On peut aussi indiquer le style que l on souhaite avoir pour ces widgets. On peut notamment changer la couleur de fond de la zone de saisie en fonction de sa validité. On peut aussi changer la couleur des différents messages. Pour cela, il suffira d indiquer les changements à effectuer dans la feuille de style associée à nos widgets Dojo. page 47 of 69

48 Malgré la grande quantité de zones de saisie prédéfinies permettant de valider les données, il est possible qu aucune ne corresponde au type que l on attend. Aussi, nous aurons la possibilité d utiliser une «RegexpTextbox». Cette structure permet de vérifier si une valeur saisie respecte une expression régulière définie auparavant. Regardons, par exemple, la validation de la date de naissance d un nouvel utilisateur. La date de naissance doit être au format européen c est-à-dire jj/mm/aaaa. Or il existe une structure appelée «DateTextBox» qui permettra d indiquer à l utilisateur s il a respecté ce format. On définit alors cette structure comme suit : <input type="text" name="dateofbirth" class="medium" dojotype="datetextbox" value="01/01/1980" invalidmessage=" This date of birth has an invalid format"/> Remarquons que nous n avons même plus besoins de communiquer avec le serveur afin de vérifier le type de la valeur saisie. On obtiendra alors le rendu suivant : Figure 32 : Validation de la saisie d une date de naissance : à gauche, elle est valide tandis qu à droite, elle est erronée (car il n y a pas de 19ème mois) Nous procédons de la même façon avec chacun des champs en utilisant une «RegexpTextbox» pour la validation du nom et du prénom de l utilisateur afin de s assurer qu ils ne contiendront pas de chiffres. Pour cela, nous utilisons l expression régulière «^[a-z] +$» signifiant qu un nom ou un prénom correspond à une suite d au moins une lettre. On définit, par exemple, notre zone de saisie d un prénom comme suit : <input type="text" name="firstname" class="medium" dojotype="regexptextbox" regexp="^[a-z]+$" required="true" missingmessage=" The first name is required." invalidmessage=" The first name is not valid"/> L attribut «regexp» permet de définir l expression régulière à respecter. Le champ «required» permet de préciser s il s agit d un champ à renseigner impérativement ou pas. Il faudra donc renseigner le paramètre «missingmessage» qui permet de préciser le message à afficher si aucune valeur n a été saisie. De même, le paramètre «invalidmessage» permet de préciser le message à afficher si la valeur saisie n est pas valide. Pour la saisie du nom, il faut utiliser la même expression régulière. Nous procèderons de façon similaire pour la validation du mot de passe et du mot de passe de confirmation sauf que nous vérifierons aussi qu ils ont la taille attendue c est-à-dire entre trois et seize caractères en utilisant l expression régulière suivante «^[a-z]{3,16}$». En effet, celle-ci définit une suite de trois à seize lettres. Nous utiliserons aussi une «RegexpTextbox» pour vérifier que les noms d utilisateurs auront bien la taille souhaitée c est-à-dire entre trois page 48 of 69

49 et seize caractères. Contrairement au nom et prénom, les noms d utilisateurs peuvent comporter des chiffres. L expression régulière qui leur correspond est donc «^[a-z0-9] {3,16}$» Enfin, nous utiliserons des « Textbox» pour valider les adresses . Celles-ci s utilisent comme suit : <input type="text" name="fromaddress" class="medium" dojotype=" textbox" required="true" missingmessage=" The from Adress is required." invalidmessage="this address is not valid"/> Dans la feuille de style associée au framework Dojo, nous préciserons que le fond d un champ de saisie doit être bleu si le champ est manquant, rouge s il est erroné ou vert s il est valide. Nous n indiquerons à l utilisateur que les messages d erreurs ou les messages indiquant qu un champ doit systématiquement être renseigné. Nous obtiendrons le rendu suivant : Figure 33 : Validation des données saisies dans le formulaire d enregistrement d un nouvel utilisateur: à gauche toutes les données sont erronées tandis qu elles sont toutes valides à droite o Affichage des comptes dans un tableau «triable» : Nous allons maintenant permettre à un utilisateur inscrit d organiser ses comptes selon la colonne qu il sélectionnera dans le tableau de comptes. Il se trouve qu il existe un widget Dojo appelée «filteringtable» qui permet de construire un tableau triable. Pour cela, nous allons commencer par construire notre «filteringtable» et définir l entête de notre tableau comme suit : <table dojotype="filteringtable" id="viewtable" multiple="true" alternaterows="true" maxsortable="2" cellpadding="0" cellspacing="0" border="0"> page 49 of 69

50 <thead> <tr> <th field="host" datatype="string" align="center" valign="top"> <bean:message key="heading.host"/> </th> <th field="user" datatype="string" align="center" valign="top"> <bean:message key="heading.user"/> </th> <th field="type" datatype="string" align="center" valign="top"> <bean:message key="heading.type"/> </th> <th field="autoconnect" datatype="string" align="center" valign="top"> <bean:message key="heading.autoconnect"/> </th> <th datatype="html" align="center" valign="top"> <bean:message key="heading.action"/> </th> </tr> </thead> </table> Nous remarquerons que nous avons utiliser le tag «<bean :message>» pour pouvoir définir l intitulé de chacune des colonnes de notre tableau. De cette façon, nous préserverons l internationalisation. On remplit ensuite notre tableau ligne par ligne comme on le faisait auparavant: <tbody> <logic:iterate name="user" property="subscriptions" id="subscription"> <tr value='<bean:write name="subscription" property="username"/>' <td> <bean:write name="subscription" property="host"/> </td> <td> <bean:write name="subscription" property="username"/> </td> <td> <bean:write name="subscription" property="type"/> </td> <td> <bean:write name="subscription" property="autoconnect"/> </td> <td> <html:link action="/deletesubscription" paramname="subscription" paramid="host" paramproperty="host"> <bean:message key="registration.deletesubscription"/> </html:link> <html:link action="/editsubscription" paramname="subscription" paramid="host" paramproperty="host"> <bean:message key="registration.editsubscription"/> </html:link> </td> </tr> </logic:iterate> </tbody> page 50 of 69

51 Ainsi, on obtiendra un tableau triable comme suit : Figure 34 : Aperçu de la table des comptes d un utilisateur authentifié dans laquelle les lignes sont par ordre alphabétique selon le nom d hôte à gauche tandis qu à droite, elles sont triées par ordre alphabétique inversé selon le type de serveur. o Recherche de compte : Nous souhaitons, à présent, offrir la possibilité à l utilisateur de rechercher l un de ses comptes en saisissant le nom d utilisateur du compte recherché. Cette saisie sera autocomplétée afin d éviter à l utilisateur de saisir un nom d utilisateur inconnu. Ainsi, il lui suffira de saisir quelques caractères pour qu une liste de propositions contenant les noms d utilisateurs débutant par ces caractères apparaisse. Ainsi, dès qu une valeur dans cette liste sera sélectionnée, le tableau de comptes, contenant au départ tous les comptes de l utilisateur courant, se mettra à jour pour n afficher que les comptes avec un nom d utilisateur débutant par la valeur sélectionnée. Commençons d abord par mettre en place une zone de saisie auto-complétée. Pour cela, nous allons utiliser le widget «ComboBox». Celui-ci permet usuellement de créer des listes déroulantes mais il contient un attribut permettant d enclencher l auto-complétion. Nous allons donc boucler sur les comptes de l utilisateur courant afin d ajouter un à un chacun des noms d utilisateur dans la «ComboBox» comme suit : <select id="sub" dojotype="combobox" style="width: 100px;" autocomplete="true" onvaluechanged="applyuser('searchtable');"> <option value=""></option> <logic:iterate name="user" property="subscriptions" id="subscription"> <option value='<bean:write name="subscription" property="username"/>'> <bean:write name="subscription" property="username"/> </option> </logic:iterate> </select> On obtiendra alors une zone de saisie de nom d utilisateur auto-complétée. page 51 of 69

52 Figure 35 : Aperçu du champ autocomplété de saisi d un nom d utilisateur dans la section de recherche d un utilisateur : ici, la saisies de la lettre «u» a provoqué l affichage d une liste de propositions contenant tous les noms d utilisateur de l utilisateur connecté commençant par cette lettre On remarquera que lors de la construction de cette zone, nous avons précisé que lorsqu une valeur était sélectionnée, c est-à-dire lors de l évènement «onvaluechanged», une fonction javascript nommée «applyuser» était appelée. Cette fonction prend en paramètre l identifiant de notre tableau (ici, «searchtable») pour lui appliquer un filtre comme suit : function applyuser(key){ dojo.widget.byid(key).setfilter("user", userfilter); } En effet, il faut savoir que les «filteringtable» ne permettent pas seulement de construire des tableaux triables mais permettent aussi de leur appliquer un filtre. Ce filtre, appelé «userfilter», permet de préciser que l on souhaite ne garder dans notre tableau que les comptes avec un nom d utilisateur débutant par la valeur sélectionnée : function userfilter(user){ return (user.charat(0) == dojo.widget.byid('sub').comboboxselectionvalue.value.charat(0)); } De cette façon, lorsqu un utilisateur connecté sélectionne un nom d utilisateur, le tableau sera mis à jour automatiquement comme suit: o Mise en place d onglets : Enfin, nous allons rendre la page expliquant le fonctionnement de l application plus conviviale en plaçant le contenu des différentes sections dans des pages web distinctes que l on affichera dans des onglets. Nous allons donc créer une nouvelle page appelée «tour.jsp» dans laquelle nous allons définir un container d onglets. Celui-ci correspond à la structure page 52 of 69

53 Dojo appelée «TabContainer». Puis, nous allons créer un à un nos onglets avec le widget «ContentPane». Il faudra alors indiquer à chaque fois le contenu de ces onglets en précisant l url de la page à afficher dans ces onglets avec le paramètre «href». <div id="maintabcontainer" dojotype="tabcontainer" style="width: 100%; height: 200em;" selectedchild="tab1" onload="initprogress"> <div id="tab1" dojotype="contentpane" href="<%=request.getcontextpath()%>/tour/logon.html" label="logon"> </div> <div id="tab2" dojotype="contentpane" href="<%=request.getcontextpath()%>/tour/mainmenu.html" refreshonshow="true" label="main Menu"> </div> <div id="tab3" dojotype="contentpane" href="<%=request.getcontextpath()%>/tour/registration.html" refreshonshow="true" label="registration"> </div> <div id="tab4" dojotype="contentpane" href="<%=request.getcontextpath()%>/tour/subscription.html" refreshonshow="true" label="subscription"> </div> </div> Nous avons la possibilité de modifier l apparence de nos onglets dans la feuille de style associée à nos widgets Dojo. Figure 36 : Aperçu de la page permettant de faire un tour d horizon des différentes fonctionnalités du Mailreader suite à la mise en place d onglets Par ailleurs, le paramètre «onload», utilisé lors de la construction du container d onglets, permet de préciser le nom de la fonction à exécuter pendant le chargement des onglets. Ce paramètre permet notamment d appeler une fonction javascript dont le but est de page 53 of 69

54 créer une animation ou un message qui indique à l utilisateur que les onglets sont en cours de chargement. On obtient alors le rendu suivant : Figure 37 : Aperçu de la page permettant de faire un tour d horizon des différentes fonctionnalités du Mailreader suite à la mise en place d onglets : Ici, le contenu des onglets est en cours de chargement Remarquons que mis à part le cas des listes déroulantes liées, la totalité des fonctionnalités Ajax ont été gérées côté client en utilisant uniquement les widgets Dojo Comparaison des deux frameworks Ajaxtags correspond à une librairie de tag élaborée spécifiquement pour s intégrer dans des applications web de type Struts. Bien que la quantité de balises définies soit très faible, nous avons vu, à travers l exemple de l application Mailreader, qu il était possible de créer de nombreuses fonctionnalités. Par ailleurs, la communication avec le serveur s effectue de façon aisée mais elle est quasi-systématique. En effet, mis à part pour l intégration d onglets, il a toujours fallu recourir à des Actions ou des servlets. En outre, il est déconseillé d imbriquer des tags Ajaxtags puisque cela risquerait de ne pas fonctionner correctement. Enfin, il faut noter que même si cette librairie ne dispose que de peu de tags, ils sont très bien documentés et cela fût très utile durant la phase de développement. Dojo est un framework javascript qui dispose d une large librairie de widgets. Nous avons vu qu ils permettent de gérer aussi bien des tableaux triables que la validation des données saisies et ce, sans avoir à interroger le serveur. Il faut aussi savoir que les versions plus récentes de Dojo disposent de fonctionnalités supplémentaires et permettent notamment de gérer des graphiques. Cependant, la mise en place d une communication entre client et serveur est moins aisée qu avec Ajaxtags comme nous avons pu le constater lors de la création des listes déroulantes liées pour la saisie du lieu de résidence d un utilisateur. L absence d une documentation complète a réellement posé problème pendant l ajout des nouvelles fonctionnalités. Cependant, la présence de nombreux exemples a permis de combler cette lacune Conclusion Nos deux frameworks permettent de créer les mêmes fonctionnalités avec des niveaux de difficultés différents. Ajaxtags a une prise en main aisée et permet de créer facilement des fonctionnalités Ajax. Cependant, une gestion côté serveur doit être effectuée, modifiant ainsi davantage l application Struts existante sur laquelle nous rajoutions de nouvelles fonctionnalités. De plus, cela ne fait qu augmenter la quantité de code à écrire, et donc le risque d erreurs. A l inverse, Dojo permet de créer des fonctionnalités Ajax simplement en utilisant sa librairie de widgets côté client. Il n y aura que dans des cas rares qu il faudra effectuer une gestion côté serveur. L impacte sur l application existante sera donc moindre. page 54 of 69

55 En contre partie, puisque la plupart des widgets sont prédéfinis, cela réduit largement notre marche de manœuvre. Au contraire, Avec Ajaxtags, le développeur a plus de liberté puisqu il ne dispose que d une douzaine de balises et que celles-ci sont très malléables. Enfin, Ajaxtags n est composé que d une petite librairie de balises et est donc très léger tandis que Dojo possède une large librairie et est plutôt lourd. Toutefois, il existe un package de Dojo réservé aux fonctionnalités Ajax et qui évitera de devoir inclure la totalité du framework dans notre application. Par ailleurs, même si Ajaxtags est léger, il dépend de certaines librairies javascript comme prototype. Temps de développement Modification à effectuer sur l application Maintenabilité / Évolution Nombre de lignes de code à écrire/erreur potentielles Ajaxtags Dojo (Élevé : + / Faible : -) Dojo et Ajaxtags possèdent tous deux leurs points forts comme leurs points faibles. Il faudra donc, selon les besoins du client, le temps imparti et les performances attendues, choisir le framework le mieux adapté. page 55 of 69

56 4 Organisation du travail 4.1 Contexte : Ce stage est interne à Logica et s effectue au sein du Centre de Service Rhône-Alpes (CSRA) à Lyon. Il s est déroulé dans la cellule d amélioration continue du pôle NTI, pour le domaine de veille technologique. Cette cellule permet d étudier des solutions visant à mieux répondre aux besoins des clients de Logica. Dans cette optique, on m a demandé d étudier les solutions permettant l intégration de fonctionnalités de client riche (Ajax) dans une application de type J2EE 1.4. Mon maître de stage est Jean-François Bellet, responsable du pôle NTI. Loïc Gouillet, Ingénieur-Analyste à Logica a effectué mon suivi tandis que Bruno Baudru a été chargé de mon suivi technique. Il est expert technique à Grenoble et c est avec lui que j effectue un point hebdomadaire sur l avancée de ce projet. Compte-tenu de la distance entre Lyon et Grenoble, la plupart de nos points techniques s effectuaient par téléphone. Nous disposons cependant d un serveur svn afin de partager mes sources. Cet outil a été très utile, en particulier lorsque je rencontrais des problèmes. Nous pouvions aussi communiquer en permanence via des s ou en utilisant «Communicator», un service de messagerie instantanée. 4.2 Gestion du temps de travail : Dès mon arrivée, un plan d action a été crée dans lequel étaient décrites les différentes tâches que j avais à effectuer avec une évaluation du temps que je devais leur consacrée. A chaque point hebdomadaire, nous devions mettre à jour ce planning (Annexe 8) en fonction de mon avancée. Le planning initial était le suivant : Charge Tâche 5 Démarrage + auto formation sur struts 5 Recherche et mise en place d'une application de type struts1 5 description Livrables autoformation sur struts 1 par le suivi d'un tutorial à trouver sur le web. recherche d'un exemple d'application struts1 (j2ee1.4, exemple d'application à trouver sur le site de struts). mise en place d'un environnement de dev: eclipse (la version 3.3 par exemple mais en mode jee1.4) tomcat 5.5 installation de l'application struts1 Lister et recherche sur le web comparer les comparaison théorique (sur Framework base de document) AJAX prendre en compte la compatible compatibilité avec un J2EE1.4 environnement java supérieur à 1.4. Au besoin mettre en œuvre des exemples pour le choix final Document de description et d'installation Environnement de dev Document de comparaison sur les 6/7 solutions les plus référencées et utilisées choix des 2 solutions ressortant du lot voir page 56 of 69

57 age.com/veille/clever-link/lesmeilleurs-frameworks-ajax-pourdes-interfaces-web-plusergonomiques.html Auto formation sur AJAX (sur une des solutions ressortant du lot). Définir les modifications à apporter à l'application de type struts1 Faire la conception technique Réaliser les modifications sur les solutions Guide d'intégration de la ou des solutions ressortant du lot Rapport de stage Total a voir si nécessaire sinon le temps sera reporté sur la conception/réalisation. ajouter un maximum d'éléments dynamique Document de spécifications fonctionnelles but: cadrer la mise en place des framework Document de spécifications technique Inclure des tests de validation. Sources projet, tests, spécifications techniques La colonne intitulée «charge» indique le nombre de jours prévus pour effectuer la tâche. Remarquons aussi que régulièrement des documents ou des sources devaient être livrés. Au total 60 jours sont prévus pour la réalisation de cette étude. Il s agit de jours ouvrés. Cela correspond à environ trois mois de travail. Après avoir suivi des tutoriaux disponibles sur le net, j ai installé l environnement de développement comprenant la version Europa d Eclipse J2EE, le serveur d application Glassfish et le framework Struts. J ai ensuite commencé à tester des exemples d application Struts que j ai eu des difficultés à faire fonctionner. Avec l aide de Bruno Baudru, nous avons installé l application Mailreader qui sera donc l application web à laquelle nous ajouterons des fonctionnalités Ajax. J ai ensuite dû rechercher sur internet des frameworks ou des solutions permettant d intégrer des fonctionnalités Ajax. Ainsi, après avoir déterminé certains critères de sélection tels que la prise en main, la documentation ou l impacte sur une application existante, j ai décrit dans un document les points forts et les points faibles de chacun avant de sélectionner les deux solutions qui me paraissaient les mieux adaptées à notre utilisation. Enfin, suite à une brève autoformation à la technologie Ajax, j ai dû définir les page 57 of 69

58 fonctionnalités que je souhaitais ajouter à l application Mailreader. Remarquons au passage que si l autoformation à Ajax a été moins longue qu initialement prévu, c est parce qu il s agit d une technologie que j ai côtoyée l an dernier, dans le cadre de mon projet semestriel. Le diagramme de Gantt suivant permet d observer l évolution de mon travail pendant les premières semaines. Le diagramme en rouge correspond à ce qui était initialement prévu tandis que le bleu correspond au temps réel de réalisation. Figure 38 : Première moitié du diagramme de Gantt représentant l évolution de mon travail durant les cinq premières semaines: le diagramme en rouge représente les tâches prévues avec la durée correspondante tandis que le diagramme en bleu indique les tâches réellement effectuées associés à leur temps réel d exécution. Il fallait ensuite élaborer un document de conception technique dans lequel était décrite toute l organisation de la structure Mailreader. Ainsi, il s est avéré que cette application ne comportait pas de base de données mais que les données étaient stockées via une architecture bien définie. De ce faite, tout ajout ou suppression de champs se répercuterait dans la structure de l application. Ainsi, tandis qu il était initialement prévu de passer une vingtaine de jours sur l ajout des nouvelles fonctionnalités, il a fallu y consacrer plus de temps afin de modifier cette structure. Par ailleurs, si la prise en main du framework Ajaxtags était rapide, celle du framework Dojo l était moins. En particulier, lorsqu il s agissait de communiquer avec le serveur durant la mise en place des listes déroulantes liées, l utilisation des «tiles» m a particulièrement posé problèmes et a nécessité l aide de Bruno Baudru. Le diagramme de Gantt ci-dessous présente, de façon identique au précédent, l évolution de mon travail durant les phases de conception, réalisation (ou développement) et rédaction des documents. page 58 of 69

59 Figure 39 : Seconde moitié du diagramme de Gantt représentant l évolution de mon travail durant les dix dernières semaines: le diagramme en rouge représente les tâches prévues avec la durée correspondantes tandis que le diagramme en bleu indique les tâches réellement effectuées associés à leur temps réel d exécution. Remarquons que je suis quelque peu en retard comparé au planning prévisionnel. Ce retard s explique d une part par les difficultés rencontrées, par l abondance de jours fériés (en particulier, j ai eu la possibilité de faire le second pond du mois de mai) mais aussi par la présence de formations qui m ont été proposées. Cependant, les formations que j ai suivies n étaient pas très longues (d une ½ à 1 journée) et ont été un réel apport pour moi. 4.3 Formations suivies : Comme je l énonçais précédemment, j ai bénéficié d un certains nombre de formations durant mon stage, et il me semble intéressant d en parler. Tout d abord, j ai reçu une formation pour la prise en main du framework Struts. J ai demandé à participer à cet enseignement puisqu il rentre complètement dans le cadre de mon sujet de stage. Par ailleurs, n ayant jamais étudié J2EE ou JSP, il m a semblé que, puisque je débutais seulement la phase de réalisation de mon projet, il serait bon de vérifier si j avais bien compris de quoi il s agissait. Cette formation, d une durée d un jour, reprenais point par point le fonctionnement général du framework Struts et proposait aussi des exercices d application. Par ailleurs, tous les nouveaux arrivants à Logica doivent suivre trois formations de bases d une demi-journée chacune : La première, intitulée «fondamentaux de production», étapes à suivre lors de la réalisation d un projet. explique brièvement les page 59 of 69