AIR alkalmazásunknak lehetősége van más alkalmazásokból különböző adatok fogadására, a GUI-ban megszokott egyszerű drag’n'drop műveletekkel. Míg művelet végrehajtása a felhasználónak könnyű, a háttérben jópár komplexebb dologra kell figyelni. Habár böngészőkben is használható javascript alapokon, webes fejlesztőknek ez eléggé új terület lehet, így előbb nézzük meg a művelet sajátosságait a konkrét példa előtt.

Események

A drag’n'drop műveletnek minimum két résztvevője van, ahonnan indul a drag és ahol végetér, közben pedig azok az elemek is reagálhatnak, melyekkel érintkezésbe kerül a mozgatott adat. A művelet során lényegében csak eseményekre hagyatkozhatunk, ezekkel zajlik az adathordozás.

Eseményszinten nézve ezt az alábbiak alkotják:
a forrás az adatmozgatás eredete

• dragstart – a művelet kezdetén
• drag – folyamatosan a mozgatás ideje alatt
• dragend – az adat “elengedésekor”

a forrás a mozgatás célpontja illetve lehetséges célpontjai

• dragover – folyamatosan küldi, mikor a mozgatott adat az elem fölött van
• dragenter – mikor a mozgatott adat belép az elem fölé
• dragleave – mikor a mozgatott adat elhagyja az elemet
• drop – mikor a felhasználó az elemre ejti a mozgatott adatot

Ezekre az eseményekre figyelve kezelhetjük a műveletet illetve vezethetjük a felhasználót, hogy hova mit mozgathat, ügyelve a felhasználóbarát kezelésre.

Az eseményen belül innentől a dataTransfer objektumra koncentrálunk, ez tartalmazza a művelet során érkező adatokat.

Adat típusok

A böngészők nagy általánosságban az alábbi típusokat kezelik le a művelet során:
text, html, url, file. Ez utóbbi böngészőgyártótól függően még lebontható képre, helyi file-ra, stb.

Fontos megjegyezni. hogy a típust mindíg az adatmozgatás eredete állítja be, az esemény hordozza magával, a fogadó ellenőrizheti. Pl ha a címsorunkból kijelöljük a linket és azt mozgatjuk, az AIR szöveget fog látni. De ha pl az RSS feed ikonját mozgatjuk, már URL-nek látja. Itt a böngésző a forrás, az állítja be a típust.

Az AIR mozgatható adattípusai a következőek:

• Text – sima szöveg
  (“text/plain”)
• HTML – html struktúrált szöveg
  (“text/html”)
• URL – egy vagy több link
  (“text/uri-list”)
• Bitmap – bittérkép, kép adat
  (“image/x-vnd.adobe.air.bitmap”)
• File list – file lista, egy vagy több helyi file-t tartalmaz
  (“application/x-vnd.adobe.air.file-list”)

Ezek a flash képességeire emlékeztethet egyeseket, ami nem csoda, hisz az AIR esetében javascriptből félig flashbe lóg a lábunk. Az adattípust a dataTransfer.types tömb tartalmazza egyszerre többet is hordozhat, hisz pl egy html kódrészlet alapjában véve szöveg, de tartalmazhat linkeket és amúgy html formázott szöveg, így lehet akár három típusa is. Hogy ezeket miként használjuk fel, majd az adatok kinyerésénél megézzük.

Most – miután látjuk mikor és mit mozgathat a felhasználó – jön az, hogy mit kezdhet illetve kezdjen az adattal.

effectAllowed, dropEffect

Az adat forrása a mozgatás kezdetekor meghatározhatja milyen lehetőségek vannak az adat elhelyezését illetően. Az adatokat fogadó alkalmazás pedig kikötheti, hogy ő mit akar végrehajtani ezek közül. Ez a két paraméter az eseményben az dataTransfer.effectAllowed és a fogadónál a dataTransfer.dropEffect. Értékei a következők lehetnek:

• none – nincs/nem draggelhető adat, vagy az adott adattípust nem fogadja az elem
• copy – másolás
• move – mozgatás
• link – linkelés
• copyLink – másolás vagy linkelés
• copyMove – másolás vagy mozgatás
• linkMove – linkelés vagy mozgatás
• all – mindegyik

Az első négy művelet egyenként megfelel az adott rendszer szabvány kurzorainak, amit felvesz az egérkurzor a művelet során. Pl ha intézőből mozgatunk file-t, az ‘all’ értékkel jön, mi pedig jelezhetjük egy file feltöltésnél hogy ez csak ‘copy’ azaz másolás lesz a lehetséges műveletek közül, ekkor az egérkurzor jelzi ezt nekünk.

