Usare il componente NumericStepper

Il componente NumericStepper consente a un utente di incrementare o diminuire un valore all'interno di un set di numeri ordinato. Il componente consiste di un numero in una casella di testo visualizzato accanto a piccoli pulsanti freccia su e giù. Quando un utente fa clic sui pulsanti, il numero aumenta o diminuisce in modo incrementale in base all'unità specificata nel parametro stepSize , fino a quando l'utente non rilascia i pulsanti o finché non viene raggiunto il valore minimo o massimo. Il testo contenuto nella casella di testo del componente NumericStepper è modificabile.

Un'anteprima dal vivo di ogni istanza NumericStepper riporta l'impostazione del parametro value indicato nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti. Tuttavia, l'anteprima dal vivo non consente di interagire con i pulsanti freccia di NumericStepper utilizzando il mouse o la tastiera.

Interazione dell'utente con il componente NumericStepper

Potete usare il componente NumericStepper ovunque desiderate che un utente selezioni un valore numerico. Ad esempio, potete usare un componente NumericStepper in un form per impostare il giorno, il mese e l'anno di scadenza di una carta di credito. È inoltre possibile utilizzare un componente NumericStepper per consentire a un utente di aumentare o diminuire la dimensione di un carattere.

Il componente NumericStepper è in grado di gestire solo dati numerici. Inoltre è necessario ridimensionare lo stepper in fase di creazione per visualizzare un numero con più di due cifre (ad esempio, i numeri 5246 o 1,34).

Un componente NumericStepper può essere abilitato o disabilitato in un'applicazione. Quando è disattivato, un componente NumeriStepper non può ricevere input dal mouse o dalla tastiera. Un componente NumericStepper abilitato viene attivato se l'utente lo seleziona mediante clic o spostandosi su di esso mediante il tasto Tab e l'attivazione interna del componente è impostata sulla casella di testo. Quando un'istanza NumericStepper è attiva, potete utilizzare i seguenti tasti per controllarla:

Chiave

Descrizione

Freccia giù

Il valore cambia di un'unità.

Freccia sinistra

Sposta il punto di inserimento a sinistra all'interno della casella di testo.

Freccia destra

Sposta il punto di inserimento a destra all'interno della casella di testo.

Maiusc+Tab

Attiva l'oggetto precedente.

Tab

Attiva l'oggetto successivo.

Freccia su

Il valore cambia di un'unità.

Per ulteriori informazioni sul controllo dell'attivazione, vedete la classe FocusManager nella Guida di riferimento di ActionScript 3.0 per Flash Professional e Operazioni con FocusManager .

Parametri del componente NumericStepper

I seguenti parametri possono essere impostati per ogni istanza del componente NumericStepper nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti: maximum , minimum , stepSize e value . Ciascuno di questi parametri ha una proprietà ActionScript corrispondente con lo stesso nome. Per informazioni sui valori che potete impostare per questi parametri, vedete la classe NumericStepper nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

Creare un'applicazione con il componente NumericStepper

Nella procedura seguente viene descritto come aggiungere un componente NumericStepper a un'applicazione durante la creazione. Nell'esempio vengono collocati sullo stage un componente NumericStepper e un componente Label e viene creato un listener per un evento Event . CHANGE sull'istanza NumericStepper. Quando il valore dello stepper numerico cambia, il nuovo valore viene visualizzato nella proprietà text dell'istanza Label.

  1. Trascinare un componente NumericStepper dal pannello Componenti allo stage.

  2. Nella finestra di ispezione Proprietà, inserite aNs come nome di istanza.

  3. Trascinare un componente Label dal pannello Componenti allo stage.

  4. Nella finestra di ispezione Proprietà, inserite aLabel come nome di istanza.

  5. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente: 

    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; 
};

    In questo esempio, la proprietà text dell'etichetta viene impostata sul valore di NumericStepper. La funzione changeHandler() aggiorna la proprietà text dell'etichetta ogni volta che cambia il valore nell'istanza NumericStepper.

  6. Selezionare Controllo > Prova filmato.

Creare un componente NumericStepper mediante ActionScript

Nell'esempio seguente vengono creati tre componenti NumericStepper mediante il codice ActionScript, per inserire rispettivamente il giorno, il mese e l'anno della data di nascita dell'utente. Per ogni componente NumericStepper, vengono inoltre aggiunti componenti Label per un messaggio di richiesta e per gli identificatori.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate un componente Label nel pannello Libreria.

  3. Trascinate un componente NumericStepper nel pannello Libreria.

  4. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente: 

    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);

  5. Selezionate Controllo > Prova filmato per eseguire l'applicazione.