Exercice 1.5 : Création d'une page de mise à jour

Avant de commencer, vous devez effectuer l'exercice 1.4 : Création d'enregistrements

A ce stade, vous avez créé des pages permettant d'afficher et de créer des listes pour le site Web. Dans cet exercice, vous allez créer une page autorisant les utilisateurs à mettre à jour et à supprimer des listes. La page de mise à jour est pratiquement identique à la page de création sauf que dans la page de mise à jour, les zones d'entrée affichent les données d'un enregistrement existant que l'utilisateur doit modifier.

Vous allez d'abord créer un enregistrement relationnel représentant un enregistrement existant dans la base de données. Il convient ensuite de créer un formulaire de mise à jour JavaServer Faces pour cet enregistrement relationnel et, après quelques modifications mineures, votre page pourra être testée.

Création de l'enregistrement relationnel de mise à jour

Présentation visuelle
  1. Ouvrez le fichier update_record.jsp en cliquant deux fois dessus dans la vue Explorateur de projets.
  2. Supprimez le texte par défaut Place content here.
  3. Dans la vue Palette, développez le tiroir Données en cliquant dessus.
  4. A partir de la palette, faites glisser le composant Enregistrement relationnel vers la zone qui ne contient encore aucune donnée. La fenêtre Ajout d'un enregistrement relationnel s'affiche.
  5. Dans la zone Nom, entrez update_record.
  6. Sous Créez des commandes pour, cliquez sur Mise à jour d'un enregistrement existant.
  7. Assurez-vous que l'option Ajouter des contrôles d'entrée/sortie pour l'affichage de l'enregistrement relationnel sur la page Web est sélectionnée.
  8. Cliquez sur Suivant.
  9. Dans la zone Table, cliquez sur la table W5SAMPLE.ADS.
  10. Cliquez sur Suivant. La page Sélection de colonnes et autres tâches s'affiche.

Filtrage des résultats

Présentation visuelle

Un enregistrement relationnel ne peut afficher qu'un seul enregistrement provenant de la base de données. Vous devez donc filtrer la table de base de données pour qu'un seul enregistrement apparaisse afin que l'utilisateur puisse le modifier. (Il n'était pas nécessaire de filtrer la base de données dans l'exercice car vous aviez créé un enregistrement et qu'aucun résultat de base de données ne pouvait être filtré.) Etant donné que chaque enregistrement de la base de données a un numéro d'ID unique, vous allez filtrer les résultats en fonction de l'enregistrement doté de l'ID donné.

  1. Sous Tâches, cliquez sur Résultats du filtre. La fenêtre Filtres s'affiche et la condition de filtre par défaut ID = #{param.ID} apparaît dans la colonne Filtre.

    La fenêtre Filtres a l'aspect suivant :

    Fenêtre Filtres

    Ce code filtre les enregistrements de la base de données afin que seul l'enregistrement doté du numéro d'ID spécifié apparaisse dans l'enregistrement relationnel. Vous en saurez plus sur cette condition à l'étape Insertion d'un lien hypertexte de cet exercice.

  2. Cliquez sur Fermer.
  3. Cliquez sur Suivant. La page Configuration des contrôles de données s'affiche.
  4. Dans la section Zones à afficher, désélectionnez les cases à cocher en regard de tous les noms de zone à l'exception de ceux devant figurer dans le formulaire d'entrée :
  5. Cliquez sur la flèche Haut ou Bas pour placer les noms de zone dans l'ordre suivant (de haut en bas) :
    1. ID
    2. TITLE
    3. DESCRIPTION
    4. MAINCATEGORY
    5. PRICE
    6. PHONE
  6. Pour la zone ID, sélectionnez Zone de sortie dans la liste déroulante de la colonne Type de commande.

    Si l'utilisateur doit visualiser le numéro d'ID d'un enregistrement, il ne doit pas pouvoir le modifier. En faisant de la zone d'ID une zone de sortie, vous évitez le risque de spécification d'ID en double.

  7. Cliquez sur Options. La fenêtre Options s'affiche.
  8. Assurez-vous que l'option Bouton Soumettre est sélectionnée.
  9. Entrez Mise à jour dans la zone Libellé.
  10. Cliquez sur OK.
  11. La fenêtre Ajout d'une enregistrement relationnel doit se présenter de la manière suivante :

    Fenêtre Ajout d'un enregistrement relationnel

  12. Cliquez sur Terminer pour générer le formulaire de mise à jour dans la page, comme indiqué ci-dessous :

    Aspect de la page actuelle

Programmation du bouton Mettre à jour

Présentation visuelle

