Använda komponenten NumericStepper

Med komponenten NumericStepper kan användaren stega genom en ordnad uppsättning med siffror. Komponenten består av en siffra i en textruta som visas bredvid små upp- och nedpilar. När användaren trycker på knapparna ökar eller minskar siffran med den enhet som anges i parametern stepSize tills användaren släpper knappen, eller tills det högsta eller lägsta värdet nås. Texten i NumericStepper-komponentens textruta kan också redigeras.

En direktförhandsvisning av varje NumericStepper-förekomst reflekterar inställningen av värdeparametern i egenskapsinspektören eller komponentinspektören. Men det går inte att använda musen eller tangentbordet för att interagera med NumericSteppers pilknappar i direktförhandsvisningen.

Använda komponenten NumericStepper

Du kan använda NumericStepper-komponenten på alla ställen där du vill att användaren ska välja ett numeriskt värde. Du kan till exempel använda en NumericStepper-komponent i ett formulär för att ange månaden, dagen och året när ett kreditkort förfaller. Du kan också använda en NumericStepper-komponent för att göra så att användaren kan öka eller minska teckensnittsstorleken.

Komponenten NumericStepper hanterar enbart numeriska data. Du måste också ändra storlek på nummerlistan vid utvecklingen för att visa fler än två numeriska platser (till exempel siffrorna 5246 eller 1,34).

Du kan aktivera eller inaktivera en nummerlista i ett program. I inaktiverat läge tar en NumericStepper inte emot inmatningar från musen eller tangentbordet. När den är aktiverad får NumericStepper fokus om du klickar på eller tabbar till den, och dess interna fokus har angetts till textrutan. När en NumericStepper-förekomst har fokus kan du använda följande tangenter för att styra den:

Nyckel

Beskrivning

Nedpilen

Värdet ändras med en enhet.

Vänsterpil

Flyttar insättningspunkten till vänster inuti textrutan.

Högerpil

Flyttar insättningspunkten till höger inuti textrutan.

Skift+Tabb

Flyttar fokus till föregående objekt.

Tabb

Flyttar fokus till nästa objekt.

Uppilen

Värdet ändras med en enhet.

Mer information om att kontrollera fokus finns i avsnittet om gränssnittet FocusManager i Referenshandbok för ActionScript 3.0 i Adobe Flash Professional och Arbeta med FocusManager .

NumericStepper-komponentparametrar

Du kan ställa in följande parametrar i egenskapsinspektören eller komponentinspektören för varje förekomst av NumericStepper: maximum , minimum , stepSize och value . Var och en av de här parametrarna har en motsvarande ActionScript-egenskap med samma namn. Information om möjliga värden på de här parametrarna finns i avsnittet om klassen NumericStepper i Referenshandbok för ActionScript 3.0 i Adobe Flash Professional .

Skapa ett program med NumericStepper

I proceduren nedan beskrivs hur du lägger till en NumericStepper-komponent i ett program när du redigerar. I exemplet placeras en NumericStepper-komponent och en Label-komponent på scenen, och en avlyssnare för en Event . CHANGE -händelse för NumericStepper-förekomsten skapas. När värdet i nummerlistan ändras visas det nya värdet i Label-förekomstens text -egenskap.

  1. Dra en NumericStepper-komponent från panelen Komponenter till scenen.

  2. Ange förekomstnamnet aNs i egenskapsinspektören.

  3. Dra en Label-komponent från panelen Komponenter till scenen.

  4. Ange förekomstnamnet aLabel i egenskapsinspektören.

  5. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod: 

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

    I det här exemplet anges värdet på NumericStepper för etikettens text -egenskap. Funktionen changeHandler() uppdaterar etikettens text -egenskap när värdet i NumericStepper-förekomsten ändras.

  6. Välj Kontroll > Testa filmen.

Skapa en NumericStepper med ActionScript:

I det här exemplet skapas tre NumericSteppers med ActionScript-kod, en var för att ange månaden, dagen och året i användarens födelsedatum. Labels läggs också till för en prompt och för identifierare för var och en av det tre NumericSteppers.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra en Label till bibliotekspanelen.

  3. Dra en NumericStepper-komponent till bibliotekspanelen.

  4. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod: 

    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. Välj Kontroll > Testa filmen för att köra programmet.