Basisbeginselen van menu's

Flash Player 9 of hoger, Adobe AIR 1.0 of hoger

Lees voor een snelle uitleg en codevoorbeelden van het maken van native menu's in AIR-toepassingen, de volgende snelstartartikelen in de Adobe Developer Connection:

Met de native menuklassen hebt u toegang tot de native menufuncties van het besturingssysteem waarin uw toepassing wordt uitgevoerd. U kunt NativeMenu-objecten gebruiken voor toepassingsmenu's (beschikbaar in Mac OS X), venstermenu's (beschikbaar in Windows en Linux), snelmenu's en pop-upmenu's.

Buiten AIR, kunt u contextmenuklassen gebruiken gebruiken om het contextmenu aan te passen dat automatisch door Flash Player wordt weergegeven wanneer een gebruiker met de rechtermuisknop of met cmd op een object in uw toepassing klikt. (Er wordt geen automatisch contextmenu weergegeven voor AIR-toepassingen.)

Menu-klassen

De menuklassen zijn:

Menutypen

AIR ondersteunt de volgende menutypen:

Contextmenu's
Contextmenu's worden geopend als reactie op klikken met de rechtermuisknop of klikken met de Command-toets ingedrukt op een interactief object in SWF-inhoud of een documentelement in HTML-inhoud.

In de Flash Player runtime wordt automatisch een contextmenu weergegeven. U kunt met de klassen ContextMenu en ContextMenuItem uw opdrachten aan het menu toevoegen. U ook een aantal, maar niet alle, ingebouwde opdrachten verwijderen.

U kunt in AIR-runtime een contextmenu maken met behulp van de klasse NativeMenu of ContextMenu. In HTML-inhoud in AIR kunt u met de API's voor Webkit HTML en JavaScript contextmenu's toevoegen aan HTML-elementen.

Toepassingsmenu's (alleen AIR)
Een toepassingsmenu is een globaal menu dat geldt voor de gehele toepassing. Toepassingsmenu's worden ondersteund in Mac OS X, maar niet in Windows of Linux. In Mac OS X maakt het besturingssysteem automatisch een toepassingsmenu. U kunt de AIR API voor menu's gebruiken om items en submenu's toe te voegen aan de standaardmenu's. U kunt listeners toevoegen om de bestaande menuopdrachten af te handelen. U kunt ook bestaande items verwijderen.

Venstermenu's (alleen AIR)
Een venstermenu is gekoppeld aan één venster en wordt weergegeven onder de titelbalk. U kunt menu's aan een venster toevoegen door een NativeMenu-object te maken en dit toe te wijzen aan de eigenschap menu van het NativeWindow-object. Venstermenu's worden ondersteund in de besturingssystemen Windows en Linux, maar niet in Mac OS X. Native venstermenu's kunnen alleen worden gebruikt met vensters die systeemchroom hebben.

Pictogrammenu's voor koppelings- en systeemtrays (alleen AIR)
Deze pictogrammenu's zijn vergelijkbaar met snelmenu's en worden toegewezen aan een toepassingspictogram in de dok van Mac OS X of het Windows- en Linux-systeemvak op de taakbalk. Dock- en systeemvakpictogrammenu's maken gebruik van de klasse NativeMenu. In Mac OS X worden de items in het menu toegevoegd boven de standaarditems van het besturingssysteem. In Windows of Linux is er geen standaardmenu.

Pop-upmenu's (alleen AIR)
Een pop-upmenu van AIR is vergelijkbaar met een contextmenu, maar is niet noodzakelijkerwijs gekoppeld aan een bepaald toepassingsobject of -onderdeel. U kunt pop-upmenu's op een willekeurige plaats in een venster weergeven door de methode display() van een willekeurig NativeMenu-object op te roepen.

Aangepaste menu's
Native menu's worden volledig door het besturingssysteem samengesteld en bestaan dus buiten de Flash- en HTML-renderingmodellen. In plaats van native menu's kunt u altijd uw eigen aangepaste, non-native menu's maken met MXML, ActionScript of JavaScript (in AIR). Zulke menu's moeten volledig binnen toepassingsinhoud worden gerenderd.

