Exercice 1.4 : Création d'enregistrements

Avant de commencer, vous devez effectuer l'exercice 1.3 : Création d'un site de mise à jour

Dans cet exercice, vous allez créer une page permettant aux utilisateurs de créer des annonces classées et de les afficher dans la base de données. Il convient d'abord de créer un enregistrement relationnel pour représenter un nouvel enregistrement dans la base de données et de créer ensuite une visualisation de cet enregistrement dans la page sous la forme d'un ensemble de zones d'entrée.

Création de l'enregistrement relationnel

Présentation visuelle
  1. Ouvrez le fichier new_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.

    Si un message d'avertissement indique qu'une connexion à la base de données n'a pas pu être établie, cela signifie qu'un serveur est resté actif une fois le test du site Web terminé. Dans ce cas, cliquez sur Annuler dans chaque boîte de dialogue et arrêtez le serveur en suivant la procédure décrite dans Arrêt du serveur dans l'exercice 1.3 : Test du site Web.

  5. Dans la zone Nom, tapez create_record.
  6. Sous Créez des commandes pour, cliquez sur Création d'un enregistrement.
  7. Assurez-vous que l'option Ajouter des contrôles d'entrée/sortie pour l'affichage de l'enregistrement sur la page Web est sélectionnée.

    La fenêtre Ajout d'un enregistrement relationnel doit avoir l'aspect suivant :

    Fenêtre Ajout d'un enregistrement relationnel

  8. Cliquez sur Suivant.
  9. Dans la zone Table, cliquez sur la table W5SAMPLE.ADS.
  10. Cliquez sur Suivant.
  11. Cliquez à nouveau sur Suivant. La page Configuration des contrôles de données s'affiche.

Personnalisation de la visualisation de l'enregistrement relationnel

Présentation visuelle

La page Configuration des contrôles de données vous aide à personnaliser la visualisation de l'enregistrement relationnel. Par exemple, vous pouvez modifier les colonnes, les libellés de zone et le bouton Soumettre du formulaire d'entrée. A l'issue de cette procédure, un formulaire d'entrée, prêt à l'emploi, est disponible dans la page.

  1. 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 :
  2. Disposez les zones dans l'ordre suivant, du haut vers le bas :
    1. ID
    2. TITLE
    3. DESCRIPTION
    4. MAINCATEGORY
    5. PRICE
    6. PHONE
    Pour modifier l'ordre des zones, cliquez sur l'une d'elles, puis cliquez sur la flèche Haut ou Bas .
  3. Renommez les zones de la manière choisie. Abrégez, par exemple, "Maincategory:" en "Category:".

    Pour renommer les libellés générés pour les zones d'entrée, cliquez sur l'un d'eux dans la colonne Libellé. L'icône de la souris prend la forme d'un curseur pour vous permettre de saisir le nouveau texte.

  4. Cliquez sur Options. La fenêtre Options s'affiche.
  5. Assurez-vous que l'option Bouton Soumettre est sélectionnée.
  6. Tapez Post New Listing dans la zone Libellé.
  7. Cliquez sur OK.

    La fenêtre Ajout d'un enregistrement relationnel doit maintenant avoir l'aspect suivant :

    Fenêtre d'ajout d'une liste d'enregistrements relationnels

  8. Cliquez sur Terminer pour générer le formulaire d'entrée. Ce dernier doit se présenter de la manière suivante :

    Aspect de la page actuelle

    Le formulaire contient une zone Messages d'erreur. Cela ne signifie pas que le projet contient des erreurs. Cette zone indique l'emplacement où s'afficheront les erreurs éventuelles lorsque l'utilisateur soumettra le formulaire.

Programmation du bouton Soumettre

Présentation visuelle

