Intégrer un framework JavaScript dans l’écosystème JEE€¦ · dans l’écosystème JEE...

ISBN

: 978

-2-7

460-

9648

-6

39 €

Java et jQueryIntégrer un framework JavaScript dans l’écosystème JEE

Analyste programmeur pen-dant plusieurs années, Kévin VALETTE est aujourd’hui ana-lyste et expert sur les technolo-gies Java. En lien étroit avec la MOA il propose des solutions de développement innovantes et créatives particulièrement sur l’implémentation d’IHM sur des applications web JEE. À travers les pages de ce livre il partage toute son expérience pour four-nir aux lecteurs un ouvrage réel-lement opérationnel pour tirer le meilleur parti possible des dernières évolutions de la plate-forme JEE.

Ce livre s’adresse aux développeurs Java souhaitant dyna-miser leurs applications web. Tout au long de ces pages l’auteur explique de façon pragmatique comment ajouter de la fluidité et du dynamisme au sein des pages mises à disposition des utilisateurs et comment les solutions clientes Javascript permettent d’apporter de la logique de présentation sur les écrans. C’est dans ce cadre que la bibliothèque jQuery inter-vient. Avec un concept simple "write less, do more", la biblio-thèque propose des fonctionnalités performantes et concises afin d’améliorer les vues de l’application tout en uniformisant les différents comportements des navigateurs.

Après les premiers chapitres du livre expliquant les différents concepts à maîtriser pour créer une solution JEE perfor-mante, ce livre donne les clés pour maitriser les différents as-pects de la solution jQuery et son intégration au sein de l’appli-cation. Au travers d’exemples, l’auteur détaille de nombreuses fonctionnalités concrètes provenant de problématiques du terrain. L’intégration du comportement dynamique au sein des JSP permettra de mettre en relief les possibilités offertes au travers de la bibliothèque cliente JavaScript. Les techniques AJAX sont présentées avec leurs problématiques : création d’un service REST se reposant sur les normes JEE7 et sa consom-mation par la vue au travers des mécanismes de jQuery. Ces nouvelles solutions proposent des outils performants (Brac-kets.io, Atom.io, …) permettant de construire, d’analyser et de consolider des solutions clientes. Cet outillage sera décrit dans un chapitre avec les différents points forts de chacune des briques. Pour aller encore plus loin, le livre propose un chapitre sur les possibilités des composants jQueryUI afin d’apporter des éléments réutilisables sur les applications.

Des éléments complémentaires sont en téléchargement sur le site www.editions-eni.fr.

Pour plus d’informations :

Téléchargementwww.editions-eni.fr.fr

Sur www.editions-eni.fr :b Code source des exemples traités dans le livre.b Exemples complémentaires d’implémentation.

Kévin VALETTE

Java

et jQuery Intégrer un framework

JavaScript dans l’écosystème JEE

Avant-propos • Premiers pas • La plateforme JEE • Les applications web • L’utilisation de jQuery • L’intégration de jQuery dans les JSP • Les taglibs • La technique AJAX • La sécurisation des ser-vices REST • Les outils de déve-loppement • Les interfaces riches avec jQuery UI

Les chapitres du livre

Java

et j

Que

ry

1Table des matières

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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.1 Les API JEE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.2 Les ressources statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3. Le protocole HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223.1 La norme HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233.2 Les requêtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.2.1 La ligne d'introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243.2.2 Les en-têtes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253.2.3 Le corps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.3 Les réponses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.3.1 La ligne de statut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.3.2 L'en-tête. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273.3.3 Le corps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4. Le serveur d'applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284.1 Conteneur web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284.2 Architecture N-tiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

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.

2Intégrer un framework JavaScript dans l’écosystème JEE

Java et jQuery

5. L'architecture MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305.1 Le modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305.2 L'implémentation JEE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

6. La bibliothèque jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326.1 Historique du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326.2 Intérêt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

7. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Chapitre 2

La plateforme JEE

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

2. Les servlets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362.1 Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

