De component NumericStepper gebruiken

Met de component NumericStepper kan een gebruiker een geordende reeks getallen doorlopen. De component bestaat uit een getal in een tekstvak dat wordt weergegeven naast kleine pijlknoppen omhoog of omlaag. Wanneer de gebruiker op de knoppen drukt, wordt dit getal stapsgewijs verhoogd of verlaagd op basis van de unit die is opgegeven in de parameter stepSize totdat de gebruiker de knoppen loslaat of totdat de maximale of minimale waarde is bereikt. De tekst in het tekstvak van de component NumericStepper is ook bewerkbaar.

Een live voorvertoning van elke instantie NumericStepper geeft de instelling van de parameter value weer in Eigenschapcontrole of Componentcontrole. Er is echter geen muis- of toetsenbordinteractie met de pijltoetsen van NumericStepper in de live voorvertoning.

Gebruikersinteractie met de component NumericStepper

U kunt de component NumericStepper overal gebruiken waar u wilt dat de gebruiker een numerieke waarde selecteert. U kunt een component NumericStepper bijvoorbeeld in een formulier gebruiken om de maand, dag en het jaar van de vervaldatum van een creditcard in te stellen. U kunt een component NumericStepper ook gebruiken om de gebruiker toe te staan de grootte van een lettertype te vergroten of verkleinen.

De component NumericStepper verwerkt alleen numerieke gegevens. U moet tijdens het ontwerpen ook de grootte van de stapfunctie wijzigen om meer dan twee numerieke plaatsen weer te geven (bijvoorbeeld de getallen 5246 of 1,34).

U kunt een NumericStepper in een toepassing in- of uitschakelen. In de uitgeschakelde toestand ontvangt de NumericStepper geen muis- of toetsenbordinvoer. Wanneer deze is uitgeschakeld ontvangt de NumericStepper focus als u erop klikt of er met Tab naartoe gaat en wordt de interne focus op het tekstvak ingesteld. Wanneer een instantie NumericStepper focus heeft, kunt u de volgende toetsen gebruiken om de instantie te beheren:

Toets

Beschrijving

Pijl-omlaag

Hiermee wordt de waarde met één unit gewijzigd.

Pijl-links

Hiermee wordt het invoegpunt binnen het tekstvak naar de linkerkant verplaatst.

Pijl-rechts

Hiermee wordt het invoegpunt binnen het tekstvak naar de rechterkant verplaatst.

Shift+Tab

Hiermee wordt de focus naar het vorige object verplaatst.

Tab

Hiermee wordt de focus naar het volgende object verplaatst.

Pijl-omhoog

Hiermee wordt de waarde met één unit gewijzigd.

Zie de klasse FocusManager in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 en Werken met FocusManager voor meer informatie over focusbeheer.

Parameters van de component NumericStepper

U kunt in de Eigenschapcontrole of de Componentcontrole de volgende parameters instellen voor elke instantie van NumericStepper: maximum , minimum , stepSize en value . Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Zie de klasse NumericStepper in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor informatie over de mogelijk waarden voor deze parameters.

Een toepassing met NumericStepper maken

De volgende procedure laat zien hoe u een component NumericStepper tijdens het ontwerpen aan een toepassing kunt toevoegen. In het voorbeeld wordt een component NumericStepper en een component Label in het werkgebied geplaatst en wordt een listener voor een gebeurtenis Event . CHANGE voor de instantie NumericStepper gemaakt. Wanneer de waarde in de numerieke stapfunctie wijzigt, geeft het voorbeeld de nieuwe waarde in de eigenschap text van de instantie Label weer.

  1. Sleep een component NumericStepper van het deelvenster Componenten naar het werkgebied.

  2. Voer in Eigenschapcontrole de instantienaam aNs in.

  3. Sleep een component Label van het deelvenster Componenten naar het werkgebied.

  4. Voer in Eigenschapcontrole de instantienaam aLabel in.

  5. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe: 

    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 dit voorbeeld wordt de eigenschap text van het label ingesteld op de waarde van de NumericStepper. De functie changeHandler() werkt de eigenschap text van het label bij op het moment dat de waarde in de instantie NumericStepper wijzigt.

  6. Selecteer Besturing > Film testen.

Een NumericStepper maken met ActionScript

In dit voorbeeld worden drie NumericSteppers gemaakt met ActionScript-code om respectievelijk de maand, de dag en het jaar van de geboortedatum van de gebruiker in te voeren. Het voegt ook labels voor een vraag en de id’s van NumericSteppers toe.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep een Label naar het deelvenster Bibliotheek.

  3. Sleep een NumericStepper naar het deelvenster Bibliotheek.

  4. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe: 

    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. Selecteer Besturing > Film testen om de toepassing uit te voeren.