< Précédent | Suivant >

Leçon 1.6 : Créer une page de mise à jour

A ce stade, vous avez créé des pages permettant d'afficher et de créer des annonces publiées sur le site Web. Dans cet exercice, vous allez créer une page permettant aux utilisateurs de mettre à jour et de supprimer des annonces. La page de mise à jour ressemblera beaucoup à la page de création, mais ses champs d'entrée contiendront déjà des données, celles de l'enregistrement existant que l'utilisateur aura choisi de modifier.

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

Créer l'enregistrement relationnel de mise à jour

  1. Dans la vue Explorateur Enterprise, double-cliquez sur le fichier update_record.jsp pour l'ouvrir.
  2. Supprimez le texte par défaut Insérez le contenu ici.
  3. Dans la vue Palette, développez le tiroir Données et services en cliquant dessus.
  4. A partir de la palette, faites glisser le composant Enregistrement relationnel SDO vers la zone de contenu vide. La fenêtre Ajout d'un enregistrement relationnel s'affiche.
  5. Dans la zone Nom, tapez update_record.
  6. Sous la rubrique Créer des contrôles pour, sélectionnez la mise à jour d'un enregistrement existant.
  7. Vérifiez que la case Ajouter des contrôles d'entrée/sortie pour afficher l'enregistrement sur la page Web est cochée.
  8. Cliquez sur Suivant.
  9. Dans la zone Table, développez l'entrée W5SAMPLE et sélectionnez ADS.
  10. Cliquez sur Suivant. La page Ajout d'un enregistrement relationnel s'affiche.

Filtrer les résultats

Un enregistrement relationnel ne peut afficher qu'un seul enregistrement de la base de données. Vous devez donc appliquer un filtre à la table de base de données afin qu'un seul enregistrement à modifier soit présenté à l'utilisateur. (Dans l'exercice précédent, l'application d'un tel filtre n'était pas nécessaire, car l'objectif était de créer un nouvel enregistrement et, par conséquent, il n'y avait pas de résultats à afficher en provenance de la base de données.) Puisque chaque enregistrement de la base de données a un numéro d'identification (ID) unique, vous allez utiliser cette donnée comme moyen d'identifier sans équivoque l'enregistrement à modifier.
  1. La page Ajout d'un enregistrement relationnel comporte une liste de liens donnant accès à différentes tâches. Sous la rubrique Tâches, cliquez sur Filtrer les résultats. La fenêtre Filtres s'affiche et la condition de filtrage par défaut ID = #{param.ID} apparaît dans la colonne Filtre. La fenêtre Filtres se présente comme suit :
    Fenêtre Filtres
    Ce code filtre les enregistrements de la base de données afin que seul celui qui porte l'ID spécifié apparaisse dans le composant Enregistrement relationnel. Vous en apprendrez plus sur cette condition à l'étape d'ajout d'une action de ligne, plus tard dans cet exercice. Cliquez sur Fermer.
  2. Cliquez sur Suivant. La page Configuration des contrôles de données s'affiche.
  3. Dans la section Zones à afficher, décochez les champs à exclure et ne laissez cochés que les champs à faire figurer sur le formulaire d'entrée :
    • ID
    • MAINCATEGORY
    • TITLE
    • DESCRIPTION
    • PRICE
    • PHONE
  4. Utilisez les boutons fléchés Haut et Bas pour réordonner les noms de champ comme suit (de haut en bas) :
    • ID
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
  5. Pour le champ ID, sélectionnez Nombre affiché dans la liste de la colonne Type de commande. L'utilisateur verra ainsi l'ID de l'enregistrement qu'il modifie, mais il ne pourra pas le changer. C'est une bonne précaution à prendre pour éviter les problèmes d'ID en double.
  6. Cliquez sur Options. La fenêtre Options s'affiche. Assurez-vous que l'option Bouton Soumettre est sélectionnée. Entrez Update dans la zone Libellé. Cliquez sur OK. La fenêtre Ajout d'un enregistrement relationnel doit se présenter comme suit :
    Fenêtre Ajout d'un enregistrement relationnel
  7. Cliquez sur Terminer pour générer votre formulaire de mise à jour sur la page, comme illustré ci-après :
    Formulaire de mise à jour sur la page

