Eine ComboBox-Komponente (Kombinationsfeld) ermöglicht dem Anwender die Auswahl einer einzelnen Option aus einer Dropdownliste. Ein Kombinationsfeld kann statisch oder bearbeitbar sein. Ein bearbeitbares Kombinationsfeld ermöglicht die Eingabe von Text direkt in das Textfeld am Anfang der Liste. Wenn die Dropdownliste über den unteren Dokumentrand hinausreicht, wird sie nach oben statt nach unten geöffnet. Die ComboBox-Komponente besteht aus drei Teilkomponenten: BaseButton, TextInput und List.
Bei einem bearbeitbaren Kombinationsfeld umfasst der Kollisionsbereich nur die Schaltfläche; das Textfeld gehört nicht zum Kollisionsbereich. Bei einem statischen Kombinationsfeld umfasst der Kollisionsbereich die Schaltfläche und das Textfeld. Der Kollisionsbereich reagiert durch Öffnen oder Schließen der Dropdownliste.
Nimmt der Anwender eine Auswahl in der Liste vor, sei es mit der Maus oder der Tastatur, wird die Beschriftung der Auswahl in das Textfeld am Anfang des Kombinationsfelds kopiert.
Benutzerinteraktion mit der ComboBox-Komponente
Sie können die ComboBox-Komponente in Formularen und Anwendungen verwenden, in denen ein Element aus einer Liste auszuwählen ist. Ein Beispiel wäre ein Formular zur Eingabe der Anschrift, in dem der Kunde die Region seines Wohnorts über eine Dropdownliste auswählt. Mit bearbeitbaren Kombinationsfeldern lassen sich auch komplexere Dateneingaben erfassen. Ein Beispiel hierfür wäre ein Formular zur Anforderung einer Wegbeschreibung, bei dem Ausgangs- und Zielort in ein bearbeitbares Kombinationsfeld eingegeben werden. Mithilfe der Dropdownliste könnten sich dabei bei früheren Anfragen eingetragene Angaben abrufen lassen.
Ist das Kombinationsfeld bearbeitbar, d. h., die Eigenschaft
editable
ist
true
, kann mit den folgenden Tasten der Fokus aus dem Texteingabefeld genommen werden, sodass der vorherige Wert erhalten bleibt. Eine Ausnahme stellt die Eingabetaste dar, mit der zuerst der neue Wert übernommen wird, sofern der Benutzer Text eingeben hat.
Schlüssel
|
Beschreibung
|
Umschalt+Tab
|
Verschiebt den Fokus auf das vorherige Element. Ist ein neues Element ausgewählt, wird ein
change
-Ereignis ausgelöst.
|
Tab
|
Verschiebt den Fokus auf das nächste Element. Ist ein neues Element ausgewählt, wird ein
change
-Ereignis ausgelöst.
|
Nach-unten-Taste
|
Verschiebt die Auswahl um ein Element nach unten.
|
Ende
|
Verschiebt die Auswahl an den Anfang der Liste.
|
Esc
|
Schließt die Dropdownliste und gibt den Fokus zurück an das Kombinationsfeld.
|
Eingabetaste
|
Schließt die Dropdownliste und gibt den Fokus zurück an das Kombinationsfeld. Wenn das Kombinationsfeld bearbeitbar ist und der Benutzer Text eingegeben hat, wird der Wert mit der Eingabetaste auf den eingegebenen Text festgelegt.
|
Startseite
|
Verschiebt die Auswahl an den Anfang der Liste.
|
Bild-auf
|
Verschiebt die Auswahl um eine Seite nach oben.
|
Bild-ab
|
Verschiebt die Auswahl um eine Seite nach unten.
|
Die einer Anwendung hinzugefügten ComboBox-Komponenten können Sie Bildschirmleseprogrammen anhand der folgenden ActionScript-Codezeilen zugänglich machen:
import fl.accessibility.ComboBoxAccImpl;
ComboBoxAccImpl.enableAccessibility();
Diese Anweisung ist unabhängig von der Anzahl der Instanzen nur einmal pro Komponente erforderlich.
Parameter der ComboBox-Komponente
Die folgenden Parameter können für jede Instanz einer ComboBox-Komponente im Eigenschaften- oder Komponenten-Inspektor festgelegt werden:
dataProvider
,
editable
,
prompt
und
rowCount
. Jeder dieser Parameter besitzt eine entsprechende ActionScript-Eigenschaft desselben Namens. Informationen zu den möglichen Werten für diese Parameter finden Sie im Abschnitt zur ComboBox-Klasse im
ActionScript 3.0 Referenzhandbuch
für Flash Professional
. Informationen über die Verwendung des Parameters „dataProvider“ finden Sie im Abschnitt
Verwenden des Parameters „dataProvider“
.
Erstellen einer Anwendung mit der ComboBox-Komponente
Im Folgenden wird beschrieben, wie Sie beim Authoring eine ComboBox-Komponente in eine Anwendung einfügen. Das Kombinationsfeld ist bearbeitbar und wenn Sie
Add
in das Textfeld eingeben, wird ein Element in die Dropdownliste eingefügt.
-
Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).
-
Ziehen Sie die ComboBox-Komponente auf die Bühne und geben Sie ihr den Instanznamen
aCb
. Setzen Sie im Komponenten-Inspektor auf der Registerkarte
Parameter
den Parameter
editable
auf
true
.
-
Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden Code ein:
import fl.data.DataProvider;
import fl.events.ComponentEvent;
var items:Array = [
{label:"screen1", data:"screenData1"},
{label:"screen2", data:"screenData2"},
{label:"screen3", data:"screenData3"},
{label:"screen4", data:"screenData4"},
{label:"screen5", data:"screenData5"},
];
aCb.dataProvider = new DataProvider(items);
aCb.addEventListener(ComponentEvent.ENTER, onAddItem);
function onAddItem(event:ComponentEvent):void {
var newRow:int = 0;
if (event.target.text == "Add") {
newRow = event.target.length + 1;
event.target.addItemAt({label:"screen" + newRow, data:"screenData" + newRow},
event.target.length);
}
}
-
Wählen Sie „Steuerung“ > „Film testen“.
Erstellen eines Kombinationsfelds mithilfe von ActionScript-Code
Im folgenden Beispiel wird mithilfe von ActionScript-Code ein Kombinationsfeld erstellt und mit einer Liste von Universitäten in der Region San Francisco, Kalifornien, gefüllt. Die Eigenschaft
width
(Breite) wird eingestellt, um genügend Platz für den Aufforderungstextes bereitzustellen und die Eigenschaft
dropdownWidth
wird so eingestellt, dass die Dropdownliste etwas größer als der längste Universitätsname ist.
In dem Beispiel wird die Liste der Universitäten in Form einer Array-Instanz erstellt, wobei die Uninamen in der Eigenschaft
label
und die URLs der verschiedenen Universitätswebsites in der Eigenschaft
data
gespeichert werden. Der Array wird dem Kombinationsfeld zugewiesen, indem die Eigenschaft
dataProvider
gesetzt wird.
Wenn der Anwender eine Universität aus der Liste auswählt, wird ein Event.
CHANGE
-Ereignis ausgelöst sowie der Aufruf der Funktion
changeHandler()
, wodurch die Eigenschaft
data
in eine URL-Anforderung geladen wird, um auf die Website der Uni zuzugreifen.
Beachten Sie, dass die letzte Zeile die Eigenschaft
selectedIndex
der ComboBox-Instanz auf „-1“ setzt, sodass die Aufforderung wieder angezeigt wird, wenn sich die Liste schließt. Andernfalls würde der Aufforderungstext durch den Namen der ausgewählten Universität ersetzt werden.
-
Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).
-
Ziehen Sie die ComboBox-Komponente vom Bedienfeld „Komponenten“ 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.ComboBox;
import fl.data.DataProvider;
import flash.net.navigateToURL;
var sfUniversities:Array = new Array(
{label:"University of California, Berkeley",
data:"http://www.berkeley.edu/"},
{label:"University of San Francisco",
data:"http://www.usfca.edu/"},
{label:"San Francisco State University",
data:"http://www.sfsu.edu/"},
{label:"California State University, East Bay",
data:"http://www.csuhayward.edu/"},
{label:"Stanford University", data:"http://www.stanford.edu/"},
{label:"University of Santa Clara", data:"http://www.scu.edu/"},
{label:"San Jose State University", data:"http://www.sjsu.edu/"}
);
var aCb:ComboBox = new ComboBox();
aCb.dropdownWidth = 210;
aCb.width = 200;
aCb.move(150, 50);
aCb.prompt = "San Francisco Area Universities";
aCb.dataProvider = new DataProvider(sfUniversities);
aCb.addEventListener(Event.CHANGE, changeHandler);
addChild(aCb);
function changeHandler(event:Event):void {
var request:URLRequest = new URLRequest();
request.url = ComboBox(event.target).selectedItem.data;
navigateToURL(request);
aCb.selectedIndex = -1;
}
-
Wählen Sie „Steuerung“ > „Film testen“.
Sie können dieses Beispiel in die Flash-Authoring-Umgebung implementieren und es dort ausführen. Allerdings werden Sie eine Warnmeldung erhalten, wenn Sie versuchen, die Universitätswebsites zu öffnen, indem Sie auf die Listeneinträge des Kombinationsfelds klicken. Ein voll funktionsfähiges Kombinationsfeld wurde Ihnen im Internet bereitgestellt und zwar unter folgender URL-Adresse:
http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html
|
|
|