Podstawy menu

Flash Player 9 i nowsze wersje, Adobe AIR 1.0 i nowsze wersje

Skrócone omówienia i przykłady kodu ilustrujące tworzenie rodzimych menu w aplikacjach AIR można znaleźć w następujących artykułach z serii Quick Start w witrynie Adobe Developer Connection:

Klasy rodzimego menu umożliwiają dostęp do elementów rodzimego menu systemu operacyjnego, na którym uruchamiana jest aplikacja. Obiektów NativeMenu można używać w menu aplikacji (dostępne w systemie Mac OS X), menu okien (dostępne w systemie Windows i Linux) oraz menu kontekstowych i podręcznych.

Poza środowiskiem AIR możliwe jest stosowanie klas meny kontekstowego do modyfikacji menu kontekstowego wyświetlanego automatycznie przez program Flash Player, gdy użytkownik kliknie prawym przyciskiem myszy (lub kliknie przy naciśniętym przycisku Cmd) dowolny obiekt w aplikacji. (Automatyczne menu kontekstowe nie jest wyświetlane w przypadku aplikacji AIR).

Klasy menu

Do klas menu należą:

Odmiany menu

Środowisko AIR obsługuje następujące typy menu:

Menu kontekstowe
Menu kontekstowe otwierane są w odpowiedzi na kliknięcie prawym przyciskiem myszy lub kliknięcie z przytrzymanym klawiszem Command interaktywnego obiektu w zawartości SWF lub elementu dokumentu w zawartości HTML.

W środowisku programu Flash Player menu kontekstowe jest wyświetlane automatycznie. Klasy ContextMenu i ContextMenuItem umożliwiają dodawanie własnych poleceń do menu. Można także usunąć niektóre, ale nie wszystkie, wbudowane polecenia.

W środowisku AIR można utworzyć menu kontekstowe za pomocą klasy NativeMenu albo klasy ContextMenu. W treści HTML w środowisku AIR do dodawania menu kontekstowych do elementów HTML można używać silnika Webkit HTML i interfejsów API JavaScript.

Menu aplikacji (tylko środowisko AIR)
Menu aplikacji jest menu globalnym, które znajduje zastosowanie w całej aplikacji. Menu aplikacji obsługiwane są w systemie Mac OS X, ale nie w systemie Windows ani Linux. W systemie operacyjnym Mac OS X menu aplikacji tworzone jest automatycznie. Aby dodać pozycje i podmenu do standardowych menu, użytkownik może użyć interfejsu API menu środowiska AIR. Aby obsłużyć istniejące polecenia menu, można dodać detektory. Można również usunąć istniejące pozycje.

Menu okien (tylko środowisko AIR)
Menu okna jest skojarzone z pojedynczym oknem i wyświetlane poniżej paska tytułu. Menu mogą być dodawane do okna przez utworzenie obiektu NativeMenu i przypisanie go do właściwości menu obiektu NativeWindow. Menu okien obsługiwane są w systemach operacyjnych Windows i Linux, ale nie w systemie Mac OS X. Macierzystych menu okien można używać tylko w oknach, które mają karnację systemową.

Menu powiązane z ikonami Docku i zasobnika systemowego (tylko środowisko AIR)
Menu ikon są podobne do menu kontekstowych i przypisywane są do aplikacji w Docku systemu Mac OS X lub obszaru powiadomień na pasku zadań systemu Windows i Linux. Menu ikon Docku i paska zadań korzystają z klasy NativeMenu. W systemie Mac OS X pozycje w menu dodawane są nad standardowymi elementami systemu operacyjnego. W systemie Windows i Linux nie ma standardowego menu.

Menu podręczne (tylko środowisko AIR)
Menu podręczne środowiska AIR podobne jest do menu kontekstowego, ale niekoniecznie jest skojarzone z konkretnym obiektem lub składnikiem aplikacji. Menu podręczne może być wyświetlane dowolnym miejscu w oknie przez wywołanie metody display() dowolnego obiektu NativeMenu.

Niestandardowe menu
Natywne menu rysowane są w całości przez system operacyjny i jako takie istnieją poza modelami renderowania Flash i HTML. Zamiast używać menu rodzimych, można zawsze utworzyć własne, nierodzime menu, korzystając z kodu MXML, ActionScript lub JavaScript (w środowisku AIR). Takie menu muszą być renderowane w całości wewnątrz treści aplikacji.

