Java. et jquery. Intégrer un framework JavaScript. dans l écosystème JEE. Kévin VALETTE

Java et jquery Intégrer un framework JavaScript dans l écosystème JEE Kévin VALETTE

Table des matières 1 Les éléments à télécharger sont disponibles à l'adresse suivante : http://www.editions-eni.fr Saisissez la référence de l'ouvrage EIJAJQ dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement. Avant-propos 1. Introduction............................................. 13 2. Niveau de compétences requis............................... 14 3. Structure du livre......................................... 14 Chapitre 1 Premiers pas 1. Introduction............................................. 17 2. Les applications JEE....................................... 18 2.1 Les API JEE.......................................... 19 2.2 Les ressources statiques................................ 22 3. Le protocole HTTP........................................ 22 3.1 La norme HTTP...................................... 23 3.2 Les requêtes.......................................... 24 3.2.1 La ligne d'introduction............................ 24 3.2.2 Les en-têtes..................................... 25 3.2.3 Le corps........................................ 26 3.3 Les réponses......................................... 26 3.3.1 La ligne de statut................................ 26 3.3.2 L'en-tête........................................ 27 3.3.3 Le corps........................................ 27 4. Le serveur d'applications................................... 28 4.1 Conteneur web....................................... 28 4.2 Architecture N-tiers................................... 29

2 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE 5. L'architecture MVC....................................... 30 5.1 Le modèle........................................... 30 5.2 L'implémentation JEE.................................. 31 6. La bibliothèque jquery..................................... 32 6.1 Historique du projet................................... 32 6.2 Intérêt.............................................. 33 7. En résumé............................................... 34 Chapitre 2 La plateforme JEE 1. Introduction............................................. 35 2. Les servlets.............................................. 36 2.1 Concepts............................................ 36 2.1.1 Technologie client/serveur......................... 36 2.1.2 Méthodes...................................... 37 2.1.3 L'interface Servlet................................ 38 2.2 Descripteur de déploiement............................. 40 2.3 Cycle de vie.......................................... 42 2.3.1 Instanciation.................................... 43 2.3.2 Initialisation.................................... 44 2.3.3 Traitement des requêtes........................... 45 2.3.4 Fin de vie....................................... 46 2.4 Les listeners.......................................... 46 2.5 La requête........................................... 48 2.6 La réponse........................................... 49 2.7 Les filtres............................................ 50 3. Les JSP.................................................. 52 3.1 La norme JSP......................................... 53 3.1.1 Les balises...................................... 54 3.1.2 Les directives.................................... 54

Table des matières 3 3.2 L'utilisation du modèle................................. 56 3.2.1 Le JavaBean..................................... 56 3.2.2 La portée des objets.............................. 57 3.3 Les actions standards.................................. 58 3.3.1 usebean........................................ 59 3.3.2 getproperty..................................... 59 3.3.3 setproperty..................................... 60 3.3.4 include......................................... 60 3.3.5 forward........................................ 61 3.4 Les expressions languages.............................. 61 3.4.1 Les attributs.................................... 62 3.4.2 Les collections................................... 66 3.4.3 Les objets implicites.............................. 67 3.4.4 Les opérateurs................................... 69 4. En résumé............................................... 70 Chapitre 3 Les applications web 1. Introduction............................................. 73 2. Description.............................................. 74 3. Organisation............................................. 74 3.1 Le dossier META-INF.................................. 75 3.2 Le dossier WEB-INF................................... 75 3.3 Les ressources publiques................................ 76 4. Configuration de déploiement............................... 77 4.1 Configuration des composants.......................... 78 4.1.1 Description de l'application........................ 78 4.1.2 Fichiers d'index.................................. 79 4.1.3 Servlets........................................ 79 4.1.4 Filtres.......................................... 82 4.1.5 Attributs de contexte............................. 83

