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.2 : Se connecter à une base de données et afficher des données sur une page Web

Dans cette leçon, vous allez apprendre à établir une connexion à une base de données et à afficher des enregistrements de données sur une page Web. Vous verrez également comment ajouter une liste d'enregistrements relationnels à votre page Web.

Dans ce tutoriel, le site Web utilise des pages Web dynamiques avec des composants JavaServer Faces pour accéder à une base de données et afficher certaines informations qu'elle contient sur les pages. Des enregistrements relationnels et des listes d'enregistrements relationnels sont utilisés pour représenter les données d'une base de données afin que celles-ci s'affichent sur la page sous forme de table de données ou de table HTML ordinaire. Des beans Java d'accès aux données sont utilisés par ces composants.

En savoir plus sur les beans d'accès aux données

Les beans d'accès aux données sont des représentations JavaBean de beans enterprise (EJB). Ils sont généralement utilisés dans les programmes client faisant appel à des fichiers JSP, des servlets ou des beans enterprise qui communiquent avec d'autres beans enterprise. Les beans d'accès aux données vous isolent de la complexité de gestion du cycle de vie des beans enterprise. Autrement dit, vous pouvez programmer les échanges avec les beans enterprise aussi facilement qu'avec des beans Java, ce qui simplifie les programmes client ayant besoin d'accéder à des EJB et réduit la durée globale du cycle de développement.

En savoir plus sur les composants JavaServer Faces et Faces

JavaServer Faces est une technologie qui vous aide à construire des interfaces utilisateur pour les applications Web dynamiques prévues pour fonctionner sur un serveur. L'infrastructure (framework) JavaServer Faces gère l'état de l'interface utilisateur au fil des demandes adressées au serveur et offre un modèle simple pour le développement d'événements côté serveur activés par le client. JavaServer Faces s'appuie sur une infrastructure MVC (modèle-vue-contrôleur). Pour JavaServer Faces, cela signifie que le contrôleur est un servlet, le modèle est représenté par des JavaBeans et la vue est constituée de composants Faces avec peu ou pas du tout de code d'application. L'objectif de ce modèle est de séparer le contenu de la présentation.

Des outils tels que les composants Faces sont disponibles pour vous aider à utiliser cette technologie dans vos applications Web. Les composants Faces incluent une bibliothèque de balises personnalisée JSP (JavaServer Page) permettant d'exprimer une interface JavaServer Faces dans une page. Un assistant vous aide à créer des fichiers JSP spécialement adaptés à l'utilisation de composants Faces. Disponibles dans un tiroir de la vue Palette, les composants Faces peuvent être déposés sur les pages Web que vous créez pour vous permettre de développer visuellement votre application Web.

Par exemple, vous pouvez faire glisser un champ d'entrée de texte et le déposer dans un formulaire, sur la page en cours de création. Ensuite, vous pouvez sélectionner un bouton Soumettre dans la palette de composants Faces et le déposer à côté du champ d'entrée de texte. Après quoi, vous pouvez connecter le champ d'entrée de texte à une source de données. Dès lors, l'utilisateur final pourra, à partir de votre application Web, saisir des données dans le champ d'entrée et les envoyer à la source de données.

Les applications conçues à l'aide de composants Faces ont aussi cet avantage que l'interface utilisateur est rendue indépendamment de la logique de programmation sous-jacente. Cela signifie que vos applications peuvent s'exécuter et accéder aux données sur des plateformes différentes, qu'il s'agisse de navigateurs traditionnels ou d'appareils portables.
Tiroir Composants Faces étendus de la palette

Ajouter une liste d'enregistrements relationnels

Dans cette leçon, vous allez créer une liste d'enregistrements relationnels pour représenter toutes les petites annonces stockées dans la base de données. Vous allez ensuite établir une connexion à la base de données et sélectionner la table contenant les informations qui serviront à peupler la liste d'enregistrements relationnels. Enfin, vous afficherez cette liste sur la page en créant une table de données.
  • Un composant enregistrement relationnel se connecte à un seul enregistrement d'une base de données. Dans notre cas, il représente une seule des petites annonces stockées dans l'exemple de base de données. Un composant enregistrement relationnel vous permet de créer un nouvel enregistrement, d'éditer un enregistrement existant ou de supprimer un enregistrement devenu obsolète.
  • Un composant liste d'enregistrements relationnels se connecte à plusieurs enregistrements d'une base de données. Dans notre cas, il peut représenter de deux à la totalité des annonces stockées dans l'exemple de base de données.
  • Les tables de données servent à afficher sur une page les données d'une liste d'enregistrements relationnels. Une table de données marque simplement l'emplacement d'une liste d'enregistrements. Elle ne formate pas les données en lignes et en colonnes comme le fait une table HTML.
    En savoir plus sur les tables de données

    La table de données est un composant d'une page Faces JSP qui contient des objets de données tels qu'une liste d'enregistrements relationnels.Bien qu'une table de données semble comporter des lignes et des colonnes comme une table HTML, son principe de fonctionnement est différent. Si vous souhaitez mettre en forme les contrôles d'entrée et de sortie comme dans un tableau, vous devez utiliser un composant Panneau - Zone de groupe (disponible dans le tiroir Composants Faces étendus de la palette). Cette procédure est décrite dans l'exercice 2.2 : Mettre en forme une table de données.

    Les tables de données étant des composants Faces et non des composants HTML, elles sont contrôlées à partir de la vue Propriétés et non à partir de la vue Page Designer. La vue Propriétés permet de personnaliser une table de données de plusieurs manières :
    • ajout, suppression et modification de l'ordre des colonnes,
    • mise en forme du texte et de l'arrière-plan,
    • ajout d'un en-tête, d'un pied de page et de marges,
    • ajout d'une fonction de pagination pour l'affichage des résultats.

