Flex - Contrôle NumericStepper

Le contrôle NumericStepper vous permet de sélectionner un nombre dans un ensemble ordonné. Le NumericStepper fournit un contrôle TextInput afin que vous puissiez directement modifier la valeur du composant.

Le contrôle NumericStepper fournit également une paire de boutons fléchés pour parcourir les valeurs possibles. Les touches Flèche haut et Flèche bas et la molette de la souris font également défiler les valeurs.

Déclaration de classe

Voici la déclaration pour spark.components.NumericStepper classe -

public class NumericStepper 
   extends Spinner 
      implements IFocusManagerComponent, IIMESupport

Propriétés publiques

Sr.Non	Propriété et description
1	enableIME : Boolean [lecture seule] Indicateur qui indique si l'IME doit être activé lorsque le composant reçoit le focus.
2	imeMode : String Spécifie le mode IME (Input Method Editor).
3	maxChars : int Le nombre maximum de caractères pouvant être saisis dans le champ.
4	maximum : Number [override] Nombre qui représente la valeur maximale possible pour value.
5	valueFormatFunction : Function Fonction de rappel qui formate la valeur affichée dans la propriété textDisplay de l'habillage.
6	valueParseFunction : Function Fonction de rappel qui extrait la valeur numérique de la valeur affichée dans le champ textDisplay de l'habillage.

Méthodes publiques

Sr.Non	Méthode et description
1	NumericStepper() Constructeur.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

• spark.components.Spinner
• spark.components.supportClasses.Range
• spark.components.supportClasses.SkinnableComponent
• mx.core.UIComponent
• mx.core.FlexSprite
• flash.display.Sprite
• flash.display.DisplayObjectContainer
• flash.display.InteractiveObject
• flash.display.DisplayObject
• flash.events.EventDispatcher
• Object

Exemple de contrôle Flex DropDownList

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle DropDownList dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<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 = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />  
   <s:BorderContainer width = "550" height = "400" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Form Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "numbericStepperPanel" title = "Using NumericStepper"
            width = "420" height = "200">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            <s:NumericStepper id = "numericStepper" width = "150"
               value = "0" stepSize = "5" minimum = "0" maximum = "50" />
            
            <s:HGroup>
               <s:Label text = "Selected Value :" /> 
               <s:Label text = "{numericStepper.value}" fontWeight = "bold" />
            </s:HGroup>				
         </s:Panel>		
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]