4 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE 4.1.6 Attributs de sessions............................. 83 4.1.7 Gestion des erreurs............................... 84 4.2 Sécurité et authentification............................. 85 4.2.1 Les contraintes de sécurité......................... 85 4.2.2 L'authentification................................ 86 4.2.3 La sécurisation de la couche transport............... 89 4.3 Compatibilité entre serveurs JEE......................... 90 5. Intégration de jquery...................................... 91 5.1 Récupérer les sources.................................. 91 5.1.1 Depuis le site officiel............................. 92 5.1.2 Depuis la plateforme Google....................... 93 5.1.3 Depuis Github.................................. 93 5.1.4 Depuis le gestionnaire de paquets Bower............. 94 5.2 Exploiter les ressources................................. 95 5.3 Associer le framework dans une JSP...................... 96 6. En résumé............................................... 97 Chapitre 4 L'utilisation de jquery 1. Introduction............................................. 99 2. Les sélecteurs............................................ 100 2.1 Le DOM........................................... 100 2.2 La fonction $()...................................... 103 2.3 Les sélecteurs standardisés............................. 105 2.3.1 Les sélecteurs CSS............................... 105 2.3.2 Les pseudoclasses............................... 109 2.4 Les sélecteurs spécifiques............................. 112 2.5 Les sélecteurs de formulaires........................... 117 3. Les évènements.......................................... 120 3.1 Le flux évènement................................... 121 3.2 L'objet Event........................................ 123

Table des matières 5 3.3 La fonction ready.................................... 126 3.4 Les évènements simples............................... 128 3.5 Les évènements composés............................. 133 4. Les transitions........................................... 134 4.1 Effets et vitesse...................................... 134 4.1.1 Gérer la vitesse................................. 134 4.1.2 Apporter un fondu.............................. 136 4.2 Effets composés..................................... 137 4.3 Animations personnalisées............................. 138 5. Organiser son code....................................... 140 5.1 Encapsulation....................................... 141 5.1.1 Objet......................................... 141 5.1.2 Module....................................... 142 5.2 Factorisation des traitements.......................... 143 5.3 Fonctions anonymes.................................. 144 6. En résumé.............................................. 145 Chapitre 5 L'intégration de jquery dans les JSP 1. Introduction............................................ 147 2. Manipulation du DOM................................... 148 2.1 Manipuler des propriétés.............................. 152 2.1.1 Les fonctions de style CSS........................ 152 2.1.2 Les fonctions de gestion d'attributs................. 155 2.2 Gérer des éléments................................... 161 2.2.1 Les fonctions d'insertion......................... 161 2.2.2 Les fonctions de remplacement.................... 166 2.2.3 Les fonctions de suppression...................... 169 2.2.4 Les fonctions de copie........................... 171

6 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE 3. Manipulation des tables................................... 174 3.1 Modifier son affichage................................ 176 3.2 Ajouter du tri dans les données......................... 180 3.2.1 Le tri côté serveur............................... 180 3.2.2 Le tri en JavaScript.............................. 181 3.3 Utiliser le plug-in datatables........................... 185 3.3.1 Objectif....................................... 186 3.3.2 Intégration dans l application..................... 186 3.3.3 Utilisation..................................... 189 3.3.4 Évènements personnalisés........................ 191 4. Manipulation des formulaires.............................. 196 4.1 Améliorer un formulaire de base....................... 199 4.1.1 Les affichages conditionnels...................... 200 4.1.2 Les comportements liés.......................... 201 4.2 Gérer la validation................................... 203 4.2.1 Les validations Java............................. 203 4.2.2 Les validations jquery........................... 210 4.3 Utiliser le plug-in jquery-validate....................... 215 4.3.1 Mise en place.................................. 215 4.3.2 Implémentation................................ 216 4.3.3 Options...................................... 218 5. En résumé.............................................. 221 Chapitre 6 Les taglibs 1. Introduction............................................ 223 2. Maîtriser la bibliothèque JSTL.............................. 224 2.1 Objectif........................................... 224 2.2 Configuration...................................... 225 2.2.1 La mise en place de la librairie.................... 225 2.2.2 L'intégration dans une JSP....................... 229

Table des matières 7 2.3 La bibliothèque Core................................. 230 2.3.1 Les variables................................... 231 2.3.2 Les conditions et boucles......................... 232 2.3.3 La gestion des URL.............................. 236 3. Créer un taglib personnalisé............................... 238 3.1 Création du comportement........................... 239 3.2 Déclaration de la fonction............................. 242 3.3 Intégration dans une JSP.............................. 244 4. Utiliser un taglib : DataTables Taglib........................ 247 4.1 Intérêt............................................. 247 4.2 Mise en place....................................... 247 4.3 Utilisation......................................... 249 5. En résumé.............................................. 252 Chapitre 7 La technique AJAX 1. Introduction............................................ 253 2. Le concept............................................. 254 3. Les structures d'échanges de données........................ 256 3.1 Les formats......................................... 256 3.2 La syntaxe JSON.................................... 258 3.2.1 Les valeurs.................................... 259 3.2.2 Les objets..................................... 259 3.2.3 Les tableaux................................... 260 4. Partie serveur : mettre à disposition des services REST.......... 260 4.1 Principes d'une architecture REST...................... 261 4.1.1 Définition..................................... 261 4.1.2 Les normes.................................... 261 4.1.3 REST et Jersey................................. 262 4.1.4 Cycle de vie d'un service......................... 265

