Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Spark DropDownList

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 02 avril 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 DropDownList affiche une liste de données quand l'utilisateur clique sur le contrôle ou sur son ancre. Quand l'utilisateur sélectionne un élément de la liste déroulante, la donnée de l'élément apparaît dans la zone d'affichage du contrôle. L'image suivante montre un contrôle DropDownList:

A. La zone d'affichage d'une liste déroulante fermée. B. Liste de données d'une liste déroulante ouverte. C. L'ancre d'une liste déroulante fermée.

Quand une liste déroulante est fermée, le clic sur le bouton Ancre l'ouvre.

Quand une liste déroulante est ouverte:

  • Le clic sur le bouton Ancre ferme la liste déroulante et propage l'élément de données courant sélectionné
  • Le clic en dehors de la liste ferme la liste déroulante et propage l'élément de données courant sélectionné
  • Le clic sur un élément de données le sélectionne et ferme la liste déroulante
  • Si la propriété requireSelection a pour valeur false, le clic sur une donnée tout en pressant la touche Control déselectionne l'élément et ferme la liste déroulante.

Pour obtenir une liste complète des commandes clavier pour le contrôle DropDownList, regardez la dernière section de ce document «  Interaction utilisateur du contrôle Spark DropDownList ».

Pour une information complète sur la référence du langage, regardez ActionScript 3.0 Reference for the Adobe Flash Platform.

Création d'un contrôle Spark DropDownList

Vous définissez un contrôle Spark DropDownList en MXML en utilisant la balise <s:DropDownList>. Spécifiez une valeur à 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 DropDownList 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:DropDownList>, comme le montre l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkDDSimple.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:DropDownList width="140"> 
        <mx:ArrayCollection>
            <fx:String>Alabama</fx:String>
            <fx:String>Alaska</fx:String>
            <fx:String>Arizona</fx:String>
            <fx:String>Arkansas</fx:String>
            <fx:String>California</fx:String>
        </mx:ArrayCollection>
    </s:DropDownList>
</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.

Définition de la zone d'affichage du contrôle Spark DropDownList

Par défaut, la zone d'affichage est vide quand le contrôle est chargé la première fois. La sélection d'un élément de données l'affiche dans la zone d'affichage.

Utilisez la propriété prompt pour définir le texte a afficher quand le contrôle est chargé, comme le montre l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkDDSimplePrompt.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 paddingLeft="10"
            paddingTop="10"/>
    </s:layout>
 
    <s:DropDownList width="140"
        prompt="Select a state"> 
        <mx:ArrayCollection>
            <fx:String>Alabama</fx:String>
            <fx:String>Alaska</fx:String>
            <fx:String>Arizona</fx:String>
            <fx:String>Arkansas</fx:String>
            <fx:String>California</fx:String>
        </mx:ArrayCollection>
    </s:DropDownList>
</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.

Si vous définissez la propriété requireSelection sur true, le contrôle ignore la propriété prompt. Au lieu de cela, il définit la zone d'affichage et la propriété selectedIndex sur le premier élément de données du contrôle.

Alternativement, vous pouvez définir la propriété selectedIndex sur n'importe quel élément de données. La zone d'affichage affiche l'élément de données spécifié par la propriété selectedIndex. Dans l'exemple suivant, vous définissez la propriété selectedIndex sur 4 pour sélectionner California par défaut quand l'application démarre:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkDDSimpleSetSelectedIndex.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 paddingLeft="10"
            paddingTop="10"/>
    </s:layout>
 
    <s:DropDownList width="140"
        selectedIndex="4"> 
        <mx:ArrayCollection>
            <fx:String>Alabama</fx:String>
            <fx:String>Alaska</fx:String>
            <fx:String>Arizona</fx:String>
            <fx:String>Arkansas</fx:String>
            <fx:String>California</fx:String>
        </mx:ArrayCollection>
    </s:DropDownList>
</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 des événements d'un contrôle Spark DropDownList

Le contrôle DropDownList hérite des événements de la classe ListBase, et ajoute les événements suivants:

  • close Diffusé quand la liste déroulante se ferme pour n'importe quelle raison
  • open Diffusé quand la liste déroulante s'ouvre pour n'importe quelle raison

Interaction utilisateur du contrôle Spark DropDownList

Une page dans le contrôle DropDownList est définie comme le nombre d'éléments de données qui s'inscrivent dans la liste déroulante. La pagination à travers les données affichées sur 6 lignes montre les éléments de 0 à 5, de 6 à 11, de 12 à 17, et ainsi de suite.

Le contrôle DropDownList possède par défaut les fonctionnalités de navigation clavier suivantes quand la liste déroulante est fermée:

Touche Description
flèche haute Déplace la sélection vers l'élément du dessus.
flèche basse Déplace la sélection vers l'élément du dessous.
Control + flèche basse Ouvre la liste déroulante.
Page haute Déplace la sélection d'une page vers le haut. Si la propriété selectedIndex est sur -1, aucune action n'est effectuée.
Page basse Déplace la sélection d'une page vers le bas. Si vous êtes en bas de la liste, aucune action n'est effectuée.
Début Déplace la sélection en haut de la liste.
Fin Déplace la sélection en bas de la liste.

Le contrôle DropDownList possède par défaut les fonctionnalités de navigation clavier suivantes quand la liste déroulante est ouverte:

Touche Description
flèche haute Déplace la sélection vers l'élément du dessus mais ne propage pas la sélection tant que la liste n'est pas fermée.
flèche basse Déplace la sélection vers l'élément du dessous mais ne propage pas la sélection tant que la liste n'est pas fermée.
Control + flèche basse Ferme la liste déroulante et propage la sélection.
Echap Ferme la liste déroulante et ne propage pas la sélection.
Page haute Déplace la sélection d'une page vers le haut mais ne propage pas la sélection tant que la liste n'est pas fermée.
Page basse Déplace la sélection d'une page vers le bas mais ne propage pas la sélection tant que la liste n'est pas fermée.
Début Si la propriété selectedIndex est égale à -1, ne change pas l'élément de données sélectionné. Dans le cas contraire, déplace la sélection vers le premier élément de données de la liste déroulante. Ne propage pas la sélection tant que la liste n'est pas fermée.
Fin Déplace la sélection vers le dernier élément de données de la liste déroulante. Ne propage pas la sélection tant que la liste n'est pas fermée.