Utilisation du composant List

Le composant List est une zone de liste défilante à sélection unique ou multiple. Les listes peuvent également contenir des graphiques et d’autres composants. L’ajout des éléments affichés dans la zone de liste s’effectue via la boîte de dialogue Valeurs qui s’ouvre lorsque vous cliquez dans les champs de paramètres des étiquettes ou des données. Vous pouvez également utiliser les méthodes List.addItem() et List.addItemAt() pour ajouter des éléments à la liste.

Le composant List utilise un index en base zéro, où l’élément possédant l’index 0 est le premier affiché. Lorsque vous ajoutez, supprimez ou remplacez les éléments d’une liste au moyen des méthodes et des propriétés de la classe List, il peut s’avérer nécessaire d’indiquer leur index.

Interaction de l’utilisateur avec le composant List

Vous pouvez définir une liste dans laquelle les utilisateurs pourront effectuer un ou plusieurs choix. Par exemple, un utilisateur qui visite un site de commerce électronique doit pouvoir choisir l’article à acheter. Imaginons que 30 articles lui soient proposés. Il fait défiler la liste et en choisit un en cliquant sur son entrée.

Vous pouvez également concevoir une liste qui affiche des lignes de clips personnalisés pour mieux renseigner les utilisateurs. Par exemple, dans une application de courrier électronique, chaque boîte de réception peut être un composant List et chaque ligne peut être accompagnée d’icônes indiquant la priorité et l’état des messages.

La liste reçoit le focus lorsque l’utilisateur clique sur son entrée ou appuie sur la touche de tabulation pour y accéder. Les touches suivantes permettent de la contrôler :

Touche

Description

Touches alphanumériques

Passe à l’élément suivant dont Key.getAscii() est le premier caractère de l’étiquette.

Contrôle

Bouton bascule autorisant plusieurs sélections et désélections non contiguës.

Flèche vers le bas

Déplace la sélection d’un élément vers le bas.

Orig

Déplace la sélection jusqu’au sommet de la liste.

Pg. Suiv.

Déplace la sélection sur la page suivante.

Pg. Préc.

Déplace la sélection sur la page précédente.

Maj

Permet une sélection contiguë.

Flèche vers le haut

Déplace la sélection d’un élément vers le haut.

Remarque : vous remarquerez que les tailles de défilement sont exprimées en pixels et non en lignes.
Remarque : la taille de page utilisée par les touches Page précédente et Page suivante correspond au nombre d’éléments contenus dans l’affichage, moins un. Par exemple, le passage à la page suivante dans une liste déroulante à dix lignes affiche les éléments 0-9, 9-18, 18-27, etc., avec un élément commun par page.

Pour plus d’informations sur le contrôle du focus, voir l’interface IFocusManager et la classe FocusManager dans le Guide de référence d’ActionScript 3.0 pour Flash Professional et Utilisation de FocusManager .

L’aperçu en direct de chaque occurrence de List sur la scène reflète les modifications apportées aux paramètres dans l’Inspecteur des propriétés ou des composants au cours de la programmation.

Lorsque vous ajoutez un composant List à une application, vous pouvez le rendre accessible à un lecteur d’écran en ajoutant les lignes de code ActionScript suivantes : 

import fl.accessibility.ListAccImpl; 
 
ListAccImpl.enableAccessibility();

Quel que soit le nombre d’occurrences d’un composant, l’activation de son accessibilité ne se fait qu’une fois. Pour plus d’informations, voir le Chapitre 18, « Création de contenu accessible » du guide Utilisation de Flash .

Paramètres du composant List

Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres suivants pour chaque occurrence du composant List : allowMultipleSelection , dataProvider, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, multipleSelection, verticalLineScrollSize, verticalPageScrollSize et verticalScrollPolicy . A chacun de ces paramètres correspond une propriété ActionScript du même nom. Pour plus d’informations sur les valeurs gérées de ces paramètres, voir la classe List dans le Guide de référence d’ActionScript 3.0 pour Flash Professional . Pour plus d’informations sur l’utilisation du paramètre dataProvider, voir la section Utilisation du paramètre dataProvider .

Création d’une application avec le composant List

