Arbeiten mit der Button-Komponente

Die Button-Komponente ist eine rechteckige Schaltfläche mit veränderlicher Größe, die der Benutzer mit der Maus oder mit der Leertaste aktiviert, um eine Aktion in der Anwendung auszuführen. Sie können Schaltflächen eigene Symbole zuweisen. Außerdem können Sie das Verhalten von Schaltflächen ändern und herkömmliche Schaltflächen in Schaltflächen mit Umschaltfunktion umwandeln. Eine Schaltfläche mit Umschaltfunktion (Toggle-Schaltfläche) bleibt nach dem Klicken so lange aktiviert, bis der Benutzer erneut darauf klickt.

Schaltflächen sind grundlegende Bestandteile vieler Formulare und Webanwendungen. Mit Schaltflächen können Sie dem Benutzer die Möglichkeit geben, Ereignisse einzuleiten. Die meisten Formulare enthalten beispielsweise eine Schaltfläche „Senden“, mit der die Übertragung der eingegebenen Daten an den Server eingeleitet wird. In Präsentationen ermöglichen Schaltflächen wie „Zurück“ und „Weiter“ das Navigieren zwischen den einzelnen Seiten.

Benutzerinteraktion mit der Button-Komponente

Eine Schaltfläche in einer Anwendung können Sie aktivieren oder deaktivieren. Im deaktivierten Zustand reagiert die Schaltfläche nicht auf Maus- und Tastatureingaben. Aktivierte Schaltflächen erhalten den Eingabefokus, wenn darauf geklickt wird oder wenn sie mit der Tabulatortaste angesteuert werden. Button-Instanzen mit Eingabefokus können mit den folgenden Tasten gesteuert werden:

Schlüssel

Beschreibung

Umschalt+Tab

Verschiebt den Fokus auf das vorherige Objekt.

Leertaste

Drückt die Schaltfläche bzw. gibt diese frei und löst das Ereignis click aus.

Tab

Verschiebt den Fokus auf das nächste Objekt.

Eingabetaste

Der Fokus wird auf das nächste Objekt verschoben, falls eine Schaltfläche als Standardschaltfläche des FocusManager festgelegt wurde.

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

Die Änderungen an den Parametern der einzelnen Button-Instanzen, die beim Authoring im Eigenschaften- oder Komponenten-Inspektor vorgenommen werden, werden jeweils in einer Live-Vorschau angezeigt.

Hinweis: Wenn das Symbol größer als die Schaltfläche ist, ragt es über deren Begrenzungen hinaus.

Um eine Schaltfläche in einer Anwendung zur Standardschaltfläche zu machen (d. h. zu der Schaltfläche, für die beim Drücken der Eingabetaste das Ereignis „click“ ausgelöst wird), verwenden Sie FocusManager.defaultButton . Im folgenden Codebeispiel wird als Standardschaltfläche eine Button-Instanz mit dem Namen submitButton festgelegt. 

FocusManager.defaultButton = submitButton;

Die einer Anwendung hinzugefügten Button-Komponenten können Sie anhand der folgenden ActionScript-Codezeilen für Bildschirmleseprogramme zugänglich machen: 

import fl.accessibility.ButtonAccImpl; 
 
ButtonAccImpl.enableAccessibility();

Die Zugänglichkeit wird pro Komponente nur einmal aktiviert, auch wenn Sie mehrere Instanzen davon erstellen.

Parameter der Button-Komponente

Sie können die folgenden Authoring-Parameter im Eigenschafteninspektor („Fenster“ > „Eigenschaften“ > „Eigenschaften“) oder im Komponenteninspektor („Fenster“ > „Komponenteninspektor“) für jede Button-Instanz festlegen: emphasized , label , labelPlacement , selected und toggle . Jeder dieser Parameter verfügt über eine entsprechende ActionScript-Eigenschaft mit demselben Namen. Wenn Sie diesen Parametern einen Wert zuweisen, legen Sie den ursprünglichen Status der Eigenschaft in der Anwendung fest. Durch Festlegen der Eigenschaft in ActionScript wird der Wert, den Sie für den Parameter angeben, außer Kraft gesetzt. Informationen zu den möglichen Werten für diese Parameter finden Sie im Abschnitt zur Button-Klasse im ActionScript 3.0 Referenzhandbuch für Flash Professional .

