Leçon 2.1 : Mettre en forme une table de données

Changer les en-têtes des colonnes

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. Dans les étapes qui suivent, vous allez renommer les colonnes de la table de données de manière plus appropriée.

Double-cliquez sur la page all_records.jsp dans la vue Explorateur Enterprise.
Cliquez sur l'en-tête de colonne Maincategory dans la table de données.
Dans la vue Propriétés, cliquez sur l'onglet h:outputText et, dans le champ Valeur, remplacez Maincategory par Category.
Si vous le souhaitez, renommez les autres colonnes.
Sauvegardez la page.

Mettre en forme les composants de sortie

Vous pouvez également mettre en forme les composants de sortie. Au cours de ces étapes, vous allez mettre en forme le composant de sortie {PRICE} afin qu'il apparaisse comme une valeur monétaire au lieu d'un nombre ordinaire.

Cliquez sur le composant de sortie {PRICE}.
Dans la vue Propriétés, déroulez la liste Type et choisissez Devise (ou Monétaire). 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.
Sauvegardez la page.

Trier les données

Actuellement, les données ne sont pas triées. Pour présenter aux utilisateurs une liste d'annonces mieux organisée, vous allez trier la liste d'enregistrements par catégorie afin de regrouper les articles similaires.

Cliquez avec le bouton droit sur all_recordlist (ADS) dans la vue Données de page et sélectionnez Configurer dans le menu contextuel. (Si la vue Données de page n'est pas affichée, sélectionnez Fenêtre > Afficher la vue > Données de page.) La fenêtre Configurer une liste d'enregistrements relationnels s'ouvre. Si un message d'avertissement indique que la connexion à la base de données n'a pas pu être établie, cela signifie que le serveur est resté actif une fois le test du site Web terminé. Face à cette situation, fermez toutes les boîtes de dialogue en cliquant sur leur bouton Annuler et arrêtez le serveur conformément aux instructions de la section "Arrêter le serveur", dans l'exercice Tester le site Web.
Cochez les cases Extraire de la portée un enregistrement existant ou une liste d'enregistrements existante et Réutiliser la définition des métadonnées d'un enregistrement existant ou d'une liste d'enregistrements existante, puis cliquez sur Suivant.
Dans la fenêtre suivante, sélectionnez ADS et cliquez sur Suivant.
Dans la partie droite de la fenêtre suivante, cliquez sur Trier les résultats. La fenêtre Ordres s'affiche.
Dans le panneau Colonnes disponibles, cliquez sur MAINCATEGORY.
Cliquez sur le bouton > pour faire passer la colonne MAINCATEGORY dans la liste Trier par. La fenêtre doit se présenter comme suit :
Cliquez sur Fermer pour fermer la fenêtre Ordres.
Cliquez sur Terminer pour appliquer les modifications. Les données sont maintenant triées par catégorie. Le tri peut porter sur n'importe quelle colonne de la base de données.

Ajouter une fonction de pagination

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 en plusieurs pages d'une taille définie sans pour autant créer de nouveaux fichiers JSP dans le projet.

Cliquez à un emplacement quelconque de la table de données.
Dans la vue Propriétés, cliquez sur h:dataTableEx dans la liste des balises HTML occupant la partie gauche de la vue.
Cliquez sur l'onglet Options d'affichage, juste en dessous de l'onglet h:dataTableEx.
Dans la zone Lignes par page, entrez 5.
Cliquez sur le bouton à gauche de Ajouter une pagination de style Web. Une représentation de la fonction de pagination apparaît en bas de la table de données. La visualisation de la pagination dans Page Designer est une simulation ; elle 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.
Enregistrez la page. Vous pouvez expérimenter les différents styles de pagination et tester l'utilisation du composant des statistiques de page afin de trouver la présentation qui vous convient le mieux.

Disposer les composants dans une zone de groupe de type boîte

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 le feriez avec une table HTML masquée. Après avoir ajouté un composant Image pour afficher la photo des articles en vente, vous placerez la plus grande part des données texte de chaque annonce dans une même colonne de la table de données que vous nommerez ensuite DETAILS.

Dans la palette, cliquez sur le tiroir Composants Faces étendus pour l'ouvrir. Faites glisser un composant Panneau - Zone de groupe et déposez-le sur la colonne TITLE de la table de données. La fenêtre Sélection d'un type s'affiche.
Choisissez Boîte comme type de zone de groupe et cliquez sur OK. Ce type de zone de groupe dispose les composants que vous y déposez dans une même colonne ou une même ligne et peut être orienté verticalement ou horizontalement.
Cliquez sur la zone de groupe pour la sélectionner.
Dans la vue Propriétés, choisissez Vertical dans la liste Orientation.
Faites glisser le composant {TITLE} pour l'inclure dans la zone de groupe. Les instructions qui figurent dans la zone de groupe disparaissent lorsque vous y placez un composant.
A partir du tiroir Composants Faces étendus de la palette, faites glisser un composant Image jusqu'à la zone de groupe. Cela permet de placer plus facilement le composant Image sur la bordure inférieure de la zone de groupe afin de s'assurer que l'image apparaîtra sous le titre.
Cliquez sur le composant Image ajouté.
Utilisez la zone Taille de la vue Propriétés pour fixer 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.
Liez le composant Image à la colonne PHOTO de l'enregistrement all_recordlist. Pour cela, dans la vue Données de page, faites glisser la colonne PHOTO et déposez-la sur le composant Image. Le composant Image affichera ainsi les données d'image trouvées dans la colonne PHOTO de chaque enregistrement. Si la colonne PHOTO (ByteArray) n'est pas listée dans la vue Données de page, cliquez avec le bouton droit sur all_recordlist (ADS) dans cette vue et sélectionnez Configurer dans le menu contextuel. Cliquez sur OK pour fermer la fenêtre URL si elle s'ouvre. Dans la fenêtre Configurer une liste d'enregistrements relationnels, cliquez sur Suivant. Sélectionnez ADS et cliquez sur Suivant. Cochez la case de la colonne PHOTO (ByteArray) et cliquez sur Terminer.
Cliquez sur le graphique que vous venez d'insérer. Dans la vue Propriétés, sur l'onglet hx:graphicImageEx, cliquez sur le bouton Sélection d'un objet de données de page à côté du champ Type. La fenêtre Sélection d'un objet de données de page s'affiche.
Développez successivement les branches all_recordlist (Service Data Object) > all_recordlist (ADS).
Cliquez sur IMAGETYPE (String).
Cliquez sur OK, puis enregistrez la page.

Votre page doit maintenant ressembler à ceci :

Perfectionner l'agencement avec une zone de groupe de type grille

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. Dans les étapes qui suivent, vous allez déplacer les composants {PRICE} et {PHONE} dans la colonne DESCRIPTION de la table de données et leur associer des libellés.

A partir du tiroir Composants Faces étendus de la palette, faites glisser un composant Panneau - Zone de groupe et déposez-le dans la colonne DESCRIPTION. La fenêtre Sélection d'un type s'affiche.
Sélectionnez Grille comme type de composant à ajouter et cliquez sur OK.
Cliquez sur la nouvelle zone de groupe de type grille.
Utilisez la vue Propriétés pour fixer le nombre de Colonnes à 2.
A partir du tiroir Composants Faces de la palette, faites glisser un composant Sortie et déposez-le 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.
Cliquez sur le composant Sortie (reconnaissable à son libellé outputText) et utilisez la vue Propriétés pour lui affecter la Valeur Description:
Faites glisser le composant {DESCRIPTION} existant sur la bordure inférieure de la zone de groupe. 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.
Faites glisser un autre composant Sortie à partir de la palette et déposez-le à droite de la zone de groupe.
Utilisez la vue Propriétés pour lui affecter la Valeur Price:.
Faites glisser le composant de sortie existant {PRICE} à droite du texte de sortie Price.
En procédant de la même manière, insérez un nouveau composant Sortie pour le libellé du composant {PHONE} et affectez-lui la valeur Phone:.
Faites glisser le composant {PHONE} existant jusqu'à la zone de groupe et déposez-le à droite du texte de sortie Phone. Votre page doit maintenant ressembler à ceci :
Supprimez les colonnes vides PRICE et PHONE de la table de données. Pour supprimer une colonne, cliquez dessus et ouvrez la vue Propriétés. Ensuite, cliquez sur l'onglet h:dataTable dans la liste des balises HTML (partie gauche de la vue), sélectionnez la colonne à supprimer dans la liste à droite et cliquez sur le bouton Supprimer.
Cliquez sur l'en-tête de la colonne Description et utilisez la vue Propriétés pour changer sa Valeur en Details. La page doit maintenant se présenter comme suit :
Enregistrez la page et testez-la. Si vous n'êtes pas encore familiarisé avec l'exécution d'applications sur le serveur, reportez-vous à la Leçon 1.3 : Tester le site Web.

Lorsque vous testez la page, elle doit se présenter de la manière suivante :

Un lien rompu est affiché à l'emplacement prévu pour la photo lorsqu'une annonce n'en comporte pas. Dans la leçon suivante, vous allez apprendre à ajouter un composant de téléchargement de fichier à la page. Il permettra à l'utilisateur d'ajouter ou de changer la photo d'une annonce.

Etat des connaissances

Vous avez terminé la leçon 2.1. Vous avez appris à mettre en forme votre table de données de différentes manières.

Vous savez maintenant comment :

changer les en-têtes de colonne ;
trier les données dans une table ;
ajouter une fonction de pagination pour scinder les données en plusieurs pages Web plus petites ;
utiliser des zones de groupe de différentes manières pour modifier l'agencement de la table de données sur la page Web ;

< Précédent | Suivant >

Vos commentaires