8 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE 4.2 Implémentation d'un service.......................... 265 4.2.1 Mettre en place un service....................... 265 4.2.2 Intégration d'un modèle......................... 267 4.2.3 Déployer et consommer un service................ 269 4.3 Configuration du service.............................. 271 4.3.1 Spécifier un chemin à la ressource................. 271 4.3.2 Associer une requête à une méthode............... 272 4.3.3 Définir les types d'entrées et sorties................ 274 4.3.4 Récupérer des paramètres de la requête............. 276 5. Partie cliente : consommer les services....................... 276 5.1 La méthode.ajax()................................... 277 5.1.1 La syntaxe.................................... 277 5.1.2 Les promesses.................................. 281 5.1.3 Les callbacks................................... 282 5.1.4 Les types de données............................ 283 5.1.5 La sérialisation de données........................ 284 5.2 GET : charger des données à la demande................. 285 5.2.1 La fonction.get()............................... 285 5.2.2 Consommer des données dans une JSP............. 286 5.3 POST : passer des données au serveur................... 287 5.3.1 La fonction.post().............................. 288 5.3.2 Publier de l'information dans le système d'information..................... 289 5.4 LOAD : charger des informations....................... 291 5.4.1 La fonction.load().............................. 291 5.4.2 Charger une ressource sur l'application............. 292 5.5 L'écoute d'évènements AJAX........................... 294 6. En résumé.............................................. 297

Table des matières 9 Chapitre 8 La sécurisation des services REST 1. Introduction............................................ 299 2. Identifier les risques...................................... 300 2.1 Les critères de sécurité................................ 300 2.2 Les bonnes pratiques................................. 301 3. Sécurisation du protocole de transport HTTP................. 302 3.1 Le protocole SSL..................................... 302 3.2 La protection des communications..................... 303 4. Authentifier les utilisateurs............................... 304 4.1 Identifier un utilisateur............................... 304 4.2 Ajouter un hachage de données........................ 305 4.3 Implémenter un jeton (token) d'authentification.......... 307 5. Gérer les requêtes uniques................................. 308 5.1 L'objectif........................................... 308 5.2 La gestion côté client................................. 308 5.3 La gestion côté serveur............................... 309 6. En résumé.............................................. 310 Chapitre 9 Les outils de développement 1. Introduction............................................ 311 2. Les outils de développement intégrés au navigateur............ 312 2.1 L'intégration dans les navigateurs....................... 312 2.2 L'analyse du DOM................................... 315 2.3 L'activité réseau..................................... 317 2.4 L'émulation......................................... 318 2.4.1 L'émulation mobile............................. 319 2.4.2 L'émulation de navigateur........................ 320 2.5 La console.......................................... 320

10 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE 3. La validation des scripts................................... 322 3.1 JSLint et JSHint..................................... 322 3.2 Validation W3C..................................... 325 4. Les IDE orientés présentation.............................. 327 4.1 Brackets.io......................................... 327 4.2 Atom.io........................................... 329 4.3 Sublime Text........................................ 330 4.4 Synthèse........................................... 332 5. En résumé.............................................. 333 Chapitre 10 Les interfaces riches avec jquery UI 1. Introduction............................................ 335 2. Créer des interfaces riches................................. 336 2.1 Intérêt de la bibliothèque............................. 336 2.2 Mise en place....................................... 337 3. Les interactions.......................................... 340 3.1 Draggable.......................................... 341 3.1.1 Implémenter la fonction de base.................. 341 3.1.2 Gérer le déplacement............................ 343 3.1.3 Définir le magnétisme........................... 344 3.1.4 Imposer le retour à l'état initial................... 346 3.2 Droppable.......................................... 346 3.2.1 Implémenter la fonction de base.................. 346 3.2.2 Contraindre les éléments acceptés................. 348 3.2.3 Gérer la validité de l'interactivité.................. 350 3.3 Sortable............................................ 351 3.3.1 Implémenter la fonction de base.................. 351 3.3.2 Limiter le déplacement.......................... 352 3.3.3 Connecter plusieurs listes........................ 353 3.3.4 Modifier le curseur.............................. 355