Erstellen einer Anwendung mit der Button-Komponente

Im Folgenden wird erläutert, wie Sie beim Authoring eine Button-Komponente in eine Anwendung einfügen. In diesem Beispiel ändert die Button-Komponente den Zustand einer ColorPicker-Komponente, wenn Sie darauf klicken.

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

  2. Ziehen Sie eine Button-Komponente vom Bedienfeld „Komponenten“ auf die Bühne und geben Sie im Eigenschafteninspektor die folgenden Werte ein:

    • Geben Sie den Instanznamen aButton ein.

    • Geben Sie Show für den Parameter „label“ ein.

  3. Platzieren Sie eine ColorPicker-Komponente auf der Bühne und geben Sie ihr den Instanznamen aCp .

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

    aCp.visible = false; 
 
aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
     
    switch(event.currentTarget.label) { 
        case "Show": 
            aCp.visible = true; 
            aButton.label = "Disable"; 
            break; 
        case "Disable": 
            aCp.enabled = false; 
            aButton.label = "Enable"; 
            break; 
        case "Enable": 
            aCp.enabled = true; 
            aButton.label = "Hide"; 
            break; 
        case "Hide": 
            aCp.visible = false; 
            aButton.label = "Show"; 
            break; 
    } 
}

    Die zweite Codezeile registriert die Funktion clickHandler() als Ereignisprozedurfunktion für das MouseEvent.CLICK -Ereignis. Das Ereignis tritt auf, wenn ein Benutzer auf die Schaltflächen klickt und somit die Funktion clickHandler() dazu veranlasst, je nach Schaltflächenwert, eine der folgenden Aktionen auszuführen:

    • „Show“ blendet die ColorPicker-Komponente ein und ändert die Beschriftung der Schaltfläche in „Disable“.

    • „Disable“ deaktiviert die ColorPicker-Komponente und ändert die Beschriftung der Schaltfläche in „Enable“.

    • „Enable“ aktiviert die ColorPicker-Komponente und ändert die Beschriftung der Schaltfläche in „Hide“.

    • „Hide“ blendet die ColorPicker-Komponente aus und ändert die Beschriftung der Schaltfläche in „Show“.

  5. Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.

Erstellen einer Anwendung mit der Button-Komponente

Im Folgenden wird eine Schaltfläche mit Umschaltfunktion erstellt, und der Ereignistyp wird im Bedienfeld „Ausgabe“ angezeigt, wenn der Anwender auf die Schaltfläche klickt. Im Beispiel wird die Button-Instanz erstellt, indem der Konstruktor der Klasse aufgerufen wird, und sie wird mit der addChild -Methode zur Bühne hinzugefügt.

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

  2. Ziehen Sie die Button-Komponente vom Bedienfeld „Komponenten“ in das Bedienfeld „Bibliothek“ des aktuellen Dokuments.

    Hierdurch wird die Komponente zur Bibliothek hinzugefügt, sie wird jedoch nicht in der Anwendung angezeigt.

  3. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden Code ein, um eine Button-Instanz zu erstellen: 

    import fl.controls.Button; 
 
var aButton:Button = new Button(); 
addChild(aButton); 
aButton.label = "Click me"; 
aButton.toggle =true;  
aButton.move(50, 50);

    Die Methode move() platziert die Schaltfläche auf der Bühne auf Position 50 (x-Koordinate), 50 (y-Koordinate).

  4. Fügen Sie jetzt den folgenden ActionScript-Code hinzu, um einen Ereignis-Listener und eine Ereignisprozedur zu erstellen: 

    aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    trace("Event type: " + event.type); 
}

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

    Wenn Sie auf die Schaltfläche klicken, zeigt Flash im Bedienfeld „Ausgabe“ die Meldung „Ereignistyp: click“ an.