< Précédent | Suivant >

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

Dans cet exercice, vous créez la page web qui permet aux utilisateurs de mettre à jour la table CUSTOMER. Cette page recevra le paramètre passé par l'autre page, affichera l'enregistrement désigné par ce paramètre (et seulement cet enregistrement) et permettra de le mettre à jour.

Création du fichier updatecustomer.jsp

  1. Dans la vue Explorateur d'entreprise, cliquez avec le bouton droit sur le dossier WebContent du projet EGLWeb.
  2. Cliquez sur Nouveau > Page Web.
  3. Dans la zone Nom de fichier, tapez ce texte comme nom pour le nouveau fichier :
    updatecustomer.jsp
  4. Vérifiez que la zone Dossier indique le dossier /EGLWeb/WebContent.
  5. Dans la liste Modèle, cliquez sur Mes modèles.
  6. Dans la zone Aperçu, cliquez sur le modèle A_gray.htpl.
  7. Cliquez sur Terminer. La nouvelle page est créée et s'ouvre dans l'éditeur.
  8. Remplacez le texte par défaut par ce texte :
    Update customer information
  9. Appuyez trois fois sur Entrée pour insérer trois lignes vides.
  10. Sauvegardez la page.
La nouvelle page updatecustomer.jsp se présente comme suit :

Apparence de la page updatecustomer.jsp

Ajout d'un enregistrement EGL et affichage de cet enregistrement sur la page

L'étape suivante consiste à ajouter des données EGL sur cette page. Quand vous avez créé le fichier allcustomers.jsp, vous avez ajouté les données à la page en une première étape puis, dans une deuxième étape, vous avez affiché les données sur la page en les faisant glisser depuis la vue Données de page. Cette fois, vous allez cocher la case Ajouter des contrôles pour afficher l'élément EGL sur la page web pour ajouter les données à la page et les afficher sur la page en une seule étape.
  1. Ouvrez le tiroir EGL sur la vue Palette.
  2. Faites glisser l'icône Nouvelle variable sur la page, en dessous du texte "Update Customer Information". La fenêtre Création d'une variable de données EGL s'ouvre.
  3. En dessous de Sélection d'un type, cliquez sur Enregistrement.
  4. En dessous de Type d'enregistrement, cliquez sur Customer.
  5. Dans la zone Entrez le nom de la zone, tapez le texte suivant :
    customer
  6. En dessous de Propriétés du tableau, cochez la case Tableau.
  7. Cochez la case Ajouter des contrôles pour afficher l'élément EGL sur la page Web.
  8. Cliquez sur OK. Le nouvel enregistrement apparaît dans la vue Données de page et la fenêtre Insérer un contrôle s'ouvre.
  9. Dans la fenêtre Insérer un contrôle, cliquez sur Mise à jour d'un enregistrement existant.
  10. Cliquez sur Options. La fenêtre Options s'affiche.
  11. Cochez la case Bouton Soumettre.
  12. Cochez la case Bouton Supprimer.
  13. Pour le Libellé du Bouton Soumettre, tapez ce texte :
    Actualiser l'enregistrement
  14. Cliquez sur OK.
  15. Cliquez sur Terminer.
  16. Sauvegardez la page.

Les contrôles de données pour la mise à jour de l'enregistrement sont insérés sur la page Web. Notez qu'il y a un contrôle {Error Messages} sur la page. Il ne signifie pas que votre page a des erreurs ; il marque simplement l'endroit où seront affichés les messages d'erreur générés à l'exécution.

La page se présente comme ceci :

Apparence de la page updatecustomer.jsp

Extraction des données

Maintenant qu'il y a des zones pour les données sur la page, vous devez ajouter le code qui extrait les données de la base de données. Rappelez-vous que dans la leçon précédente, vous avez ajouté un lien pour passer le numéro d'ID client dans un paramètre nommé CID. Dans ces étapes, vous allez configurer le gestionnaire pour que la nouvelle page Web accepte ce paramètre et extrait l'enregistrement approprié de la base de données à afficher sur la page.
  1. Cliquez avec le bouton droit de la souris n'importe où dans la zone de format libre du fichier updatecustomer.jsp.
  2. Dans le menu contextuel, cliquez sur Editer le code de page. Le fichier updatecustomer.egl s'ouvre dans l'éditeur.
  3. Comme dans le précédent gestionnaire JSF que vous avez édité, vous devez ajouter un enregistrement pour stocker le code à exécuter en cas de réussite ou d'échec de l'appel SQL. Immédiatement après la ligne customer Customer;, ajoutez le code suivant, exactement tel qu'il est écrit :
    status StatusRec;
    L'étape suivante de l'ajout des données à la page consiste à configurer le gestionnaire JSF pour qu'il accepte le paramètre CID que le lien lui passera.
  4. Remplacez la ligne function onPreRender() par le code suivant, exactement tel qu'il est écrit :
    function onPreRender(CID INT)
    Le gestionnaire JSF est maintenant configuré pour accepter un paramètre de type entier nommé CID.
  5. Sur une ligne vierge, immédiatement après la ligne function onPreRender(CID INT), ajoutez le code suivant tel qu'il est écrit :
    customer.customerId = CID;
    Vous venez d'affecter le numéro d'ID à l'enregistrement customer. A l'étape suivante, vous allez extraire de la base de données l'enregistrement portant ce numéro d'ID.
  6. Sur la ligne suivante, ajoutez ce code, exactement tel qu'il est écrit. Vous pouvez utiliser la fonction de suggestion de code que vous avez appris à utiliser dans la Leçon 6 : Ajouter des données à la page.
    CustomerLib.GetCustomer(customer, status);
    La fonction GetCustomer fonctionne comme la fonction GetCustomerAll que vous avez utilisée précédemment, mais GetCustomer extrait un seul enregistrement, alors que GetCustomerAll extrait un tableau d'enregistrements. L'enregistrement customer contient maintenant l'enregistrement avec l'ID passé à ce gestionnaire JSF.
    La nouvelle fonction se présente comme suit :
    	function onPreRender(CID INT)
    		customer.CustomerId = CID;
    		CustomerLib.GetCustomer(customer, status);
    	end
  7. Optimisez les importations et enregistrez le fichier.
