Listes de données et panneaux de défilement

Flash Catalyst CS5 comporte deux composants intégrés permettant de présenter une grande quantité de données dans un espace limité. Il s’agit des listes de données et des panneaux de défilement.

Présentation des listes de données

Une liste de données est un composant spécial permettant d’afficher une série d’éléments associés. Vous pouvez par exemple utiliser une liste de données pour afficher un recueil de vignettes dans une galerie de photos.

  • Vous pouvez disposer la liste de données horizontalement ou verticalement et l’aligner sur la grille de la page.

  • Ajoutez-lui une barre de défilement pour accroître le nombre d’éléments qu’elle contient.

  • Chaque composant de liste de données doit comporter un élément maître appelé « Elément répété ». L’élément répété est un modèle définissant l’aspect de chaque élément de la liste. Vous pouvez par exemple créer un élément répété avec une image, un texte descriptif et différents états Haut, Dessus et Bas. Chaque élément de la liste partage ces propriétés et ces éléments communs. A l’exécution, les modifications apportées à l’élément répété sont automatiquement appliquées à chaque élément de la liste.

  • La plupart des listes de données sont connectées à une source de données et sont renseignées dynamiquement avec des données à l’exécution. Les développeurs peuvent établir cette connexion dans Adobe Flash Builder. Dans Flash Catalyst, vous pouvez spécifier des données d’espace réservé à afficher dans la liste en utilisant le panneau Données en phase de conception.

Création d’un composant de liste de données

  1. Positionnez une copie des premiers éléments de la liste de données sur le plan de travail. Ajoutez-y tout autre contrôle requis pour la liste (curseur, barre de défilement ou autre). Dimensionnez le contrôle en fonction de votre plan de conception. Sélectionnez ces objets.

    Afficher le graphique à sa taille d'origine
    A.
    Image et texte utilisés en tant qu’éléments répétés

    B.
    Ajoutez une barre de défilement aux listes de données contenant plusieurs éléments.

  2. Dans l’affichage tête haute, cliquez sur Choisir un composant > Liste de données.

    Flash Catalyst crée une liste de données et affiche un message dans l’affichage tête haute. Ce message vous invite à spécifier les éléments graphiques que vous souhaitez utiliser pour la partie requise de la liste de données. La partie requise est un élément répété.

  3. Sans désélectionner le nouveau composant dans le plan de travail, cliquez sur Modifier des parties dans l’affichage tête haute.

    Flash Catalyst bascule en mode de modification afin de vous permettre de modifier les parties et les états du composant.

  4. Sur le plan de travail, sélectionnez les éléments que vous souhaitez utiliser comme élément répété. N’y incluez ni la barre de défilement ni d’autres contrôles.

  5. Dans l’affichage tête haute, cliquez sur Modifier des parties > Elément répété (requis).

    Flash Catalyst convertit l’élément sélectionné en partie d’élément répété. Par défaut, la liste est alignée verticalement.

  6. Sélectionnez l’élément répété et cliquez sur Verticale, Horizontale ou Mosaïque dans la section Présentation du panneau Propriétés. Utilisez le panneau Propriétés pour appliquer d’autres mises en forme, telles que la marge des cellules. Utilisez les poignées de sélection pour dimensionner le cadre de sélection de l’élément répété en fonction de votre plan de conception.

  7. Cliquez deux fois sur l’élément répété pour l’ouvrir dans le panneau Pages/Etats.

    Un élément répété possède les états Normal, Dessus et Sélectionné.

  8. Modifiez les éléments dans chaque état conformément à votre plan de conception.

  9. Fermez le composant de liste de données et retournez au plan de travail.

    Vous avez créé un composant de liste de données affichant un seul et même élément, répété un certain nombre de fois. Vous pouvez utiliser le panneau Données en phase de conception pour remplacer les images provisoires par des données plus réalistes. Le panneau Données en phase de conception indique aux développeurs quel sera l’aspect de l’application lors de son exécution.

