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

Adobe AIR #2 Ablakkezelés

Az Adobe AIR-ről összeszedett sorozatom első része után a fejlesztő és debug eszközök már rendelkezésünkre állnak, lássunk neki a gyakorlatiasabb példáknak. Ebben a részben az ablakok kezelését fejtem ki, hogy zajlik az alkalmazásunk fő ablakának definiálása, illetve milyen ablakokat és hogyan lehet megnyitni még futás közben ha szükség van rá.

Az alkalmazásunk műküdéséhez minimum két állomány elengedhetetlen, az egyik a html, ami meg fog jelenni, a másik pedig az alkalmazás leíró file-ja, az alap beállításokat, adatokat tartalmazó application.xml. Ezt lehet kézzel szerkeszteni, és van szerkesztőfelület ami szép GUI-t ad az adatok megadásához. Gyorsan nézzük át mi micsoda benne.

Az ID az a futtatókörnyezeten belüli azonosító, valami egyedi legyen, ha netán hivatkozni kell rá (alapesetekben nem).

A FILENAME lesz az elkészült AIR csomag neve.
A NAME, DESCRIPTION mezők tartalma lesz látható például amikor a telepítő fut a felhasználóknál.
A VERSION látszólag nem fontos, de az lesz ha azt szeretnénk később, hogy az alkalmazásunk tudja önmagát frissíteni, ha új verziót publikálunk belőle.

Az alapadatok után jön az induló ablak beállítása. Egy érték kötelező, a CONTENT, ami az a HTML ami először betöltődik a programba, mint weben általában az index.html. A többit részben lehet már javascriptből állítani futás közben.

Ezeket a paramétereket a NativeWindow objektum paraméterei között is megtaláljuk, ezek határoznak meg egy alkalmazás ablakot, legyen az az első, vagy később, futás közben nyitott.

Az alábbiakat futás közben nem állíthatjuk, csak új ablak nyitásakor. Ezek az ablakok inicializáló tulajdonságai, ha új ablakot nyitsz, akkor a NativeWindowInitOptions objektumsegítségével tudod beállítani őket.

systemChrome
Ez határozza meg legyen e ablak egyáltalán, tehát keret, fejléc, gombokkal satöbbi. Két értéke lehet, standard vagy none. Ha nincs chrome, kapunk pár korlátot, pl az ablak gombjaitól érkező események se léteznek, és menüt se csinálhatunk akárhogy az alkalmazásunkba, és minden, ablakkezelést érintő vezérlőt nekünk kell lefejleszteni, de ezekről később.

transparent
Az ablak áttetszőségét állítja, egyszerűen true vagy false értéke lehet. Ha áttetszővé tesszük az ablakunk, lehetséges eltérni a téglalap formától az alkalmazás kinézetében, és vadulni a megjelenítéssel. Viszont ahol áttetsző az ablak, ott tökéletesen az, tehát nem kattintható, nem fogad egér eseményeket, az egér gyakorlatilag “átkattint” rajta, az alatta futó alkalmazásba.

Ha kikapcsoljuk a chrome-ot és átlátszóra állítjuk az ablakot, ha az nem tartalmaz semmit, akkor az alkalmazás futásáról, csak a taskbaron/system trayen az ikon fog árulkodni.

visible
Mikor elindul az alkalmazásunk, látható legyen-e. Nagyon hasznos paraméter, állítható futás közben javascriptel. Olyankor hasznos ha a program induláskor még felépíti a saját chrome -ját, letölt adatokat AJAX segítségével, azokat elrendezi, majd ha minden a helyén, megjelenhet a felhasználónak a készen álló, működő alkalmazás.

A minimizable, maximizable, resizable kapcsolják ki/be a jól megszokott ablakméretezési lehetőségeket. Standard chrome esetén ezeket az ablak natív vezérlői adják, máskülönben nekünk kell gondoskodni róluk.

A width, height, x, y, minSize, maxSize definiálják az ablak kezdeti méreteit, pozícióját, és azt hogy mekkora határok között lehessen méretezni. Ezeket már lehet futás közben is módosítani javascript segítségével.

Maradt egy változó, amit viszont már az application.xml -ben nem állíthatunk, csak a programból nyitott új ablakoknál. Ez az ablak típusa (NativeWindow.type) ami három fajta lehet:

A fentiek nagy részét egyszer kell csak beállítani az application.xml-ben s utána nem kell velük törődni, viszont ha új ablak kell, akkor jó ha megvan, hogy kell, nézzünk erre példát.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	var _width = 300;
	var _height = 200;
 
	var options	= new air.NativeWindowInitOptions();
	var content 	= air.File.applicationDirectory.resolvePath( "ablak.html" );
	var bounds	= new air.Rectangle(
		window.nativeWindow.x,
		window.nativeWindow.y,
		_width,
		_height
	);
	options.minimizable	= false;
	options.maximizable	= false;
	options.resizable	= true;
 
	options.systemChrome	= air.NativeWindowSystemChrome.STANDARD;
	options.transparent	= true;
	options.type		= air.NativeWindowType.NORMAL;
 
	var _window = air.HTMLLoader.createRootWindow( true, options, false, bounds);
	_window.load( new air.URLRequest(content.url ));

No, láthatóan nyakaterkert módon zajlik a dolog, nemhiába az actionscript kitalálói csinálták, de azért a maga módján eléggé logikus.

Lépésről lépésre, először két változóba eltesszük magunknak a szélesség magasság értéket (1,2 sor).
Példányosítunk egy NativeWindowInitOptions objektumot. (4.) Most jegyezzük meg, hogy nagyon korrektül az AIR objektumokat az air névtérbe tették.

Meghatározzuk az ablakba betöltendő html állományt (5.) Ez az air.File objektummal történik, az applicationDirectory az a könyvtár definiált elérése ahol az alkalmazás is van, azon belül lehet alkönyvtárakra hivatkozni a megadott filenévvel (pl “ablak/index.html”).

A méret megadása (6-11) zavaros lehet, létrehozunk egy téglalapot a desktopon ami majd befoglalja az ablakot, itt lehet egy már nyitott ablak pozíciójához relatívan számoltatni a már említett window.nativeWindow x és y értékeivel valamint az új ablak szélesség és magasság paramétereivel.

Meghatározzuk az ablak átméretezési képességeit az NativeWindowInitOptions objektumban (12-14) és az ablak keretét, átlátszóságát és típusát (16-18).

Majd jöhet a végszó, az air.HTMLLoader objektum createRootWindow metódusának megadjuk a paramétereket (20), azaz
visible (true),
options (az options objektumunk),
scrollBarsVisible (false, nem kérünk túllógó tartalom esetén scrollbar -t),
bounds (a bounds objektum a méretekkel).

Kapunk egy objektumot, ami a megnyílt ablakot reprezentálja, ebbe betöltjük a html file-t egy URLRequest formájában, amihez az urlt a tartalmunk elérési útvonala adja (21).

Még egy apró részt említenék meg, ha saját chrome -ot, avagy ablakot szeretnél felépíteni, akkor a szükséges vezérlőket szintén a window.nativeWindow objektumban keresd:

26
27
28
29
30
window.nativeWindow.close(); // bezárás
window.nativeWindow.startMove(); // mozgatás kezdete, teszemazt mouseDown eseményre
window.nativeWindow.minimize(); // ablak minimalizálás
window.nativeWindow.maximize(); // ablak teljes méret
window.nativeWindow.startResize(orientation); // átméretezés kezdete, az orientation átméretezés iránya

Az átméretezés irányait a NativeWindowResize objektum rejti, olyan formában mint pl “T”, “TL”, “BR” stb.

Nem annyira egyszerű elsőre, dehát ez a script átjárhatóság áldozatokkal jár, és meg lehet szokni. Következő alkalommal az AIR-ben előforduló eseményekről és eseménykezelésről lesz szó.

Eddig az Adobe AIR-ről:

cimkék:

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

  1. Kaszás Balázs 15:14 | 2008.06.23

    Köszi nagyszerű post!

  2. Kaszás Balázs 21:31 | 2008.06.24

    A témában egy nagyon jó könyv kezdőknek (tele screenshotokkal):
    http://www.amazon.com/exec/obidos/tg/detail/-/0321524616/

Szólj hozzá







kategóriák


del.icio.us

  • No bookmarks avaliable.

epp olvasom

  • A Clash of Kings

    A Clash of Kings by George R.R. Martin

flickr

  • Tuomas Holopainen - the Imagineer
  • The Flock
  • Christmas Crow
  • Geek joy
  • Fast Food - extreme edition
  • Teide north side
  • Teide National Park
  • Genesis
  • Rado Cerix
  • werk - _nec
  • werk - Strati

back to index