Pour créer une nouvelle liste d'enregistrements relationnels :

  1. Dans la vue Explorateur de projets de la perspective Web, développez la branche ClassifiedsTutorial > WebContent.
  2. Dans le dossier WebContent, faites un double clic sur all_records.jsp. Le fichier all_records.jsp s'affiche dans l'éditeur.
  3. Supprimez le texte par défaut Contenu par défaut de bodyarea.
  4. Dans la vue Palette, développez le tiroir Données.
  5. A partir de la palette, faites glisser le composant Liste d'enregistrements relationnels vers la zone de contenu vide. 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 s'appliquant aux noms de variable (par exemple, ils ne doivent pas contenir d'espace).
  7. Vérifiez que l'option Ajouter des contrôles de données est sélectionnée. Lorsque cette option est sélectionnée, l'assistant crée une table de données pour afficher la liste d'enregistrements sur la page. Sinon, l'assistant crée uniquement la liste d'enregistrements ; il ne crée pas de représentation de ces données sur la page. Pour l'instant, vous allez faire en sorte que l'assistant crée la table de données par défaut et vous la personnaliserez plus tard. La fenêtre Ajout d'une liste d'enregistrements relationnels doit se présenter comme suit :
    Fenêtre Ajout d'une liste d'enregistrements relationnels

    Cliquez sur Suivant.

  8. Sur la page suivante de l'assistant, dans la zone Nom de la connexion, cliquez sur Nouveau pour créer une nouvelle connexion à une base de données. La boîte de dialogue Nouvelle connexion JDBC s'ouvre. Sélectionnez l'option Créer une connexion et cliquez sur Suivant.
  9. Dans la liste Sélectionnez un gestionnaire de base de données, développez l'entrée Derby et choisissez 10.1.
  10. Dans la zone Emplacement de la base de données, cliquez sur Parcourir et sélectionnez <emplacement_espace_travail>\ClassifiedsTutorial\WebContent\\database, où <emplacement_espace_travail> est le répertoire de votre espace de travail actuel. Cliquez sur OK pour fermer la fenêtre Rechercher un dossier.
  11. Dans la zone Emplacement de la classe, tapez l'emplacement du ou des fichiers JAR qui implémentent la classe du pilote JDBC, ou bien cliquez sur Parcourir pour sélectionner cet emplacement dans votre système de fichiers. Après avoir sélectionné l'emplacement des fichiers JAR, cliquez sur Ouvrir.
  12. Il est possible que vous deviez entrer un ID utilisateur pour accéder à la base de données. Aucun mot de passe n'est nécessaire. L'assistant Nouvelle connexion à une base de données doit se présenter comme suit :
    Fenêtre Nouvelle connexion à une base de données.
  13. Dans l'assistant Nouvelle connexion JDBC, cliquez sur Terminer. Vous retrouvez l'assistant Ajout d'une liste d'enregistrements relationnels.
  14. Cliquez sur Configurer les connexions à une base de données du projet. La fenêtre de propriétés Connexions JDBC s'ouvre.
  15. Cliquez sur le bouton Modifier dans la section Caractéristiques de la connexion du contexte d'exécution. Pour le type de connexion à utiliser lors de l'exécution, choisissez Utiliser la connexion au gestionnaire de pilote de périphérique. Cliquez sur Terminer, puis sur OK pour retourner à la boîte de dialogue Ajout d'une liste d'enregistrements relationnels. Maintenant que vous avez créé une connexion à la base de données Derby, vous devez choisir une table ou la liste d'enregistrements à représenter. L'assistant Ajout d'une liste d'enregistrements relationnels présente les tables de la base de données.
  16. Développez l'entrée W5SAMPLE et sélectionnez ADS. Cliquez sur Suivant. Les autres pages de l'assistant permettent d'exclure des colonnes de la liste d'enregistrements et d'utiliser des options avancées telles que la définition de la clé primaire, l'ajout de relations à d'autres tables et la spécification des conditions de filtrage et de tri. Nous reviendrons plus en détail sur ces pages et leurs options dans les exercices à venir.
    Fenêtre Ajout d'une liste d'enregistrements relationnels
  17. Sur la page Ajout d'un enregistrement relationnel de la boîte de dialogue, vous allez spécifier les colonnes à inclure dans votre liste d'enregistrements relationnels. Cliquez sur Suivant.
  18. 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. Par défaut, toutes les colonnes sont sélectionnées pour être affichées. Décochez-les toutes sauf les suivantes :
    • MAINCATEGORY: String
    • TITLE: String
    • DESCRIPTION: String
    • PRICE: BigDecimal
    • PHONE: String
  19. Vous pouvez affiner l'organisation de la table de données affichée sur votre page Web. Par exemple, vous pouvez modifier l'ordre des colonnes en sélectionnant une colonne et en la déplaçant jusqu'à la position désirée à l'aide des boutons fléchés.
    Organisez les colonnes dans l'ordre suivant :
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
    Cliquez sur Terminer.
    Votre page Web doit ressembler à ceci :
    Apparence actuelle de la page
  20. Sauvegardez la page.
Dans l'exercice suivant, vous découvrirez comment cette page se présente sur un serveur Web réel. Il existe un grand nombre d'options pour mettre en forme les tables de données et les composants JavaServer Faces. Certaines d'entre elles sont abordées dans le module suivant. 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).

Etat des connaissances

Vous avez terminé la leçon 1.2. Vous avez appris à établir une connexion à une base de données et à afficher des enregistrements de données sur une page Web à l'aide d'un composant liste d'enregistrements relationnels.

< Précédent | Suivant >