Le gestionnaire JSF se présente comme suit :
Apparence du fichier updatecustomer.egl

Vous pouvez maintenant cliquer sur un lien de la page allcustomers.jsp, la page updatecustomer.jsp se charge, avec des détails sur l'enregistrement de ce client. Maintenant, vous pouvez changer les informations dans les zones de la page Web, mais il n'existe aucune fonction pour envoyer les modifications à la base de données. Dans la section suivante, vous allez utiliser la fonction UpdateCustomer pour effectuer ces mises à jour sur la base de données.

Mise à jour de l'enregistrement dans la base de données

Dans cette section, vous ajoutez une nouvelle fonction EGL dans le gestionnaire JSF nommé updateRecord. Ensuite, vous allez lier cette fonction au bouton que vous avez créé sur la page Web. De cette façon, quand vous cliquez sur le bouton de la page Web, la fonction updateRecord s'exécute et appelle la fonction UpdateCustomer pour qu'elle mette à jour l'enregistrement de la base de données. Enfin, la fonction updateRecord fera revenir le navigateur à la page allcustomers.jsp pour vous permettre de voir les modifications que vous avez apportées à l'enregistrement.
  1. Dans le fichier updatecustomer.egl, immédiatement avant l'instruction End finale, ajoutez la fonction suivante, exactement telle qu'elle est écrite. L'utilisation de la fonction de suggestion de code ou la copie de la fonction à partir de cette page vous aidera à écrire la fonction correctement.
    function updateRecord()
      CustomerLib.UpdateCustomer(customer, status);
      forward to "allcustomers";
    end
  2. Sauvegardez et fermez le fichier.

    L'étape suivante consiste à lier cette fonction au bouton sur la page Web.

  3. Ouvrez la page updatecustomer.jsp dans l'éditeur. Cette page est peut-être encore ouverte dans les onglets de l'éditeur. Si vous ne pouvez pas la trouver ici, cliquez deux fois sur le fichier updatecustomer.jsp dans la vue Explorateur de projets, dans le dossier EGLWeb/WebContent.jsp.
  4. Dans la page Données de page, développez Gestionnaire JSF > Actions. Ce dossier présente la liste de toutes les fonctions du gestionnaire JSF, à l'exception des fonctions onPreRender() et onConstruction(). Dans le cas présent, ce dossier montre la fonction updateRecord() que vous venez de créer.
  5. Faites glisser et déposez la fonction updateRecord() directement sur le bouton de la page Web libellé "Update this record". L'apparence de la page ne change pas, mais cette fonction est maintenant liée au bouton et elle s'exécutera si vous cliquez sur le bouton.
  6. Sauvegardez la page.

Voici le code complet du fichier updatecustomer.egl. Si vous voyez des erreurs indiquées par des symboles X rouges dans le fichier, vérifiez que votre code correspond bien à celui de ce fichier : Fichier updatecustomer.egl terminé après la leçon 8

Apparence du fichier updatecustomer.egl

Test du site terminé

Le site est maintenant prêt à être testé. Vous pouvez maintenant mettre à jour et afficher les enregistrements de la table Customer de la base de données.
  1. Dans la vue Explorateur d'entreprise, cliquez avec le bouton droit de la souris sur le fichier allcustomers.jsp et sélectionnez Exécuter en tant que > Exécuter sur le serveur. La page concernée s'ouvre dans le navigateur Web. Chaque nom de client de la liste est maintenant un lien hypertexte vers la page Web affichée par updatecustomer.jsp.
  2. Cliquez sur un des noms de client. Vous êtes renvoyé vers la page Web affichée par updatecustomer.jsp, et cette page web affiche les informations de la ligne.
  3. Tapez une nouvelle valeur pour FIRST_NAME dans cet enregistrement.
  4. Tapez de nouvelles informations pour quelques-unes des zones de cette page. Ne modifiez pas la zone CUSTOMER_ID.
  5. Quand vous avez tapé ces nouvelles informations, cliquez sur le bouton Mettre à jour l'enregistrement.
Quand vous cliquez sur le bouton Mettre à jour l'enregistrement, vous revenez à la page allcustomers.jsp. Notez que l'enregistrement a changé et vous montre la nouvelle valeur de FIRST_NAME que vous avez tapée. Vous pouvez cliquer à nouveau sur le dernier nom de cet enregistrement pour voir les nouvelles informations qui ont été enregistrées dans la base de données.

Vous êtes arrivé à la fin du tutoriel

Dans ce tutoriel, vous avez généré un utilitaire fonctionnel de mise à jour de fichier pour un fichier de client en utilisant un exemple de base de données Derby. Maintenant, vous pouvez vous appuyer sur ces connaissances pour exécuter le tutoriel Créer une page de recherche JSF avec EGL.
< Précédent | Suivant >

Retour d'informations