Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les contrôles Spark HSlider et VSlider

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 23 mars 2010

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

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

Introduction

Les contrôles HSlider et VSlider sont disponibles dans les jeux de composants MX et Spark. Bien que vous puissiez utiliser les contrôles MX HSlider et VSlider dans vos applications, Adobe vous recommande d'utiliser les contrôles Spark à la place.

NDT: Le terme anglophone désignant ce contrôle est slider. Un slider est un composant d'interface graphique permettant d'entrer une valeur numérique dans un programme en déplaçant un curseur sur une échelle graduée. Comme il est difficile de traduire ce terme en quelques mots, nous utiliserons le terme anglophone dans cet article.

Vous pouvez utiliser le contrôle slider pour sélectionner une valeur en déplaçant un curseur sur une échelle graduée. La valeur du slider est déterminée par la position relative du curseur entre les extrémités de l'échelle. Les extrémités correspondent aux valeurs minimum et maximum du slider.

Par défaut, la valeur minimum d'un slider est 0 et la valeur maximum 100. La valeur actuelle du slider peut être n'importe quelle valeur dans un intervalle continu entre les valeurs minimale et maximale. Elle peut également faire partie d'un ensemble de valeurs discrètes, selon la façon dont vous configurez le contrôle.

A propos des contrôles slider

Flex fournit 2 contrôles slider : le contrôle HSlider (Horizontal Slider), qui crée un slider horizontal, et le contrôle VSlider (Vertical Slider), qui crée un slider vertical. Les contrôles slider contiennent une échelle et un curseur. Vous pouvez afficher, de façon optionnelle, des infos bulles montrant la valeur de la donnée correspondant au curseur déplacé par l'utilisateur. Le contrôle slider ne contient pas de propriété label, mais vous pouvez ajouter des légendes dans le thème du composant.

L'exemple suivant montre un slider horizontal et un slider vertical avec différentes propriétés définies. Pour le slider horizontal, les valeurs augmentent et diminuent d'une valeur de 0.25. Pour le slider vertical, les infos bulles des données sont masquées mais une info bulle générale est affichée.

<?xml version="1.0"?>
<!-- controls\slider\HSliderSimple.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:Group>
        <s:layout>
            <s:HorizontalLayout paddingTop="10" 
                paddingLeft="10"/>
            </s:layout>
        <s:HSlider id="horizontalBar" 
            snapInterval=".25"/>
        <s:VSlider id="volumeBar" 
            showDataTip="false"
            toolTip="Volume"/>
    </s:Group>
</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.

Création d'un contrôle slider

Vous définissez un contrôle HSlider en MXML en utilisant la balise <s:HSlider> et un contrôle VSlider en MXML en utilisant la balise <s:VSlider>. 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 pouvez lier la propriété value d'un slider à un autre contrôle pour afficher la valeur courante du slider. L'exemple suivant lie la propriété value à un contrôle Label. Comme la propriété de style liveDragging est définie sur true, la valeur de la zone de texte est mise à jour lors du déplacement. La propriété dataTipPrecision est définie sur 0 afin d'afficher des nombres entiers.

<?xml version="1.0"?>
<!-- controls\slider\HSliderBinding.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:Group>
        <s:layout>
            <s:HorizontalLayout paddingTop="10" 
                paddingLeft="10"/>
            </s:layout>
        <s:HSlider id="mySlider" 
            liveDragging="true"
            dataTipPrecision="0"/>
        <s:Label text="The slider value is: {Math.round(mySlider.value)}"/>
    </s:Group>

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 événements de slider

Les contrôles slider permettent à l'utilisateur de sélectionner une valeur en déplaçant le curseur entre les valeurs minimum et maximum du slider. Vous utilisez en général des événements avec le slider pour reconnaître quand l'utilisateur a déplacé le curseur et déterminer la valeur courante associée au slider.

Les contrôles slider peuvent diffuser les évènements décris dans le tableau suivant:

