Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Spark NumericStepper

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 15 juillet 2010

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

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

Présentation

Le contrôle NumericStepper fait partie des jeux de composants MX et Spark. Bien que vous puissiez utiliser le contrôle MX NumericStepper dans votre application, Adobe vous recommande d'utiliser le contrôle Spark NumericStepper à la place.

Vous pouvez utilisez le contrôle NumericStepper pour sélectionner un nombre à partir d'un ensemble de valeurs. Le contrôle NumericStepper est constitué d'un champ de texte d'une ligne et d'une paire de boutons, symbolisés par des flèches, permettant de parcourir les valeurs valides. Vous pouvez utiliser les touches du clavier flèche haut et flèche bas pour faire défiler les valeurs.

Si l'utilisateur clique sur le triangle du haut, la valeur affichée augmente d'une unité à chaque clic. Si l'utilisateur maintient le bouton enfoncé sur l'une des flèches, la valeur augmente ou diminue jusqu'à ce que l'utilisateur relâche le bouton. Lorsque l'utilisateur clique sur une flèche, elle est mise en surbrillance afin d'en informer l'utilisateur.

Les utilisateurs peuvent aussi saisir une valeur légale directement dans le champ de texte. Bien que les contrôles ComboBox modifiable fournissent des fonctionnalités similaires, les contrôles NumericStepper sont parfois préférés parce qu'ils n'ont pas besoin d'une liste déroulante qui peut cacher des données importantes.

Les flèches du contrôle NumericStepper apparaissent toujours à droite du champ de texte.

Création d'un contrôle NumericStepper

Vous définissez un contrôle NumericStepper en MXML en utilisant la balise <s:NumericStepper>, comme le montre l'exemple suivant. 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.

<?xml version="1.0"?>
<!-- controls\numericstepper\NumStepSimple.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:NumericStepper id="nstepper1"
        value="6" 
        stepSize="2" 
        maximum="100"/>    
</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.

Dimensionner un contrôle NumericStepper

Lorsque le contrôle est redimensionné, la largeur des boutons Haut et Bas dans le contrôle NumericStepper ne change pas. Si le contrôle NumericStepper possède une hauteur plus grande que la hauteur par défaut, les boutons sont ancrés en haut et en bas du contrôle.

Interaction utilisateur

Si l'utilisateur clique sur l'un des boutons Haut et Bas, la valeur affichée augmente ou diminue d'une unité. Si l'utilisateur maintient le bouton enfoncé sur l'une des flèches pendant plus de 200 millisecondes, la valeur augmente ou diminue, de la valeur du pas, jusqu'à ce que l'utilisateur relâche le bouton ou que la valeur maximum ou minimun soit atteinte.

Navigation clavier

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

Touche Description
flèche basse La valeur diminue d'une unité
flèche haute La valeur augmente d'une unité
flèche gauche Déplace le point d'insertion dans la partie gauche du champ de texte du contrôle NumericStepper
flèche droite Déplace le point d'insertion dans la partie droite du champ de texte du contrôle NumericStepper

Le contrôle NumericStepper doit avoir le focus pour utiliser le clavier pour la navigation.

Définir la plage de valeurs d'un contrôle NumericStepper

Vous pouvez définir la plage de valeurs d'un contrôle NumericStepper en valorisant les propriétés minimum et maximum comme le montre l'exemple suivant. Par défaut, la propriété minimum a pour valeur 0 et la propriété maximum a pour valeur 10.

<?xml version="1.0"?>
<!-- controls\numericstepper\NumStepSimple.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" width="161" height="74">
 
	<s:NumericStepper id="nstepper1" 
		maximum="100"
		minimum="-100"/>
 
</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éfinir la valeur du pas de déplacement

La propriété stepSize pour permet de définir le pas d'augmentation ou de diminution de la valeur affichée dans le champ de texte du contrôle NumericStepper. L'exemple suivant vous montre un contrôle NumericStepper possédant un ensemble de valeurs comprises entre -100 et 100 avec un pas de déplacement de 5.

<?xml version="1.0"?>
<!-- controls\numericstepper\NumStepSimple.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" width="161" height="74">
 
	<s:NumericStepper id="nstepper1" 
		maximum="100"
		minimum="-100"
		stepSize="5"/>
 
</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.