2.1.1 Technologie client/serveur. . . . . . . . . . . . . . . . . . . . . . . . . 362.1.2 Méthodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372.1.3 L'interface Servlet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

2.2 Descripteur de déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402.3 Cycle de vie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

2.3.1 Instanciation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432.3.2 Initialisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442.3.3 Traitement des requêtes. . . . . . . . . . . . . . . . . . . . . . . . . . . 452.3.4 Fin de vie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

2.4 Les listeners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462.5 La requête . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482.6 La réponse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492.7 Les filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

3. Les JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.1 La norme JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

3.1.1 Les balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.1.2 Les directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54


3.2 L'utilisation du modèle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563.2.1 Le JavaBean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563.2.2 La portée des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

3.3 Les actions standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583.3.1 useBean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593.3.2 getProperty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593.3.3 setProperty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603.3.4 include . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603.3.5 forward . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

3.4 Les expressions languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613.4.1 Les attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623.4.2 Les collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663.4.3 Les objets implicites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673.4.4 Les opérateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

4. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Chapitre 3

Les applications web

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

2. Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

3. Organisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743.1 Le dossier META-INF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 753.2 Le dossier WEB-INF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 753.3 Les ressources publiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

4. Configuration de déploiement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 774.1 Configuration des composants . . . . . . . . . . . . . . . . . . . . . . . . . . 78

4.1.1 Description de l'application . . . . . . . . . . . . . . . . . . . . . . . . 784.1.2 Fichiers d'index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794.1.3 Servlets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794.1.4 Filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 824.1.5 Attributs de contexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83


Java et jQuery

4.1.6 Attributs de sessions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 834.1.7 Gestion des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

4.2 Sécurité et authentification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 854.2.1 Les contraintes de sécurité . . . . . . . . . . . . . . . . . . . . . . . . . 854.2.2 L'authentification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 864.2.3 La sécurisation de la couche transport . . . . . . . . . . . . . . . 89

4.3 Compatibilité entre serveurs JEE. . . . . . . . . . . . . . . . . . . . . . . . . 90

5. Intégration de jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 915.1 Récupérer les sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

5.1.1 Depuis le site officiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 925.1.2 Depuis la plateforme Google . . . . . . . . . . . . . . . . . . . . . . . 935.1.3 Depuis Github . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 935.1.4 Depuis le gestionnaire de paquets Bower . . . . . . . . . . . . . 94

5.2 Exploiter les ressources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 955.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. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002.1 Le DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002.2 La fonction $() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1032.3 Les sélecteurs standardisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

2.3.1 Les sélecteurs CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1052.3.2 Les pseudoclasses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

2.4 Les sélecteurs spécifiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1122.5 Les sélecteurs de formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

3. Les évènements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1203.1 Le flux évènement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1213.2 L'objet Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123


3.3 La fonction ready . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1263.4 Les évènements simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1283.5 Les évènements composés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

4. Les transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1344.1 Effets et vitesse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

4.1.1 Gérer la vitesse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1344.1.2 Apporter un fondu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

4.2 Effets composés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1374.3 Animations personnalisées. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

5. Organiser son code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1405.1 Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

5.1.1 Objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1415.1.2 Module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

5.2 Factorisation des traitements . . . . . . . . . . . . . . . . . . . . . . . . . . 1435.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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1482.1 Manipuler des propriétés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

2.1.1 Les fonctions de style CSS . . . . . . . . . . . . . . . . . . . . . . . . 1522.1.2 Les fonctions de gestion d'attributs. . . . . . . . . . . . . . . . . 155

2.2 Gérer des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1612.2.1 Les fonctions d'insertion . . . . . . . . . . . . . . . . . . . . . . . . . 1612.2.2 Les fonctions de remplacement . . . . . . . . . . . . . . . . . . . . 1662.2.3 Les fonctions de suppression . . . . . . . . . . . . . . . . . . . . . . 1692.2.4 Les fonctions de copie . . . . . . . . . . . . . . . . . . . . . . . . . . . 171


Java et jQuery

3. Manipulation des tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1743.1 Modifier son affichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1763.2 Ajouter du tri dans les données . . . . . . . . . . . . . . . . . . . . . . . . . 180