Programmer les boutons de mise à jour et de suppression

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 avec le bouton droit sur la bouton Update que vous venez de créer sur la page Web et sélectionnez Propriétés.
  2. Cliquez sur Ajouter une règle. La fenêtre Ajout d'une règle de navigation s'ouvre.
  3. Déroulez la liste Page et sélectionnez all_records.jsp. Dans la boîte Cette règle est utilisée par, sélectionnez Cette action uniquement. Assurez-vous que le contenu du champ est : #{pc_Update_record.doUpdate_recordUpdateAction}. Cliquez sur OK.
  4. Répétez les étapes 1 à 3 pour éditer de la même manière le code du bouton de suppression. Dans la boîte Cette règle est utilisée par, assurez-vous que le contenu du champ de l'action est #{pc_Update_record.doUpdate_recordDeleteAction}
  5. Enregistrez la page. A ce stade, vous pouvez exécuter la page new_record.jsp sur votre serveur de test et essayer de mettre à jour un enregistrement dans la base de données pour vérifier que vous êtes bien redirigé ensuite vers la page all_records.jsp.

Ajouter une action de ligne

Vous allez maintenant ajouter une action de ligne à la table, sur 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 sur la page de mise à jour. Lorsque l'utilisateur cliquera sur une ligne, l'ID de l'enregistrement correspondant sera envoyé comme paramètre #{param.ID} à la page update_record.jsp. Seul cet enregistrement sera alors affiché dans l'enregistrement relationnel filtré que vous venez d'insérer dans la page update_record.jsp.
  1. Dans la vue Explorateur Enterprise, double-cliquez sur le fichier all_records.jsp pour l'ouvrir dans l'éditeur. Cliquez à un emplacement quelconque de la table de données. Ouvrez la vue Propriétés.
  2. Dans la vue Propriétés, cliquez sur l'onglet Actions de ligne, en dessous de hx:dataTableEx dans la liste des balises HTML.
  3. Cliquez sur Ajouter une action qui s'exécute lorsque l'utilisateur clique sur une ligne. La boîte de dialogue Configuration d'une action de ligne (RowAction) s'ouvre. Sélectionnez Un clic sur la ligne envoie une demande au serveur avec les informations de la ligne comme paramètres et cliquez sur OK. Une colonne est ajoutée à la table de données.
  4. Dans la vue Propriétés, cliquez sur l'onglet hx:requestRowAction.
  5. Cliquez sur Ajouter une règle. La boîte de dialogue Ajout d'une règle de navigation s'ouvre.
  6. Déroulez la liste Page et sélectionnez update_record.jsp. Dans la boîte Cette règle est utilisée par, sélectionnez Cette action uniquement. Le champ correspondant est automatiquement rempli avec l'instruction #{pc_All_records.doRowAction1Action}, laquelle a été créée lorsque vous avez ajouté l'action de ligne. Cliquez sur OK. Si le champ n'est pas automatiquement rempli avec l'appel de méthode ci-dessus, tapez-le vous-même et ajoutez le code suivant au fichier source .java correspondant, situé dans l'arborescence ClassifiedsTutorial/Ressources Java : src/pagecode/All_records.java : 
    public String doRowAction1Action() {
				return "";
}
  7. Dans la vue Propriétés, cliquez sur l'onglet Paramètre, juste en dessous de hx:requestRowAction. Cliquez sur Ajouter un paramètre et tapez ID dans la colonne Nom. Vous devez lier le paramètre ID à la colonne ID. Une liaison étant ainsi créée entre l'action de ligne et la colonne ID de la table de données, lorsque l'utilisateur cliquera sur une ligne, le paramètre envoyé avec la demande sera l'ID de l'enregistrement correspondant.
    1. Cliquez sur le champ Valeur, puis sur le bouton Sélection d'un objet de données de page .
    2. Sous l'onglet Objet de données, cliquez successivement sur all_recordlist (Service Data Object) > all_recordlist (ADS) et sélectionnez ID (java.lang.Integer).
    3. Cliquez sur OK.
Maintenant, lorsque l'utilisateur cliquera sur une ligne, il sera dirigé vers la page de mise à jour et pourra modifier les données de l'annonce correspondante. Enregistrez le fichier et testez la page si vous le souhaitez. Pensez à ouvrir d'abord la page all_records.jsp, car c'est elle qui contient les liens à la page update_record.jsp.

Etat des connaissances

Vous avez terminé la leçon 1.6. Vous avez appris à créer des pages Web qui mettent à jour les enregistrements d'une base de données.
< Précédent | Suivant >
Vos commentaires