Table des matières 11 3.4 Resizable........................................... 356 3.4.1 Implémenter la fonction de base.................. 356 3.4.2 Préserver le ratio............................... 357 3.4.3 Limiter l'interactivité............................ 358 3.5 Selectable........................................... 359 3.5.1 Implémenter la fonction de base.................. 359 3.5.2 Gérer les évènements............................ 361 4. Les widgets............................................. 363 4.1 Dialog............................................. 364 4.2 Datepicker......................................... 367 4.3 Tabs.............................................. 370 5. Les effets............................................... 371 6. En résumé.............................................. 374 Index..................................................... 375

223 Chapitre 6 Les taglibs 1. Introduction Les taglibs La mise en place de solutions comme jquery nécessite de réaliser des pages JSP au code le plus conforme d'un point de vue navigateur. Avec le pattern MVC, la couche vue doit offrir des solutions pour générer des ressources clientes les plus propres, lisibles et dynamiques possible. C'est avec ces règles que les scripts jquery pourront tirer profit au maximum de leurs possibilités. En effet, plus la structure du document HTML sera cohérente, plus les sélecteurs seront pertinents et offriront des traitements performants. Depuis une dizaine d'années, l'utilisation des scriptlets (correspondant à du code Java entouré des balises <%... %>) est fortement déconseillée. Ce constat est principalement dû à l'apparition des taglibs (notamment la JSTL) et des expressions languages. Dans ce chapitre, nous verrons comment profiter de ce nouveau concept de Java server page Standard Tag Library (JSTL) dans l'écosystème JEE. Objectifs Maîtriser la bibliothèque Core de JSTL. Mettre au profit ces nouveaux concepts pour améliorer la lisibilité des vues. Créer des taglibs personnalisés pour répondre à des besoins spécifiques. Utiliser des éléments de la communauté.

224 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE Appréhender le couplage à des solutions clientes comme jquery. 2. Maîtriser la bibliothèque JSTL L'utilisation du modèle de conception MVC (Modèle/Vue/Contrôleur) exige une séparation importante de chacune des couches de l'application. Concernant la couche vue, il est important qu'aucune règle métier ne soit présente dans les JSP. Dans cette optique, la première action à mener est de supprimer tout code Java subsistant potentiellement dans les pages. C'est dans ce cadre que la bibliothèque JSTL intervient. À noter que la JSTL a fait l'objet de plusieurs versions : JSTL 1.0 : pour la plateforme JEE 3 et un conteneur JSP 1.2 comme par exemple Tomcat 4. JSTL 1.1 : pour la plateforme JEE 4 et un conteneur JSP 2.0 correspondant à un Tomcat 5.5. JSTL 1.2 (et 1.2.1) : qui est partie intégrante de la plateforme JEE 5, avec un conteneur JSP 2.1 ou 3.0 (Tomcat 6 et 7). Remarque Le conteneur JSP 1.2 sur lequel est basée la JSTL 1.0 ne gérait pas les expressions languages. Pour pallier ce manque, JSTL proposait deux implémentations : une les interprétant et l'autre non. Dans les exemples de ce chapitre, la version 1.2 sera utilisée pour la mise en place de solutions de taglibs. 2.1 Objectif La bibliothèque JSTL est une collection regroupant de nombreuses balises implémentant des fonctionnalités fréquentes lors de la création de pages JSP. Dans les applications web, il est fréquent d'avoir besoin de mettre en place des boucles, des conditions ou bien encore du formatage de données. Editions ENI - All rights reserved