3.2.1 Le tri côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1803.2.2 Le tri en JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181

3.3 Utiliser le plug-in dataTables. . . . . . . . . . . . . . . . . . . . . . . . . . . 1853.3.1 Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1863.3.2 Intégration dans l’application . . . . . . . . . . . . . . . . . . . . . 1863.3.3 Utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1893.3.4 Évènements personnalisés . . . . . . . . . . . . . . . . . . . . . . . . 191

4. Manipulation des formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1964.1 Améliorer un formulaire de base . . . . . . . . . . . . . . . . . . . . . . . 199

4.1.1 Les affichages conditionnels . . . . . . . . . . . . . . . . . . . . . . 2004.1.2 Les comportements liés . . . . . . . . . . . . . . . . . . . . . . . . . . 201

4.2 Gérer la validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2034.2.1 Les validations Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2034.2.2 Les validations jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

4.3 Utiliser le plug-in jquery-validate . . . . . . . . . . . . . . . . . . . . . . . 2154.3.1 Mise en place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2154.3.2 Implémentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2164.3.3 Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

5. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Chapitre 6

Les taglibs

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

2. Maîtriser la bibliothèque JSTL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2242.1 Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2242.2 Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

2.2.1 La mise en place de la librairie . . . . . . . . . . . . . . . . . . . . 2252.2.2 L'intégration dans une JSP . . . . . . . . . . . . . . . . . . . . . . . 229


2.3 La bibliothèque Core . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2302.3.1 Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2312.3.2 Les conditions et boucles . . . . . . . . . . . . . . . . . . . . . . . . . 2322.3.3 La gestion des URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

3. Créer un taglib personnalisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2383.1 Création du comportement . . . . . . . . . . . . . . . . . . . . . . . . . . . 2393.2 Déclaration de la fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2423.3 Intégration dans une JSP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244

4. Utiliser un taglib : DataTables Taglib . . . . . . . . . . . . . . . . . . . . . . . . 2474.1 Intérêt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2474.2 Mise en place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2474.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 . . . . . . . . . . . . . . . . . . . . . . . . 2563.1 Les formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2563.2 La syntaxe JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

3.2.1 Les valeurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2593.2.2 Les objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2593.2.3 Les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

4. Partie serveur : mettre à disposition des services REST . . . . . . . . . . 2604.1 Principes d'une architecture REST . . . . . . . . . . . . . . . . . . . . . . 261

4.1.1 Définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2614.1.2 Les normes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2614.1.3 REST et Jersey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2624.1.4 Cycle de vie d'un service . . . . . . . . . . . . . . . . . . . . . . . . . 265


Java et jQuery

4.2 Implémentation d'un service . . . . . . . . . . . . . . . . . . . . . . . . . . 2654.2.1 Mettre en place un service . . . . . . . . . . . . . . . . . . . . . . . 2654.2.2 Intégration d'un modèle . . . . . . . . . . . . . . . . . . . . . . . . . 2674.2.3 Déployer et consommer un service . . . . . . . . . . . . . . . . 269

4.3 Configuration du service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2714.3.1 Spécifier un chemin à la ressource . . . . . . . . . . . . . . . . . 2714.3.2 Associer une requête à une méthode . . . . . . . . . . . . . . . 2724.3.3 Définir les types d'entrées et sorties . . . . . . . . . . . . . . . . 2744.3.4 Récupérer des paramètres de la requête . . . . . . . . . . . . . 276

5. Partie cliente : consommer les services . . . . . . . . . . . . . . . . . . . . . . . 2765.1 La méthode .ajax() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277

5.1.1 La syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2775.1.2 Les promesses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2815.1.3 Les callbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2825.1.4 Les types de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2835.1.5 La sérialisation de données. . . . . . . . . . . . . . . . . . . . . . . . 284

5.2 GET : charger des données à la demande . . . . . . . . . . . . . . . . . 2855.2.1 La fonction .get() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2855.2.2 Consommer des données dans une JSP . . . . . . . . . . . . . 286

