Exercice 2.2 : Formatage d'une table de données

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.

Renommage des en-têtes de colonne

Présentation visuelle

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.

  1. Cliquez deux fois sur la page all_records.jsp dans la vue Explorateur de projets.
  2. Cliquez sur l'en-tête de colonne Maincategory dans la table de données.
  3. Dans la vue Propriétés, remplacez la valeur Maincategory de la zone de texte Valeur par Category.
  4. Si vous le souhaitez, renommez les autres colonnes.
  5. Sauvegardez la page.

Formatage des composants de sortie JSF

Présentation visuelle

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.

  1. Cliquez sur le composant {PRICE} dans la page.
  2. Dans la vue Propriétés, changez la valeur Type de Décimal à Devise.
  3. Le prix de chaque article apparaît maintenant dans le style monétaire et non plus comme un nombre 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.

  4. Sauvegardez la page.

Tri des données

Présentation visuelle

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.

  1. Cliquez à l'aide du bouton droit de la souris sur all_recordlist (ADS) dans la vue Données de page et cliquez sur Configurer dans le menu contextuel. La fenêtre de configuration de la liste de données 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 comme indiqué dans Arrêt du serveur à l'exercice 1.3 : Test du site Web.

  2. Dans l'onglet Conditions de cette fenêtre, cliquez sur l'onglet Tri.
  3. Dans le panneau Colonnes disponibles, cliquez sur MAINCATEGORY.
  4. Cliquez sur le bouton > pour placer la colonne MAINCATEGORY dans le panneau Tri.

    La fenêtre doit se présenter de la manière suivante :

    Fenêtre de configuration de la liste de données

  5. Cliquez sur Fermer pour appliquer les modifications de tri.

    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.

Ajout d'une fonction de pagination

Présentation visuelle

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.

  1. Cliquez à un emplacement quelconque de la table de données.
  2. Dans la vue Propriétés, cliquez sur h:dataTable dans la liste des balises HTML, située à gauche de la vue.
  3. Dans la vue Propriétés, cliquez sur Options d'affichage dans la liste des balises située à gauche.
  4. Dans la zone Lignes par page, entrez 5.
  5. Cliquez sur Ajouter une pagination Style Web. Une image indiquant sous quelle forme se présentera la pagination apparaît au bas de la table de données.

    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.

  6. Sauvegardez la page.

    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.

Mise en place des composants dans une zone de groupe de type liste

Présentation visuelle

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.

  1. A partir du tiroir Composants Faces de la palette, faites glisser un composant Panneau - Zone de groupe dans la colonne TITLE de la table de données. La fenêtre Sélection d'un type s'affiche.
  2. Choisissez Liste comme type de zone de groupe dans la fenêtre Sélection d'un type et cliquez sur OK.

    Dans une zone de groupe, les composants sont placés dans une colonne ou une ligne unique et sont orientés verticalement ou horizontalement.

  3. Cliquez sur la zone de groupe pour la sélectionner.
  4. Dans la vue Propriétés, modifiez la valeur de la zone Orientation en Vertical.
  5. Faites glisser le composant {TITLE} dans la zone de groupe de type liste. Les instructions qui figurent dans la zone de groupe disparaissent lorsque vous y placez un composant.
  6. A partir du tiroir Composants Faces de la palette, faites glisser un composant d'image dans la zone de groupe de type liste. Cela permet d'insérer plus facilement le composant d'image sur la bordure inférieure de la zone de groupe afin de s'assurer que l'image apparaîtra sous le titre.
  7. Cliquez sur le composant d'image ajouté.
  8. La zone Taille de la vue Propriétés permet de définir la largeur à 60 pixels et la hauteur à 50 pixels. Ainsi, quelle que soit la taille des images dans la base de données, celles-ci apparaîtront au format 60x50 dans la page.
  9. Associez le composant d'image à la colonne PHOTO de l'enregistrement all_recordlist en faisant glisser la colonne PHOTO vers le composant d'image à partir de la vue Données de page. Le composant d'image affiche ainsi les données d'image qui se trouvent dans la colonne PHOTO de chaque enregistrement.
  10. Dans l'onglet Données de base de la vue Propriétés, cliquez sur le bouton Sélectionner un objet de données de page Bouton Sélectionner un objet de données de page situé en regard de la zone Type. La fenêtre Sélection d'un objet de données de page s'affiche.
  11. Cliquez sur le symbole + pour développer la liste d'enregistrements relationnels all_record.
  12. Cliquez sur IMAGETYPE (String).
  13. Cliquez sur OK.
  14. Sauvegardez la page.

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

    Aspect de la page actuelle