Flex-menu's
Het Adobe® Flex™-framework biedt een set Flex-menucomponenten. De Flex-menu's worden door de runtime getekend in plaats van het besturingssysteem en zijn geen native menu's. Een Flex-menucomponent kan worden gebruikt voor Flex-vensters die niet de systeeminterface gebruiken. Een ander voordeel van het gebruik van Flex-menucomponenten is dat u menu's declaratief kunt opgeven in MXML-indeling. Als u het Flex-framework gebruikt, gebruikt u de Flex-menuklassen voor venstermenu's in plaats van de native klassen.

Standaardmenu's (alleen AIR)

De volgende standaardmenu's worden geleverd door het besturingssysteem of door een ingebouwde AIR-klasse:

  • Toepassingsmenu in Mac OS X

  • Dock-pictogrammenu in Mac OS X

  • Contextmenu voor geselecteerde tekst en afbeeldingen in HTML-inhoud

  • Contextmenu voor geselecteerde tekst in een TextField-object (of een object dat een uitbreiding vormt voor TextField)

Informatie over contextmenu's

In SWF-inhoud kan een object dat gegevens overneemt van InteractiveObject, een contextmenu krijgen. Hiervoor wjist u een menuobject toe aan de eigenschap contextMenu ervan. Een aantal opdrachten is standaard aanwezig, zoals Volgende, Vorige, Afdrukken, Kwaliteit en In-/uitzoomen. In de AIR runtime kan het menuobject dat is toegewezen aan contextMenu van het type NativeMenu of ContextMenu zijn. In de Flash Player runtime is alleen de Contextmenu-variabele beschikbaar.

Wanneer u de klassen ContextMenu en ContextMenuItem gebruikt, kunt u luisteren naar native menugebeurtenissen of contextmenugebeurtenissen; beide worden verzonden. Een van de voordelen van de eigenschappen van het ContextMenuEvent-object is dat contextMenuOwner het object identificeert waaraan het menu is gekoppeld, en dat mouseTarget het object identificeert waarop werd geklikt om het menu te openen. Deze informatie is niet beschikbaar bij het NativeMenuEvent-object.

In het volgende voorbeeld wordt een Sprite-object gemaakt en wordt er een eenvoudig contextmenu voor bewerken aan toegevoegd:

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");}
Opmerking: In tegenstelling tot SWF-inhoud die wordt weergegeven in een browseromgeving, bezitten contextmenu's in AIR geen ingebouwde opdrachten.

Een Flash Player-contextmenu aanpassen

In een browser of projector hebben contextmenu's in SWF-inhoud altijd ingebouwde items. U kunt al deze standaardopdrachten uit het menu verwijderen, behalve de opdrachten Instellingen en Over. Als de werkgebiedeigenschap showDefaultContextMenu wordt ingesteld op false , worden deze opdrachten uit het contextmenu verwijderd.

Als u een aangepast contextmenu voor een specifiek weergaveobject wilt maken, maakt u een nieuwe instantie van de klasse ContextMenu, roept u de methode hideBuiltInItems() aan en wijst u die instantie toe aan de eigenschap contextMenu van die instantie DisplayObject. In het volgende voorbeeld wordt een dynamisch getekend vierkant gemaakt, met een opdracht in het contextmenu om de kleur ervan in een willekeurige kleur te wijzigen:

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 menustructuur (AIR)

Native menu's zijn hiërarchisch. NativeMenu-objecten bevatten onderliggende NativeMenuItem-objecten. NativeMenuItem-objecten die submenu's vertegenwoordigen, kunnen op hun beurt weer NativeMenu-objecten bevatten. Het menuobject van het hoogste niveau (hoofdniveau) in de structuur vertegenwoordigt de menubalk voor toepassings- en venstermenu's. (Context-, pictogram- en pop-upmenu's hebben geen menubalk.)

In het volgende diagram wordt de structuur van een typisch menu geïllustreerd. Het hoofdmenu vertegenwoordigt de menubalk en bevat twee menu-items die verwijzen naar de submenu's File en Edit . Het submenu File in deze structuur bevat twee opdrachtitems en een item dat verwijst naar het submenu Open Recent Menu , dat zelf weer drie items bevat. Het submenu Edit bevat drie opdrachten en een scheidingslijn.

Voor de definitie van een submenu is zowel een NativeMenu- als een NativeMenuItem-object nodig. Het NativeMenuItem-object definieert het label dat wordt weergegeven in het bovenliggende menu en stelt de gebruiker in staat het submenu te openen. Het NativeMenu-object fungeert als container voor items in het submenu. Het NativeMenuItem-object verwijst naar het NativeMenu-object via de eigenschap submenu van het NativeMenuItem.

