< Précédent | Suivant >

Leçon 5 : Créer une page Web

Dans cette leçon, vous allez créer une page Web sous la forme d'un fichier JSP Faces. Dans la leçon suivante, vous ajouterez des données à cette page à l'aide des composants de données et des fonctions de que vous avez créés dans la leçon précédente. Quand la page sera terminée, elle affichera une liste de tous les enregistrements de la base de données.
Ce tutoriel utilise la technologie JavaServer Faces (JSF). JSF fournit un cadre de développement d'interfaces utilisateur pour applications Web. Les pages web de JSF sont des pages (JSP). Les pages JSP contiennent des commandes JavaServer que vous pouvez utiliser pour intégrer du code Java dans la page, en fournissant un contenu dynamique.

Création du fichier JSP à partir d'un modèle

  1. Dans la vue Explorateur d'entreprise, cliquez avec le bouton droit de la souris sur le projet dossier WebContent dans le projet EGLWeb, puis cliquez sur Nouveau > Page Web. Il est important de sélectionner l'emplacement où vous voulez placer les nouveaux fichiers car sans cela, les nouveaux fichiers pourraient ne pas apparaître à l'endroit attendu. La fenêtre Nouvelle page Web s'ouvre.
  2. Dans la zone Nom de fichier, tapez ce nom de fichier, avec son extension :
    allcustomers.jsp
  3. Vérifiez que la zone Dossier indique le dossier /EGLWeb/WebContent.
  4. Dans la liste Modèle, développez Exemples de modèle et cliquez sur Famille A (pas de navigation). Les modèles de pages Web simples de cette catégorie figurent dans la zone Aperçu.
  5. Dans la zone Aperçu, cliquez sur le modèle A_gray.htpl.
  6. Assurez-vous que la case Lier la page au modèle est cochée.

    La fenêtre Nouvelle page Web ressemble à ce qui suit :

    Fenêtre Nouvelle page web

  7. Cliquez sur Terminer. Le nouveau fichier JSP Faces s'ouvre dans l'éditeur.
  8. Cliquez sur Conception pour afficher la vue de conception dans la totalité de la fenêtre d'édition. La vue JSF Trace peut se trouver dans la partie droite de la fenêtre. Eclipse crée cette vue par défaut en partageant l'espace avec la vue de la palette et d'autres éléments. Vous n'avez pas besoin de la vue JSF Trace pour ce tutoriel. Vous pouvez la fermer en cliquant sur la croix (X) dans l'onglet.
    La vue JSF peut contenir un triangle d'avertissement jaune.
    Généralement, vous voulez afficher la palette dans cette vue. Il peut être nécessaire de cliquer sur la petite flèche double et de sélectionner la vue Palette dans un menu :
    Sélection de la vue Palette.
  9. Dans le fichier allcustomers.jsp, supprimez le texte par défaut "Place your page content here" et remplacez-le par :
    Liste de tous les clients
  10. Appuyez trois fois sur Entrée pour insérer des lignes vides. Ces lignes vous laissent de la place pour ajouter du contenu à cette page lors de la leçon suivante.

    La page se présente comme suit :

    Apparence de la page

  11. Sauvegardez le fichier.

Prévisualisation de la page Web sur le serveur

La page Web ne contient encore aucune donnée de la base de données, mais vous pouvez exécuter le fichier JSP sur le serveur d'applications web et déterminer l'apparence de la page. Il s'agit d'une étape importante car elle vous permet de vérifier si le serveur d'applications fonctionne correctement avant que la page ne devienne complexe.
  1. Assurez-vous que le serveur d'applications a démarré. Le nom du serveur doit être visible dans la vue Serveurs (située par défaut sous la vue de l'éditeur). Le serveur doit afficher la mention Started et Synchronized entre parenthèses après le nom. Si ce n'est pas le cas, cliquez avec le bouton droit de la souris sur le nom du serveur, puis cliquez sur Démarrer. Le processus de démarrage peut prendre quelques minutes.
    WebSphere Application Server a démarré et est synchronisé
  2. Dans la vue Explorateur d'entreprise, développez le dossier EGLWeb/WebContent, si nécessaire. Cliquez avec le bouton droit sur le fichier allcustomers.jsp, puis cliquez sur Exécuter en tant que > Exécuter sur le serveur. La fenêtre Définition d'un nouveau serveur s'ouvre.
  3. Dans la fenêtre Définition d'un nouveau serveur, sélectionnez votre serveur.
  4. Cochez la case Toujours utiliser ce serveur lors de l'exécution de ce projet.
    Le serveur est sélectionné.
  5. Cliquez sur Terminer.

La page web s'ouvre dans un navigateur Web dans le plan de travail. La page se présente comme suit :

Apparence de la page dans le navigateur Web interne

Si un message HTTP 404 s'affiche (page introuvable), redémarrez le serveur et actualisez la fenêtre du navigateur.

Si vous préférez utiliser un navigateur web externe, vous pouvez copier l'URL depuis le navigateur Web dans le plan de travail et la copier dans la zone d'adresse du navigateur externe.

Eclipse peut afficher de nouveau la vue JSF Trace. Vous pouvez supprimer définitivement la vue en faisant défiler l'écran jusqu'à ce que vous trouviez le lien indiquant de ne pas la rouvrir et en cliquant dessus.
Options de gestion de la vue JSF Trace.

Il n'y a pour l'instant pas de données sur cette page. Dans la leçon suivante, vous ajouterez des données à cette page avec EGL.

< Précédent | Suivant >

Retour d'informations