Vous devez exécuter le module 1 : Création de pages Web avec des connexions de données dans son intégralité ou l'exercice 2.1 : Importation des ressources requises avant de pouvoir aborder le formatage de la table de données.
La table de données de la page all_records.jsp présente toutes les apparences d'un utilitaire. Elle remplit sa fonction en affichant tous les enregistrements de la base de données et les liens aux autres pages, mais sa présentation laisse à désirer. Dans cet exercice, vous allez améliorer cette table en données en ajoutant des éléments, tels qu'une fonction de pagination, des règles de style et des illustrations des articles à vendre.
Dans de nombreux cas, il n'est pas souhaitable que les en-têtes de colonne de la table de données portent exactement le même nom que ceux de la base de données. Les étapes suivantes vous indiquent comment renommer les en-têtes de colonne de la table de données de manière plus appropriée.
Vous pouvez également formater les composants de sortie. Au cours de ces étapes, vous allez formater le composant de sortie {PRICE} afin que ce dernier apparaisse sous la forme d'une valeur monétaire au lieu d'un numéro ordinaire.
D'autres styles et formats sont disponibles pour les différents types de données, tels que des pourcentages, des dates et des heures. Vous pouvez également personnaliser le format d'un composant de sortie afin d'afficher un type de données non répertorié dans la vue Propriétés, tel qu'un numéro de téléphone.
Actuellement, les données ne sont pas triées. Pour fournir aux utilisateurs une liste d'annonces mieux organisée, triez la liste d'enregistrements par catégorie afin de regrouper les articles similaires.
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 comme indiqué dans Arrêt du serveur à l'exercice 1.3 : Test du site Web.
La fenêtre doit se présenter de la manière suivante :
Les données sont maintenant triées par catégorie. Vous pouvez trier à partir de n'importe quelle colonne de la base de données.
Au lieu d'afficher tous les enregistrements à la fois dans la table de données, vous pouvez utiliser une fonction de pagination. Cette dernière scinde la liste des enregistrements par pages d'une taille définie, sans créer de fichiers JSP dans le projet.
La visualisation de la pagination dans Page Designer est une image de marque de réservation et n'indique pas réellement combien de pages seront affichées, étant donné que cela n'est déterminé qu'au moment où la page est chargée dans un navigateur.
Vous pouvez procéder à des essais avec les différents styles de pagination et avec le composant des statistiques de page afin de trouver la présentation adaptée à la page.
Au lieu d'avoir un seul composant de sortie dans chaque colonne de la table de données, il est possible de combiner les éléments dans des colonnes pour obtenir une présentation plus attractive. Vous allez organiser les composants à l'aide d'une zone de groupe, comme vous l'auriez fait avec une table HTML masquée. Après avoir ajouté le composant d'image pour améliorer la présentation du site, vous placerez le plus possible d'informations de texte concernant chaque annonce dans une colonne de table de données unique, que vous nommerez ensuite DETAILS.
Dans une zone de groupe, les composants sont placés dans une colonne ou une ligne unique et sont orientés verticalement ou horizontalement.
La page doit maintenant se présenter de la manière suivante :
Dans une zone de groupe, les composants peuvent également être organisés dans un format similaire à une table. Une zone de groupe de type liste peut comporter une seule ligne ou colonne, mais une zone de groupe de type grille peut en comporter autant que nécessaire. Au cours de ces étapes, vous allez déplacer les composants {PRICE} et {PHONE} dans la colonne DESCRIPTION de la table de données et inclure leurs libellés.
Ce composant de sortie constituera un libellé pour la description de l'article à vendre. Chaque composant de sortie aura un libellé de ce type dans la cellule gauche de la table.
Si vous avez des difficultés à faire glisser les composants au bon endroit dans la zone de groupe, maintenez le bouton de la souris enfoncé tout en gardant les yeux sur le curseur. L'emplacement du curseur dans la zone de groupe indique où se trouvera le composant une fois que vous aurez relâché le bouton de la souris. Pendant cet exercice, vous devez relâcher le bouton de la souris lorsque le curseur se trouve à droite du composant précédent.
La meilleure manière d'y parvenir consiste à cliquer sur l'icône du lien tout en maintenant le bouton de la souris enfoncé et de la faire glisser directement sous la zone de groupe de type grille. Vous déplacez ainsi à la fois le libellé du texte et l'icône du lien, ce qui préserve la fonctionnalité du lien. Si vous déplacez uniquement le texte ou le lien, ce dernier n'est plus opérationnel. Si cela se produit, cliquez sur Edition > Annuler à partir de la barre de menus et faites une nouvelle tentative.
Pour supprimer une colonne, cliquez dessus et ouvrez la vue Propriétés. Cliquez ensuite sur h:dataTable dans la liste des balises HTML située à gauche de la vue, sélectionnez la colonne à supprimer de la liste située à droite de la vue et cliquez sur Supprimer.
Cette dernière doit se présenter de la manière suivante :
Les feuilles de style en cascade (CSS) offrent non seulement le moyen le plus efficace de contrôler la présentation d'un site mais aussi celle des composants JavaServer Faces individuels. Dans la section suivante, vous allez utiliser le fichier CSS fourni dans le projet pour modifier la présentation de cette page. Vous allez plus particulièrement appliquer une règle aux en-têtes de colonne et appliquer deux règles aux lignes pour créer un effet de couleur alterné permettant de différencier chaque ligne de la table de données.
La fenêtre Sélection d'une classe s'affiche. Elle comporte tous les styles disponibles dans les feuilles de style du projet. Il n'existe actuellement qu'une seule feuille de style dans ce projet.
Si vous n'êtes pas habitué à exécuter des applications sur le serveur, reportez-vous à l'exercice 1.3 : Test du site Web.
Lorsque vous testez la page, elle doit se présenter de la manière suivante :
Vous connaissez maintenant quelques astuces pour transformer une table de données en quelque chose de plus attractif.
Vous êtes prêt à aborder l'exercice 2.3 : Utilisation du composant de téléchargement en amont de fichiers.