Lors de la soumission du formulaire d'entrée, la page ajoute automatiquement le nouvel enregistrement à la base de données. Vous pouvez programmer le bouton Post New Listing pour qu'il redirige l'utilisateur vers la page all_records.jsp afin que le nouvel enregistrement soit visible immédiatement dans la base de données. Pour cela, procédez comme suit.

  1. Dans le fichier new_record.jsp, cliquez sur le bouton Post New Listing créé dans le formulaire de la page Web.
  2. Ouvrez la vue Edition rapide.

    Cette vue se trouve généralement dans la partie inférieure centrale du plan de travail, dans les onglets situés à côté de la vue Propriétés. Si vous ne trouvez pas la zone Edition rapide, cliquez sur Fenêtre > Afficher la vue > Edition rapide dans la barre de menus.

    La vue Edition rapide est un éditeur Java adapté au contexte, conçu pour vous aider à coder les événements pour les composants Faces. Elle contient maintenant le code généré qui gère la création d'un enregistrement dans la base de données, comme indiqué ci-dessous :

    Exemple de code

  3. Dans la vue Edition rapide, 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 nouvelle 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

  9. Sauvegardez le fichier et, le cas échéant, exécutez ensuite la page sur le serveur de test. Lors de l'exécution de la page sur le serveur de test, vous pouvez ajouter des enregistrements et revenir à la page all_records.jsp pour les visualiser.

Non-spécification de clés en double

Etant donné que la colonne ID est la clé principale de la table ADS, vous ne pouvez pas ajouter un enregistrement doté d'une valeur d'ID déjà utilisée dans la table. Dans le module 2, vous découvrirez comment utiliser la fonction de génération automatique des clés pour créer automatiquement une clé unique pour chaque nouvel enregistrement.

En attendant, vous devez entrer un numéro d'ID non utilisé dans cette page pour ajouter un enregistrement. Les enregistrements associés à la base de données utilisent des numéros d'ID compris entre 1 et 22 ; vous pouvez donc spécifier comme clé principale n'importe quelle valeur supérieure à 22. N'utilisez pas de clés en double si vous entrez plusieurs enregistrements.

Association de l'entrée à l'enregistrement relationnel (facultatif)

Présentation visuelle

Le formulaire d'entrée de la page est un ensemble de zones d'entrée JavaServer Faces qui ont été associées à l'enregistrement relationnel créé. Souvenez-vous que avez créé l'enregistrement relationnel pour représenter un nouvel enregistrement dans la table ADS de la base de données. La liaison est une méthode permettant d'associer un composant d'entrée JavaServer Faces à une colonne de l'enregistrement relationnel.

Lors de la création de l'enregistrement relationnel, l'assistant associe automatiquement toutes les colonnes qu'il contient aux zones d'entrée de la page. Si vous souhaitez effectuer des modifications manuelles, vous pouvez associer d'autres colonnes à d'autres zones d'entrée. Pour associer une colonne de l'enregistrement relationnel à la zone d'entrée, faites-la glisser dans cette dernière à partir de la vue Données de pages. Vous pouvez tester ce processus en supprimant et en recréant la zone d'entrée Description du formulaire. Informations supplémentaires sur la vue Données de page.

Les étapes ci-dessous sont fournies pour illustrer le concept de zone d'entrée et le processus de liaison mais elles sont facultatives dans ce tutoriel. Si ne souhaitez pas les exécuter, passez à l'exercice 1.5 : Création d'une page de mise à jour.

  1. Dans le fichier new_record.jsp, cliquez sur la zone d'entrée Description.
  2. Appuyez sur la touche Supprimer.
  3. Dans la vue Palette, développez le tiroir Composants Faces en cliquant dessus.
  4. A partir de la palette, faites glisser un composant d'entrée dans la cellule qui contenait la zone d'entrée Description que vous venez de supprimer.

    Cette cellule contient maintenant une zone d'entrée mais aucun texte, tel que {ID} ou {TITLE}, car cette dernière n'est pas associée à une colonne.

  5. Dans la vue Données de page, faites glisser la colonne DESCRIPTION dans le composant d'entrée que vous venez de créer. Le texte du composant d'entrée change pour indiquer qu'il est maintenant associé à la colonne DESCRIPTION, comme indiqué dans l'illustration suivante :

    Association d'une colonne à la zone d'entrée

  6. Sauvegardez le fichier et exécutez le serveur test si vous le souhaitez.

Vous pouvez maintenant créer et modifier vos propres formulaires d'entrée JavaServer Faces. Vous êtes prêt à aborder l'exercice 1.5 : Création d'une page de mise à jour.

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