Mis à jour le vendredi 10 mars 2017
  • 40 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Outils et environnement de développement

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

La création d'une application web avec Java EE s'effectue généralement à l'aide d'un Environnement de Développement Intégré, très souvent raccourci à l'anglaise en IDE. C'est un logiciel destiné à faciliter grandement le développement dans son ensemble. S'il est possible pour certains projets Java de s'en passer, en ne se servant que d'un éditeur de texte pour écrire le code et d'une invite de commandes pour mettre en place l'application, ce n'est sérieusement plus envisageable pour la création d'une application web complexe. Nous allons donc dans ce chapitre apprendre à en utiliser un, et y intégrer notre serveur d'applications.

Si malgré mes conseils, votre côté « extrémiste du bloc-notes » prend le dessus et que vous souhaitez tout faire à la main, ne vous inquiétez pas, je prendrai le temps de détailler ce qui se trame en coulisses lorsque c'est important ! ;)

L'IDE Eclipse

Présentation

J'utiliserai l'IDE Eclipse tout au long de ce cours. Ce n'est pas le seul existant, c'est simplement celui que je maîtrise le mieux. Massivement utilisé en entreprise, c'est un outil puissant, gratuit, libre et multiplateforme. Les avantages d'un IDE dans le développement d'applications web Java EE sont multiples, et sans toutefois être exhaustif en voici une liste :

  • intégration des outils nécessaires au développement et au déploiement d'une application ;

  • paramétrage aisé et centralisé des composants d'une application ;

  • multiples moyens de visualisation de l'architecture d'une application ;

  • génération automatique de portions de code ;

  • assistance à la volée lors de l'écriture du code ;

  • outils de débogage…

Téléchargement et installation

Comme vous pouvez le constater en vous rendant sur la page de téléchargements du site, Eclipse est décliné en plusieurs versions. Nous avons bien entendu besoin de la version spécifique au développement Java EE (voir la figure suivante).

Page de téléchargement d'Eclipse pour Java EE
Page de téléchargement d'Eclipse pour Java EE

Cliquez sur "Eclipse IDE for Java EE Developers", puis choisissez et téléchargez la version correspondant à votre système d'exploitation, comme indiqué à la figure suivante.

Choix de la version correspondant à votre système d'exploitation
Choix de la version correspondant à votre système d'exploitation

Une fois le logiciel téléchargé, installez-le de préférence dans un répertoire situé directement à la racine de votre disque dur, et dont le titre ne contient ni espaces ni caractères spéciaux. Typiquement, évitez les dossiers du genre "Program Files" et consorts. Ce n'est pas une obligation mais un simple conseil, qui vous évitera bien des ennuis par la suite. Je l'ai pour ma part installé dans un répertoire que j'ai nommé eclipse et placé à la racine de mon disque dur : on peut difficilement faire plus clair. :)

Pour ceux d'entre vous qui ont déjà sur leur poste une version "Eclipse for Java developers" et qui ne souhaitent pas télécharger et installer la version pour Java EE, sachez qu'il est possible - mais bien moins agréable - d'y ajouter des plugins afin d'y reproduire l'intégration de l'environnement Java EE. Si vous y tenez, voici les étapes à suivre depuis votre fenêtre Eclipse :

  1. Allez dans Help > Install New Software.

  2. Choisissez le site "Indigo - http://download.eclipse.org/releases/indigo".

  3. Déroulez "Web, XML, and Java EE Development".

  4. Cochez alors "JST Server Adapters" et "JST Server Adapters Extentions".

Ça résoudra une partie des problèmes que vous pourriez rencontrer par la suite en suivant ce cours.
Notez bien toutefois que je vous conseille de ne pas procéder ainsi, et de repartir d'une version vierge d'Eclipse pour Java EE.

Configuration

Ci-dessous, je vous donne quelques conseils pour configurer votre Eclipse efficacement. Je ne vais pas vous expliquer en détail pourquoi ces réglages sont importants, faites-moi simplement confiance et suivez le guide !

Modification de l'encodage par défaut

Si vous ouvrez Eclipse pour la première fois, commencez par fermer l'onglet de bienvenue qui s'affiche. Rendez-vous alors dans la barre de menus supérieure, et cliquez surWindow, puisPreferences. Dans la fenêtre qui s'affiche alors, il y a un champ vous permettant de taper du texte en haut à gauche. Saisissez-y le mot "encoding", et dans chaque section qui apparaît alors dans le volet de gauche, changez l'encodage par défaut (il est généralement réglé à Cp1252 ou ISO-8859-1) par la valeur UTF-8, comme indiqué à la figure suivante.