Drop

A művelet vége a drop esemény, ekkor kezdhetjük meg a feldolgozását az adatnak amit kaptunk. Az eseményből a dataTransfer.getData( string mimetype ) metódussal nyerhetjük ki azt az adatot, amire típus alapján szükségünk van. A mimetype paraméter a fent ismertetett típusok egyike.

Sajnos ez így még korántsem tökéletes, próbálkozásaim során reprodukálható volt az a jelenség, hogy képet böngészőből mozgatva próbáltam elfogadtatni vagy vizsgáltatni AIRben, nagyokat fagyott a futtatókörnyezet. Gyakorlatban inkább a filelistával és feltöltéssel mutatom be a fentieket.

Példa: filefeltöltés drag’n'drop -ra

A tanulmányozás során négy zónát raktam le htmlbe ahova huzogathatok adatokat:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

	<div class="target link">
		<h1>Linkeket ide</h1>
		Ez csak linkeket fogad.
	</div>
	<div class="target text">
		<h1>Szövegelj ide</h1>
		Ez csak szöveget fogad.
	</div>
	<div class="target file">
		<h1>Fileok jöhetnek</h1>
		Ez csak fileokat fogad.
	</div>
	<div class="target image">
		<h1>Képes vagyok</h1>
		Ez csak képeket fogad.
	</div>

Majd oldalbetöltéskor meghatároztam az események lekezelését. Itt jegyezném meg, hogy bár kényelmes használni, sajnos a jQuery .bind eseménykezélese egyelőre erre nem jó, mert a továbbított Event objektum nem tartalmazza a dataTransfer objektumot.

19
20
21
22
23

	$('div.target').each(function(i,s){
		s.addEventListener("dragenter", dragEnterOver)
		s.addEventListener("dragover", dragEnterOver)
		s.addEventListener("drop", dragDrop)
	});

Aztán jöhetnek az eseménykezelők. Az elsőben (dragEnterOver) válogatom le, melyik mezőbe melyik elemet engedem.

24
25
26
27
28
29
30
31
32
33
34
35
36
37

    function dragEnterOver(event){
		event.preventDefault();
		if( $(event.target).hasClass('link') && event.dataTransfer.types.indexOf("text/uri-list") > -1 ){
			event.dataTransfer.dropEffect = "link";
		} else if( $(event.target).hasClass('text') && event.dataTransfer.types.indexOf("text/plain") > -1){
			event.dataTransfer.dropEffect = "copy";
		} else if( $(event.target).hasClass('file') && event.dataTransfer.types.indexOf("application/x-vnd.adobe.air.file-list") > -1 ){
			event.dataTransfer.dropEffect = "copy";
		} else if( $(event.target).hasClass('image') && event.dataTransfer.types.indexOf("image/x-vnd.adobe.air.bitmap") > -1 ){
			event.dataTransfer.dropEffect = "copy";
		} else {
			event.dataTransfer.dropEffect = "none";			
		}        
    }

Mivel a statikus HTML elemek alapból nem támogatják a drag’n'drop-ot, azzal kezdjük, hogy az megakadályozzuk az alapértelmezett reakciót. Majd a zónák osztálynevei és a hordozott adat alapján leválogatjuk, hogy fogadjuk-e, és ha igen, miként fogadjuk az adatot.

Végül a drop esemény lekezelése, kinyerjük az adatot. Ezt most röviden összekötjük egy filelista feltöltéssel HTTP-n keresztül, javascriptből, röviden mert meglepően egyszerű.

38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

    function dragDrop(event){
 
		var list = event.dataTransfer.getData("application/x-vnd.adobe.air.file-list")
 
		if( typeof list != "undefined"){
			var request = new air.URLRequest("http://valami.tavoli.domain.hu/upload.php");
			for (var i in list ){
				list[i].upload(
					request,
					'filefile'
				);
				// örömünkben írjuk ki a fileok neveit
				air.Introspector.Console.log(list[i].name);
			}
		}
	}

A getData és a mime-type használatával kinyerjük a fileokat (40.), ez minden esetben egy file lista, melynet tagjai File objektumok. Ha megnézzük a doksiban, látható, hogy van egy upload metódusa, amit a FileReference objektumból örököl, ami már egy flash objektum. De a js, hála a script összemosásnak, látja ezt a metódust és ha meghívja őket egyenként (44.-51.) egy URLRequest társaságában, fel is tölti őket.

Mára ennyi fért bele, jó kísérletezést, bónusz, vagy házifeladat a copy-paste és a clipboard használatának utánajárni, hasonló ezekhez. Következő részben az AIR alkalmazás natív rendszerszintű menükezelését nézzük meg.

