Grundlagen von Menüs
Flash Player 9 und höher, Adobe AIR 1.0 und höher
Eine kurze Erklärung sowie Codebeispiele zum Erstellen von nativen Menüs in AIR-Anwendungen finden Sie in den folgenden Kurzanleitungen in der Adobe Developer Connection:
Die nativen Menüklassen geben Zugriff auf die nativen Menüfunktionen des Betriebssystems, unter dem die Anwendung ausgeführt wird. Sie können NativeMenu-Objekte für Anwendungsmenüs (unter Mac OS X verfügbar), Fenstermenüs (unter Windows und Linux verfügbar), Kontextmenüs und Popupmenüs verwenden.
Außerhalb von AIR können Sie die Kontextmenü-Klassen verwenden, um das Kontextmenü zu modifizieren, das Flash Player automatisch anzeigt, wenn ein Benutzer mit der rechten Maustaste bzw. bei gedrückter Befehlstaste auf ein Objekt in Ihrer Anwendung klickt. (Automatische Kontextmenüs werden für AIR-Anwendungen nicht angezeigt.)
Menüklassen
Es gibt folgende Menüklassen:
Paket
|
Klassen
|
flash.display
|
|
flash.ui
|
|
flash.events
|
|
Menütypen
AIR unterstützt folgende Menütypen:
-
Kontextmenüs
-
Kontextmenüs werden nach dem Klicken mit der rechten Maustaste bzw. dem Klicken bei gedrückter Befehlstaste auf ein interaktives Objekt in SWF-Inhalt oder ein Dokumentelement in HTML-Inhalt geöffnet.
In der Flash Player-Laufzeitumgebung werden Kontextmenüs automatisch angezeigt. Mit den ContextMenu- und ContextMenuItem-Klassen können Sie dem Menü eigene Befehle hinzufügen. Sie können auch einige, jedoch nicht alle, der integrierten Befehle entfernen.
In der AIR-Laufzeitumgebung können Sie ein Kontextmenü mit der NativeMenu-Klasse oder der ContextMenu-Klasse erstellen. In HTML-Inhalt in AIR können Sie HTML-Elementen mit den WebKit-HTML- und JavaScript-APIs Kontextmenüs hinzufügen.
-
Anwendungsmenüs (nur AIR)
-
Ein Anwendungsmenü ist ein globales Menü, das für die gesamte Anwendung gilt. Anwendungsmenüs werden unter Mac OS X, nicht jedoch unter Windows oder Linux unterstützt. Unter Mac OS X erstellt das Betriebssystem automatisch ein Anwendungsmenü. Mithilfe der AIR-Menü-API können Sie den Standardmenüs Menüelemente und Untermenüs hinzufügen. Sie können Listener für den Umgang mit vorhandenen Menübefehlen hinzufügen oder vorhandene Elemente entfernen.
-
Fenstermenüs (nur AIR)
-
Ein Fenstermenü ist mit einem einzelnen Fenster verknüpft und wird unterhalb der Titelleiste angezeigt. Zum Hinzufügen von Menüs zu einem Fenster können Sie ein NativeMenu-Objekt erstellen und der
menu
-Eigenschaft des NativeWindow-Objekts zuweisen. Fenstermenüs werden unter den Betriebssystemen Windows und Linux unterstützt, jedoch nicht unter Mac OS X. Native Fenstermenüs können nur mit Fenstern mit System-Fensterdesign eingesetzt werden.
-
Menüs für Dock- und Taskleistensymbole (nur AIR)
-
Diese Symbolmenüs ähneln den Kontextmenüs und werden einem Anwendungssymbol im Dock-Bereich von Mac OS X bzw. im Infobereich der Taskleiste von Windows und Linux zugewiesen. Menüs für Dock- und Taskleistensymbole verwenden die NativeMenu-Klasse. Unter Mac OS X werden die Menüelemente oberhalb der Standardbetriebssystemelemente hinzugefügt. Unter Windows oder Linux gibt es kein Standardmenü.
-
Popupmenüs (nur AIR)
-
Ein AIR-Popupmenü ist wie ein Kontextmenü, doch ist es nicht unbedingt mit einem bestimmten Anwendungsobjekt oder einer bestimmten Anwendungskomponente verknüpft. Popupmenüs können durch Aufrufen der
display()
-Methode eines beliebigen NativeMenu-Objekts an einer beliebigen Position im Fenster angezeigt werden.
-
Benutzerdefinierte Menüs
-
Native Menüs werden komplett vom Betriebssystem gezeichnet und existieren daher außerhalb der Flash- und HTML-Renderingmodelle. Anstatt native Menüs zu verwenden, können Sie mit MXML, ActionScript oder JavaScript auch eigene, benutzerdefinierte nicht native Menüs erstellen (in AIR). Derartige Menüs müssen vollständig innerhalb des Anwendungsinhalts gerendert werden.
-
Flex-Menüs
-
Die Adobe® Flex™-Architekur stellt eine Gruppe von Flex-Menükomponenten bereit. Die Flex-Menüs werden von der Laufzeitumgebung und nicht vom Betriebssystem erstellt, d. h., sie sind keine
nativen
Menüs. Eine Flex-Menükomponente kann für Flex-Fenster ohne System-Fensterdesign verwendet werden. Die Verwendung einer Flex-Menükomponente hat den weiteren Vorteil, dass Sie Menüs deklarativ im MXML-Format festlegen können. Wenn Sie mit der Flex-Architektur arbeiten, verwenden Sie für Fenstermenüs statt der nativen Klassen die Flex-Menüklassen.
Standardmenüs (nur AIR)
Die folgenden Standardmenüs werden vom Betriebssystem oder einer integrierten AIR-Klasse bereitgestellt:
-
Anwendungsmenü unter Mac OS X
-
Dock-Symbolmenü unter Mac OS X
-
Kontextmenü für ausgewählten Text und ausgewählte Bilder in HTML-Inhalt
-
Kontextmenü für ausgewählten Text in einem TextField-Objekt (bzw. einem Objekt, das das TextField erweitert)
Kontextmenüs
Bei SWF-Inhalten können Sie jedes Objekt, das vom InteractiveObject erbt, durch Zuweisen eines Menüobjekts zu der entsprechenden
contextMenu
-Eigenschaft mit einem Kontextmenü versehen. Standardmäßig sind mehrere Befehle enthalten, u. a. „Vorwärts“, „Zurück“, „Drucken“, „Qualität“ und „Zoom“. In der AIR-Laufzeitumgebung kann das
contextMenu
zugewiesene Menüobjekt vom Typ NativeMenu oder ContextMenu sein. In der Flash Player-Laufzeitumgebung steht nur die ContextMenu-Klasse zur Verfügung.
Sie können auf native Menüereignisse oder Kontextmenüereignisse warten, wenn Sie die ContextMenu- und ContextMenuItem-Klassen verwenden; beide werden ausgelöst. Ein Vorteil der vom ContextMenuEvent-Objekt bereitgestellten Eigenschaften liegt darin, dass contextMenuOwner das Objekt identifiziert, dem das Menü zugeordnet ist, und dass
mouseTarget
das Objekt identifiziert, auf das zum Öffnen des Menüs geklickt wurde. Diese Informationen sind vom NativeMenuEvent-Objekt nicht verfügbar.
Das folgende Beispiel erstellt ein Sprite-Objekt und fügt ein einfaches Kontextmenü mit Bearbeitungsbefehlen hinzu:
var sprite:Sprite = new Sprite();
sprite.contextMenu = createContextMenu()
private function createContextMenu():ContextMenu{
var editContextMenu:ContextMenu = new ContextMenu();
var cutItem:ContextMenuItem = new ContextMenuItem("Cut")
cutItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doCutCommand);
editContextMenu.customItems.push(cutItem);
var copyItem:ContextMenuItem = new ContextMenuItem("Copy")
copyItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doCopyCommand);
editContextMenu.customItems.push(copyItem);
var pasteItem:ContextMenuItem = new ContextMenuItem("Paste")
pasteItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, doPasteCommand);
editContextMenu.customItems.push(pasteItem);
return editContextMenu
}
private function doCutCommand(event:ContextMenuEvent):void{trace("cut");}
private function doCopyCommand(event:ContextMenuEvent):void{trace("copy");}
private function doPasteCommand(event:ContextMenuEvent):void{trace("paste");}
Hinweis:
Im Gegensatz zu SWF-Inhalt, der in einer Browserumgebung angezeigt wird, enthalten Kontextmenüs in AIR keine integrierten Befehle.
Anpassen von Flash Player-Kontextmenüs
In einem Browser oder Projektor haben Kontextmenüs in SWF-Inhalten immer integrierte Menüpunkte. Sie können alle dieser Standardbefehle mit Ausnahme der Optionen „Einstellungen“ und „Info“ aus dem Menü entfernen. Durch Setzen der Stage-Eigenschaft
showDefaultContextMenu
auf
false
werden diese Befehle aus dem Kontextmenü entfernt.
Wenn Sie für ein bestimmtes Anzeigeobjekt ein benutzerdefiniertes Kontextmenü erstellen möchten, müssen Sie eine neue Instanz der ContextMenu-Klasse erstellen, die
hideBuiltInItems()
-Methode aufrufen und dann die neue Instanz der
contextMenu
-Eigenschaft der entsprechenden DisplayObject-Instanz zuweisen. Im folgenden Beispiel wird ein dynamisch gezeichnetes Rechteck mit einem Kontextmenübefehl erstellt, der dessen Farbe auf einen zufällig ausgewählten Wert setzt:
var square:Sprite = new Sprite();
square.graphics.beginFill(0x000000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x =
square.y = 10;
addChild(square);
var menuItem:ContextMenuItem = new ContextMenuItem("Change Color");
menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,changeColor);
var customContextMenu:ContextMenu = new ContextMenu();
customContextMenu.hideBuiltInItems();
customContextMenu.customItems.push(menuItem);
square.contextMenu = customContextMenu;
function changeColor(event:ContextMenuEvent):void
{
square.transform.colorTransform = getRandomColor();
}
function getRandomColor():ColorTransform
{
return new ColorTransform(Math.random(), Math.random(), Math.random(),1,(Math.random() * 512) - 255, (Math.random() * 512) -255, (Math.random() * 512) - 255, 0);
}
Struktur von nativen Menüs (AIR)
Native Menüs sind von Natur aus hierarchisch. NativeMenu-Objekte können untergeordnete NativeMenuItem-Objekte enthalten. NativeMenuItem-Objekte, die Untermenüs repräsentieren, können wiederum NativeMenu-Objekte enthalten. Das Menüobjekt, das sich in der Struktur auf der obersten Ebene oder der Stammebene befindet, stellt die Menüleiste von Anwendungs- und Fenstermenüs dar. (Kontext-, Symbol- und Popupmenüs haben keine Menüleiste.)
Das folgende Diagramm veranschaulicht die Struktur eines typischen Menüs. Das Stammmenü repräsentiert die Menüleiste und enthält zwei Menüelemente, die auf die Untermenüs
Datei
und
Bearbeiten
verweisen. Das Untermenü „Datei“ in dieser Struktur enthält zwei Befehlselemente und ein Element, das auf das Untermenü
Zuletzt geöffnete Dateien
verweist, welches wiederum drei Elemente enthält. Das Untermenü „Bearbeiten“ enthält drei Befehle und eine Trennlinie.
Zum Definieren eines Untermenüs sind sowohl ein NativeMenu- als auch ein NativeMenuItem-Objekt erforderlich. Das NativeMenuItem-Objekt definiert die im übergeordneten Menü angezeigte Bezeichnung und ermöglicht dem Benutzer das Öffnen des Untermenüs. Das NativeMenu-Objekt dient als Container für Elemente im Untermenü. Das NativeMenuItem-Objekt verweist über die
submenu
-Eigenschaft des NativeMenuItem auf das NativeMenu-Objekt.
Ein Codebeispiel, das dieses Menü erstellt, finden Sie unter
Beispiel für natives Menü: Fenster- und Anwendungsmenü (AIR)
.
Menüereignisse
NativeMenu- und NativeMenuItem-Objekte lösen beide
preparing
-,
displaying
- und
select
-Ereignisse aus:
preparing:
Wenn das Objekt dabei ist, eine Benutzerinteraktion zu beginnen, lösen das Menü und seine Menüelemente ein
preparing
-Ereignis an registrierte Listener aus. Interaktionen sind beispielsweise das Öffnen des Menüs oder die Auswahl eines Menüelements über einen Tastaturbefehl.
Hinweis:
Das
preparing
-Ereignis ist nur für Adobe AIR 2.6 und höher verfügbar.
-
displaying:
-
Unmittelbar vor der Anzeige eines Menüs lösen das Menü und seine Menüelemente ein
displaying
-Ereignis für alle registrierten Listener aus.
Die
preparing
- und
displaying
-Ereignisse bieten Ihnen die Möglichkeit, die Menüinhalte oder das Erscheinungsbild der Menüelemente zu aktualisieren, bevor diese dem Benutzer präsentiert werden. Sie könnten beispielsweise im Listener für das
displaying
-Ereignis eines Menüs für „Zuletzt geöffnete Dateien“ die Menüelemente so ändern, dass eine Liste der zuletzt angezeigten Dokumente zu sehen ist.
Wenn Sie das Menüelement entfernen, dessen Tastaturbefehl ein
preparing
-Ereignis ausgelöst hat, wird die Menüinteraktion abgebrochen. In diesem Fall wird kein
select
-Ereignis ausgelöst.
Die
target
- und
currentTarget
-Eigenschaften des Ereignisses sind beide das Objekt, für das der Listener registriert ist: entweder das Menü selbst oder eines seiner Elemente.
Das
preparing
-Ereignis wird vor dem
displaying
-Ereignis ausgelöst. Normalerweise wird auf eines der beiden Ereignisse gewartet, aber nicht auf beide.
-
Auswahl:
-
Wenn der Benutzer ein Befehlselement auswählt, löst dieses für alle registrierten Listener ein
select
-Ereignis aus. Untermenü- und Trennelemente können nicht ausgewählt werden und lösen daher nie ein
select
-Ereignis aus.
Ein
select
-Ereignis beginnt bei einem Menüelement und setzt sich über das Menü, in dem das Element enthalten ist, bis zum Stammmenü fort. Sie können
select
-Ereignisse direkt auf Elementebene oder weiter oben in der Menüstruktur überwachen. Wenn Sie das
select
-Ereignis auf Menüebene überwachen, können Sie das ausgewählte Element mit der
target
-Eigenschaft des Ereignisses identifizieren. Während der Fortsetzung des Ereignisses durch die Menühierarchie identifiziert die
currentTarget
-Eigenschaft des Ereignisobjekts das aktuelle Menüobjekt.
Hinweis:
ContextMenu- und ContextMenuItem-Objekte lösen die Ereignisse
menuItemSelect
und
menuSelect
sowie
select
,
preparing
und
displaying
aus.
Zugriffstasten für native Menübefehle (AIR)
Sie können einem Menübefehl Zugriffstasten zuweisen. Das Menüelement löst für alle registrierten Listener beim Drücken der Taste bzw. Tastenkombination ein
select
-Ereignis aus. Das Menü, das das Element enthält, muss zum Menü der Anwendung oder zum aktiven Fenster gehören, damit der Befehl aufgerufen wird.
Zugriffstasten bestehen aus zwei Teilen: einem String, der der Haupttaste entspricht, und einem Array von Zusatztasten, die ebenfalls gedrückt werden müssen. Zum Zuweisen der Haupttaste legen Sie für die
keyEquivalent
-Eigenschaft des Menüelements ein einzelnes Zeichen für diese Taste fest. Wenn Sie einen Großbuchstaben verwenden, wird die Umschalttaste dem Zusatztastenarray automatisch hinzugefügt.
Unter Mac OS X wird als Standardzusatztaste die Befehlstaste (
Keyboard.COMMAND
) verwendet. Unter Windows und Linux ist dies die Strg-Taste (
Keyboard.CONTROL
). Diese Standardtasten werden dem Zusatztastenarray automatisch hinzugefügt. Wenn andere Zusatztasten verwendet werden sollen, weisen Sie der
keyEquivalentModifiers
-Eigenschaft ein neues Array zu, das die gewünschten Tastencodes enthält. Das Standardarray wird überschrieben. Die Umschalttaste wird automatisch hinzugefügt, wenn der der
keyEquivalent
-Eigenschaft zugewiesene String ein Großbuchstabe ist, ganz gleich, ob Sie die Standardzusatztaten verwenden oder ein eigenes Zusatztastenarray zuweisen. Konstanten für die für Zusatztasten zu verwendenden Tastencodes sind in der Keyboard-Klasse definiert.
Der zugewiesene String für Zugriffstasten wird automatisch neben dem Namen des Menüelements angezeigt. Das Format hängt vom Betriebssystem des Benutzers und den Systemeinstellungen ab.
Hinweis:
Wenn Sie einem Zusatztastenarray unter Windows den
Keyboard.COMMAND
-Wert zuweisen, werden im Menü keine Zugriffstasten angezeigt. Zum Aktivieren des Menübefehls muss die Strg-Taste verwendet werden.
Im folgenden Beispiel werden einem Menüelement die Zugriffstasten
Strg+Umschalt+G
zugewiesen:
var item:NativeMenuItem = new NativeMenuItem("Ungroup");
item.keyEquivalent = "G";
Dieses Beispiel legt das Zusatztastenarray direkt fest und weist so
Strg+Umschalt+G
als Zugriffstasten zu:
var item:NativeMenuItem = new NativeMenuItem("Ungroup");
item.keyEquivalent = "G";
item.keyEquivalentModifiers = [Keyboard.CONTROL];
Hinweis:
Zugriffstasten werden nur für Anwendungs- und Fenstermenüs ausgelöst. Wenn Sie einem Kontext- oder Popupmenü Zugriffstasten hinzufügen, werden diese in der Menübezeichnung angezeigt, der verknüpfte Menübefehl aber nie aufgerufen.
Mnemonische Zeichen (AIR)
Mnemonische Zeichen sind ein Teil der Tastaturschnittstelle des Betriebssystems für Menüs. Sowohl unter Mac OS X als auch unter Windows und Linux können Benutzer zum Öffnen von Menüs und Auswählen von Befehlen die Tastatur verwenden. Allerdings gibt es hier geringfügige Unterschiede.
Unter Mac OS X gibt der Benutzer die ersten ein oder zwei Buchstaben des Menüs oder Befehls ein und drückt dann die Return-Taste. Die
mnemonicIndex
-Eigenschaft wird ignoriert.
Unter Windows ist nur ein einzelner Buchstabe relevant. Standardmäßig ist der relevante Buchstabe das erste Zeichen der Bezeichnung. Wenn Sie einem Menüelement jedoch ein mnemonisches Zeichen zuweisen, entspricht dies dem relevanten Buchstaben. Wenn zwei Elemente in einem Menü (unabhängig davon, ob ein mnemoisches Zeichen zugewiesen wurde) das gleiche relevante Zeichen aufweisen, ändert sich die Tastaturinteraktion des Benutzers mit dem Menü geringfügig. Statt des Einzelbuchstabens muss der Benutzer zum Auswählen des Menüs oder Befehls diesen Buchstaben nun so oft drücken, bis das gewünschte Element hervorgehoben wird, und anschließend zum Durchführen der Auswahl die Eingabetaste betätigen. Um ein einheitliches Verhalten zu gewährleisten, sollten Sie bei Fenstermenüs jedem Menüelement ein eindeutiges mnemonisches Zeichen zuweisen.
Unter Linux wird kein standardmäßiges mnemonisches Zeichen bereitgestellt. Sie müssen einen Wert für die
mnemonicIndex
-Eigenschaft eines Menüelements angeben, um ein mnemonisches Zeichen festzulegen.
Geben Sie das mnemonische Zeichen als Index im Bezeichnungsstring an. Der Index des ersten Zeichens in einer Bezeichnung ist 0. Wenn Sie für ein Menüelement namens „Format“ als mnemonisches Zeichen „r“ verwenden möchten, müssen Sie für die
mnemonicIndex
-Eigenschaft 2 festlegen.
var item:NativeMenuItem = new NativeMenuItem("Format");
item.mnemonicIndex = 2;
Menüelementstatus
Menüelemente haben zwei Statuseigenschaften,
checked
und
enabled
:
-
checked
-
Setzen Sie diese Einstellung auf
true
, um neben der Elementbezeichnung ein Häkchen anzuzeigen.
var item:NativeMenuItem = new NativeMenuItem("Format");
item.checked = true;
-
enabled
-
Schalten Sie den Wert zwischen
true
und
false
um, um zu steuern, ob der Befehl aktiviert wurde oder nicht. Deaktivierte Elemente sind grau dargestellt und lösen keine
select
-Ereignisse aus.
var item:NativeMenuItem = new NativeMenuItem("Format");
item.enabled = false;
Anheften von Objekten an Menüelemente
Mit der
data
-Eigenschaft der NativeMenuItem-Klasse können Sie in jedem Element auf ein willkürliches Objekt verweisen. In einem Menü der zuletzt geöffneten Dateien könnten Sie z. B. jedem Menüelement das File-Objekt für jedes Dokument zuweisen.
var file:File = File.applicationStorageDirectory.resolvePath("GreatGatsby.pdf")
var menuItem:NativeMenuItem = docMenu.addItem(new NativeMenuItem(file.name));
menuItem.data = file;
|
|
|
|
|