Afficher des informations dynamiques sur les pages Web à l'aide de composants JSF > Module 1 : Créer des pages Web avec des connexions de données >
< Précédent | Suivant >

Leçon 1.5 : Programmer le bouton de soumission du formulaire

Lors de la soumission du formulaire d'entrée, la page ajoutera automatiquement le nouvel enregistrement à la base de données. Dans cette leçon, vous allez 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 programmer le bouton de soumission :

  1. Le fichier new_record.jsp étant toujours ouvert dans l'éditeur, cliquez avec le bouton droit sur le bouton Post New Listing que vous avez ajouté au formulaire 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, puis cliquez sur OK.
  4. Enregistrez la page. A ce stade, vous pouvez exécuter la page new_record.jsp sur votre serveur de test et essayer d'ajouter un enregistrement à la base de données pour vérifier que vous êtes bien redirigé ensuite vers la page all_records.jsp.
Eviter les clés en double
Important :

Etant donné que la colonne ID est la clé primaire de la table ADS, vous ne pouvez pas ajouter un enregistrement ayant le même ID qu'un autre enregistrement déjà présent dans la table. Dans le module 2, vous découvrirez comment utiliser la fonction de génération automatique de clés afin qu'un ID différent soit attribué à chaque nouvel enregistrement.

En attendant, chaque fois que vous ajoutez un nouvel enregistrement, vous devez veiller à spécifier un ID qui n'est pas encore utilisé. L'exemple de base de données utilisé pour les besoins de ce tutoriel comprend 24 enregistrements dont les ID sont compris entre 1 et 24. Vous pouvez donc spécifier comme clé primaire n'importe quelle valeur supérieure à 24. Si vous entrez plusieurs enregistrements, veillez à leur attribuer des clés différentes.

Lier un champ d'entrée à l'enregistrement relationnel (exercice facultatif)

Le formulaire d'entrée figurant sur votre page Web est un ensemble de champs d'entrée JavaServer Faces qui ont été liés à l'enregistrement relationnel que vous avez 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. On appelle liaison le processus consistant à associer un composant d'entrée JavaServer Faces à une colonne particulière de l'enregistrement relationnel.

Lorsque vous avez créé l'enregistrement relationnel, l'assistant a automatiquement lié toutes ses colonnes aux champs d'entrée de la page. Vous avez toutefois la possibilité de changer ces liaisons manuellement et de lier d'autres colonnes à d'autres champs d'entrée. Pour lier une colonne de l'enregistrement relationnel à un champ d'entrée, sélectionnez-la dans la vue Données de page et faites-la glisser jusqu'au champ voulu. Vous pouvez expérimenter cette technique en supprimant et en recréant le champ d'entrée Description sur le formulaire.

En savoir plus sur la vue Données de page

La vue Données de page est généralement située dans l'angle inférieur gauche du plan de travail. Si vous ne la trouvez pas, sélectionnez Fenêtre > Afficher la vue > Données de page sur la la barre de menus. Généralement, la vue Données de page sert uniquement à la création de pages Web dynamiques.

La vue Données de page stocke les connexions aux sources de données (par exemple, des bases de données) sous la forme d'objets de données tels que des enregistrements relationnels ou des listes d'enregistrements relationnels. Ces objets de données ne représentent pas les sources de données elles-mêmes ni des composants de la page. Ils représentent chacun une connexion entre le projet et une source de données. Une fois cette connexion créée, vous pouvez faire glisser un objet de données à partir de la vue Données de page et le déposer sur une page Web pour réaliser la connexion et afficher sur cette page les informations provenant de la source de données. Par exemple, voici une représentation de la vue Données de page dans laquelle on voit la liste d'enregistrements relationnels créée au cours du présent tutoriel :

Vue Données de page

Vous pouvez voir la liste d'enregistrements relationnels all_recordlist (ADS), suivie de toutes les colonnes qui la composent. Une fois que cet objet de données est défini et apparaît dans la vue Données de page, vous pouvez faire glisser les colonnes et les déposer sur les composants d'entrée d'une page Web autant de fois que nécessaire sans avoir à établir à chaque fois une nouvelle connexion à la base de données.

Par exemple, si vous vouliez afficher le contenu de la colonne DESCRIPTION sur une page Web, il vous suffirait de déposer un composant champ de sortie texte sur cette page, puis de faire glisser la colonne DESCRIPTION à partir de la vue Données de page et de la déposer sur ce champ de sortie. C'est ce qu'on appelle lier une colonne à un champ de sortie.

De la même manière, si vous souhaitiez que l'utilisateur puisse entrer une nouvelle valeur dans la colonne DESCRIPTION de la base de données, vous déposeriez un champ d'entrée de texte sur la page, puis vous feriez glisser la colonne DESCRIPTION à partir de la vue Données de page pour la déposer sur ce champ d'entrée.

Les étapes ci-dessous sont fournies pour illustrer le concept de champ d'entrée et le processus de liaison, mais elles sont facultatives dans ce tutoriel. Si vous ne souhaitez pas les exécuter, passez à la leçon suivante.

  1. Dans le fichier new_record.jsp, cliquez sur le champ d'entrée Description. Appuyez sur la touche Suppr du clavier.
  2. Dans la vue Palette, cliquez sur le tiroir Composants Faces étendus pour l'ouvrir.
  3. Faites glisser un composant Entrée à partir de la palette et déposez-le sur la cellule qui contenait le champ d'entrée Description que vous venez de supprimer. Cette cellule contient maintenant un champ d'entrée, mais aucun texte tel que {ID} ou {TITLE} ne figure dedans, car le champ n'est pour l'instant lié à aucune colonne.
  4. Dans la vue Données de page, développez successivement les branches Enregistrements relationnels > create_record (Service Data Object) > create_record (ADS) et faites glisser la colonne DESCRIPTION jusqu'au composant Entrée que vous venez de créer. Le texte à l'intérieur du composant Entrée change pour indiquer qu'il est maintenant lié à la colonne DESCRIPTION, comme le montre la figure suivante :
    Vue Données de page
  5. Enregistrez le fichier et exécutez la page sur le serveur de test si vous le souhaitez.

Etat des connaissances

Vous avez terminé la leçon 1.5. Vous avez appris à programmer un bouton de commande et à lier une colonne de données à un champ d'entrée en faisant glisser un composant JSF à partir de la palette et en le déposant sur votre page Web.

< Précédent | Suivant >