Image utilisateurImage utilisateurImage utilisateurImage utilisateur

Validez pour finir en cliquant sur Ok afin d'appliquer les modifications.

Désactivation de la vérification de l'orthographe

Rendez-vous à nouveau dans le menuWindow>Preferences, puis dans le volet de gauche rendez-vous dansGeneral>Editors>Text Editors, et dans le volet de droite cochez la case "Show line numbers". Dans le volet de gauche, cliquez alors sur le sous-menuSpelling, et dans le nouveau volet de droite qui apparaît, décochez la case "Enable spell checking" (voir la figure suivante).

Image utilisateurImage utilisateur

Validez pour finir en cliquant sur Ok afin d'appliquer les modifications.

Le serveur Tomcat

Présentation

Nous l'avons découvert dans le second chapitre : pour faire fonctionner une application web Java EE, nous avons besoin de mettre en place un serveur d'applications. Il en existe beaucoup sur le marché : j'ai, pour le début de ce cours, choisi d'utiliser Tomcat, car c'est un serveur léger, gratuit, libre, multiplateforme et assez complet pour ce que nous allons aborder. On le rencontre d'ailleurs très souvent dans des projets en entreprise, en phase de développement comme en production.

Si vous souhaitez vous renseigner sur les autres serveurs existants et sur leurs différences, vous savez où chercher. Wikipédia en propose par ailleurs une liste non exhaustive.

Installation

Nous allons utiliser la dernière version en date à ce jour, à savoir Tomcat 7.0. Rendez-vous sur la page de téléchargement de Tomcat, puis choisissez et téléchargez la version correspondant à votre système d'exploitation, comme indiqué à la figure suivante.

Page de téléchargement de Tomcat
Page de téléchargement de Tomcat
Sous Windows

Récupérez la dernière version Core au format zip, puis décompressez son contenu dans le répertoire où vous souhaitez installer Tomcat. Au sujet du répertoire d'installation, même conseil que pour Eclipse : choisissez un chemin dont les noms de dossiers ne comportent pas d'espaces : pour ma part, je l'ai placé dans un dossier nommé tomcat7 à la racine de mon disque. Un dossier nommé apache-tomcat-7.0.xx (les deux derniers numéros changeant selon la version que vous utiliserez) contient alors l'installation. Pour information, ce dossier est souvent référencé dans les cours et documentations sous l’appellation Tomcat Home. Voici à la figure suivante ce que j'obtiens sur mon poste.

Répertoire d'installation de Tomcat
Répertoire d'installation de Tomcat

Dans ce répertoire d'installation de Tomcat, vous trouverez un dossier nommé webapps : c'est ici que seront stockées par défaut vos applications. Pour ceux d'entre vous qui souhaiteraient jeter un œil à ce qui se passe derrière les rideaux, vous trouverez dans le dossier conf les fichiers suivants :

  • server.xml : contient les éléments de configuration du serveur ;

  • context.xml : contient les directives communes à toutes les applications web déployées sur le serveur ;

  • tomcat-users.xml : contient entre autres l'identifiant et le mot de passe permettant d'accéder à l'interface d'administration de votre serveur Tomcat ;

  • web.xml : contient les paramètres de configuration communs à toutes les applications web déployées sur le serveur.

Sous Linux

Récupérez la dernière version Core au format tar.gz : une archive nommée apache-tomcat-7.0.xx.tar.gz est alors enregistrée sur votre poste, où xx correspond à la sous-version courante. Au moment où j'écris ces lignes, la version est la 7.0.20 : pensez à adapter les commandes qui suivent à la version que vous téléchargez. Décompressez ensuite son contenu dans le répertoire où vous souhaitez installer Tomcat. Par exemple :

cd /usr/local
mkdir tomcat
cd /usr/local/tomcat
cp ~/apache-tomcat-7.0.20.tar.gz .
tar -xvzf apache-tomcat-7.0.20.tar.gz

Un dossier nommé apache-tomcat-7.0.20 contient alors l'installation. Pour information, ce dossier est souvent référencé dans les cours et documentations sous l’appellation Tomcat Home. Vérifiez alors que l'installation s'est bien effectuée :