Ajout de données en phase de conception

  1. Sélectionnez le composant de liste de données sur le plan de travail et ouvrez le panneau Données en phase de conception.

    Ce panneau affiche les éléments de la liste. A ce stade, chaque élément de la liste est identique.

  2. Si l’élément répété comporte du texte, vous pouvez modifier le texte de chaque élément de la liste. Si l’élément répété comporte une image, cliquez sur l’une des images provisoires du panneau Données en phase de conception.

    La boîte de dialogue Sélectionner une ressource s’ouvre.

  3. Dans la boîte de dialogue Sélectionner une ressource, choisissez l’image que vous souhaitez afficher dans la liste de données, puis cliquez sur OK.

    Le panneau Données en phase de conception affiche le nouveau texte et la nouvelle image.

    Remarque : si la bibliothèque du projet ne contient pas l’image que vous souhaitez afficher dans la liste des données, vous pouvez l’importer.
  4. Remplacez les autres éléments répétés par des données en phase de conception.

  5. Pour ajouter d’autres éléments à la liste de données, cliquez sur Ajouter une ligne et remplacez l’image provisoire par l’image de votre choix.

Afficher le graphique à sa taille d'origine
A.
Panneau Données en phase de conception (développé)

B.
Boîte de dialogue Sélectionner une ressource

Remarque : une fois la liste de données créée, vous pouvez ajouter des images ou du texte à l’élément répété. Ouvrez l’élément répété et ajoutez la première instance de la nouvelle image ou du nouveau texte. Sélectionnez le nouvel élément et choisissez Modifier > Ajouter un texte à Données en phase de conception ou Ajouter une image à Données en phase de conception. Une nouvelle colonne est ajoutée au panneau Données en phase de conception. Pour supprimer un élément répété, sélectionnez-le et cliquez sur Modifier > Supprimer de Données en phase de conception.

Vous trouverez ici Flash Catalyst Beta 1: Building a Website II un très bon exemple de création d’une liste de données.

Présentation d’un panneau de défilement

En conception Web, la principale difficulté réside dans la limitation de l’espace disponible pour l’affichage du contenu requis. Une solution consiste à créer des panneaux de défilement. Un panneau forme un conteneur d’interface utilisateur bien défini. L’ajout de contenu de défilement et d’une barre de défilement vous permet de placer une grande quantité d’informations dans un espace limité. Pour créer un panneau de défilement dans Flash Catalyst, vous aurez besoin des éléments suivants :

  • Un objet définissant la zone du panneau, par exemple une forme rectangulaire (facultatif)

  • Le contenu de défilement, par exemple un long bloc de texte ou une série d’images (obligatoire)

  • Une barre de défilement permettant le défilement du contenu (recommandée)

    Remarque : la création d’un panneau de défilement sans barre de défilement est possible mais sera inutile si les utilisateurs n’ont pas la possibilité de consulter le contenu masqué.

Création d’un composant de panneau de défilement

  1. Importez ou dessinez un objet afin de définir la zone du panneau (facultatif).

  2. Ajoutez le contenu dont vous souhaitez permettre le défilement. Pour créer un texte accessible par défilement, utilisez l’outil Texte du panneau Outils.

  3. Positionnez le texte accessible par défilement ou alignez plusieurs objets dans la zone du panneau. Prévoyez une marge le long du bord inférieur ou du côté droit du panneau pour placer une barre de défilement.

    Remarque : le contenu de défilement dépasse provisoirement de la zone du panneau.
  4. Créez un composant de barre de défilement ou faites glisser une barre de défilement à partir du panneau Composants à structure filaire. Positionnez la barre de défilement et adaptez-en les dimensions à la zone du panneau.

    Deux exemples de parties de panneau de défilement, avant la création du composant de panneau de défilement

  5. Sélectionnez toutes les parties requises pour le panneau de défilement. Dans l’affichage tête haute, cliquez sur Choisir un composant > Panneau de défilement.

    Un message dans l’affichage tête haute vous rappelle de modifier les parties du composant.

  6. Cliquez sur Modifier des parties.

    Un autre message vous explique comment créer la partie défilante du panneau.

  7. Sélectionnez les objets que vous souhaitez faire défiler (bloc de texte ou série d’objets).

  8. Dans l’affichage tête haute, cliquez sur Modifier des parties > Contenu de défilement.

    Un nouveau cadre de sélection définit la zone visible du contenu de défilement.

  9. Si nécessaire, adaptez les dimensions du cadre de sélection du contenu de défilement à la zone du panneau.

  10. Utilisez la barre de navigation pour fermer le panneau de défilement. Sélectionnez Fichier > Exécuter le projet pour tester le composant.

    Composant Panneau de défilement complet permettant de faire défiler un bloc de texte dans un panneau de dimensions limitées

Pour plus d’informations sur la création de texte dans Flash Catalyst, voir Création de formes, lignes et texte.