Introduction au développement d'applications Web
Ce document vous montre les bases de l'utilisation de l'IDE NetBeans dans le cadre
du développement d'une application web. Il démontre comment créer une simple application web,
la déployer sur un serveur, et voir son éxecution dans un navigateur. L'application emploie
une page JavaServer
Pages™ (JSP) pour vous demander d'entrer votre nom. Il utilise ensuite
un composant JavaBeans™
pour conserver le nom durant la session HTTP, et récupérer ce nom pour l'afficher sur une
deuxième page JSP.
Contenu
Pour suivre ce cours, vous devez avoir les logiciels et ressources suivants :
| IDE NetBeans |
Installation EE de Java ou Web & Java
NetBeans 6.5, 6.1, or
version 6.0 |
| Java Development Kit (JDK) |
version 6 or
version 5 |
Application serveur GlassFish
ou
Conteneur servlet Tomcat |
V2
version 6.x |
Notes:
- L'installation de web & Java EE vous propose d'installer le serveur
d'application GlassFish V2 et le conteneur servlet Apache Tomcat version 6.0.x.
Vous devez installer une de ces deux options pour suivre ce cours.
- Pour profiter des possibilités Java EE5 de l'IDE NetBeans, utilisez un serveur
d'application qui est totalement compatible avec les spécification Java EE 5,
tel que Serveur
d'application GlassFish V2 UR2. Si vous utilisez un autre serveur, consultez
la Release Notes
et les FAQs pour
voir les problèmes connus. Pour des informations plus détaillées sur les serveurs
supportés et sur la plate-forme Java EE, allez voir les
Release Notes.
- Si vous voulez comparer votre projet avec une solution fonctionnelle, vous pouvez
télécharger
l'application exemple.
Configurer un projet d'application web
- Choisissez File > New Project (Ctrl-Shift-N) à partir du menu principal. Sous l'onglet
"Categories", sélectionnez Web. Sous l'onglet "Projects", sélectionnez "Web Application" puis
cliquez sur "Next".
- Dans l'étape 2, entrez HelloWeb dans la boite de texte "Project Name". Notez
que le "Context Path" (i.e., sur le serveur) devient /HelloWeb.
- Précisez l'emplacement du projet en indiquant n'importe quel répertoire de votre ordinateur. Pour
ce tutoriel, ce répertoire est appelé
$PROJECTHOME.
Note: Créer un projet avec l'IDE NetBeans 6.1 or 6.5 inclue de
nouvelles options qui peuvent être laissées par défaut. Par exemple, la case à cocher
Use Dedicated Folder for Storing Libraries
peut être laissée non cochée.
- Si vous utilisez l'IDE NetBeans 6.1 ou 6.5, Cliquez sur "Next"; sinon, continuez avec l'étape 5.
- Sélectionnez le serveur sur lequel vous souhaitez déployer votre application. Seuls les Only
serveurs déclarés dans l'IDE sont listés.
- Sélectionnez la version de Java EE que vous voulez utiliser avec votre application et cliquez sur "Next".
- Cliquez "Finish" pour créer le projet.
L'IDE
crée le répertoire projet $PROJECTHOME/HelloWeb. Ce répertoire
contient toutes vos sources ainsi que les méta données du projet, telles que
le script de construction Ant. Le projet "HelloWeb" s'ouvre dans l'IDE.
La page de bienvenue, index.jsp, s'ouvre dans l'éditeur de source dans la fenêtre
principale. Vous pouvez voir les fichiers du projet dans la fenêtre des fichiers
(Ctrl-2), et sa structure logique dans la fenêtre des projets (Ctrl-1):
Créer et éditer les fichiers sources d'une application web
Créer et éditer les fichiers de code source est la fonction principale de l'IDE.
Après tout, c'est ce que vous passez le plus de temps à faire au cours de votre journée non?
L'IDE fournit une large gamme d'outils s'adaptant ainsi à tous les styles de développeurs,
de ceux qui veulent tout coder à la main jusqu'à ceux qui préfèrent que l'IDE génère
pour eux de grandes portions de code.
Créer un pakage Java et un fichier de code source Java
- Dans la fenêtre des projets, développez le noeud "Source Packages". Notez que
le noeud "Source Packages" contient seulement, par défaut, un noeud de package vide.
- Faites un clic droit sur le noeud "Source Packages" et choisissez New > Java Class.
Entrez NameHandler dans la boite de texte "Class Name" et tapez
org.mypackage.hello dans la boite déroulante "Package". Cliquez sur "Finish".
Notez que le nouveau fichier NameHandler.java s'ouvre
dans l'éditeur de sources.
- Dans l'éditeur de sources, déclarez une variable String en tapant dans le corps
de la classe :
String name;
- Ajoutez le constructeur suivant à la classe:
public NameHandler()
- Ajoutez les lignes suivantes dans le constructeur NameHandler():
name = null;
Générer les méthodes "Getter" et "Setter"
- Faites un clic droit sur le champ name dans l'éditeur de source et choisissez
Refactor > Encapsulate Fields. La boite de dialogue d'encapsulation des champs apparait,
montrant le champ name. Notez que la visibilité du champ est, par défaut,
prépositionnée sur "private", que celle de l'accesseur est prépositionnée sur "public", ce qui
indique que le modificateur pour la déclaration de la variable de classe sera précisé
comme "private", tandis que les méthodes "getter" et "setter" seront générées
avec les attributs public and private respectivement.
- Cliquez sur "Refactor". Les méthodes "Getter" et "setter" sont générées pour le champ
name. L'attribut de la variable de classe est défini comme private
tandis que les méthodes "getter" et "setter" sont générées avec l'attribut "public".
La classe Java devrait maintenant ressembler à :
package org.mypackage.hello;
/**
*
* @author nbuser
*/
public class NameHandler {
private String name;
/** Creates a new instance of NameHandler */
public NameHandler() {
name = null;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Editer le fichier par défaut des pages JavaServer
- Refaire apparaitre le fichier index.jsp en cliquant sur l'onglet affiché en haut
de l'éditeur de sources.
- Dans la palette (Ctrl-Shift-8) située à la droite de l'éditeur de sources,
développez "HTML Forms" puis tirez un objet de type formulaire ("Form") et positionnez le juste après
la déclaration <h2> dans l'éditeur de sources.
La boite de dialogue d'insertion de formulaire s'affiche :
Précisez les valeurs suivantes:
- Action: response.jsp
- Methode: GET
- Name: Formulaire de saisie du nom
Cliquez sur "OK". Un formulaire HTML est ajouté au fichier index.jsp.
- Tirez un objet d'entrée de texte ("Text input") et insérez le avant la déclaration </form>,
puis précisez les valeurs suivantes :
Cliquez sur "OK". Un onglet HTML <input> est ajouté entre les onglets
<form>.
- Tirez un objet bouton insérez le avant la déclaration </form>.
Précisez les valeurs suivantes :
Cliquez sur "OK". Un bouton HTML button est ajouté entre les onglets <form>.
- Tapez Enter your name: juste avant la déclaration <input>,
puis changez le texte par défaut Hello World! entre les onglets
<h2> par Entry Form.
- Faites un clic droit sur la fenêtre de l'éditeur de source et choisissez "Format" (Alt-Shift-F)
pour mettre en forme votre code. Votre fichier index.jsp devrait maintenant
ressembler à :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Entry Form</h2>
<form name="Name Input Form" action="response.jsp">
Enter your name:
<input type="text" name="name" />
<input type="submit" value="OK" />
</form>
</body>
</html>
Créer un fichier des pages JavaServer
- Dans la fenêtre des projets, faites un clic droit sur le noeud du projet "HelloWeb" et
choisissez New > JSP. L'assistant de création de fichiers JSP apparait. Donnez lui le nom
response, et cliquez sur "Finish". Notez qu'un noeud de fichier response.jsp
apparait dans la fenêtre des projets en dessous de index.jsp, et
que le nouveau fichier s'ouvre dans l'éditeur de sources.
- Dans la palette située à droite de l'éditeur de sources, développez "JSP" et
tirez un objet de type "Use Bean" et placez le juste en dessous de la déclaration <body>
dans l'éditeur de sources. La boite de dialogue d'insertion d'un objet de type "Use Bean" s'affiche. Précisez
les valeurs suivantes:
- ID: mybean
- Class: org.mypackage.hello.NameHandler
- Scope: session
Cliquez sur "OK". Notez que les onglets <jsp:useBean>
sont ajoutés en dessous de l'onglet <body>.
- Tirez un objet de configuration d'un Bean ("set bean property") de la palette vers un point juste avant la déclaration
<h2> et cliquez sur "OK". Dans l'onglet
<jsp:setProperty>
qui apparait, effacer l'attribut vide value et insérez ce qui suit :
<jsp:setProperty name="mybean" property="name" />
Comme indiqué dans la documentation <jsp:setProperty>,
vous pouvez positionner une propriété de plusieurs façons. Dans ce cas,
l'entrée de l'utilisateur en provenance de index.jsp devient une paire nom/valeur qui
est transmise à l'objet request. Quand vous définissez une propriété en utilisant l'onglet
<jsp:setProperty>, vous pouvez préciser la valeur en fonction du nom de la propriété
contenu dans l'objet request. Ainsi,
en définissant la property à name, vous pouvez retrouver la valeur
entrée par l'utilisateur.
- Changez le texte entre les déclarations <h2> par ce qui suit :
<h2>Hello, !</h2>
- Tirez un objet de récupération des propriétés d'un Bean ("get bean property") de la palette et positionnez le
après la virgule qui est entre les déclarations <h2>. Précisez les valeurs suivantes
dans la boite de dialogue :
- Bean Name: mybean
- Property Name: name
Cliquez sur "OK". Notez que l'onglet <jsp:getProperty>
s'intercale entre les onglets <h2>.
- Faites un clic droit dans la fenêtre de l'éditeur de sources et choisissez "Format" (Alt-Shift-F)
pour mettre en forme votre code. Le texte entre les déclarations <body> du fichier
response.jsp devrait maintenant ressembler à cela :
<body>
<jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
<jsp:setProperty name="mybean" property="name" />
<h2>Hello, <jsp:getProperty name="mybean" property="name" />!</h2>
</body>
Construire et executer un projet d'application web
L'IDE utilise un script Ant pour construire et executer l'application web.
L'IDE génère le script en fonction des options que vous avez choisi à l'aide
de l'assistant de création de projet et aussi en fonction des propriétés que
vous avez configuré dans la boite de dialogue des propriétés du projet (dans
la fenêtre des projets, choisissez "Properties" dans le menu contextuel qui
apparait lorsque vous faites un clic droit sur le noeud du projet).
- Dans la fenêtre des projets, faites un clic droit sur le noeud du projet "HelloWeb"
et choisissez "Run" (F6). L'IDE construit l'application web et la déploie sur le serveur
que vous avez précisé à la création du projet. la page index.jsp s'ouvre
dans votre navigateur par défaut :
- Entrez votre nom dans la boite de texte puis cliquez sur "OK". La page response.jsp
apparait, vous répondant un petit compliment :
Dépannage
J'ai construit et lancé le projet. Quand je clique sur le bouton "OK" pour index.jsp,
une page d'erreur apparait indiquant que response.jsp n'est pas disponible.
Utilisez vous une version au moins 5 du JDK? Choisissez Help > About dans le menu principal
pour vérifier la version du JDK que vous utilisez. Utilisez vous une version au moins 5.x de
Tomcat? Choisissez Tools > Servers dans le menu principal. Sélecionnez le serveur que le
projet utilise et notez le type de serveur indiqué dans le haut de la boite de dialogue.
Vous pouvez aussi essayer de
télécharger le fichier d'exemple
et de le comparer avec votre projet.
See Also
Ceci conclue cette introduction au développement d'application Web.
Ce document montre comment créer une application web simple à l'aide de l'IDE NetBeans,
NetBeans IDE, la déployer sur un serveur, et voir son execution dans un navigateur.
Il a aussi permis de montrer comment utiliser des pages JavaServer et des JavaBeans dans votre application
pour collecter, conserver et afficher des données utilisateur.
Pour de plus amples informations sur le développement d'applications web avec l'IDE NetBeans,
regardez les ressources suivantes :
