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