5.3 POST : passer des données au serveur . . . . . . . . . . . . . . . . . . . 2875.3.1 La fonction .post() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2885.3.2 Publier de l'information

dans le système d'information. . . . . . . . . . . . . . . . . . . . . 2895.4 LOAD : charger des informations . . . . . . . . . . . . . . . . . . . . . . . 291

5.4.1 La fonction .load() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2915.4.2 Charger une ressource sur l'application . . . . . . . . . . . . . 292

5.5 L'écoute d'évènements AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . 294

6. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297


Chapitre 8

La sécurisation des services REST

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

2. Identifier les risques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3002.1 Les critères de sécurité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3002.2 Les bonnes pratiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301

3. Sécurisation du protocole de transport HTTP . . . . . . . . . . . . . . . . . 3023.1 Le protocole SSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3023.2 La protection des communications . . . . . . . . . . . . . . . . . . . . . 303

4. Authentifier les utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3044.1 Identifier un utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3044.2 Ajouter un hachage de données . . . . . . . . . . . . . . . . . . . . . . . . 3054.3 Implémenter un jeton (token) d'authentification . . . . . . . . . . 307

5. Gérer les requêtes uniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3085.1 L'objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3085.2 La gestion côté client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3085.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 . . . . . . . . . . . . 3122.1 L'intégration dans les navigateurs . . . . . . . . . . . . . . . . . . . . . . . 3122.2 L'analyse du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3152.3 L'activité réseau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3172.4 L'émulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318

2.4.1 L'émulation mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3192.4.2 L'émulation de navigateur . . . . . . . . . . . . . . . . . . . . . . . . 320

2.5 La console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320


Java et jQuery

3. La validation des scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3223.1 JSLint et JSHint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3223.2 Validation W3C . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

4. Les IDE orientés présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3274.1 Brackets.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3274.2 Atom.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3294.3 Sublime Text. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3304.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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3362.1 Intérêt de la bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3362.2 Mise en place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

3. Les interactions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3403.1 Draggable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

3.1.1 Implémenter la fonction de base . . . . . . . . . . . . . . . . . . 3413.1.2 Gérer le déplacement . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3433.1.3 Définir le magnétisme . . . . . . . . . . . . . . . . . . . . . . . . . . . 3443.1.4 Imposer le retour à l'état initial . . . . . . . . . . . . . . . . . . . 346

3.2 Droppable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3463.2.1 Implémenter la fonction de base . . . . . . . . . . . . . . . . . . 3463.2.2 Contraindre les éléments acceptés . . . . . . . . . . . . . . . . . 3483.2.3 Gérer la validité de l'interactivité . . . . . . . . . . . . . . . . . . 350

3.3 Sortable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3513.3.1 Implémenter la fonction de base . . . . . . . . . . . . . . . . . . 3513.3.2 Limiter le déplacement . . . . . . . . . . . . . . . . . . . . . . . . . . 3523.3.3 Connecter plusieurs listes . . . . . . . . . . . . . . . . . . . . . . . . 3533.3.4 Modifier le curseur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355


3.4 Resizable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3563.4.1 Implémenter la fonction de base . . . . . . . . . . . . . . . . . . 3563.4.2 Préserver le ratio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3573.4.3 Limiter l'interactivité . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358

3.5 Selectable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3593.5.1 Implémenter la fonction de base . . . . . . . . . . . . . . . . . . 3593.5.2 Gérer les évènements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361

4. Les widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3634.1 Dialog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3644.2 Datepicker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3674.3 Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 370

5. Les effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371

6. En résumé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

223

Chapitre 6

Les taglibs

Les taglibs

1. Introduction

La mise en place de solutions comme jQuery nécessite de réaliser des pages JSPau 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 lesplus propres, lisibles et dynamiques possible. C'est avec ces règles que lesscripts jQuery pourront tirer profit au maximum de leurs possibilités. Eneffet, plus la structure du document HTML sera cohérente, plus les sélecteursseront pertinents et offriront des traitements performants.

