Grundlagen von Menüs

Es gibt folgende Menüklassen:

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.

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");}

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); 
}

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.

Grafik in Originalgröße anzeigen

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).

NativeMenu- und NativeMenuItem-Objekte lösen beide preparing-, displaying- und select-Ereignisse aus:

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.

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.

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]; 

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ü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; 

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;