cd /usr/local/tomcat/apache-tomcat-7.0.20
cd bin
./version.sh

Ce script montre que Tomcat 7.0 a été installé avec succès sur votre distribution Linux :

Server version: Apache Tomcat/7.0.20
Server built:   Aug 28 2011 15:13:02
Server number:  7.0.20.0
OS Name:        Linux
Sous Mac OS

Je n'ai malheureusement pas à ma disposition de machine tournant sous Mac OS. Si vous êtes un aficionado de la marque à la pomme, voici deux liens qui expliquent comment installer Tomcat 7 sur OS X :

Bonne lecture, et n'hésitez pas à me prévenir d'éventuelles erreurs ou changements dans le procédé présenté, je modifierai cette section du chapitre en conséquence.

Création du projet web avec Eclipse

Depuis Eclipse, suivez le chemin suivant :File > New > Project...(voir la figure suivante).
Ceci peut d'ailleurs être raccourci en tapant au clavier Ctrl + N.

Nouveau projet web sous Eclipse
Nouveau projet web sous Eclipse

Sélectionnez alors Dynamic Web Project comme le montre l'image ci-dessus, puis cliquez surNext >. J'appelle ici mon projet test. Remarquez ensuite à la figure suivante le passage concernant le serveur.

Mise en place de Tomcat - Étape 1
Mise en place de Tomcat - Étape 1

Cliquez sur le boutonNew Runtime...et sélectionnez alors Apache Tomcat 7.0 dans la liste des possibilités, comme indiqué à la figure suivante.

Mise en place de Tomcat - Étape 2
Mise en place de Tomcat - Étape 2

Cochez la case comme indiqué ci-dessus, ce qui signifie que nous allons en plus du projet créer localement une nouvelle instance d'un serveur, instance que nous utiliserons par la suite pour déployer notre application. Cliquez ensuite surNext >et remplissez correctement les informations relatives à votre installation de Tomcat en allant chercher le répertoire d'installation de Tomcat sur votre poste. Les champs devraient alors ressembler à ceux de la figure suivante, le répertoire d'installation et le numéro de version de Tomcat 7 pouvant être différents chez vous selon ce que vous avez choisi et installé.

Mise en place de Tomcat - Étape 3
Mise en place de Tomcat - Étape 3

Validez alors en cliquant surFinish, puis cliquez deux fois surNext >, jusqu'à obtenir cette fenêtre (voir la figure suivante).

Mise en place de Tomcat - Étape 4
Mise en place de Tomcat - Étape 4

Avant d'aller plus loin, il est nécessaire de parler contexte !

Souvenez-vous, je vous ai déjà parlé d'un fichier context.xml associé à toutes les applications. Pour permettre plus de souplesse, il est possible de spécifier un contexte propre à chaque webapp. Comme je vous l'ai déjà dit, ces applications web sont empiriquement contenues dans le dossier… webapps de votre Tomcat Home. C'est ici que, par défaut, Tomcat ira chercher les applications qu'il doit gérer et déployer. Jusque-là, vous suivez…

Le souci, et certains d'entre vous l'auront peut-être déjà compris, c'est que notre projet à nous, créé depuis Eclipse, se trouve dans un répertoire de notre workspace Eclipse : il n'est pas du tout dans ce fameux répertoire webapps de Tomcat. Pour que notre serveur prenne en compte notre future application, il va donc falloir arranger le coup ! Plusieurs solutions s'offrent à nous :

  • créer un répertoire du même nom que notre projet sous Eclipse, directement dans le dossier webapps de Tomcat, et y copier-coller nos fichiers, et ce à chaque modification de code ou configuration effectuée ;

  • créer un nouveau projet depuis Eclipse, en utilisant directement le répertoire webapps de votre Tomcat Home comme workspace Eclipse ;

  • modifier le server.xml ou le context.xml de votre Tomcat, afin qu'il sache où chercher ;

  • utiliser les propriétés d'un projet web dynamique sous Eclipse.

