Arbeiten mit der NumericStepper-Komponente

Die NumericStepper-Komponente (Zähler) ermöglicht es dem Benutzer, eine geordnete Zahlenmenge schrittweise durchzugehen. Die Komponente besteht aus einer Zahl in einem Textfeld, das neben kleinen aufwärts- und abwärts gerichteten Pfeilschaltflächen angezeigt wird. Wenn der Benutzer auf die Schaltflächen klickt, wird die Zahl schrittweise in der mit dem Parameter stepSize festgelegten Einheit erhöht oder verringert, bis der Benutzer die Schaltflächen loslässt oder der höchste bzw. niedrigste Wert erreicht wurde. Der Text im Textfeld der NumericStepper-Komponente kann ebenfalls bearbeitet werden.

Eine Live-Vorschau der einzelnen NumericStepper-Instanzen spiegelt die Einstellung des Parameters „value“ im Eigenschaften- oder Komponenten-Inspektor wieder. In der Live-Vorschau können die Pfeilschaltflächen des Zählers jedoch nicht mit der Maus oder der Tastatur bedient werden.

Benutzerinteraktion mit der NumericStepper-Komponente

Sie können den Zähler überall verwenden, wo der Benutzer einen Zahlenwert einstellen soll. Sie können eine NumericStepper-Komponente etwa in einem Formular verwenden, in dem der Monat, der Tag und das Jahr des Gültigkeitsdatums einer Kreditkarte eingestellt werden kann. Sie können eine NumericStepper-Komponente auch verwenden, damit der Benutzer eine Schriftgröße vergrößern oder verkleinern kann.

Die NumericStepper-Komponente verarbeitet nur numerische Daten. Außerdem müssen Sie beim Authoring die Größe des Zählers anpassen, wenn Sie mehr als zwei Ziffern anzeigen möchten (z. B. die Zahlen 5246 oder 1,34).

Einen Zähler in einer Anwendung können Sie aktivieren oder deaktivieren. Im deaktivierten Zustand reagiert der Zähler nicht auf Maus- und Tastatureingaben. Ein aktivierter Zähler erhält den Fokus, wenn Sie darauf klicken oder ihn mit der Tabulatortaste ansteuern; der interne Fokus wird auf das Textfeld gelegt. Wenn eine NumericStepper-Instanz den Fokus hat, kann sie mit den folgenden Tasten gesteuert werden:

Schlüssel

Beschreibung

Nach-unten-Taste

Der Wert ändert sich um eine Einheit.

Nach-links-Taste

Verschiebt die Einfügemarke im Textfeld nach links.

Nach-rechts-Taste

Verschiebt die Einfügemarke im Textfeld nach rechts.

Umschalt+Tab

Verschiebt den Fokus auf das vorherige Objekt.

Tab

Verschiebt den Fokus auf das nächste Objekt.

Nach-oben-Taste

Der Wert ändert sich um eine Einheit.

Weitere Informationen zum Steuern des Fokus finden Sie im Abschnitt zur FocusManager-Klasse im ActionScript 3.0 Referenzhandbuch für Flash Professional und unter Arbeiten mit dem FocusManager .

Parameter der Komponente NumericStepper

Die folgenden Parameter können für jede Instanz einer NumericStepper-Komponente im Eigenschaften- oder Komponenten-Inspektor festgelegt werden: maximum , minimum , stepSize und value . Jeder dieser Parameter verfügt über eine entsprechende ActionScript-Eigenschaft mit demselben Namen. Informationen zu den möglichen Werten für diese Parameter finden Sie im Abschnitt zur NumericStepper-Klasse im ActionScript 3.0 Referenzhandbuch für Flash Professional .

Erstellen einer Anwendung mit der NumericStepper-Komponente

Im folgenden Verfahren wird erklärt, wie Sie beim Authoring die NumericStepper-Komponente in eine Anwendung einfügen. Im Beispiel werden eine NumericStepper-Komponente und eine Label-Komponente auf der Bühne platziert, und es wird ein Listener für ein Event. CHANGE -Ereignis für die NumericStepper-Instanz erstellt. Wenn sich der Wert in der NumericStepper-Instanz ändert, wird der neue Wert in der Eigenschaft text der Label-Instanz angezeigt.

  1. Ziehen Sie die NumericStepper-Komponente vom Bedienfeld „Komponenten“ auf die Bühne.

  2. Geben Sie im Eigenschafteninspektor den Instanznamen aNs ein.

  3. Ziehen Sie eine Label-Komponente vom Bedienfeld „Komponenten“ auf die Bühne.

  4. Geben Sie im Eigenschafteninspektor den Instanznamen aLabel ein.

  5. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein: 

    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 diesem Beispiel wird der Beschriftungstext (die Eigenschaft text der label-Instanz) auf den Wert des Zählers (der Eigenschaft „value“ der NumericStepper-Instanz) gesetzt. Durch die Funktion changeHandler() wird die Eigenschaft text der Beschriftung immer dann geändert, wenn der Wert im Zähler geändert wird.

  6. Wählen Sie „Steuerung“ > „Film testen“.

Erstellen eines Zählers mithilfe von ActionScript-Code

In diesem Beispiel werden mithilfe von ActionScript-Code drei Zähler erstellt, und zwar je einer für die Eingabe von Monat, Tag und Jahr des Geburtstags des Benutzers. Zudem werden Beschriftungen für Aufforderung und Bezeichner eines jeden Zählers hinzugefügt.

  1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

  2. Ziehen Sie eine Label-Komponente in das Bedienfeld „Bibliothek“.

  3. Ziehen Sie eine NumericStepper-Komponente in das Bedienfeld „Bibliothek“.

  4. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein: 

    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. Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.

Rechtliche Hinweise | Online-Datenschutzrichtlinie