Menu Flex
Środowisko Adobe® Flex™ zapewnia zestaw składników menu Flex. Menu Flex są rysowane przez środowisko wykonawcze a nie system operacyjny i nie są rodzimymi menu. Składnika menu Flex można używać do okien Flex, które nie mają karnacji systemowej. Kolejną korzyścią z używania składnika menu Flex jest możliwość deklaratywnego określenia menu w formacie MXML. Jeżeli używane jest środowisko Flex, w menu okien należy używać klas menu Flex zamiast klas macierzystych.

Menu domyślne (tylko środowisko AIR)

Domyślne menu dostarczane przez system operacyjny lub wbudowaną klasę środowiska AIR:

  • Menu aplikacji w systemie Mac OS X

  • Menu ikony Docku w systemie Mac OS X

  • Menu kontekstowe dla tekstu lub obrazów zaznaczonych w treści HTML

  • Menu kontekstowe dla tekstu zaznaczonego w obiekcie TextField (lub obiekcie, który rozszerza TextField)

Informacje o menu kontekstowych

Każdemu obiektowi w treści SWF, który dziedziczy po obiekcie InteractiveObject, można przydzielić menu kontekstowe, przypisując obiekt menu do jego właściwości contextMenu . Domyślnie menu zawiera kilka poleceń, w tym Do przodu, Wstecz, Drukuj, Jakość i Powiększenie. W środowisku AIR obiekt menu przypisany do właściwości contextMenu może mieć typ NativeMenu lub ContextMenu. W środowisku wykonawczym programu Flash Player dostępna jest tylko klasa ContextMenu.

W czasie korzystania z klas ContextMenu i ContextMenuItem można wykrywać zdarzenia dla rodzimych menu lub menu kontekstowych; wywoływane są zdarzenia obu menu. Jedną z korzyści jakie udostępniają właściwości obiektu ContextMenuEvent jest to, że właściwość contextMenuOwner identyfikuje obiekt, do którego jest dołączane menu, a właściwość mouseTarget identyfikuje obiekt, który został kliknięty w celu otwarcia menu. Ta informacja nie jest dostępna z obiektu NativeMenuEvent.

W poniższym przykładzie opisano tworzenie obiektu Sprite i dodawanie prostego menu kontekstowego edycji:

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");}
Uwaga: W przeciwieństwie do treści SWF wyświetlanej w przeglądarce, menu kontekstowe w środowisku AIR nie mają żadnych wbudowanych poleceń.

Dostosowywanie menu kontekstowego programu Flash Player

W przeglądarce lub projektorze menu kontekstowe treści SWF zawsze zawierają elementy wbudowane. Możliwe jest usunięcie wszystkich poleceń domyślnych z menu, z wyjątkiem poleceń Ustawienia oraz Informacje. Ustawienie właściwości obiektu Stage showDefaultContextMenu na false powoduje usunięcie tych poleceń z menu kontekstowego.

Aby utworzyć niestandardowe menu kontekstowe dla określonego obiektu wyświetlanego, należy utworzyć nową instancję klasy ContextMenu, wywołać metodę hideBuiltInItems() i przypisać tą instancję do właściwości contextMenu odpowiedniej instancji obiektu DisplayObject. Poniższy przykład ilustruje dynamiczne rysowanie kwadratu z menu kontekstowym zawierającym polecenia losowej zmiany jego koloru:

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

Struktura menu rodzimych (AIR)

Rodzime menu mają strukturę hierarchiczną. Obiekty NativeMenu zawierają obiekty podrzędne NativeMenuItem. Obiekty NativeMenuItem, które reprezentują podmenu, mogą zawierać kolejne obiekty NativeMenu. Obiekt menu poziomu najwyższego lub głównego struktury reprezentuje pasek menu aplikacji i menu okien. (Menu kontekstowe, ikon i podręczne nie mają paska menu).

Poniższy diagram ilustruje strukturę typowego menu. Menu główne reprezentuje pasek menu i zawiera dwie pozycje menu odwołujące się do podmenu File i Edit . Podmenu File zawiera w strukturze dwie pozycje polecenia i pozycję, która dowołuje się do podmenu Open Recent Menu , która sama zawiera trzy pozycje. Podmenu Edit zawiera trzy polecenia i separator.

Podczas definiowania podmenu wymagane są oba obiekty NativeMenu i NativeMenuItem. Obiekt NativeMenuItem definiuje etykietę wyświetlaną w menu elementu nadrzędnego i umożliwia użytkownikowi otwieranie podmenu. Obiekt NativeMenu służy jako kontener dla pozycji podmenu. Obiekt NativeMenuItem odwołuje się do obiektu NativeMenu za pomocą właściwości submenu NativeMenuItem.