Les taglibs Chapitre 6 225 Avant la mise en place de cette librairie, il était fréquent d'intégrer du code Java dans les pages JSP. Depuis JSTL, il est possible de respecter au mieux le découpage en couches recommandé par le modèle MVC. Syntaxiquement, ces nouvelles balises s'apparentent fortement à celles des JSP. Grâce à ce constat, les pages JSP gagnent en lisibilité et permettent aux développeurs d'améliorer la maintenabilité des éléments. Si cette fonctionnalité fait partie des points forts de la bibliothèque, l'utilisation de JSTL offre également un autre avantage : la quantité de code à écrire est fortement diminuée avec une syntaxe plus pratique et la possibilité d'intégrer des mécanismes itératifs de données. JSTL offre donc la possibilité de supprimer les scriptlets des pages JSP et respecter le découpage préconisé par le pattern MVC. 2.2 Configuration JSTL est une librairie externe. Son intégration dans un projet JEE nécessite de déporter cette ressource dans l'écosystème du projet pour bénéficier de ses possibilités. JSTL contient nativement plusieurs bibliothèques. Dans le cadre de ce livre, nous nous intéresserons principalement à la bibliothèque Core. Cette bibliothèque est naturellement incluse dans l'archive jar de la JSTL complète. C'est cette brique qui va permettre à l'application d'apporter des traitements itératifs ou conditionnels sur la page JSP. Par la suite, nous allons étudier les différents moyens d'intégration de cette solution ainsi que la configuration de celle-ci. 2.2.1 La mise en place de la librairie Même si la bibliothèque JSTL fait partie intégrante de la plateforme Java EE 7, Tomcat 8 n'est pas, par défaut, livré avec la librairie JSTL. Pour pouvoir utiliser les fonctionnalités que la librairie JSTL comporte, il faut associer cette librairie au projet. Remarque Certains serveurs d'applications comme Glassfish d'oracle proposent cette bibliothèque dans leur application.

226 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE Le site officiel de JSTL (https://jstl.java.net/index.html) propose un téléchargement direct de la librairie. Une fois récupérée, il est nécessaire de la déposer dans le répertoire adéquat du serveur d'applications. Pour rappel, une application web JEE possède la structure suivante : webapp _WebContent META-INF MANIFEST.MF WEB-INF lib web.xml Cette arborescence contient un répertoire lib dans le dossier WEB-INF. C'est ici que la librairie doit être déposée pour être fonctionnelle pour l'application. Une fois associée, les pages JSP de l'application peuvent bénéficier des fonctionnalités de la bibliothèque JSTL. Pour les projets utilisant Maven, une solution alternative est possible pour l'intégration de JSTL. Maven est un outil de gestion de dépendances permettant de construire des solutions Java (plus particulièrement des applications JEE) en optimisant les tâches à réaliser et en garantissant le bon ordre de fabrication. Cette solution se base sur le paradigme POM (Project Object Model) décrivant le projet avec ses dépendances et l'ordre à suivre pour sa mise en production. Ci-dessous un exemple de fichier POM d'une application JEE : <project xmlns="http://maven.apache.org/pom/4.0.0" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://maven.apache.org/pom/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelversion>4.0.0</modelversion> <groupid>fr.eni</groupid> <artifactid>taglibmaven</artifactid> <packaging>war</packaging> <version>0.0.1-snapshot</version> <name>taglibmaven Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> </dependencies> <build> <finalname>taglibmaven</finalname> </build> </project> Editions ENI - All rights reserved

Les taglibs Chapitre 6 227 Pour intégrer JSTL, il suffit donc d'apporter une dépendance au projet. La dépendance est formalisée dans un bloc XML dependency comportant les trois attributs suivants : groupid : correspondant au groupe qui a créé le projet. artifactid : indiquant un nom unique utilisé pour nommer les artifacts à construire. versions : version de l'artifact généré par le projet. Dans ce cas, la structure serait la suivante : <project xmlns="http://maven.apache.org/pom/4.0.0" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://maven.apache.org/pom/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelversion>4.0.0</modelversion> <groupid>fr.eni</groupid> <artifactid>taglibmaven</artifactid> <packaging>war</packaging> <version>0.0.1-snapshot</version> <name>taglibmaven Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupid>javax.servlet</groupid> <artifactid>jstl</artifactid> <version>1.2</version> </dependency> </dependencies> <build> <finalname>taglibmaven</finalname> </build> </project> Pour finaliser la mise en place, la dernière étape à réaliser est l'exécution de l'installation au moyen de Maven. Sous Eclipse, cette option peut être automatisée par le raccourci répondant à la manipulation décrite ci-dessous : dfaire un clic droit sur le nom du projet. dsélectionner Run As dans le menu contextuel. dcliquer sur l option Maven install.

228 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE Une fois exécuté, le résultat apparaît dans la console : [INFO] -------------------------------------------------------- [INFO] BUILD SUCCESS [INFO] -------------------------------------------------------- [INFO] Total time: 3.058 s [INFO] Finished at: 2015-04-06T13:11:09+01:00 [INFO] Final Memory: 11M/168M [INFO] -------------------------------------------------------- Si l'opération est un succès, la dépendance est associée au projet et est visible dans l'architecture de la solution dans le répertoire Maven Dependencies comme sur l'illustration suivante. Editions ENI - All rights reserved