Mivel az AIR segítségével írt alkalmazás asztali alkalmazás, rendelkezik az alatta található oprendszer egykét képességével. Egyik ezek közül a natív menükezelés. Nem kell a designra, viselkedésre, különböző böngészőkre időt vesztegetni, használjuk azt a GUI kinézetet menüinkre amit az adott rendszer hagy nekünk.

air.NativeMenu

Egy egyszerű menü létrehozásával kezdjük, azt, hogy ez hol jelenik majd meg, majd később döntjük el.

function createFileMenu(menuType){
var temp;
var menu = new air.NativeMenu();
 
temp = menu.addItem(new air.NativeMenuItem("Új"));
temp.keyEquivalent = 'n';
temp.data = 'new';
 
temp = menu.addItem(new air.NativeMenuItem("Megnyitás"));
temp.keyEquivalent = 'o';
temp.data = 'open';
 
temp = menu.addItem(new air.NativeMenuItem("Mentés"));
temp.keyEquivalent = 's';
temp.data = 'save';
 
menu.addItem(new air.NativeMenuItem("",true)); //szeparátor
 
temp = menu.addItem(new air.NativeMenuItem("Kilépés"));
temp.keyEquivalent = 'q';
temp.data = 'quit';
 
for (var item = 0; item < menu.items.length; item++){
menu.items[item].addEventListener(air.Event.SELECT, menuItemSelectHandler );
}
return menu;
}
 
var menu = new air.NativeMenu();
menu.addSubmenu(createFileMenu(),"File");

Menüt tehát az air.NativeMenu példányosításával készíthetünk és utána lehet almenüt és/vagy funkciót hozzákötni. A példában látszik hogy még a menü struktúrálására is lehetőség van, szeparátorokkal.

Az air.NativeMenuItem még további lehetőségeket ad amit elvárhatunk egy menütől pl.:

• aktív / inaktív menü
• pipálható menü
• billentyű vezérlés

Ezek mellett kell még egy metódus, ami figyeli a menü eseményeket, egyelőre elég ha csak konzolon jelez, onnan már látható milyen adatokat hordoz az esemény.

function itemSelected(event){
var message = "Kiválasztott menü: \"" + event.target.label + "\" adat: " + event.target.data + ".";
air.Introspector.Console.dump(message);
}

Most már csak a menüt kell elérhetővé tenni. Itt kell figyelembe venni, hogy milyen rendszeren fut az alkalmazásunk. Windows alatt a hagyományos rendszermenük az ablakhoz kapcsolódnak, OSX alatt az alkalmazás menüje a menüsorba kerül az asztal tetején. Ezt a futtatókörnyezet képességeivel tesztelhetjük mielőtt megjelenítenénk a menüt.

if(air.NativeApplication.supportsMenu){ // OSX
    air.NativeApplication.nativeApplication.menu = menu;
}
 
if(air.NativeWindow.supportsMenu){ // windows
    window.nativeWindow.menu = menu;
}

Ne felejtsük el, hogy windows alatt a transparent és chrome mentes ablakokra nem lehetséges igy menüt csatolni – révén az ablak láthatatlan. Ami lehetőség marad ilyenkor az az ikonra helyezett menü, vagy a context menü, melyekre amúgy is szükség lehet. Az ikonra helyezett menü ismét az oprendszer tesztelésére kényszerít minket, erre a környezet az air.NativeApplication.supportsDockIcon és az air.NativeApplication.supportsSystemTrayIcon vizsgálatát teszi lehetővé.

Context menü esetén ilyenekre nincs szükség, ott a menü előhívásának az eseményét kell kezelnünk. Mivel használattól függően szükség lehet tetszőleges elemekre, kontrollokra saját menüt kötni, az eseményt ezeken a HTML elemeken kell figyeltetni. Ezt egy e célra fenntartott contextmenu esemény jelzi nekünk.

document.getElementById('hasContextMenu').addEventListener( 'contextmenu' ,function(event) {
    menu.display(window.nativeWindow.stage, event.clientX, event.clientY);
});

Ennyi a pozícionálás, és megjelenítés. A kívánt menü kiválasztásakor eltűnik.

Következő alkalommal az AIR-be épített SQLite adatbázist veszem elő.

Update: menük egyenesen XMLből és JSONból

Úgynézki gondoltak a komplexebb alkalmazásokra, és lehetséges XML és JSON adatformátumokból is menüket generálni. Dokumentációt érdekes módon nem találtam rá, de példát igen, a kipróbálás még hátravan.

Az XML (textContextMenu.xml):

<xml version="1.0" encoding="utf-8" ?> 
<root> 
    <menuitem label="Első menü"/> 
    <menuitem label="Második menü" type="check" toggled="true"/> 
    <menuitem label="Harmadik menü" enabled="false"/> 
    <menuitem type="separator"/> 
    <menuitem label="Negyedik menü"> 
        <menuitem label="Almenu 1, 4"/> 
        <menuitem label="Almenu 2, 4"/> 
        <menuitem label="Almenu 3, 4"/> 
    </menuitem> 
</root>

És a beemelése:

            var textMenu = air.ui.Menu.createFromXML("textContextMenu.xml"); 
            air.ui.Menu.setAsContextMenu(textMenu, "contextEnabledText"); 
 
            // az alapértelmezett context menü kikapcsolása
            air.ui.Menu.setAsContextMenu(null);

Eddig az Adobe AIR-ről:

• Eval(); Adobe AIR-ben
• #6 SQLite JavaScriptből
• #4 Drag’n’Drop és Filefeltöltés
• #3 Események
• #2 Ablakkezelés
• #1 Az alapok