Grunderna i menyer

Flash Player 9 och senare, Adobe AIR 1.0 och senare

Följande snabbstartartiklar på Adobe Developer Connection innehåller information med korta förklaringar och kodexempel på hur du skapar inbyggda menyer i AIR-program:

Med hjälp av klasserna för inbyggda menyer får du åtkomst till funktionerna för inbyggda menyer i det operativsystem som programmet körs på. NativeMenu-objekt kan användas för programmenyer (tillgängligt på Mac OS X), fönstermenyer (tillgängligt på Windows och Linux), kontextmenyer och popupmenyer.

Utanför AIR kan du använda snabbmenyklasserna för att ändra den snabbmeny som visas automatiskt i Flash Player när användaren högerklickar eller Kommando-klickar på ett objekt i programmet. (Det visas ingen automatisk snabbmeny för AIR-program.)

Menyklasser

Menyklasserna omfattar:

Menyurval

AIR kan användas med följande typer av menyer:

Snabbmenyer
Snabbmenyer öppnas när någon högerklickar eller Kommando-klickar på ett interaktivt objekt i SWF-innehåll eller på ett dokumentelement i HTML-innehåll.

I Flash Player-miljön visas en snabbmeny automatiskt. Du kan använda klasserna ContextMenu och ContextMenuItem för att lägga till egna kommandon på menyn. Du kan också ta bort vissa, men inte alla, av de inbyggda kommandona.

I AIR-miljön kan du skapa en snabbmeny med hjälp av klassen NativeMenu eller ContextMenu. I HTML-innehåll i AIR kan du använda WebKits HTML- och JavaScript-API:er för att lägga till snabbmenyer i HTML-element.

Programmenyer (endast AIR)
En programmeny är en global meny som används i hela programmet. Programmenyer stöds på Mac OS X men inte på Windows eller Linux. På Mac OS X skapar operativsystemet automatiskt en programmeny. Du kan använda programmeringsgränssnittet för menyer i AIR för att lägga till alternativ och undermenyer till standardmenyerna. Du kan lägga till avlyssnare för hantering av befintliga menykommandon. Du kan även ta bort befintliga alternativ.

Fönstermenyer (endast AIR)
En fönstermeny är kopplad till ett enda fönster och visas under namnlisten. Du kan lägga till menyer i ett fönster genom att skapa ett NativeMenu-objekt och tilldela det till menu -egenskapen i NativeWindow-objektet. Windows-menyer stöds på operativsystemen Windows och Linux men inte på Mac OS X. Inbyggda fönstermenyer kan bara användas med fönster som har systemfärg.

Menyer för dockan och aktivitetsfältet (endast AIR)
Dessa ikonmenyer liknar kontextmenyer och tilldelas en programikon i dockan på Mac OS X eller i meddelandeområdet i aktivitetsfältet på Windows och Linux. Menyer för docknings- och systemfältsikoner använder klassen NativeMenu. På Mac OS X läggs alternativen till på menyn ovanför operativsystemets standardalternativ. På Windows och Linux finns ingen standardmeny.

Popup-menyer (endast AIR)
Popup-menyerna i AIR fungerar som snabbmenyer men är inte alltid kopplade till särskilda programobjekt eller programkomponenter. Popup-menyer kan visas var som helst i ett fönster genom anrop av metoden display() i ett NativeMenu-objekt.

Anpassade menyer
Inbyggda menyer ritas helt och hållet av operativsystemet och finns därför utanför Flash- och HTML-återgivningsmodellerna. I stället för att använda inbyggda menyer kan du alltid skapa egna, anpassade menyer med MXML, ActionScript eller JavaScript (i AIR). Sådana menyer måste återges helt i programinnehållet.

Flex-menyer
Ramverket Adobe® Flex™ tillhandahåller en mängd Flex-menykomponenter. Flex-menyerna ritas av körningsmiljön i stället för operativsystemet och är inte inbyggda menyer. En Flex-menykomponent kan användas i Flex-fönster utan systemfärg. En annan fördel med Flex-menykomponenterna är att du kan ange menyerna deklarativt i MXML-format. Om du använder Flex-ramverket använder du Flex-menyklasserna för fönstermenyer i stället för inbyggda klasser.

Standardmenyer (endast AIR)

Följande standardmenyer finns i operativsystemet eller en inbyggd AIR-klass:

  • Programmeny på Mac OS X

  • Dockningsikonmeny på Mac OS X

  • Snabbmeny för markerad text och markerade bilder i HTML-innehåll

  • Snabbmeny för markerad text i ett TextField-objekt (eller ett objekt som utökar TextField)

Om snabbmenyer

I SWF-innehåll kan ett objekt som ärvs från InteractiveObject få en viss snabbmeny genom att ett menyobjekt tilldelas dess contextMenu -egenskap. Vissa kommandon finns med som standard, till exempel Framåt, Bakåt, Skriv ut, Kvalitet och Zoom. I AIR-miljön kan det menyobjekt som tilldelats contextMenu vara antingen av typen NativeMenu eller av typen ContextMenu. I Flash Player-miljön är bara klassen ContextMenu tillgänglig.