Étant donné la dernière fenêtre qui s'est affichée, vous avez probablement deviné sur quelle solution notre choix va se porter. Je vous conseille bien évidemment ici d'utiliser la quatrième et dernière solution. Conservez le nom de votre projet sous Eclipse comme contexte de déploiement sur votre serveur Tomcat ("Context root" sur l'image précédente), afin de rester cohérent. Utiliser les paramètres ci-dessus permet alors de ne pas avoir à modifier vous-mêmes le contexte de votre serveur, ou encore de ne pas avoir à utiliser le dossier webapps de votre serveur Tomcat en guise de workspace. Toute modification sur vos futures pages et classes sera ainsi automatiquement prise en compte par votre serveur Tomcat, qui s'occupera de recharger le contexte à chaque modification sauvegardée, lorsque le serveur sera lancé.

Comme diraient les têtes à claques, isn't it amazing? ;)

Voici maintenant à la figure suivante ce à quoi doit ressembler votre fenêtre Eclipse.

Mise en place de Tomcat - Étape 5
Mise en place de Tomcat - Étape 5

Vous noterez l'apparition d'une entrée Tomcat v7.0 dans l'ongletServers, et de l'arborescence de votre projettestdans le volet de gauche.
Faites maintenant un clic droit sur le titre de votre projet dans l'arborescence Eclipse, et suivezRun As > Run on Server, comme indiqué à la figure suivante.

Mise en place de Tomcat - Étape 6
Mise en place de Tomcat - Étape 6

Dans la fenêtre qui s'ouvre alors (voir la figure suivante), nous allons sélectionner le serveur Tomcat que nous venons de mettre en place lors de la création de notre projet web, et préciser que l'on souhaite associer par défaut notre projet à ce serveur.

Mise en place de Tomcat - Étape 7
Mise en place de Tomcat - Étape 7

Cliquez alors surNext >, puis vérifiez que votre nouveau projet est bien pris en compte par votre serveur (voir la figure suivante).

Mise en place de Tomcat - Étape 8
Mise en place de Tomcat - Étape 8

Validez enfin en cliquant surFinish, et voilà la mise en place de votre projet et de son serveur terminée ! :)

Pour la petite histoire, une section est ajoutée dans le fichier server.xml de votre instance de Tomcat, qui est maintenant accessible depuis le dossier Servers de votre arborescence Eclipse, comme vous pouvez le voir sur la figure suivante.

Mise en place de Tomcat - Étape 9
Mise en place de Tomcat - Étape 9

Si vous êtes curieux, éditez-le ! Vous verrez qu'il contient effectivement en fin de fichier une section de ce type :

<Context docBase="test" path="/test" reloadable="true" source="org.eclipse.jst.jee.server:test"/>

Dorénavant, pour piloter votre serveur Tomcat il vous suffira de vous rendre dans l'onglet Servers en bas de votre fenêtre Eclipse, et d'utiliser un des boutons selon le besoin (redémarrage, arrêt, debug), comme indiqué à la figure suivante.

Mise en place de Tomcat - Étape 10
Mise en place de Tomcat - Étape 10

Si vous êtes arrivés jusqu'ici, c'est que votre instance de serveur Tomcat est fonctionnelle et que vous pouvez la piloter depuis Eclipse. Voyons maintenant où placer notre premier essai, et comment y accéder.

Structure d'une application Java EE

Structure standard

Toute application web Java EE doit respecter une structure de dossiers standard, qui est définie dans les spécifications de la plate-forme. Vous en trouverez le schéma à la figure suivante.

Structure des fichiers d'une application web JSP/Servlet
Structure des fichiers d'une application web JSP/Servlet

Quelques précisions :

  • La racine de l'application, en violet sur le schéma, est le dossier qui porte le nom de votre projet et qui contient l'intégralité des dossiers et fichiers de l'application.

  • Le dossier nommé WEB-INF est un dossier spécial. Il doit obligatoirement exister et être placé juste sous la racine de l'application. Il doit à son tour obligatoirement contenir :

    • le fichier de configuration de l'application (web.xml) ;

    • un dossier nommé classes, qui contient à son tour les classes compilées (fichiers .class) ;

    • un dossier nommé lib, qui contient à son tour les bibliothèques nécessaires au projet (archives .jar).

    Bref, tous les dossiers et fichiers marqués en rouge sur le schéma doivent obligatoirement être nommés et placés comme indiqué sur le schéma.

  • Les fichiers et dossiers persos placés directement sous la racine, en bleu sur le schéma, sont publics et donc accessibles directement par le client via leurs URL. (*)

  • Les fichiers et dossiers persos placés sous le répertoire WEB-INF, en orange sur le schéma, sont privés et ne sont donc pas accessibles directement par le client. (*)