Zie Voorbeeld van native menu: venster- en toepassingsmenu (AIR) voor een codevoorbeeld waarin dit menu wordt gemaakt).

Menugebeurtenissen

NativeMenu- en NativeMenuItem-objecten verzenden allebei preparing -, displaying - en select -gebeurtenissen:

Preparing: wanneer het object op het punt staat een gebruikersinteractie in gang te zetten, verzenden het menu en de bijbehorende menu-items een preparing -gebeurtenis naar alle geregistreerde listeners. Tot interactie wordt het openen van het menu of het selecteren van een item met een sneltoets gerekend.
Opmerking: De preparing -gebeurtenis is alleen beschikbaar voor Adobe AIR 2.6 en latere versies.
Displaying:
vlak voordat een menu wordt weergegeven, verzenden het menu en de bijbehorende menu-items de gebeurtenis displaying naar alle geregistreerde listeners.

De gebeurtenissen preparing en displaying geven u de mogelijkheid om de menu-inhoud of de weergave van items bij te werken voordat de gebruiker deze ziet. U kunt bijvoorbeeld in de listener voor de gebeurtenis displaying van het menu “Open Recent” de menu-items wijzigen zodat de lijst van onlangs bekeken documenten wordt weergegeven.

Als u het menu-item verwijdert waarvan de sneltoets een preparing -gebeurtenis heeft geactiveerd, wordt de menu-interactie in feite geannuleerd en wordt geen select -gebeurtenis verzonden.

De target - en currentTarget -eigenschappen van de gebeurtenis zijn beide het object waarop de listener is geregistreerd: het menu zelf of een van de menu-items.

De preparing -gebeurtenis wordt verzonden vóór de displaying -gebeurtenis. Over het algemeen wordt naar een van de twee gebeurtenissen geluisterd, niet naar allebei.

Select:
Wanneer de gebruiker een opdrachtitem kiest, verzendt dat item de gebeurtenis select naar eventuele geregistreerde listeners. Submenu- en scheidingslijnitems kunnen niet worden geselecteerd en verzenden dus nooit de gebeurtenis select .

De gebeurtenis select stroomt omhoog van een menu-item naar het menu dat dit item bevat, of helemaal naar het hoofdmenu. U kunt luisteren naar select -gebeurtenissen rechtstreeks op een item, of hogerop in de menustructuur. Wanneer u luistert naar de gebeurtenis select op een menu, kunt u het geselecteerde item identificeren met behulp van de eigenschap target van de gebeurtenis. Terwijl de gebeurtenis omhoogstroomt door de menuhiërarchie, identificeert de eigenschap currentTarget van het gebeurtenisobject het huidige menuobject.

Opmerking: ContextMenu- en ContextMenuItem-objecten verzenden menuItemSelect - en menuSelect -gebeurtenissen, evenals select -, preparing - en displaying -gebeurtenissen.

Hoofdalternatieven voor native menu-opdrachten (AIR)

U kunt een toetsequivalent (sneltoets) toewijzen aan een menuopdracht. Het menu-item verzendt de gebeurtenis select naar alle geregistreerde listeners wanneer de toets of toetsencombinatie wordt ingedrukt. De opdracht wordt alleen opgeroepen wanneer het menu dat het item bevat, deel uitmaakt van het menu van de toepassing of het actieve venster.

Toetsequivalenten bestaan uit twee delen: een tekenreeks die de primaire toets vertegenwoordigt en een array van wijzigingstoetsen die ook moeten worden ingedrukt. Om de primaire toets toe te wijzen, stelt u de eigenschap keyEquivalent voor het menu-item in op de uit één teken bestaande tekenreeks voor die toets. Als u een hoofdletter gebruikt, wordt de Shift-toets automatisch toegevoegd aan de wijzigingsarray.