Depuis une dizaine d'années, l'utilisation des scriptlets (correspondant à ducode Java entouré des balises <% ... %>) est fortement déconseillée. Ceconstat 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 deJava 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é.

© E

dit

ions

EN

I -

All r

ights

rese

rved


Java et jQuery

– 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) exigeune séparation importante de chacune des couches de l'application. Concer-nant la couche vue, il est important qu'aucune règle métier ne soit présentedans les JSP. Dans cette optique, la première action à mener est de supprimertout code Java subsistant potentiellement dans les pages. C'est dans ce cadreque la bibliothèque JSTL intervient. À noter que la JSTL a fait l'objet deplusieurs versions :

– JSTL 1.0 : pour la plateforme JEE 3 et un conteneur JSP 1.2 comme parexemple 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 unconteneur 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 expres-sions languages. Pour pallier ce manque, JSTL proposait deuximplé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 enplace de solutions de taglibs.

2.1 Objectif

La bibliothèque JSTL est une collection regroupant de nombreuses balisesimplé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 desboucles, des conditions ou bien encore du formatage de données.

225Les taglibsChapitre 6

Avant la mise en place de cette librairie, il était fréquent d'intégrer du codeJava dans les pages JSP. Depuis JSTL, il est possible de respecter au mieux ledécoupage en couches recommandé par le modèle MVC. Syntaxiquement, cesnouvelles balises s'apparentent fortement à celles des JSP. Grâce à ce constat,les pages JSP gagnent en lisibilité et permettent aux développeurs d'améliorerla maintenabilité des éléments.

Si cette fonctionnalité fait partie des points forts de la bibliothèque, l'utilisa-tion de JSTL offre également un autre avantage : la quantité de code à écrireest 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 sup-primer les scriptlets des pages JSP et respecter le découpage préconisé par lepattern MVC.

2.2 Configuration

JSTL est une librairie externe. Son intégration dans un projet JEE nécessite dedéporter cette ressource dans l'écosystème du projet pour bénéficier de sespossibilités. JSTL contient nativement plusieurs bibliothèques.

Dans le cadre de ce livre, nous nous intéresserons principalement à la biblio-thèque Core. Cette bibliothèque est naturellement incluse dans l'archive jarde la JSTL complète. C'est cette brique qui va permettre à l'applicationd'apporter des traitements itératifs ou conditionnels sur la page JSP. Par lasuite, nous allons étudier les différents moyens d'intégration de cette solutionainsi 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 utiliserles fonctionnalités que la librairie JSTL comporte, il faut associer cette librairieau projet.

Remarque

Certains serveurs d'applications comme Glassfish d'Oracle proposent cettebibliothèque dans leur application.

© E

dit

ions

EN

I -

All r

ights

rese

rved


Java et jQuery

Le site officiel de JSTL (https://jstl.java.net/index.html) propose un téléchar-gement direct de la librairie. Une fois récupérée, il est nécessaire de la déposerdans le répertoire adéquat du serveur d'applications. Pour rappel, une applica-tion 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'estici 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 desfonctionnalités de la bibliothèque JSTL.

Pour les projets utilisant Maven, une solution alternative est possible pourl'intégration de JSTL. Maven est un outil de gestion de dépendances permet-tant de construire des solutions Java (plus particulièrement des applicationsJEE) en optimisant les tâches à réaliser et en garantissant le bon ordre de fabri-cation. 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 enproduction. 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>

227Les taglibsChapitre 6

Pour intégrer JSTL, il suffit donc d'apporter une dépendance au projet. Ladépendance est formalisée dans un bloc XML dependency comportant lestrois 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 del'installation au moyen de Maven. Sous Eclipse, cette option peut être auto-matisé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.

© E

dit

ions

EN

I -

All r

ights

rese

rved


Java et jQuery

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 visibledans l'architecture de la solution dans le répertoire Maven Dependenciescomme sur l'illustration suivante.

Intégrer un framework JavaScript dans l’écosystème JEE€¦ · dans l’écosystème JEE...

Documents

Transcript of Intégrer un framework JavaScript dans l’écosystème JEE€¦ · dans l’écosystème JEE...