Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Spark List

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 25 mars 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Introduction

Le contrôle Spark List affiche une liste de données. Sa fonctionnalité est très similaire à celle de l'élément de formulaire SELECT en HTML. L'utilisateur peut sélectionner un ou plusieurs éléments de la liste. Le contrôle List affiche automatiquement une barre de défilement horizontale ou verticale lorsque les éléments de la liste dépassent la taille du contrôle.

Le contrôle List est une sous-classe du conteneur SkinnableDataContainer. Par conséquent, vous pouvez définir la disposition du contrôle List, lui appliquer une apparence (NDT: skin), et définir un rendu d'élément personnalisé. Pour plus d'informations sur le conteneur SkinnableDataContainer, regardez The Spark DataGroup and Spark SkinnableDataContainer containers.

Création d'un contrôle Spark List

Vous utilisez la balise <s:List> pour définir un contrôle Spark List. Spécifiez une valeur pour la propriété id si vous souhaitez utiliser votre contrôle ailleurs dans une balise MXML ou dans un bloc ActionScript.

Vous spécifiez les données du contrôle List en utilisant la propriété dataProvider du contrôle. Cependant, comme dataProvider est la propriété par défaut du contrôle List, vous n'avez pas à spécifier une balise enfant <s:dataProvider> à la balise <s:List>, comme le montre l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkListSimpleNoDP.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
 
    <s:List> 
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>
    </s:List>
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

L'apparence par défaut du contrôle List, ListSkin, définit des barres de défilement en incluant un composant Scroller dans la classe d'apparence. Vous pouvez référencer le composant Scroller depuis la liste en utilisant la partie d'apparence List.scroller. Par conséquent, si les éléments de la liste dépassent la taille du contrôle, Flex affiche automatiquement des barres de défilement, comme le montre l'exemple ci-dessous.

NDT: Une partie d'apparence, skin part, est un composant définit dans une classe d'apparence. Ce composant offre la possibilité de pousser des données dans l'apparence.

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkListSimpleScroll.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
 
    <s:List height="100"> 
        <s:dataProvider>
            <mx:ArrayCollection>
                <fx:String>Flex</fx:String> 
                <fx:String>Flash Builder</fx:String> 
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
                <fx:String>Illustrator</fx:String> 
                <fx:String>PhotoShop</fx:String> 
            </mx:ArrayCollection>
        </s:dataProvider>
    </s:List>
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Utilisation des styles du contrôle Spark List

Le contrôle List définit plusieurs styles que vous pouvez utiliser pour modifier l'apparence du contrôle. Vous pouvez utiliser des styles pour réaliser quelques changements visuels sur le contrôle, mais vous créez une apparence pour un contrôle total de l'affichage.

L'exemple suivant utilise les styles alternatingItemColors et rollOverColor avec le contrôle List. Le style alternatingItemColors définit un tableau à deux entrées, #66FFFF pour un bleu léger et #33CCCC pour un gris-bleu. Par conséquent, les lignes du contrôle List alternent entre ses deux couleurs. Si vous spécifiez un tableau de trois couleurs, les lignes alternent entre ses trois couleurs et ainsi de suite.

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkListSimpleStyles.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
 
    <s:List 
        alternatingItemColors="[#66FFFF, #33CCCC]" 
        rollOverColor="#CC6600"> 
        <s:dataProvider>
            <mx:ArrayCollection>
                <fx:String>Flex</fx:String> 
                <fx:String>Flash Builder</fx:String> 
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
            </mx:ArrayCollection>
         </s:dataProvider>
    </s:List>
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Manipulation de sélections multiples dans un contrôle Spark List

Le contrôle List vous permet de sélectionner plusieurs éléments dans le contrôle. Pour activer la sélection multiple, définissez la propriété allowMultipleSelection à true. La valeur par défaut est false.

Après avoir activé la sélection multiple, sélectionnez le premier élément de données dans la liste en cliquant dessus. Puis maintenez la touche Ctrl enfoncée pour sélectionner des éléments supplémentaires. Si l'élément n'est pas actuellement sélectionné, cliquer dessus tout en maintenant la touche Contrôle enfoncée le sélectionne. Si l'élément est déjà sélectionné, cliquer dessus tout en maintenant la touche Contrôle enfoncée le dé-sélectionne.