Du kan avlyssna händelser för inbyggda menyer eller snabbmenyer när du använder ContextMenu- och ContextMenuItem-klasserna, båda skickas. En fördel med ContextMenuEvent-objektegenskaperna är att contextMenuOwner identifierar det objekt som menyn hör till medan mouseTarget identifierar det objekt som användaren klickade på för att öppna menyn. Den här informationen är inte tillgänglig från NativeMenuEvent-objektet.

I följande exempel skapas ett Sprite-objekt och en enkel snabbmeny för redigering läggs till:

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");}
Obs! Till skillnad från SWF-innehåll som visas i en webbläsarmiljö har inte snabbmenyer i AIR några inbyggda kommandon.

Anpassa en snabbmeny i Flash Player

I en webbläsare eller projektor har snabbmenyer i SWF-innehåll alltid inbyggda objekt. Du kan ta bort alla dessa standardkommandon från menyn, utom kommandona Inställningar och Om. Genom att ställa in scenegenskapen showDefaultContextMenu till false tas dessa kommandon bort från snabbmenyn.

Om du vill skapa en egen snabbmeny för ett speciellt visningsobjekt skapar du en ny instans av klassen ContextMenu, anropar metoden hideBuiltInItems() och tilldelar instansen egenskapen contextMenu för den DisplayObject-instansen. I nästa exempel finns en dynamiskt ritad fyrkant med ett snabbmenykommando som ändrar dess färg slumpmässigt:

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 för inbyggda menyer (AIR)

Inbyggda menyer är hierarkiska. NativeMenu-objekt innehåller underordnade NativeMenuItem-objekt. NativeMenuItem-objekt som representerar undermenyer kan i sin tur innehålla NativeMenu-objekt. Menyobjekten på topp- och rotnivå i strukturen representerar menyraden för program- och fönstermenyer. (I snabbmenyer, ikonmenyer och popup-menyer finns ingen menyrad.)

Följande diagram visar strukturen för en vanlig meny. Rotmenyn representerar menyrader och innehåller två menyalternativ som refererar till en File -undermeny och en Edit -undermeny. File-undermenyn i den här strukturen innehåller två kommandoalternativ och ett alternativ som refererar till en Open Recent Menu -undermeny, som själv innehåller tre alternativ. Edit-undermenyn innehåller tre kommandon och en avgränsare.

Om du vill definiera en undermeny krävs både ett NativeMenu-objekt och ett NativeMenuItem-objekt. NativeMenuItem-objektet definierar den etikett som visas på den överordnade menyn och gör att användaren kan öppna undermenyn. NativeMenu-objektet fungerar som en behållare för alternativ på undermenyn. NativeMenuItem-objektet refererar till NativeMenu-objektet via submenu -egenskapen för NativeMenuItem.

Ett exempel med kod som skapar den här menyn finns i Exempel på inbyggd meny: Fönster- och programmeny (AIR) .

Menyhändelser

NativeMenu- och NativeMenuItem-objekt skickar båda preparing -, displaying - och select -händelser:

Preparing: När objektet är på väg att inleda en användarinteraktion skickar menyn och dess menyalternativ en preparing -händelse till alla registrerade avlyssnare. Till interaktioner räknas även att öppna menyn eller välja ett alternativ med ett kortkommando.
Obs! preparing -händelsen är bara tillgänglig för Adobe AIR 2.6 och senare versioner.
Displaying:
Direkt innan en meny visas skickar menyn och dess menyalternativ en displaying -händelse till registrerade avlyssnare.

Med preparing - och displaying -händelserna kan du uppdatera menyinnehållet och alternativen innan allt visas för användaren. I avlyssnaren för displaying -händelsen i en ”Open Recent”-meny kan du till exempel ändra menyalternativen så att de återspeglar den aktuella listan över senast visade dokument.

Om du tar bort det menyalternativ vars kortkommando utlöste en preparing -händelse avbryts menyinteraktionen och ingen select -händelse skickas.

Egenskaperna target och currentTarget för händelsen är båda det objekt för vilket lyssnaren har registrerats: antingen själva menyn eller ett av dess alternativ.

preparing -händelsen skickas före displaying -händelsen. Du lyssnar vanligtvis efter den ena eller andra händelsen, inte båda.

Select:
När ett kommandoalternativ väljs av användaren skickar alternativet en select -händelse till alla registrerade avlyssnare. Undermeny- och avgränsaralternativ kan inte väljas och kan därför aldrig skicka en select -händelse.

En select -händelse ”bubblar upp” från ett menyalternativ till dess övre meny och upp till rotmenyn. Du kan lyssna efter select -händelser direkt vid ett alternativ och du kan lyssna högre upp i menystrukturen. När du lyssnar efter select -händelsen på en meny kan du identifiera det valda alternativet med hjälp av händelsens target -egenskap. När händelsen ”bubblar upp” genom menyhierarkin identifierar händelseobjektets currentTarget -egenskap det aktuella menyobjektet.

Obs! ContextMenu- och ContextMenuItem-objekt skickar menuItemSelect - och menuSelect -händelser liksom select -, preparing - och displaying -händelser.