Vous allez à nouveau ajouter du code pour diriger l'utilisateur vers la page all_records.jsp afin d'afficher l'enregistrement modifié avec tous les autres enregistrements.

  1. Cliquez sur le bouton Mettre à jour que vous venez de créer sur la page Web.
  2. Ouvrez la vue Edition rapide.
  3. Dans cette vue, cliquez pour placer le curseur juste avant le code return "";
  4. Appuyez sur la touche Entrée. Une nouvelle ligne apparaît avant return "";
  5. Cliquez à l'aide du bouton droit de la souris sur la ligne vide et choisissez Insertion d'un fragment > Accéder à la page dans le menu contextuel. La fenêtre Edition de l'action GotoPage s'affiche.
  6. Dans la liste déroulante, sélectionnez all_records.jsp en tant que page cible.
  7. Cliquez sur OK.
  8. Le code d'événement du bouton doit se présenter de la manière suivante :

    Exemple de code

    Une fois que l'utilisateur a mis à jour un enregistrement, la page redirige le navigateur vers la page all_records.jsp pour indiquer que l'enregistrement a été mis à jour. Le bouton de suppression doit également faire référence à la page all_records.jsp.

  9. Répétez les étapes 1 à 7 pour éditer le code comme vous l'avez fait pour le bouton Supprimer sur la page Web.
  10. Sauvegardez la page.

Insertion d'un lien hypertexte

Présentation visuelle

Vous allez maintenant créer des liens dans la page all_records.jsp afin que l'utilisateur puisse sélectionner un enregistrement de base de données à mettre à jour. #{param.ID} représente le numéro d'ID de l'enregistrement qui sera mis à jour dans la page de mise à jour. Lorsque l'utilisateur clique sur un lien d'enregistrement, le numéro d'ID de cet enregistrement est envoyé à la page update_record.jsp en tant que paramètre #{param.ID}. Seul l'enregistrement à mettre à jour s'affiche alors dans l'enregistrement relationnel filtré que vous venez d'insérer dans la page update_record.jsp.

  1. Dans la vue Explorateur de projets, cliquez deux fois sur le fichier all_records.jsp pour l'ouvrir dans l'éditeur.
  2. Cliquez à un emplacement quelconque de la table de données.
  3. Ouvrez la vue Propriétés.
  4. Dans cette vue, cliquez sur h:dataTable dans la liste des balises HTML située à gauche de la vue.
  5. Dans la partie droite de la vue Propriétés, cliquez sur Ajouter pour ajouter une colonne.
  6. Entrez Mise à jour dans la zone Libellé de la nouvelle colonne et appuyez sur la touche Entrée. Une colonne appelée Mise à jour est générée dans la table de données.
  7. Après avoir sélectionné la nouvelle colonne dans la vue Propriétés, cliquez sur Déplacer vers le bas jusqu'à ce que la colonne se trouve à l'extrême droite de la table de données.
  8. Dans la vue Palette, développez le tiroir Composants Faces en cliquant dessus.
  9. A partir de la palette, faites glisser un composant Lien dans la colonne Mise à jour que vous venez de créer. La fenêtre Configuration de l'URL s'affiche.
  10. Dans la zone URL, entrez update_record.jsp comme lien cible et Liste des mises à jour dans la zone Libellé.
  11. Cliquez sur OK. Le lien hypertexte Liste des mises à jour apparaît dans la colonne de mise à jour.
  12. Cliquez sur l'icône de lien Icône de lien sous le lien hypertexte Liste des mises à jour dans la colonne Mise à jour.
  13. Dans la vue Propriétés, cliquez sur l'onglet Paramètre, situé juste sous la balise hx:outputLinkEx, dans la partie gauche de la vue.
  14. Cliquez sur Ajouter un paramètre et entrez ensuite ID dans la zone Nom.

    Vous devez associer le paramètre ID à la colonne ID du formulaire d'entrée. Le paramètre du lien hypertexte étant associé à la colonne ID de la liste de données, le paramètre de demande est utilisé comme ID de l'enregistrement dans la liste lorsque le lien hypertexte est activé.

  15. Sélectionnez la zone Valeur et cliquez ensuite sur le bouton Sélection d'un objet de données de page dans la zone. La fenêtre Sélection d'un objet de données de page s'affiche.
  16. Sous Objets de données, cliquez sur la colonne ID dans la liste d'enregistrements all_recordlist(ADS), comme indiqué ci-dessous :

    Fenêtre Sélection d'un objet de données de page

  17. Cliquez sur OK.

    Désormais, lorsque l'utilisateur clique sur Liste des mises à jour, il peut mettre à jour les informations relatives aux annonces classées du site Web.

  18. Sauvegardez le fichier et si vous le souhaitez, testez la page. Il convient d'ouvrir d'abord all_records.jsp car il correspond à la page qui assure la liaison au fichier update_record.jsp.

Dans cet exercice, vous avez appris à créer des pages Web qui mettent à jour les enregistrements d'une base de données. Vous pouvez maintenant aborder l'exercice 1.6 : Filtrage d'une liste d'enregistrements relationnels.

Conditions d'utilisation | Commentaires
(C) Copyright IBM Corporation 2000, 2004. All Rights Reserved.