|
Le composant NumericStepper permet à l’utilisateur de faire défiler un ensemble ordonné de nombres. Il s’agit d’un nombre dans une zone de texte affiché à côté de petits boutons fléchés vers le haut et vers le bas. Lorsqu’un utilisateur appuie sur les boutons, le nombre augmente ou diminue de façon incrémentielle en fonction de l’unité spécifiée dans le paramètre
stepSize
jusqu’à ce que l’utilisateur relâche les boutons ou que la valeur maximale ou minimale soit atteinte. Le texte dans la zone de texte du composant NumericStepper peut également être modifié.
Un aperçu en direct de chaque occurrence de NumericStepper reflète la valeur du paramètre Value dans l’Inspecteur des propriétés ou des composants. Cependant, il n’y a aucune interaction entre le clavier ou la souris et les boutons fléchés du composant NumericStepper dans l’aperçu en direct.
Interaction de l’utilisateur avec le composant NumericStepper
Vous pouvez utiliser le composant NumericStepper là où vous souhaitez qu’un utilisateur sélectionne une valeur numérique. Par exemple, vous pouvez employer un composant NumericStepper dans un formulaire afin de définir le mois, le jour et l’année de la date d’expiration d’une carte bancaire. Vous pouvez également utiliser un composant NumericStepper pour permettre à un utilisateur d’augmenter ou de diminuer la taille d’une police.
Le composant NumericStepper gère uniquement les données numériques. Vous devez également redimensionner l’incrémenteur lors de la programmation pour afficher plus de deux chiffres (par exemple, les nombres 5246 ou 1,34).
Vous pouvez activer ou désactiver un composant NumericStepper dans une application. En état désactivé, un composant NumericStepper ne réagit pas aux commandes de la souris ou du clavier. Lorsqu’il est activé, le composant NumericStepper reçoit le focus si vous cliquez sur son entrée ou si vous utilisez la tabulation pour l’ouvrir et son focus interne est défini dans la zone de texte. Lorsqu’une occurrence du composant NumericStepper a le focus, les touches suivantes permettent de la contrôler :
|
Touche
|
Description
|
|
Flèche vers le bas
|
La valeur est modifiée d’une unité.
|
|
Flèche gauche
|
Déplace le point d’insertion vers la gauche à l’intérieur de la zone de texte.
|
|
Flèche droite
|
Déplace le point d’insertion vers la droite à l’intérieur de la zone de texte.
|
|
Maj+Tab
|
Place le focus sur l’objet précédent.
|
|
Tab
|
Place le focus sur l’objet suivant.
|
|
Flèche vers le haut
|
La valeur est modifiée d’une unité.
|
Pour plus d’informations sur le contrôle du focus, voir la classe FocusManager dans le
Guide de référence d’ActionScript 3.0
pour Flash Professional
et
Utilisation de FocusManager
.
Paramètres du composant NumericStepper
Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres suivants pour chaque occurrence du composant NumericStepper :
maximum
,
minimum
,
stepSize
et
value
. A chacun de ces paramètres correspond une propriété ActionScript du même nom. Pour plus d’informations sur les valeurs gérées de ces paramètres, voir la classe NumericStepper dans le
Guide de référence d’ActionScript 3.0
pour Flash Professional
.
Création d’une application à l’aide du composant NumericStepper
La procédure suivante explique comment ajouter un composant NumericStepper à une application lors de la programmation. L’exemple place un composant NumericStepper et un composant Label sur la scène et crée un écouteur pour un événement
Event
.
CHANGE
sur l’occurrence de NumericStepper. Lorsque la valeur dans l’incrémenteur numérique change, l’exemple affiche la nouvelle valeur dans la propriété
text
de l’occurrence du composant Label.
-
Faites glisser un composant NumericStepper du panneau Composants jusqu’à la scène.
-
Dans l’Inspecteur des propriétés, entrez le nom d’occurrence
aNs
.
-
Faites glisser un composant Label du panneau Composants vers la scène.
-
Dans l’Inspecteur des propriétés, entrez le nom d’occurrence
aLabel
.
-
Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant :
import flash.events.Event;
aLabel.text = "value = " + aNs.value;
aNs.addEventListener(Event.CHANGE, changeHandler);
function changeHandler(event:Event) :void {
aLabel.text = "value = " + event.target.value;
};
Cet exemple définit la propriété
text
de l’étiquette sur la valeur du composant NumericStepper. La fonction
changeHandler()
met à jour la propriété
text
de l’étiquette à chaque fois que la valeur de l’occurrence de NumericStepper change.
-
Choisissez Contrôle > Tester l’animation.
Création d’un composant NumericStepper à l’aide d’ActionScript
Cet exemple crée trois composants NumericStepper au moyen de code ActionScript, pour la saisie du mois, du jour et de l’année de la date de naissance de l’utilisateur. Il ajoute également des composants Label pour une invite et pour les identificateurs des différents composants NumericStepper.
-
Créez un document de fichier Flash (ActionScript 3.0).
-
Faites glisser une étiquette vers le panneau Bibliothèque.
-
Faites glisser un composant NumericStepper vers le panneau Bibliothèque.
-
Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant :
import fl.controls.Label;
import fl.controls.NumericStepper;
var dobPrompt:Label = new Label();
var moPrompt:Label = new Label();
var dayPrompt:Label = new Label();
var yrPrompt:Label = new Label();
var moNs:NumericStepper = new NumericStepper();
var dayNs:NumericStepper = new NumericStepper();
var yrNs:NumericStepper = new NumericStepper();
addChild(dobPrompt);
addChild(moPrompt);
addChild(dayPrompt);
addChild(yrPrompt);
addChild(moNs);
addChild(dayNs);
addChild(yrNs);
dobPrompt.setSize(65, 22);
dobPrompt.text = "Date of birth:";
dobPrompt.move(80, 150);
moNs.move(150, 150);
moNs.setSize(40, 22);
moNs.minimum = 1;
moNs.maximum = 12;
moNs.stepSize = 1;
moNs.value = 1;
moPrompt.setSize(25, 22);
moPrompt.text = "Mo.";
moPrompt.move(195, 150);
dayNs.move(225, 150);
dayNs.setSize(40, 22);
dayNs.minimum = 1;
dayNs.maximum = 31;
dayNs.stepSize = 1;
dayNs.value = 1;
dayPrompt.setSize(25, 22);
dayPrompt.text = "Day";
dayPrompt.move(270, 150);
yrNs.move(300, 150);
yrNs.setSize(55, 22);
yrNs.minimum = 1900;
yrNs.maximum = 2006;
yrNs.stepSize = 1;
yrNs.value = 1980;
yrPrompt.setSize(30, 22);
yrPrompt.text = "Year";
yrPrompt.move(360, 150);
-
Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.
|
|
|