Vous pouvez également utiliser la touche Maj pour sélectionner une série d'éléments de données. Pour sélectionner une plage, sélectionnez le premier élément de données dans la liste en cliquant dessus. Puis maintenez la touche Maj enfoncée pour sélectionner un élément supplémentaire. Le contrôle List sélectionne tous les éléments de données entre les deux éléments.

Le contrôle List définit deux propriétés, de type Vector, que vous utilisez avec une sélection multiple: selectedIndices et selectedItems. Le vecteur selectedIndices est de type int, et le vecteur selectedItems est de type Object. Ces vecteurs contiennent une liste des indices choisis et des éléments sélectionnés dans l'ordre inverse dans lequel ils ont été sélectionnés. Cela signifie que le premier élément de chaque vecteur correspond au dernier élément sélectionné. La longueur maximale de chaque vecteur est le nombre d'éléments dans le contrôle. Si votre liste contient 100 éléments de données, ces vecteurs peuvent contenir jusqu'à 100 éléments.

L'exemple suivant active la sélection multiple d'un contrôle List. Il affiche les index des éléments sélectionnés dans un contrôle TextArea, et les éléments sélectionnés dans un autre contrôle TextArea:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkListSimpleMultipleSelection.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    height="450">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
 
            private function myChangedHandler(event:IndexChangeEvent):void {
 
                var selIndices:Vector.<int> = event.currentTarget.selectedIndices;
                var selItems:Vector.<Object> = event.currentTarget.selectedItems;
                var numItems:Number = selIndices.length;
 
                selIndicesTA.text = "";
                selItemsTA.text = "";
 
                for (var i:Number = 0; i<numItems; i++)
                {
                    selIndicesTA.text = selIndicesTA.text + selIndices[i] + "\n";
                    selItemsTA.text = selItemsTA.text + selItems[i] + "\n";
                }
            }
        ]]>
    </fx:Script>
 
    <s:List allowMultipleSelection="true"
        change="myChangedHandler(event);"> 
        <mx:ArrayCollection>
            <fx:String>Flex</fx:String> 
            <fx:String>Flash Builder</fx:String> 
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>
    </s:List>
 
    <s:Label text="Selected indices"/>
    <s:TextArea id="selIndicesTA" height="75"/>
    <s:Label text="Selected items"/>
    <s:TextArea id="selItemsTA" height="75"/>
</s:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

La sélection de plusieurs éléments ne diffuse pas l'événement changing. Cela diffuse uniquement l'événement change.

Interaction utilisateur du contrôle Spark List

L'utilisateur clique sur un élément pour le sélectionner, et maintient enfoncé les touches Ctrl et Maj pour pouvoir sélectionner plusieurs éléments. Vous devez définir la propriété allowMultipleSelection sur true pour autoriser la sélection multiple.

Le contrôle List possède par défaut les fonctionnalités de navigation clavier suivantes:

Touche Description
flèche haute Déplace la sélection vers l'élément du dessus. Maintenez enfoncé la touche Control (Windows) ou la touche Command (OSX) pour simplement déplacer le focus, mais ne pas changer l'élément sélectionné.
flèche basse Déplace la sélection vers l'élément du dessous. Maintenez enfoncé la touche Control (Windows) ou la touche Command (OSX) pour simplement déplacer le focus, mais ne pas changer l'élément sélectionné.
flèche gauche Déplace la sélection vers la gauche, seulement si vous utilisez HorizontalLayout ou TileLayout. Maintenez enfoncé la touche Control (Windows) ou la touche Command (OSX) pour simplement déplacer le focus, mais ne pas changer l'élément sélectionné.
flèche droite Déplace la sélection vers la droite, seulement si vous utilisez HorizontalLayout ou TileLayout. Maintenez enfoncé la touche Control (Windows) ou la touche Command (OSX) pour simplement déplacer le focus, mais ne pas changer l'élément sélectionné.
Page haute Déplace la sélection d'une page vers le haut.
Page basse Déplace la sélection d'une page vers le bas.
Début Déplace la sélection en haut de la liste.
Fin Déplace la sélection en bas de la liste.
Touches alphanumériques Saute vers le prochain élément dont le texte commence par le caractère appuyé
Control Autorise la sélection ou dé-sélection multiple non contiguë. Fonctionne avec une touche enfoncée, une sélection par un clic, et une sélection par glisser-déposer.
Shift Autorise la sélection multiple contiguë. Fonctionne avec une touche enfoncée, une sélection par un clic, et une sélection par glisser-déposer.