Przykładowy kod tworzący menu można znaleźć w rozdziale Przykład menu rodzimego: menu okna i aplikacji (AIR) .

Zdarzenia menu

Obiekty NativeMenu i NativeMenuItem wywołują zdarzenia preparing , displaying i select .

Przygotowanie: W każdym przypadku, gdy rozpoczyna się interakcja użytkownika z obiektem, menu i jego elementy wywołują zdarzenie preparing przekazywane do wszystkich zarejestrowanych detektorów. Interakcja oznacza między innymi otwarcie menu lub wybranie jego elementu za pomocą skrótu klawiaturowego.
Uwaga: Zdarzenie preparing jest dostępne tylko w środowisku Adobe AIR 2.6 i w nowszych wersjach.
Wyświetlanie:
Bezpośrednio przed wyświetleniem menu i jego pozycje wywołują zdarzenie displaying przekazywane do wszystkich zarejestrowanych detektorów.

Zdarzenia preparing i displaying pozwalają zaktualizować zawartość menu lub wygląd pozycji, zanim zobaczy je użytkownik. Na przykład w detektorze dla zdarzenia displaying menu „Otwórz ostatnie” można zmienić pozycje menu, aby odzwierciedlić bieżącą listę ostatnio wyświetlanych dokumentów.

Usunięcie pozycji menu, której skrót klawiaturowy wywołał zdarzenie preparing w praktyce spowoduje anulowanie interakcji i zapobiegnie wywołaniu zdarzenia select .

Właściwości target i currentTarget zdarzenia obie wskazują obiekt, dla którego jest zarejestrowany detektor — albo menu, albo jedną z jego pozycji.

Zdarzenie preparing jest wywoływane przed zdarzeniem displaying . Na ogół aplikacja wykrywa tylko jedno z tych zdarzeń.

Select:
Po wybraniu przez użytkownika pozycji polecenia, pozycja wywołuje zdarzenie select dla wszystkich zarejestrowanych detektorów. Pozycji podmenu i separatora nie można wybrać, dlatego nigdy nie wywołują zdarzenia select .

Zdarzenie select jest propagowane w górę z pozycji menu do menu, w której jest zawarta, a następnie dalej do menu głównego. Zdarzenia select można wykrywać bezpośrednio dla pozycji; można je wykrywać również wyżej w strukturze menu. Podczas wykrywania zdarzenia select dla menu wybraną pozycję można wskazać za pomocą właściwości target zdarzenia. Podczas propagacji w hierarchii menu bieżący obiekt menu wskazywany jest we właściwości currentTarget .

Uwaga: Obiekty ContextMenu i ContextMenuItem wywołują zdarzenia menuItemSelect i menuSelect oraz zdarzenia select , preparing i displaying .

Skróty klawiszowe do poleceń menu rodzimych (AIR)

Do polecenia menu można przypisać odpowiednik klawisza (nazywany czasami klawiszem skrótu). Pozycja menu wywołuje zdarzenie select dla wszystkich zarejestrowanych detektorów w momencie naciśnięcia klawisza lub kombinacji klawiszy. Aby polecenie zostało wywołane, menu zawierające pozycję musi być częścią menu aplikacji lub aktywnym oknem.

Odpowiedniki klawiszy mają dwie części: ciąg reprezentujący klawisz podstawowy oraz tablicę klawiszy modyfikatorów, które również muszą zostać naciśnięte. Aby przypisać klawisz podstawowy, należy ustawić dla tego klawisza właściwość keyEquivalent pozycji menu na pojedynczy znak. Jeśli użyta zostanie wielka litera, klawisz Shift zostanie automatycznie dodany do tablicy modyfikatorów.

W systemie Mac OS X domyślnym modyfikatorem jest klawisz Command ( Keyboard.COMMAND ). W systemie Windows i Linux jest nim klawisz Control ( Keyboard.CONTROL ). Te klawisze domyślne są dodawane do tablicy modyfikatorów automatycznie. Aby przypisać inne klawisze modyfikatorów, należy przypisać do właściwości keyEquivalentModifiers nową tablicę zawierającą pożądane kody klawiszy. Domyślna tablica zostanie zastąpiona. Niezależnie od tego, czy używane są modyfikatory domyślne, czy przypisana została własna tablica modyfikatorów, dodany zostanie klawisz Shift, jeśli ciąg przypisany do właściwości keyEquivalent jest wielką literą. Stałe kodów klawiszy używane dla klawiszy modyfikatorów są zdefiniowane w klasie Keyboard.