EvénementDescription
changeDiffusé quand l'utilisateur déplace le curseur. Si la propriété liveDragging est définie sur true, l'événement est diffusé en continu durant le déplacement du curseur. Si la propriété liveDragging est définie sur false, l'événement est diffusé lorsque l'utilisateur relâche le bouton de souris après le déplacement du curseur.
thumbDragDiffusé quand l'utilisateur déplace le curseur.
thumbPressDiffusé quand l'utilisateur appuie sur le bouton de souris au dessus du curseur.
thumbReleaseDiffusé quand l'utilisateur relâche le bouton de souris après qu'un événement thumbPress ai eu lieu.

L'exemple de code suivant utilise un événement thumbRelease pour activer un bouton quand l'utilisateur relâche le pointeur de souris sur le curseur.

<?xml version="1.0"?>
<!-- controls\slider\HSliderEvent.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[
            public function changeRB():void {
            myButton.enabled=true;
            }
        ]]>
    </fx:Script>
    <s:Group>
        <s:layout>
            <s:VerticalLayout paddingTop="10" 
            paddingLeft="10"/>
        </s:layout>
        <s:HSlider id="mySlider" 
            thumbRelease="changeRB()"/>
        <s:Button id="myButton" enabled="false" label="Submit"/>
 
    </s:Group>
</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.

Par défaut, la propriété liveDragging d'un contrôle slider est définie sur false. Une valeur false indique que le contrôle diffuse l'événement change quand l'utilisateur relâche le bouton de souris sur le curseur. Si vous définissez liveDragging sur true, le contrôle diffuse l'événement change de façon continu pendant le déplacement du curseur.

Utilisation des infos bulles de données

Par défaut, quand vous sélectionnez le curseur d'un slider, une info bulle de donnée apparaît, montrant la valeur courante du slider. Dès que vous déplacez le curseur, l'info bulle affiche la nouvelle valeur du slider. Vous pouvez désactiver les infos bulles de données en définissant la propriété showDataTip sur false.

Vous pouvez utiliser la propriété dataTipFormatFunction pour spécifier une fonction de rappel pour formater le texte de l'info bulle de données. Cette fonction prend un seul argument de type String contenant le texte de l'info bulle de donnée. Elle retourne un objet de type String contenant le nouveau texte de l'info bulle de donnée, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- controls\slider\HSliderDataTip -->
<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 myDataTipFunc(val:String):String {
                return "Current value: " + String(val);
            }
        ]]>
    </fx:Script>
    <s:layout>
        <s:HorizontalLayout paddingTop="10"
            paddingLeft="10"/>
    </s:layout>
    <s:HSlider  
        height="80"
        dataTipFormatFunction="myDataTipFunc"/> 
</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.

Dans cet exemple, la fonction de formatage de l'info bulle de donnée préfixe le texte de l'info bulle de donnée avec la chaîne “Current value:”. Vous pouvez modifier cet exemple pour insérer d'autres caractères, comme le signe dollar ($), dans l'info bulle de donnée.

Navigation clavier

Les contrôles HSlider et VSlider possède les fonctionnalités de navigation clavier suivantes quand le contrôle possède le focus:

ToucheDescription
Flèche gaucheDiminue la valeur d'un contrôle HSlider de la valeur d'un intervalle ou, si vous n'avez pas spécifié d'intervalle de valeur, de 1 pixel .
Flèche droiteAugmente la valeur d'un contrôle HSlider de la valeur d'un intervalle ou, si vous n'avez pas spécifié d'intervalle de valeur, de 1 pixel .
DébutDéplace le curseur d'un contrôle HSlider sur sa valeur minimum.
FinDéplace le curseur d'un contrôle HSlider sur sa valeur maximum.
Flèche hautAugmente la valeur d'un contrôle VSlider de la valeur d'un intervalle ou, si vous n'avez pas spécifié d'intervalle de valeur, de 1 pixel .
Flèche basDiminue la valeur d'un contrôle VSlider de la valeur d'un intervalle ou, si vous n'avez pas spécifié d'intervalle de valeur, de 1 pixel .