Flex - Controllo NumericStepper

Il controllo NumericStepper consente di selezionare un numero da un insieme ordinato. NumericStepper fornisce un controllo TextInput in modo da poter modificare direttamente il valore del componente.

Il controllo NumericStepper fornisce anche una coppia di pulsanti freccia per scorrere i valori possibili. Anche i tasti Freccia su e Freccia giù e la rotellina del mouse scorrono i valori.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per spark.components.NumericStepper classe -

public class NumericStepper 
   extends Spinner 
      implements IFocusManagerComponent, IIMESupport

Proprietà pubbliche

Suor n Proprietà e descrizione
1

enableIME : Boolean

[sola lettura] Un flag che indica se l'IME deve essere abilitato quando il componente riceve lo stato attivo.
2

imeMode : String

Specifica la modalità IME (Input Method Editor).
3

maxChars : int

Il numero massimo di caratteri che possono essere inseriti nel campo.
4

maximum : Number

[override] Numero che rappresenta il valore massimo possibile per value.
5

valueFormatFunction : Function

Funzione di callback che formatta il valore visualizzato nella proprietà textDisplay dello skin.
6

valueParseFunction : Function

Funzione di callback che estrae il valore numerico dal valore visualizzato nel campo textDisplay dello skin.

Metodi pubblici

Suor n Metodo e descrizione
1

NumericStepper()

Costruttore.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

  • 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

Esempio di controllo DropDownList Flex

Seguiamo i seguenti passaggi per verificare l'utilizzo del controllo DropDownList in un'applicazione Flex creando un'applicazione di test:

Passo Descrizione
1 Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2 Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]