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żą:
Pakiet
|
Klasy
|
flash.display
|
|
flash.ui
|
|
flash.events
|
|
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;
|
|
|
|
|