Tangentkombinationer för inbyggda menykommandon (AIR)

Du kan tilldela en tangentkombination (kallas ibland kortkommando) till ett menykommando. Menyalternativen skickar en select -händelse till alla registrerade avlyssnare när tangenten eller tangentkombinationen trycks ned. Menyn som innehåller alternativet måste ingå i programmets meny eller det aktiva fönstret för att kommandot ska kunna anropas.

Tangentkombinationerna består av två delar – en sträng som representerar den primära tangenten och en array med modifieringstangenter som också måste tryckas ned. Om du vill tilldela en primär tangent anger du menyalternativets keyEquivalent -egenskap som teckensträngen för den tangenten. Om du använder en versal läggs skifttangenten automatiskt till i modifieringsarrayen.

På Mac OS X är kommandotangenten standardmodifierare ( Keyboard.COMMAND ). På Windows och Linux är det CTRL-tangenten ( Keyboard.CONTROL ). De här standardtangenterna läggs automatiskt till i modifieringsarrayen. Om du vill tilldela andra modifieringstangenter tilldelar du en ny array, som innehåller de önskade tangentkoderna, till egenskapen keyEquivalentModifiers . Standardarrayen skrivs över. Oavsett om du använder standardmodifierare eller tilldelar en egen modifieringsarray, så läggs skifttangenten till om den sträng du tilldelar egenskapen keyEquivalent är en versal. Konstanterna för de tangentkoder som ska användas för modifieringstangenterna definieras i klassen Keyboard.

Strängen för den tilldelade tangentkombinationen visas automatiskt bredvid menyalternativnamnet. Formatet beror på användarens operativsystem och systeminställningar.

Obs! Om du tilldelar värdet Keyboard.COMMAND till en tangentmodifieringsarray i operativsystemet Windows visas ingen tangentkombination på menyn. Ctrl-tangenten måste dock användas för att aktivera menykommandot.

I följande exempel tilldelas Ctrl+Skift+G som tangentkombination för ett menyalternativ:

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

I det här exemplet tilldelas Ctrl+Skift+G som tangentkombination genom att ange modifieringsarrayen direkt:

var item:NativeMenuItem = new NativeMenuItem("Ungroup"); 
item.keyEquivalent = "G"; 
item.keyEquivalentModifiers = [Keyboard.CONTROL]; 
Obs! Tangentkombinationer aktiveras bara för program- och fönstermenyer. Om du lägger till en tangentkombination till en snabbmeny eller popup-meny visas tangentkombinationen på menyetiketten, men det tillhörande menykommandot anropas aldrig.

Kortkommandon (AIR)

Kortkommandon är en del av operativsystemets tangentbordsgränssnitt för menyer. På Linux, Mac OS X och Windows kan användare öppna menyer och välja kommandon med tangentbordet, men det finns vissa mindre skillnader.

På Mac OS X skriver användaren de första bokstäverna i meny- eller kommandonamnet och trycker sedan på returtangenten. Egenskapen mnemonicIndex ignoreras.

I Windows är det bara en enda bokstav som behövs. Som standard är den signifikanta bokstaven det första tecknet i etiketten, men om du tilldelar ett kortkommando till menyalternativet så blir det signifikanta tecknet den tilldelade bokstaven. Om två alternativ på en meny har samma signifikanta tecken (oavsett om ett kortkommando har tilldelats eller inte) ändras användarens tangentbordsåtgärder för menyn en aning. I stället för att trycka på en enda bokstav för att välja menyn eller kommandot måste användaren trycka på bokstaven så många gånger som behövs för att markera önskat alternativ och sedan trycka på Retur-tangenten för att avsluta valet. För att upprätthålla ett konsekvent beteende bör du tilldela varje objekt i en fönstermeny ett unikt kortkommandotecken.

På Linux finns inga förvalda kortkommandotecken. Du måste ange ett värde för egenskapen mnemonicIndex för ett menyobjekt för att tilldela det ett kortkommandotecken.

Ange kortkommandotecknet som ett index i etikettsträngen. Index för det första tecknet i en etikett är 0. Om du vill använda ”r” som kortkommando för ett menyalternativ med etiketten ”Format” ska du ange du ett värde för egenskapen mnemonicIndex som är lika med 2.

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

Lägen för menyalternativ

Menyalternativ har två lägesegenskaper, checked och enabled :

checked
Ange som true om du vill visa en kryssmarkering bredvid alternativetiketten.
var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.checked = true; 

enabled
Växla mellan värdena true och false om du vill bestämma vilket kommando som är aktiverat. Inaktiverade alternativ är gråtonade och skickar inga select -händelser.
var item:NativeMenuItem = new NativeMenuItem("Format"); 
item.enabled = false; 

Koppla ett objekt till ett menyalternativ

Med hjälp av klassen NativeMenuItems data -egenskap kan du referera till ett godtyckligt objekt i varje alternativ. På en ”Open Recent”-meny kan du till exempel tilldela File-objektet för varje dokument till varje menyalternativ.

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