(*) Nous reviendrons en temps voulu sur le caractère privé du dossier WEB-INF, et sur la distinction avec les dossiers publics.

Votre première page web

Eclipse, ce fourbe !

Ce que vous devez savoir avant de continuer, c'est qu'Eclipse joue souvent au fourbe, en adaptant certaines spécificités à son mode de fonctionnement. En l'occurrence, Eclipse modifie comme suit la structure d'une application Java EE (voir la figure suivante).

Structure des fichiers d'une application web sous Eclipse
Structure des fichiers d'une application web sous Eclipse

Comme vous pouvez le voir en vert sur le schéma, Eclipse déplace la structure standard de l'application vers un dossier nommé WebContent, et ajoute sous la racine un dossier src qui contiendra le code source de vos classes (les fichiers .java). En outre (je ne les ai pas représentés ici), sachez qu'Eclipse ajoute également sous la racine quelques fichiers de configuration qui lui permettront, via une tambouille interne, de gérer correctement l'application !

Attendez... Je viens de vous dire que si notre application n'était pas correctement structurée, notre serveur d'applications ne saurait pas la gérer. Si Eclipse vient mettre son nez dans cette histoire, comment notre application va-t-elle pouvoir fonctionner ?

Eh bien comme je viens de vous l'annoncer, Eclipse se débrouille via une tambouille interne pour que la structure qu'il a modifiée soit, malgré tout, utilisable sur le serveur d'applications que nous lui avons intégré. Ceci implique donc deux choses très importantes :

  • le dossier WebContent n'existe légitimement qu'au sein d'Eclipse. Si vous développez sans IDE, ce répertoire ne doit pas exister et votre application doit impérativement suivre la structure standard présentée précédemment ;

  • pour cette même raison, si vous souhaitez utiliser votre application en dehors de l'IDE, il faudra obligatoirement utiliser l'outil d'export proposé par Eclipse. Réaliser un simple copier-coller des dossiers ne fonctionnera pas en dehors d'Eclipse ! Là encore, nous y reviendrons plus tard.

Création d'une page web

Vous avez maintenant en mains toutes les informations pour bien débuter. Votre projet dynamique fraîchement créé, vous pouvez maintenant placer votre première page HTML dans son dossier public, c'est-à-dire sous le dossier WebContent d'Eclipse (voir le bloc bleu sur notre schéma). Pour cela, tapez une nouvelle fois Ctrl + N au clavier, puis cherchez HTML File dans le dossier Web de l'arborescence qui apparaît alors. Sélectionnez ensuite le dossier parent, en l'occurrence le dossier WebContent de votre projet, puis donnez un nom à votre page et enfin validez. Je nomme ici ma page test.html (voir les figures suivantes).

Création d'une page HTML dans votre projet
Création d'une page HTML dans votre projet
Saisie du dossier parent et du nom de la page HTML
Saisie du dossier parent et du nom de la page HTML

Une page HTML est donc apparue dans votre projet, sous le répertoire WebContent. Remplacez alors le code automatiquement généré par Eclipse dans votre page par ce code HTML basique :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
    </head>
    <body>
        <p>Ceci est une page HTML.</p>
    </body>
</html>

Vous pouvez maintenant tenter d'accéder à votre page web fraîchement créée. Pour ce faire, lancez le serveur Tomcat, via le bouton

Image utilisateur

si vous avez bien suivi les instructions que je vous ai présentées précédemment. Ouvrez ensuite votre navigateur préféré, et entrez l'URL suivante afin d'accéder à votre serveur :

http://localhost:8080/test/test.html

Votre page s'affiche alors sous vos yeux… déçus !? o_O

C'est quoi toute cette histoire ? Tout un flan pour afficher trois mots ?

Patience, patience… Notre serveur étant maintenant fonctionnel, nous voici prêts à entrer dans le vif du sujet.

  • Un IDE permet de simplifier le développement d'un projet dans son ensemble.

  • Tomcat n'est pas un serveur d'applications Java EE au sens complet du terme.

  • La configuration du serveur passe principalement par deux fichiers : server.xml et web.xml.

  • Une application web Java EE doit respecter une architecture bien définie.

  • Eclipse modifie l'architecture des applications pour les intégrer correctement à son système.

Nous sommes maintenant prêts pour développer notre première application web. Allons-y !

Exemple de certificat de réussite
Exemple de certificat de réussite