_nec - webfejlesztés, front-end programozás, javascript, css, xhtml, ajax, air

Adobe AIR #5 Natív menükezelés

Talán az egyik legnagyobb nyűg egy RIA fejlesztésénél a menük lekezelése. Alkalmazás menükkel, context menükkel sokat lendíthetünk az alkalmazásunk használhatóságán és kezelhetőségén. Ha böngészőbe szánt alkalmazást fejlesztesz, valamilyen js/html/css kombót kell alkalmazni, felülbírálni a létező context-menüt, ráhúzni egy designt, ami szép, érthető és használható, ráadásul mindezt böngészőfüggetlenül.

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

Hozzászólások, trackbackek [trackback url]

1. Kaszás Balázs 14:31 | 2008.07.11

   Ha nem unod még: köszi a cikket! :)

   Kérdés: lehet az egyes menuitem-ekhez kép-ikonokat kapcsolni, ami mondjuk megjelenik a szöveg előtt?

2. _nec 14:51 | 2008.07.11

   Úgyfest azt sajna nem. Ellenben találtam egy hasznos lehetőséget, lehetséges eleve XMLből vagy JSONból menüket generálni, mindjárt updatelem a cikket…

3. tzs 16:38 | 2008.07.17

   Szia!
   Segítségedet szeretném kérni, AIRben. Fejlesztenem kell egy webes szoftvert, amolyan hibabejelentő app. Az AIR nem lenne rossz megoldás ahhoz hogy böngészőfüggetlen legyen, és inkább hasonlitson egy app-hoz, viszont mivel PHP alapú a backend, az a kérdésem hogy az AIR-el ezt hogy lehetne kivitelezni. Csak ajaxos megoldásokkal, mert sehol nem találtam olyat, hogy tartalmazna php parsert.

   Emailemre válaszolj.
   Köszi
   tzs

4. _nec 08:13 | 2008.07.18

   Mail ment, összefoglalva: php parsert, ahogy a böngészők sem, az AIR futtatókörnyezet sem tartalmaz. Az adatcserét szerverrel AJAX-al érdemes megoldani, pl json formában. Erre kítűnő az Ext.js, 2.0.2 óta egyre erősebb AIR támogatással, az oldalon van is példa ilyen alkalmazásra.

5. gabesz 04:06 | 2008.09.27

   Úgy látom, te képben vagy AIR-ügyben. Én most olyan megoldást keresek, amivel külső fájlt lehet létrehozni és abban menteni… erre az AIR alkalmas? A menüből kiindulva igen, de persze Save feliratú menüt Flash-ben is lehet csinálni :) Szóval egy AS3-mal programozott AIR alkalmazásból tudnék kimenteni külön állományba? Ha nem, akkor nem állok neki átbogarászni az egészet… :)
   Előre is köszi a választ.

6. _nec 09:12 | 2008.09.27

   Igen, lehet. Mondjuk én az AIR javascriptre vonatkozó doksijára alapozok, de ez az AIR része, tehát flashes AIR alkalmazásokban is használható a File és pl a FileStream osztály.

   Persze az is kérdés lehet mit akarsz menteni külső fileba, mert van lehetőség SQLite file-alapú adatbázisokat kezelni AIRből, de az picit más történet (készül róla poszt, csak idő kevés most)