Eddig az Adobe AIR-ről:

• Eval(); Adobe AIR-ben
• #6 SQLite JavaScriptből
• #5 Natív menükezelés
• #3 Események
• #2 Ablakkezelés
• #1 Az alapok

	$('span#ResizeBottomLeft').mousedown(function(){
		window.nativeWindow.startResize(air.NativeWindowResize.BOTTOM_LEFT);
	});

Az átméretezés indítsa után az ablak folyamatosan küld egy air.Event.RESIZE típusú eseményt, melynek az afterBounds.height és afterBounds.width értékeit figyelve módosíthatjuk amit esetleg kell. Az eseményt a a window.nativeWindow objektumon kell elkapni, egy egyszerű addEventListener segítségével.

	window.nativeWindow.addEventListener(air.Event.RESIZE, function(event){
		MyChrome.resizeHandler(event);
	});

Mivel a futtatókörnyezet as/flex scriptrendszere szorosan egybeolvadt a javascriptel, nyugodtan használhatjuk a DOM programozásaink során megszokott addEventListener metódust az AIR események elfogására. Az air.Event.RESIZE gyakorlatilag egy konstans, ami az esemény nevét tartalmazza, az eseményfigyelő pedig feldolgozza a kapott adatokat, ahogy megszokhattuk jsben.

Esemény mint sültgalamb

Saját káromon tanultam, hogy ne várjak magamtól biztosra eseményt. Van pár esemény, pl az air.Event.CLOSING és az air.Event.EXITING, melyek az ablak bezárásánál illetve az alkalmazás bezárásánál sülnek el (ugye az ablak zárás nem feltétlenül azonos az alkalmazás bezárásával, kivéve ha egy ablakból áll az alkalmazás, de eseményszinten akkor is különböznek). A CLOSING esemény lefut, ha rákattintunk a bezár gombra a sima standard chrome keretű ablakon. Na de mi van akkor ha nincs chrome?

Akkor a bezárást mi indítjuk (milyen hülye szópárosítás), valószínüleg egy onclick eseményre, valami gombszerű elemen a window.nativeWindow.close() segítsével. Ugyan logikus lehetne, de nem fut le magától a CLOSING esemény, holott én szeretném az alkalmazásommal elkapni az ablakkezelőtől, hogy pl lementsek adatokat bezárás előtt. Ilyenkor nekünk kell kézzel elküldeni az eseményt is. Lássunk erre is példát:

	var eClose = new air.Event(air.Event.CLOSING, true, true);
	window.nativeWindow.dispatchEvent(eClose);

Tehát létrehozzuk az esemény objektumot egy air.Event példányosítással, majd a kívánt objektumon elküldjük az eseményt. Ha valahol elkapjuk ezt az eseményt, nagyon ügyeljünk arra, hogy ha dolgunkat elvégeztük, zárjuk is be az ablakot.  Az EXITING esetén ugyanez az eljárás.

Van itt viszont egy apró gond, ilyenkor vagy kiküldöd a CLOSING/EXITING eseményt, vagy elvégzed a feladatot a megfelelő metódusokkal, így egyszerre nem mehet.

Saját chrome?

Megoldás erre ha átszervezed az alkalmazásod – hangsúlyozom, itt most nincs chrome ablak, mindent lefejlesztettünk, átrajzoltunk, gyakorlatilag saját chrome-ot csináltunk. Vedd külön azokat a kontrollokat, jellemzőket és metódusokat, amik csak a saját chrome-odat kezelik, és tedd külön az alkalmazás lényegi logikáját. Ekkor a chrome működhet úgy, hogy a bezárás gomb nem a window.nativeWindow.close() metódust hívja meg, hanem a megfelelő eseményt indítja útjára. Ugyanitt ebben a chrome objektumban figyeltesd ezt az eseményt, és ha lefut, végezze el a feladatát már a window.nativeWindow.close() segítségével.

Ekkor az eseményre figyelhet az alkalmazás logika is, megállíthatja azt, elvégezheti a mentést, akármit, és ő zárhat végül. Jó kísérletezést a hétvégére!

Legközelebb belevágunk az AIR file-szintű műveleteibe, és csinálunk AIRben flashmentes multi-uploadert, drag-n-drop közbeiktatásával.

Eddig az Adobe AIR-ről:

• Eval(); Adobe AIR-ben
• #6 SQLite JavaScriptből
• #5 Natív menükezelés
• #4 Drag’n’Drop és Filefeltöltés
• #2 Ablakkezelés
• #1 Az alapok