In Mac OS X is de standaard wijzigingstoets de Command-toets ( Keyboard.COMMAND ). In Windows en Linux is het de Ctrl-toets ( Keyboard.CONTROL ). Deze standaardtoetsen worden automatisch toegevoegd aan de wijzigingsarray. Als u andere wijzigingstoetsen wilt toewijzen, wijst u een nieuwe array met de gewenste toetscodes toe aan de eigenschap keyEquivalentModifiers . De standaardarray wordt dan overschreven. Of u nu de standaard wijzigingstoetsen gebruikt dan wel een eigen wijzigingsarray toewijst, de Shift-toets wordt altijd toegevoegd wanneer de tekenreeks die u toewijst aan de eigenschap keyEquivalent een hoofdletter is. Constanten voor de toetscodes die moeten worden gebruikt voor de wijzigingstoetsen, worden gedefinieerd in de klasse Keyboard.

De toegewezen tekenreeks voor het toetsequivalent wordt automatisch weergegeven naast de naam van het menu-item. De indeling is afhankelijk van het besturingssysteem van de gebruiker en de systeemvoorkeuren.

Opmerking: Als u in het Windows-besturingssysteem de waarde Keyboard.COMMAND toewijst aan een toetswijzigingsarray, wordt er geen toetsequivalent weergegeven in het menu. De Control-toets moet dan worden gebruikt om de menuopdracht te activeren.

In het volgende voorbeeld wordt Ctrl+Shift+G toegewezen als toetsequivalent voor een menu-item:

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

In dit voorbeeld wijst u Ctrl+Shift+G als toetsequivalent toe door de wijzigingsarray rechtstreeks in te stellen:

var item:NativeMenuItem = new NativeMenuItem("Ungroup"); 
item.keyEquivalent = "G"; 
item.keyEquivalentModifiers = [Keyboard.CONTROL]; 
Opmerking: Toetsequivalenten worden alleen getriggerd voor toepassings- en venstermenu's. Als u een toetsequivalent toevoegt aan een context- of pop-upmenu, wordt het toetsequivalent weergegeven in het menulabel. De daaraan gekoppelde menuopdracht wordt echter nooit opgeroepen.

Mnemonics (AIR)

Mnemonics (toetsenbordsneltoetsen in de vorm van onderstreepte letters) maken deel uit van de besturingssysteem-toetsenbordinterface voor menu's. In Linux, Mac OS X en Windows kunnen gebruikers menu's openen en opdrachten selecteren met het toetsenbord; er zijn echter kleine verschillen.

In Mac OS X typen de gebruikers de eerste letter of eerste twee letters van het menu of de opdracht waarna op Enter wordt gedrukt. De eigenschap mnemonicIndex wordt genegeerd.

In Windows is maar één letter significant. Standaard is de significante letter het eerste teken van het label. Als u echter een mnemonic toewijst aan het menu-item, wordt de desbetreffende letter het significante teken. Als twee items in een menu hetzelfde significante teken hebben (ongeacht of een mnemonic is toegewezen), verandert de interactie tussen het toetsenbord en het menu enigszins. De gebruiker kan nu niet één letter indrukken om het menu of de opdracht te selecteren, maar moet de letter zo vaak als nodig indrukken om het gewenste item te markeren. Vervolgens moet de gebruiker op Enter drukken om de selectie te voltooien. U behoudt een consistente werking door een unieke mnemonic aan elk item in een menu voor venstermenu's toe te wijzen.

In Linux is geen standaardmnemonic opgegeven. Als u een mnemonic wilt opgeven, moet u een waarde opgeven voor de eigenschap mnemonicIndex van een menu-item.

Geef de gewenste mnemonic op als index bij de labeltekenreeks. De index van het eerste teken van een label is 0. Als u bijvoorbeeld “r” wilt gebruiken als mnemonic voor het menu-item met het label “Format”, stelt u de eigenschap mnemonicIndex in op 2.

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

Status van het menu-item

Menu-items hebben de volgende twee statuseigenschappen: checked en enabled :

checked
Stel deze in op true als u een vinkje wilt weergeven naast het itemlabel.
var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.checked = true; 

enabled
Schakel deze waarde tussen true en false om aan te geven of de opdracht is ingeschakeld. Uitgeschakelde items worden grijs weergegeven en verzenden geen gebeurtenis select .
var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.enabled = false; 

Objecten koppelen aan een menu-item

Met de eigenschap data van de klasse NativeMenuItem kunt u in ieder item verwijzen naar een willekeurig object. Zo kunt u in een menu met recent geopende bestanden bijvoorbeeld het File-object voor ieder document toewijzen aan ieder menu-item.

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