Przypisany ciąg odpowiednika klawisza jest wyświetlany automatycznie pod nazwą pozycji menu. Format zależy od systemu operacyjnego użytkownika i ustawień systemu.

Uwaga: Jeśli w systemie operacyjnym Windows do tablicy klawiszy modyfikatorów przypisana zostanie wartość Keyboard.COMMAND , żaden odpowiednik klawisza nie zostanie wyświetlony w menu. Jednak do aktywacji polecenia menu należy użyć klawisza Control.

Poniższy przykład przypisuje klawisze Ctrl+Shift+G jako odpowiednik klawisza dla pozycji menu:

var item:NativeMenuItem = new NativeMenuItem("Ungroup"); 
item.keyEquivalent = "G"; 

Ten przykład przypisuje klawisze Ctrl+Shift+G jako odpowiednik klawisza, bezpośrednio ustawiając tablicę modyfikatorów:

var item:NativeMenuItem = new NativeMenuItem("Ungroup"); 
item.keyEquivalent = "G"; 
item.keyEquivalentModifiers = [Keyboard.CONTROL]; 
Uwaga: Odpowiedniki klawiszy wywoływane są tylko dla menu aplikacji i okien. Jeśli użytkownik doda odpowiednik klucza do menu kontekstowego lub podręcznego, odpowiednik klucza zostanie wyświetlony w etykiecie menu, ale skojarzone polecenie menu nigdy nie zostanie wywołane.

Mnemonika (AIR)

Mnemoniki są częścią interfejsu klawiatury systemu operacyjnego dla menu. Systemy Linux, Mac OS X i Windows umożliwiają użytkownikom na otwieranie menu i wybieranie poleceń za pomocą klawiatury, ale istnieją dla nich delikatne różnice.

W systemie Mac OS X użytkownik wpisuje pierwszą lub dwie pierwsze litery menu lub polecenia, a następnie nacisk klawisz Return. Właściwość mnemonicIndex jest ignorowana.

W systemie Windows znaczenie ma tylko jedna litera. Domyślnie literą znaczącą jest pierwszy znak etykiety, ale jeśli do pozycji przypisany zostanie mnemonik, wówczas znakiem znaczącym stanie się wskazana litera. Jeśli dwie pozycje w menu mają te same znaki znaczące (bez względu na to, czy mnemonik został przypisany czy nie), wówczas interakcja klawiatury i menu nieznacznie się zmienia. Zamiast nacisnąć pojedynczą literę w celu wybrania menu lub polecenia, użytkownik musi nacisnąć literę tyle razy, ile konieczne jest do podświetlenia żądanej pozycji, a następnie nacisnąć klawisz Enter, aby dokonać wyboru. Aby zachować konsekwentne działanie, należy przypisać unikalny mnemonik dla każdej pozycji menu w menu okien.

System Linux nie udostępnia domyślnych mnemonik. Dla właściwości mnemonicIndex należy określić wartość pozycji menu, aby udostępnić mnemonik.

Znak mnemonika należy określić indeksem ciągu etykiety. Indeksem pierwszego znaku etykiety jest 0. Dlatego, aby użyć znaku „r” jako mnemonika dla pozycji menu z etykietą „Format”, należy ustawić właściwość mnemonicIndex na wartość 2.

var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.mnemonicIndex = 2; 

Stan pozycji menu

Pozycje menu mają dwie właściwości stanu, checked i enabled :

checked
Ustawiona na wartość true wyświetla obok etykiety pozycji znacznik wyboru.
var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.checked = true; 

enabled
Przełącza wartość między true i false , aby sterować aktywnością polecenia. Wyłączone pozycje są „wyszarzone” i nie można wywoływać dla nich zdarzeń select .
var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.enabled = false; 

Dołączanie obiektu do pozycji menu

Właściwość data klasy NativeMenuItem umożliwia odwoływanie się do arbitralnego obiektu w każdej pozycji. Na przykład: w menu „Open Recent (Otwórz ostatnie)” można przypisać obiekt File każdego dokumentu do każdej pozycji menu.

var file:File = File.applicationStorageDirectory.resolvePath("GreatGatsby.pdf") 
var menuItem:NativeMenuItem = docMenu.addItem(new NativeMenuItem(file.name)); 
menuItem.data = file;