Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Spark Spinner

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 01 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 Spinner fait partie du jeu de composants Spark. Il n'a pas d'équivalent MX.

NDT: Le terme anglophone désignant ce contrôle est spinner. Un bouton fléché (en anglais, spinner) est un composant d'interface graphique qui sert à modifier une valeur numérique.

Le bouton fléché est composé de deux cases superposées. Le case du haut contient une pointe de flèche orientée vers le haut alors que le case du bas contient une pointe de flèche orientée vers le bas. Un clic sur le case du haut augmente la valeur alors qu’un clic sur le case du bas diminue la valeur.

Comme il est difficile de traduire ce terme en quelques mots, nous utiliserons le terme anglophone dans cet article.

Le contrôle Spinner permet à l'utilisateur de sélectionner une valeur parmi un ensemble de valeurs, en cliquant sur les boutons haut et bas. C'est la classe de base pour le contrôle NumericStepper. Vous pouvez utiliser le contrôle Spinner pour créer des contrôles avec un mode de saisie et un affichage différent du champ de texte standard utilisé dans le NumericStepper. Une autre possibilité est d'utiliser un contrôle Spinner pour contrôler des onglets ou des menus en assignant différentes valeurs aux éléments d'onglets ou de menus.

Création d'un contrôle Spinner

Vous définissez un contrôle Spinner en MXML en utilisant la balise <s:Spinner>. 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.

L'exemple suivant montre un contrôle Spinner qui retourne à la valeur minimum une fois la valeur maximum atteinte. La propriété allowValueWrap a pour valeur false par défaut. La propriété snapInterval est définie sur 2. Quand vous cliquez la première fois sur le bouton haut (bouton d'incrémentation), la valeur du contrôle Spinner est définie sur 4.

<?xml version="1.0" encoding="utf-8"?>
<!-- \controls\spinner\SpinnerSimple.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">
    <fx:Script>
        <![CDATA[
            private function onClickHandler(event:Event):void {
                message.text += "You selected "+ mySpinner.value + "\n";
                }
        ]]>
    </fx:Script>
 
    <s:VGroup paddingTop="10" paddingLeft="10">
        <s:HGroup>
            <s:Label text="Use the arrows to change value"/>
            <s:Spinner id="mySpinner" 
                       click="onClickHandler(event);" 
                       minimum="2"
                       maximum="20"
                       snapInterval="2"
                       allowValueWrap="true"/>
        </s:HGroup>
        <s:TextArea id="message"/>
    </s:VGroup>
</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.