Exercice 1.2 : Utilisation de la liste d'enregistrements relationnels et de la table de données

Avant de commencer, vous devez effectuer l'exercice 1.1 : Importation des ressources requises.

Le site Web exemple utilise les pages Web dynamiques pour accéder aux sources de données, telles que les bases de données, et afficher dans la page des informations provenant de ces sources de données. Dans cet exercice, vous allez configurer la page all_records.jsp afin d'afficher toutes les annonces classées dans la base de données. Au cours des exercices suivants, vous allez connecter d'autres pages à la base de données pour pouvoir créer des annonces classées, les modifier et afficher une liste d'annonces filtrées.

Ce tutoriel utilise deux composants qui permettent de connecter les pages aux bases de données en utilisant Java Server Faces : les enregistrements relationnels et les listes d'enregistrements relationnels. Ces composants représentent les données d'une base de données afin que celles-ci s'affichent dans la page sous la forme d'une table de données ou d'une table HTML ordinaire. Ils utilisent des beans d'accès aux données JavaBeans ; Informations supplémentaires sur les beans d'accès aux données ou Informations supplémentaires sur JavaServer Faces et les composants Faces.

Création d'une liste d'enregistrements relationnels

Présentation visuelle

Au cours de cette procédure, vous allez créer une liste d'enregistrements relationnels pour représenter toutes les annonces classées de la base de données. Vous allez ensuite établir une connexion à la base de données et sélectionner la table qui contient les informations dont vous avez besoin dans la liste d'enregistrements relationnels. Pour terminer, vous affichez cette liste d'enregistrements relationnels sur la page d'une table de données.

  1. Dans la vue Explorateur de projets, développez Projets Web dynamiques > ClassifiedsTutorial > WebContent.
  2. Dans le dossier WebContent, cliquez deux fois sur all_records.jsp. Le fichier all_records.jsp s'affiche dans l'éditeur.
  3. Supprimez le texte par défaut Place content here.
  4. Dans la vue Palette, développez le tiroir Données en cliquant dessus.
  5. A partir de la palette, faites glisser le composant Liste d'enregistrements relationnels vers la zone qui ne contient encore aucune donnée.

    Vous pouvez également être invité à sauvegarder le fichier all_records.jsp. Dans ce cas, cliquez sur OK.

    La fenêtre Ajout d'une liste d'enregistrements relationnels s'affiche.

  6. Dans la zone Nom, tapez all_recordlist.

    Les noms de liste d'enregistrements relationnels et d'enregistrement relationnel doivent être conformes aux conventions de nommage Java standard concernant les noms de variable (ne devant pas contenir d'espace, par exemple).

  7. Vérifiez que la case Ajouter des contrôles de données est cochée.

    Lorsque c'est le cas, l'assistant crée une table de données pour afficher la liste d'enregistrements dans la page. Sinon, l'assistant crée uniquement la liste d'enregistrements et aucune représentation de ces données dans la page. Pour l'instant, l'assistant crée la table de données par défaut que vous pourrez personnaliser ultérieurement. La fenêtre Ajout d'une liste d'enregistrements relationnels doit se présenter de la manière suivante :

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

  8. Cliquez sur Suivant.
  9. Dans la zone Nom de la connexion, cliquez sur Nouveau pour créer une connexion de base de données.

    La boîte de dialogue Nouvelle connexion s'affiche. Sachez que le nom ClassifiedsTutorial_Con1 est inséré automatiquement dans la zone Nom de la connexion.

  10. Cliquez sur Créer une nouvelle connexion à la base de données. La fenêtre Nouvelle connexion de base de données s'affiche.
  11. Cliquez sur Suivant.

Spécification des informations de connexion à la base de données

Présentation visuelle

Vous devez indiquer à la liste d'enregistrements où se trouvent les données que celle-ci doit représenter. Cela s'effectue par le biais de la fenêtre Nouvelle connexion de base de données. Dans ce cas, vous spécifiez la base de données Cloudscape, incluse dans le fichier importé au cours de l'exercice 1.1. Une fois créée, cette connexion sera utilisée pour le site Web tout entier et cette opération ne doit donc être effectuée qu'une fois dans le tutoriel.

  1. Dans la fenêtre Nouvelle connexion de base de donnée, sous Sélectionnez un gestionnaire de base de données, développez Cloudscape et cliquez sur V5.1.
  2. Cliquez sur le bouton Parcourir qui se trouve en haut. Il s'agit du bouton Parcourir situé en regard de la zone Emplacement de la base de données. La fenêtre Rechercher un dossier s'affiche.
  3. Sous Sélectionnez un répertoire de base de données, accédez au répertoire suivant : <dossier-espace de travail>\ClassifiedsTutorial\WebContent\cloudscapesampledata\database, où <dossier-espace de travail> est le répertoire qui contient l'espace de travail que vous utilisez actuellement.
  4. Cliquez sur le dossier database, puis sur OK.
  5. Il n'est pas nécessaire d'ajouter un ID utilisateur ou un mot de passe pour accéder à la base de données. La fenêtre Nouvelle connexion de base de données doit se présenter de la manière suivante :

    Fenêtre Nouvelle connexion de base de données
  6. Cliquez sur Terminer. Vous êtes redirigé vers la fenêtre Nouvelle connexion.
  7. Dans cette fenêtre, cliquez sur Terminer. Vous êtes redirigé vers la fenêtre Ajout d'une liste d'enregistrements relationnels.
  8. Après avoir créé une connexion à la base de données Cloudscape, vous devez choisir une table ou la liste d'enregistrements à représenter. La fenêtre Ajout d'une liste d'enregistrements relationnels comporte les tables de la base de données. Dans la plus grande partie de ce tutoriel, vous allez utiliser la table W5SAMPLE.ADS.

  9. Cliquez sur la table W5SAMPLE.ADS dans la zone Table.

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

    Les autres pages de l'assistant permettent d'exclure des colonnes de la liste d'enregistrements et d'exécuter des options avancées, telles que la définition de la clé principale, l'ajout de relations à d'autres tables et la spécification des conditions de filtre et de tri. Des informations supplémentaires sur ces pages sont disponibles dans les exercices suivants.
  10. Cliquez sur Terminer.

Optimisation de la table de données par défaut

Présentation visuelle

La vue Données de page contient maintenant une liste des colonnes de la table ADS et le fichier all_records.jsp contient la visualisation de ces données dans une table de données. La table de données par défaut contient maintenant trop d'informations. Pour ce tutoriel, vous devez afficher uniquement le titre, la description, la catégorie, le prix et le numéro de téléphone de chaque annonce classée. Pour supprimer des éléments dans la table de données et en modifier l'ordre, procédez comme suit.

  1. Cliquez à un emplacement quelconque de la table de données.
  2. Ouvrez la vue Propriétés.

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

  3. Dans la vue Propriétés, cliquez sur h:dataTable dans la liste des balises HTML située dans la partie gauche de la vue.
  4. Dans la partie droite de la vue, cliquez sur la colonne ID, sous Libellé, et cliquez ensuite sur Supprimer. La colonne ID est supprimée de la table de données.
  5. Répétez ce processus pour supprimer toutes les colonnes de la table de données à l'exception des colonnes suivantes : TITLE, DESCRIPTION, MAINCATEGORY, PRICE et PHONE. La vue Propriétés doit maintenant se présenter de la manière suivante :

    Vue Propriétés

    La page doit maintenant se présenter de la manière suivante :

    Aspect actuel de la page

    L'ordre des colonnes n'est pas adapté pour une annonce classée. L'ordre suivant est plus pertinent :

    1. TITLE
    2. DESCRIPTION
    3. MAINCATEGORY
    4. PRICE
    5. PHONE
  6. Pour modifier l'ordre des colonnes, revenez à la liste des colonnes dans la vue Propriétés. Cliquez sur le libellé TITLE, puis sur Déplacer vers le haut afin que TITLE apparaisse en début de liste. La colonne TITLE apparaît maintenant en première position dans la table de données.
  7. De même, sélectionnez les autres colonnes l'une après l'autre et réorganisez-les. La section Colonnes de la vue Propriétés doit se présenter de la manière suivante :

    Colonnes dans la vue Propriétés

  8. Sauvegardez la page.

    Dans l'exercice suivant, Exercice 1.3 : Test du site Web, vous découvrirez comment cette page se présente sur un serveur Web réel.

    Il existe un grand nombre d'options pour formater les tables de données et les composants JavaServer Faces. Certaines d'entre elles sont abordées dans le module suivant, Module 2 : Ajout de fonctions avancées. Vous pouvez également explorer la vue Propriétés par vous-même pour découvrir les différents composants JavaServer Faces de la page (par exemple, la table de données et les composants de sortie individuels).

Vous êtes prêt à aborder l'exercice 1.3 : Test du site Web.

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