Mise en place des composants dans une zone de groupe de type grille

Présentation visuelle

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.

  1. A partir du tiroir Composants Faces de la palette, faites glisser un composant Panneau - Zone de groupe dans la colonne DESCRIPTION de la table de données. La fenêtre Sélection d'un type s'affiche.
  2. Cliquez sur Grille comme type de composant à ajouter et cliquez sur OK.
  3. Cliquez sur la nouvelle zone de groupe de type grille.
  4. Utilisez la vue Propriétés pour définir le nombre de Colonnes à 2 pour cette zone de groupe.
  5. A partir du tiroir Composants Faces, faites glisser un composant de sortie dans la zone de groupe de type grille.

    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.

  6. Cliquez sur le composant Sortie (il apparaît dans Page Designer en tant que outputText) et utilise la vue Propriétés pour lui affecter la valeur Description :.
  7. Faites glisser le composant {DESCRIPTION} existant de la page sur la bordure inférieure de la zone de groupe de type grille.

    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.

  8. Faites glisser un autre composant de sortie à partir de la palette et placez-le à droite de la zone de groupe.
  9. Utilisez la vue Propriétés pour lui affecter la valeur Prix :.
  10. Faites glisser le composant de sortie existant {PRICE} à droite du texte de sortie Price.
  11. De la même manière, faites glisser un composant Sortie pour le libellé du composant {PHONE} et intitulez-le Téléphone :.
  12. Faites glisser le composant {PHONE} existant dans la zone de texte de type grille à la droite du texte de sortie relative au téléphone. La page doit maintenant se présenter de la manière suivante :

    Aspect de la page actuelle

  13. Faites glisser le lien hypertexte existant Update Listing et placez-le dans la colonne DESCRIPTION mais pas dans la zone de groupe de type grille.

    La meilleure manière d'y parvenir consiste à cliquer sur l'icône du lien 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.

  14. Supprimez les colonnes vides PRICE, PHONE et UPDATE de la table de données.

    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.

  15. Cliquez sur l'en-tête de la colonne Description et utilisez la vue Propriétés pour modifier le contenu de la zone Valeur en Détails.

    Cette dernière doit se présenter de la manière suivante :

    Aspect de la page actuelle

  16. Sauvegardez la page.

Application des règles de feuille de style

Présentation visuelle

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.

  1. Sélectionnez la table de données en cliquant sur l'un des en-têtes de colonne.
  2. Dans la vue Propriétés, cliquez sur h:dataTable.
  3. Cliquez sur le bouton Tous les attributs dans la partie supérieure de la vue Propriétés.
  4. Sous Nom de l'attribut, cliquez sur l'élément headerClass. Ce paramètre contrôle la présentation de la ligne d'en-tête de la table de données.
  5. Cliquez ensuite sur le bouton Sélection d'une classe qui apparaît dans la zone Valeur à côté de headerClass.

    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.

  6. Développez la feuille de style et cliquez sur .columnHeaderClass.
  7. Cliquez sur OK.

    Fenêtre Sélection d'une classe

  8. Cliquez ensuite sur l'élément rowClasses sous Nom de l'attribut puis cliquez sur le bouton Sélection de classes dans la zone Valeur pour ouvrir la fenêtre Sélection de classes à nouveau. L'option rowClasses contrôle la présentation des lignes dans la table de données.
  9. Développez la feuille de style et, cette fois, sélectionnez à la fois les règles .rowClass1 et .rowClass2 en cliquant dessus tout en maintenant la touche Ctrl enfoncée. Ces deux règles ont des schémas de couleur différente et le fait de les sélectionner permet d'obtenir des couleurs de ligne alternées.
  10. Cliquez sur OK.
  11. Pour terminer, sauvegardez la page et exécutez-la sur le serveur de test.

    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 :

    Aspect de la page en cours

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.

Retour d'informations
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.