|
Mit der RadioButton-Komponente (Optionsfeld) können Sie erzwingen, dass Benutzer aus einer Reihe von Optionen nur eine einzige auswählen können. Diese Komponente muss in einer Gruppe von mindestens zwei RadioButton-Instanzen verwendet werden. Es kann immer nur ein Mitglied der Gruppe ausgewählt sein. Wenn der Benutzer ein Optionsfeld in einer Gruppe auswählt, wird die Auswahl des derzeit ausgewählten Optionsfelds aufgehoben. Mit dem Parameter
groupName
geben Sie an, zu welcher Gruppe ein Optionsfeld gehört.
Optionsfelder sind grundlegende Bestandteile vieler Formularanwendungen im Web. Sie können Optionsfelder immer dann verwenden, wenn ein Benutzer aus einer Gruppe von Optionen eine einzige auswählen soll. So würden Sie Optionsfelder beispielsweise einsetzen, um auf einem Formular zu fragen, mit welcher Kreditkarte ein Kunde zahlen möchte.
Benutzerinteraktion mit der RadioButton-Komponente
Ein Optionsfeld kann aktiviert oder deaktiviert sein. Ein deaktiviertes Optionsfeld kann keine Maus- oder Tastatureingaben entgegennehmen. Wenn der Benutzer per Mausklick oder mit der Tabulatortaste zu einer Gruppe von RadioButton-Komponenten navigiert, wird nur dem ausgewählten Optionsfeld ein Fokus zugewiesen. Der Benutzer kann die Auswahl dann mit den folgenden Tasten steuern:
|
Schlüssel
|
Beschreibung
|
|
Pfeil nach oben/Pfeil nach links
|
Die Auswahl wird auf das vorherige Optionsfeld innerhalb der Optionsfeldgruppe verschoben.
|
|
Pfeil nach unten/Pfeil nach rechts
|
Die Auswahl wird auf das nächste Optionsfeld innerhalb der Optionsfeldgruppe verschoben.
|
|
Tab
|
Der Fokus wird von der Optionsfeldgruppe auf die nächste Komponente verschoben.
|
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
.
Eine Live-Vorschau der einzelnen RadioButton-Instanzen auf der Bühne spiegelt die Änderungen wieder, die im Eigenschaften- oder Komponenten-Inspektor beim Authoring vorgenommen wurden. Der Umstand, dass immer nur ein Optionsfeld ausgewählt sein kann, ist in der Live-Vorschau jedoch nicht sichtbar. Wenn Sie den Parameter
selected
für zwei Optionsfelder in der gleichen Gruppe auf „true“ setzen, werden beide als ausgewählt angezeigt, obwohl zur Laufzeit nur die zuletzt erstellte Instanz als ausgewählt angezeigt wird. Weitere Informationen finden Sie im Abschnitt
Parameter der RadioButton-Komponente
.
Die einer Anwendung hinzugefügten RadioButton-Komponenten können Sie einem Bildschirmleseprogramm anhand der folgenden Codezeilen zugänglich machen:
import fl.accessibility.RadioButtonAccImpl;
RadioButtonAccImpl.enableAccessibility();
Diese Anweisung ist unabhängig von der Anzahl der Instanzen nur einmal pro Komponente erforderlich. Weitere Informationen finden Sie im Handbuch „Verwenden von Flash“ im Kapitel 18, „Barrierefreie Inhalte erstellen“.
Parameter der RadioButton-Komponente
Die folgenden Authoring-Parameter können für jede Instanz einer RadioButton-Komponente im Eigenschaften- oder Komponenteninspektor festgelegt werden:
groupName, label, LabelPlacement, selected
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 RadioButton-Klasse im
ActionScript 3.0 Referenzhandbuch
für Flash Professional
.
Sie können ActionScript-Code erstellen, um zusätzliche Optionen für RadioButton-Instanzen mit Methoden, Eigenschaften und Ereignissen der RadioButton-Klasse festzulegen.
Erstellen einer Anwendung mit der RadioButton-Komponente
Im folgenden Verfahren wird beschrieben, wie Sie beim Authoring RadioButton-Komponenten in eine Anwendung einfügen. In diesem Beispiel werden die Optionsfelder eingesetzt, um eine Ja-oder-Nein-Frage zu präsentieren. Die Daten der Opitonsfelder werden jeweils in einem Textbereich angezeigt.
-
Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).
-
Ziehen Sie zwei RadioButton-Komponenten vom Bedienfeld „Komponenten“ auf die Bühne.
-
Wählen Sie das erste Optionsfeld aus. Geben Sie im Eigenschafteninspektor den Instanznamen
yesRb
und den Gruppennamen
rbGroup
ein.
-
Wählen Sie das zweite Optionsfeld aus. Geben Sie im Eigenschafteninspektor den Instanznamen
noRb
und den Gruppennamen
rbGroup
ein.
-
Ziehen Sie eine TextArea-Komponente vom Bedienfeld „Komponenten“ auf die Bühne und nennen Sie die Instanz
aTa
.
-
Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein:
yesRb.label = "Yes";
yesRb.value = "For";
noRb.label = "No";
noRb.value = "Against";
yesRb.move(50, 100);
noRb.move(100, 100);
aTa.move(50, 30);
noRb.addEventListener(MouseEvent.CLICK, clickHandler);
yesRb.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:MouseEvent):void {
aTa.text = event.target.value;
}
-
Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.
Erstellen eines Optionsfelds mithilfe von ActionScript-Code
In diesem Beispiel werden mithilfe von ActionScript-Code drei Optionsfelder für die Farben Rot, Blau und Grün erstellt, und es wird ein graues Feld gezeichnet. In der
value
-Eigenschaft der einzelnen Optionsfelder wird die mit der Option verbundene Farbe als Hexadezimalwert angegeben. Wenn der Benutzer auf eines der Optionsfelder klickt, ruft die Funktion
clickHandler()
die Methode
drawBox()
auf und übergibt die Farbe aus der
value
-Eigenschaft des Optionsfelds an das Feld.
-
Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).
-
Ziehen Sie eine RadioButton-Komponente in das Bedienfeld „Bibliothek“.
-
Ö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.RadioButton;
import fl.controls.RadioButtonGroup;
var redRb:RadioButton = new RadioButton();
var blueRb:RadioButton = new RadioButton();
var greenRb:RadioButton = new RadioButton();
var rbGrp:RadioButtonGroup = new RadioButtonGroup("colorGrp");
var aBox:MovieClip = new MovieClip();
drawBox(aBox, 0xCCCCCC);
addChild(redRb);
addChild(blueRb);
addChild(greenRb);
addChild(aBox);
redRb.label = "Red";
redRb.value = 0xFF0000;
blueRb.label = "Blue";
blueRb.value = 0x0000FF;
greenRb.label = "Green";
greenRb.value = 0x00FF00;
redRb.group = blueRb.group = greenRb.group = rbGrp;
redRb.move(100, 260);
blueRb.move(150, 260);
greenRb.move(200, 260);
rbGrp.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(event:MouseEvent):void {
drawBox(aBox, event.target.selection.value);
}
function drawBox(box:MovieClip,color:uint):void {
box.graphics.beginFill(color, 1.0);
box.graphics.drawRect(125, 150, 100, 100);
box.graphics.endFill();
}
-
Wählen Sie „Steuerung“ > „Film testen“ aus, um die Anwendung auszuführen.
Weitere Informationen finden Sie im Abschnitt zur RadioButton-Klasse im
ActionScript 3.0 Referenzhandbuch
für Flash Professional
.
|
|
|