L’exemple suivant explique l’ajout d’un composant List à une application au cours de la programmation.

Ajout d’un composant List simple à une application

Dans cet exemple, le composant List consiste en étiquettes qui identifient des modèles de voitures et en champs de données contenant des prix.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser un composant List du panneau Composants sur la scène.

  3. Dans l’Inspecteur des propriétés, procédez comme suit :

    • Entrez le nom d’occurrence aList .

    • Affectez la valeur 200 au paramètre L (largeur).

  4. Utilisez l’outil Texte pour créer un champ de texte sous aList et attribuez-lui le nom d’occurrence aTf .

  5. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.controls.List; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
// Create these items in the Property inspector when data and label 
// parameters are available. 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

    Ce code utilise la méthode addItem() pour affecter trois éléments à l’occurrence aList , en leur attribuant à chacun d’entre eux une valeur label , qui apparaît dans la liste, et une valeur data . Lorsque vous sélectionnez un élément dans le composant List, l’écouteur d’événements appelle la fonction showData() , qui affiche la valeur data pour l’élément sélectionné.

  6. Choisissez Contrôle > Tester l’animation pour compiler et exécuter cette application.

Remplissage d’une occurrence de List à l’aide d’un fournisseur de données

Cet exemple crée une liste de modèles de voitures et de leurs prix. Toutefois, il utilise un fournisseur de données pour remplir le composant List plutôt que la méthode addItem() .

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser un composant List du panneau Composants sur la scène.

  3. Dans l’Inspecteur des propriétés, procédez comme suit :

    • Entrez le nom d’occurrence aList .

    • Affectez la valeur 200 au paramètre L (largeur).

  4. Utilisez l’outil Texte pour créer un champ de texte sous aList et attribuez-lui le nom d’occurrence aTf .

  5. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.controls.List; 
import fl.data.DataProvider; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
var cars:Array = [ 
{label:"1956 Chevy (Cherry Red)", data:35000}, 
{label:"1966 Mustang (Classic)", data:27000}, 
{label:"1976 Volvo (Xcllnt Cond)", data:17000}, 
]; 
aList.dataProvider = new DataProvider(cars); 
aList.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

  6. Choisissez Contrôle > Tester l’animation pour visualiser la liste et ses éléments.

Utilisation d’un composant List pour contrôler une occurrence de clip

L’exemple suivant crée une liste de noms de couleur. Lorsque vous sélectionnez une couleur, il l’applique à un clip.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant List du panneau Composants vers la scène et spécifiez les valeurs suivantes pour celui-ci dans l’Inspecteur des propriétés :

    • Entrez le nom d’occurrence aList .

    • Tapez 60 pour la valeur H.

    • Tapez 100 pour la valeur X.

    • Tapez 150 pour la valeur Y.

  3. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    aList.addItem({label:"Blue", data:0x0000CC}); 
aList.addItem({label:"Green", data:0x00CC00}); 
aList.addItem({label:"Yellow", data:0xFFFF00}); 
aList.addItem({label:"Orange", data:0xFF6600}); 
aList.addItem({label:"Black", data:0x000000}); 
 
var aBox:MovieClip = new MovieClip(); 
addChild(aBox); 
 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event) { 
    drawBox(aBox, event.target.selectedItem.data); 
}; 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(225, 150, 100, 100); 
            box.graphics.endFill();         
}

  4. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.

  5. Cliquez sur des couleurs dans la liste pour les afficher dans un clip.

Création d’une occurrence du composant List à l’aide d’ActionScript

L’exemple suivant utilise ActionScript pour créer une liste simple qu’il remplit à l’aide de la méthode addItem() .

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant List du panneau Composants vers le panneau Bibliothèque.

  3. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    import fl.controls.List; 
 
var aList:List = new List(); 
aList.addItem({label:"One", data:1}); 
aList.addItem({label:"Two", data:2}); 
aList.addItem({label:"Three", data:3}); 
aList.addItem({label:"Four", data:4}); 
aList.addItem({label:"Five", data:5}); 
aList.setSize(60, 40); 
aList.move(200,200); 
addChild(aList); 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event):void { 
    trace(event.target.selectedItem.data); 
}

  4. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.