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

Transcription

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

2 Table des matières 1 Les éléments à télécharger sont disponibles à l'adresse suivante : 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 Niveau de compétences requis Structure du livre Chapitre 1 Premiers pas 1. Introduction Les applications JEE Les API JEE Les ressources statiques Le protocole HTTP La norme HTTP Les requêtes La ligne d'introduction Les en-têtes Le corps Les réponses La ligne de statut L'en-tête Le corps Le serveur d'applications Conteneur web Architecture N-tiers

3 2 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE 5. L'architecture MVC Le modèle L'implémentation JEE La bibliothèque jquery Historique du projet Intérêt En résumé Chapitre 2 La plateforme JEE 1. Introduction Les servlets Concepts Technologie client/serveur Méthodes L'interface Servlet Descripteur de déploiement Cycle de vie Instanciation Initialisation Traitement des requêtes Fin de vie Les listeners La requête La réponse Les filtres Les JSP La norme JSP Les balises Les directives

4 Table des matières L'utilisation du modèle Le JavaBean La portée des objets Les actions standards usebean getproperty setproperty include forward Les expressions languages Les attributs Les collections Les objets implicites Les opérateurs En résumé Chapitre 3 Les applications web 1. Introduction Description Organisation Le dossier META-INF Le dossier WEB-INF Les ressources publiques Configuration de déploiement Configuration des composants Description de l'application Fichiers d'index Servlets Filtres Attributs de contexte

5 4 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE Attributs de sessions Gestion des erreurs Sécurité et authentification Les contraintes de sécurité L'authentification La sécurisation de la couche transport Compatibilité entre serveurs JEE Intégration de jquery Récupérer les sources Depuis le site officiel Depuis la plateforme Google Depuis Github Depuis le gestionnaire de paquets Bower Exploiter les ressources Associer le framework dans une JSP En résumé Chapitre 4 L'utilisation de jquery 1. Introduction Les sélecteurs Le DOM La fonction $() Les sélecteurs standardisés Les sélecteurs CSS Les pseudoclasses Les sélecteurs spécifiques Les sélecteurs de formulaires Les évènements Le flux évènement L'objet Event

6 Table des matières La fonction ready Les évènements simples Les évènements composés Les transitions Effets et vitesse Gérer la vitesse Apporter un fondu Effets composés Animations personnalisées Organiser son code Encapsulation Objet Module Factorisation des traitements Fonctions anonymes En résumé Chapitre 5 L'intégration de jquery dans les JSP 1. Introduction Manipulation du DOM Manipuler des propriétés Les fonctions de style CSS Les fonctions de gestion d'attributs Gérer des éléments Les fonctions d'insertion Les fonctions de remplacement Les fonctions de suppression Les fonctions de copie

7 6 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE 3. Manipulation des tables Modifier son affichage Ajouter du tri dans les données Le tri côté serveur Le tri en JavaScript Utiliser le plug-in datatables Objectif Intégration dans l application Utilisation Évènements personnalisés Manipulation des formulaires Améliorer un formulaire de base Les affichages conditionnels Les comportements liés Gérer la validation Les validations Java Les validations jquery Utiliser le plug-in jquery-validate Mise en place Implémentation Options En résumé Chapitre 6 Les taglibs 1. Introduction Maîtriser la bibliothèque JSTL Objectif Configuration La mise en place de la librairie L'intégration dans une JSP

8 Table des matières La bibliothèque Core Les variables Les conditions et boucles La gestion des URL Créer un taglib personnalisé Création du comportement Déclaration de la fonction Intégration dans une JSP Utiliser un taglib : DataTables Taglib Intérêt Mise en place Utilisation En résumé Chapitre 7 La technique AJAX 1. Introduction Le concept Les structures d'échanges de données Les formats La syntaxe JSON Les valeurs Les objets Les tableaux Partie serveur : mettre à disposition des services REST Principes d'une architecture REST Définition Les normes REST et Jersey Cycle de vie d'un service

9 8 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE 4.2 Implémentation d'un service Mettre en place un service Intégration d'un modèle Déployer et consommer un service Configuration du service Spécifier un chemin à la ressource Associer une requête à une méthode Définir les types d'entrées et sorties Récupérer des paramètres de la requête Partie cliente : consommer les services La méthode.ajax() La syntaxe Les promesses Les callbacks Les types de données La sérialisation de données GET : charger des données à la demande La fonction.get() Consommer des données dans une JSP POST : passer des données au serveur La fonction.post() Publier de l'information dans le système d'information LOAD : charger des informations La fonction.load() Charger une ressource sur l'application L'écoute d'évènements AJAX En résumé

10 Table des matières 9 Chapitre 8 La sécurisation des services REST 1. Introduction Identifier les risques Les critères de sécurité Les bonnes pratiques Sécurisation du protocole de transport HTTP Le protocole SSL La protection des communications Authentifier les utilisateurs Identifier un utilisateur Ajouter un hachage de données Implémenter un jeton (token) d'authentification Gérer les requêtes uniques L'objectif La gestion côté client La gestion côté serveur En résumé Chapitre 9 Les outils de développement 1. Introduction Les outils de développement intégrés au navigateur L'intégration dans les navigateurs L'analyse du DOM L'activité réseau L'émulation L'émulation mobile L'émulation de navigateur La console

11 10 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE 3. La validation des scripts JSLint et JSHint Validation W3C Les IDE orientés présentation Brackets.io Atom.io Sublime Text Synthèse En résumé Chapitre 10 Les interfaces riches avec jquery UI 1. Introduction Créer des interfaces riches Intérêt de la bibliothèque Mise en place Les interactions Draggable Implémenter la fonction de base Gérer le déplacement Définir le magnétisme Imposer le retour à l'état initial Droppable Implémenter la fonction de base Contraindre les éléments acceptés Gérer la validité de l'interactivité Sortable Implémenter la fonction de base Limiter le déplacement Connecter plusieurs listes Modifier le curseur

12 Table des matières Resizable Implémenter la fonction de base Préserver le ratio Limiter l'interactivité Selectable Implémenter la fonction de base Gérer les évènements Les widgets Dialog Datepicker Tabs Les effets En résumé Index

13 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é.

14 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

15 Les taglibs Chapitre 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 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.

16 226 Java et jquery Intégrer un framework JavaScript dans l écosystème JEE Le site officiel de JSTL ( 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=" xmlns:xsi=" xsi:schemalocation=" <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> <dependencies> </dependencies> <build> <finalname>taglibmaven</finalname> </build> </project> Editions ENI - All rights reserved

17 Les taglibs Chapitre 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=" xmlns:xsi=" xsi:schemalocation=" <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> <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.

18 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: s [INFO] Finished at: T13: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