<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>_nec &#187; adobe</title>
	<atom:link href="http://nec.shell8.net/tag/adobe/feed/" rel="self" type="application/rss+xml" />
	<link>http://nec.shell8.net</link>
	<description>webfejlesztés, front-end programozás, javascript, css, xhtml, ajax, air</description>
	<lastBuildDate>Wed, 31 Aug 2011 06:54:12 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Adobe AIR 1.5</title>
		<link>http://nec.shell8.net/2008/11/18/adobe-air-15/</link>
		<comments>http://nec.shell8.net/2008/11/18/adobe-air-15/#comments</comments>
		<pubDate>Tue, 18 Nov 2008 09:17:23 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[update]]></category>
		<category><![CDATA[webkit]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=211</guid>
		<description><![CDATA[Megjelent  az újabb AIR verzió, melyet hasonló mérföldkőnek szántak az Adobenál mint az 1.0-át anno. Lássuk mit kapunk ezzel a frissítéssel. Titkosított helyi adatbázis Ha eddig &#8211; valahol joggal &#8211; óczkodtál nagyobb üzleti alkalmazás AIR re portolásától, mert nem tartottad elég biztonságosnak, akkor most már közelebb állhat hozzád az AIR, mivel lehetőség van titkosított adatbázisok [...]]]></description>
			<content:encoded><![CDATA[<p>Megjelent  az újabb AIR verzió, melyet hasonló mérföldkőnek szántak az Adobenál mint az 1.0-át anno. Lássuk mit kapunk ezzel a frissítéssel.</p>
<p><span id="more-211"></span></p>
<p><strong>Titkosított helyi adatbázis</strong></p>
<p>Ha eddig &#8211; valahol joggal &#8211; óczkodtál nagyobb üzleti alkalmazás AIR re portolásától, mert nem tartottad elég biztonságosnak, akkor most már közelebb állhat hozzád az AIR, mivel lehetőség van titkosított adatbázisok - <a href="http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS8AFC5E35-DC79-4082-9AD4-DE1A2B41DAAF.html">Encrypted Local Store (ELS)</a> -  használatára, melyekbe nagyobb mennyiségű adat is belepakolható.</p>
<h3>Flash Player 10</h3>
<p>Az Adobe Flash legújabb üdvöskéje mostmár futhat AIRben is, a 10es verzióval azt remélik, hogy 3D-s flash alkalmazások serege jelenhet meg ebben a környezetben is.</p>
<h3>WebKit update</h3>
<p>Frissítették a beépített webkit motort, legfontosabb itt a Squirrelfish JS motor beemelése, amit a Safarival már megtettek. A tesztek során az Adobenál átlagosan 35%-os sebességnövekedést mértek a fejlesztők, kíváncsian várjuk.</p>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/11/18/adobe-air-15/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Adobe AIR #6 SQLite JavaScriptből</title>
		<link>http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/</link>
		<comments>http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/#comments</comments>
		<pubDate>Wed, 22 Oct 2008 15:17:17 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[sql]]></category>
		<category><![CDATA[sqlite]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=20</guid>
		<description><![CDATA[Szünet után folytatva az Adobe AIR-ről szóló sorozatom, most az AIR beépített SQL adazbázis kezelését igyekszem bemutatni. Pár példával letudjuk az alapvető, az SQL lekérdező nyelvben ismert műveletet, majd kitérek pár optimalizációs megoldásra. Az AIR futtatókörnyezet tartalmaz egy SQLite adatbázis kezelő osztálycsomagot, melyet nyugodtan használhatunk adatok tárolására, kezelésére és szinkonizálására.  Annak, aki nem ismeri, erről az [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://nec.shell8.net/wp-content/uploads/2008/10/sqlite.gif"><img src="http://nec.shell8.net/wp-content/uploads/2008/10/sqlite.gif" alt="" title="SQLite logo" width="105" height="105" class="alignleft size-full wp-image-193" /></a>Szünet után folytatva az Adobe AIR-ről szóló sorozatom, most az AIR beépített SQL adazbázis kezelését igyekszem bemutatni. Pár példával letudjuk az alapvető, az SQL lekérdező nyelvben ismert műveletet, majd kitérek pár optimalizációs megoldásra.</p>
<p><span id="more-20"></span></p>
<p>Az AIR futtatókörnyezet tartalmaz egy <a href="http://www.sqlite.org/">SQLite</a> adatbázis kezelő osztálycsomagot, melyet nyugodtan használhatunk adatok tárolására, kezelésére és szinkonizálására.  Annak, aki nem ismeri, erről az adatbázis rendszerről talán a legfontosabb amit érdemes nagy vonalakban elmondani, az az, hogy komplex file és memória struktúrák helyett egyetlen bináris file-ban tárolja az adatbázist. Mivel egy file és bináris, ezt a filet hordozhatjuk bármilyen rendszerre, ahol szintén használható, már ha létezik az adott rendszerre SQLite verzió.</p>
<p>Ennek köszönhető, hogy már rengeteg alkalmazás és operációs rendszer él ezzel a minimalista, de rendes relációs adatbázisrendszerrel, mint pl a Skype vagy a Firefox illetve a Mac OSX, jópár Symbian alapú mobiltelefon és minden iPhone vagy iPod Touch.</p>
<p>AIRben az adatbázishoz JavaScript segítségével férünk hozzá, mely elsőre szürreális élmény lehet azoknak, akik eddig csak <em>rendes </em>szerveroldali nyelvekben tettek hasonlókat.</p>
<h3>Szinkron &#8211; aszinkron műveletek</h3>
<p>Mint JS-ben rengeteg minden, az adatbázis műveleteink is lehetnek <strong>szinkron </strong>folyamatok, illetve eseményfüggők, így <strong>aszinkron </strong>lefutású kódok. Mindkettőnek van előnye ill. hátránya, a szinkron műveletek kódolás szempontjából egyszerűbbek, nem kell eseménykezelőkkel babrálni, de amíg lefut, a programunk malmozik/homokórázik használhatatlan csendben. Nem is ajánlott, csak nagyon kicsi adatbázisokkal, kevés adattal használni.</p>
<p>Az aszinkron műveletekre már készülni kell a kódunkban, eseményeket kell elkapni, adatokat mozgatni, de cserébe folyamatos marad a felhasználói élmény, meg valahogy ez közelebb is áll ahhoz a fejlesztési stílushoz, amit manapság az AJAX-al teletűzdelt weboldalak, alkalmazások megkívánnak tőlünk.</p>
<h3>Csatlakozás az adatbázishoz</h3>
<p>Lássuk az elejét, vegye elő alkalmazásunk az adatbázist.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> dbFile <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">File</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;app:/db/database.db&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> db <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">SQLConnection</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
db.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span>dbFile<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Meghatározunk egy File pointert ami az SQLite adatbázis filera mutat, az <em>app:/</em> relatív elérési útvonal az alkalmazásunk telepített helye a fájlrendszeren. Majd létrehozzuk a kapcsolatot az adatbázishoz és megnyitjuk azt, SQLite esetén ez az a file amit megadunk neki, egy file &#8211; egy adatbázis.</p>
<p>Létrehozunk egy <em>SQLConnection </em>objektumot, majd megnyitjuk vele az adatbázist. Az <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/data/SQLConnection.html">SQLConnection</a>-nek van sok eseménye, amit érdemes figyelni, leginkább talán az <em>air.SQLErrorEvent.ERROR</em> -t, ha hiba van. Az adatbázis megnyitása történhet az <em>open </em>metódussal, ha szinkron, és az <em>openAsync </em>metódussal, ha aszinkron műveletekkel szeretnénk dolgozni.</p>
<p>Aszinkron műveletek során minden lefuttatott kérést figyeltetni kell majd egy a<em>ir.SQLEvent.RESULT</em> eseményre, de most időhiányában nem térek ki az aszinkron műveletekre.</p>
<h3>SQL műveletek</h3>
<p>Miután alkalmazásunk csatlakozott az adatbázishoz, az SQL műveletek nagy része már nem sokban különbözik a más nyelvekben megszokott módoktól. Létrehozunk egy <em>SQLStatement </em>objektumot, megadjuk neki melyik adatbázist használja, és hogy mi a művelet.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>4
5
6
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> statement <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">SQLStatement</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
statement.<span style="color: #660066;">sqlConnection</span> <span style="color: #339933;">=</span> db<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// az adatbázis</span>
statement.<span style="color: #660066;">text</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;SELECT name, value FROM options&quot;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// a művelet</span></pre></td></tr></table></div>


<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">statement.<span style="color: #660066;">execute</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
<span style="color: #003366; font-weight: bold;">var</span> results <span style="color: #339933;">=</span> statement.<span style="color: #660066;">getResult</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// eredmények kiolvasása az SQLStatement objektumból</span>
<span style="color: #003366; font-weight: bold;">var</span> numResults <span style="color: #339933;">=</span> results.<span style="color: #660066;">data</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> 
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> numResults<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> 
<span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> row <span style="color: #339933;">=</span> result.<span style="color: #660066;">data</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    row.<span style="color: #000066;">name</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// a mezőértékek asszociatív tömbben</span>
    row.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Aszinkron műveletek során egy <em>air.SQLEvent.RESULT</em> eseményt kell figyeltetni az <em>SQLStatement </em>objektumon, de az eseménykezelőben a kód már ugyanez.<br />
 <br />
INSERT, UPDATE és DELETE műveleteknél nincs különbség, ha a statement.execute(); lefut, illetve van<br />
<em>air.SQLEvent.RESULT</em> esemény, akkor volt sikeres a művelet.</p>
<h3>Hibakezelés</h3>
<p>Aszinkron műveleteknél az <em>air.SQLErrorEvent.ERROR</em> esemény figyelésekor kapott esemény-objektum hordozza a hibaüzenetet, szinkron műveletek esetén használjuk a <em>try-catch</em> szerkezetet, az elkapott kivétel tartalmazza majd a hiba okát.</p>
<h3>Tippek, optimalizálás</h3>
<p><strong>AUTOINCREMENT </strong>- ilyen típusu oszlopoknál INSERT után az eredményobjektum <em>lastInsertRowID </em>paramétere hordozza az új ID-t</p>
<p><strong>Paraméterezett műveletek</strong> &#8211; az AIR minden SQL műveletet alacsonyabb szintű műveleti kódra fordít, és úgy tárol, amíg nem változik a művelet szerkezete. Sok, hasonló szerkezetű művelet esetén ezt érdemes kihasználni a művelet paraméterezésével.</p>
<p>Ilyenkor az SQL művelet kódját felkészítjük változók fogadására, s azokat később adhatjuk hozzá vagy módosíthatjuk ahelyett, hogy újraírnánk vagy újra példányosítanánk egy <em>SQLStatement </em>objektumot.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>17
18
19
20
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">statement.<span style="color: #660066;">text</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;INSERT INTO options(name, value)&quot;</span> <span style="color: #339933;">+</span> 
                 <span style="color: #3366CC;">&quot;VALUES (:optionName, :optionValue)&quot;</span><span style="color: #339933;">;</span> 
statement.<span style="color: #660066;">parameters</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;:optionName&quot;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;title&quot;</span><span style="color: #339933;">;</span>
statement.<span style="color: #660066;">parameters</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;:optionValue&quot;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Adobe AIR #6 SQLite JavaScriptből&quot;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Később, ha ugyanerre a műveletere van szükség, csak a már példányosított <em>SQLStatement </em>objektumot kell újra elővenni, és módosítani a paramétereket az <em>execute()</em> előtt. Ennek a módszernek előnye az erőforrás kímélésen és a műveletek gyorsaságán kívül az, hogy védelmet nyújt az esetleges sql-injection sebezhetőségek ellen.</p>
<p><strong>Tranzakciók</strong> &#8211; sok, logikailag valamilyen szinten összetartozó műveletet (írás/olvasás) érdemes egy tranzakcióba helyezni, összességében gyorsabb lesz a művelet.</p>
<p>Tranzakciókat az <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/data/SQLConnection.html#begin()">air.SQLConnection.begin()</a> &#8211; <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/data/SQLConnection.html#commit()">.commit()</a> &#8211; illetve <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/data/SQLConnection.html#rollback()">.rollback()</a> metódusaival tudunk kezelni.</p>
<h3>Előre csomagolt adatbázisok, külső segédeszközök</h3>
<p>Természetesen nem kell minden adatbázist helyben elkészíteni és kezdeti adatokkal, struktúrával feltölteni, lehetséges előre csomagolni az adatbázis állományt a letöltött AIR csomaggal. Csak ügyeljünk arra, hogy updatek esetén ne legyen gond esetleges felülírásból.</p>
<p>Az adatbázis kezeléséhez érdemes valami SQLmanager programot szerezni, vannak kifejezetten SQLitehoz kiadott programok, illetve AIRben is írtak már ilyen eszközt.</p>
<p>Nekem az <a href="http://www.sqlmaestro.com/products/sqlite/maestro/">SQLite Maestro</a> nevű vállt be, igaz csak 30napos verziót néztem, de egész használhatónak bizonyult. </p>
<p><strong>Eddig az Adobe AIR-ről:</strong></p>
<ul>
<li><a href=" http://nec.shell8.net/2008/10/14/eval-adobe-air-ben/">Eval(); Adobe AIR-ben</a></li>
<li><a href="http://nec.shell8.net/2008/07/11/adobe-air-nativ-menukezeles/">#5 Natív menükezelés</a></li>
<li><a href="http://nec.shell8.net/2008/07/05/adobe-air-dragndrop-filefeltoltes/">#4 Drag’n&#8217;Drop és Filefeltöltés</a></li>
<li><a href="http://nec.shell8.net/2008/06/25/adobe-air-esemenyek">#3 Események</a></li>
<li><a href="http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles">#2 Ablakkezelés</a></li>
<li><a href="http://nec.shell8.net/2008/06/19/adobe-air-alapok">#1 Az alapok</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>Eval() Adobe AIR -ben?</title>
		<link>http://nec.shell8.net/2008/10/14/eval-adobe-air-ben/</link>
		<comments>http://nec.shell8.net/2008/10/14/eval-adobe-air-ben/#comments</comments>
		<pubDate>Tue, 14 Oct 2008 08:15:01 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[eval]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[workaround]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=125</guid>
		<description><![CDATA[Leggyakrabban talán JSON stringek objektumokká alakításakor jön elő ez a probléma. Az Adobe AIR környezet biztonsági okokból korlátozza az eval() javascript metódust. Ez a szigor erősen indokolt, de nem okoz megoldhatatlan problémát. Nézzük a megoldást, de előbb az okokat, amiért így lett kialakítva a futtatókörnyezet. Valamit valamiért, avagy amiért nincs eval(). MIt csinál az eval()? [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-140 noborder" title="air_vent" src="http://nec.shell8.net/wp-content/uploads/2008/10/air_vent.jpg" alt="" width="240" height="130" />Leggyakrabban talán JSON stringek objektumokká alakításakor jön elő ez a probléma. Az Adobe AIR környezet biztonsági okokból korlátozza az <em><a href="http://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/eval">eval()</a></em> javascript metódust. Ez a szigor erősen indokolt, de nem okoz megoldhatatlan problémát.</p>
<p>Nézzük a megoldást, de előbb az okokat, amiért így lett kialakítva a futtatókörnyezet.</p>
<p><span id="more-125"></span><strong>Valamit valamiért, avagy amiért nincs eval().</strong></p>
<p>MIt csinál az eval()? Végrehajt egy string formában megadott javascript kódsort, minden előztetes cécó nélkül.</p>
<p>Az AIRből pedig kivették azt a biztonsági szigorítást, hogy AJAX kérések csak azon a domainen futhatnak, ahol az oldal amit látogatunk. Bárhonnan fogadhatunk akármilyen javascript kódokat, akár fileszinten is betáplálva az alkalmazásunkba.</p>
<p>Ez eléggé hasznos, révén így igazi, online forrásokra támaszkodó, nyitott API-kat nyújtó webszolgáltatásokat kihasználó alkalmazást alkothatunk. De veszélyeket is rejt, révén az AIR alkalmazásunk hozzáfér a kliens filerendszeréhez. Nem lenne túl jó, ha egy pl egy chatprogram evalozott JSON stringjeiben tudatlanul kiadnánk személyesebb adatokat tartalmazó fájljainkat.</p>
<p>Az alkalmazásunk egy izolált környezetben fut, angol nevén ez a <em>sandbox</em>. Ezen belül vezették be az Adobe fejlesztői az alábbi szigorításokat:</p>
<ul>
<li><strong>eval() futtatások</strong> csak az onLoad előtt működnek</li>
<li><strong>szinkron XMLHttpRequests</strong> kérések onLoad előtt nem adnak választ, <strong>aszinkron XMLHttpRequests</strong> kéréseket el lehet küldeni onLoad előtt, de azok válasza csak onLoad után érkezhet meg</li>
<li>onLoad után a <strong>document.write()</strong> és a <strong>document.writeln()</strong> függvények nem kerülnek lefutásra</li>
<li>htmlből hivatkozva <strong>scripteket</strong> nem lehet <strong>betölteni </strong>a <em>sandbox</em>-on <strong>kívülről</strong></li>
<li>dinamikusan létrehozott <strong>&lt;script&gt; elemek</strong> nem kerülnek lefutásra.</li>
</ul>
<p> <br />
<strong>Karantén, avagy a non-application sandbox</strong></p>
<p>Lehetőségünk van több ilyen <em>sandbox</em>-ot létrehozni, hogy ne akadjanak össze esetleg a használt rendszerek. Ezekben a &#8220;karanténokban&#8221; ismét visszakapjuk az eval()-t, újra megvan a domainre vonatkozó szigor, de semmit se láthatunk magából az AIR futtatókörnyezetből.</p>
<p>Ezeket például IFRAME -ek segítségével valósíthatjuk meg, az alkalmazás html kódjába helyezve valami hasonlót:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;">	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;iframe</span> </span>
<span style="color: #009900;">		<span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;frameId&quot;</span></span>
<span style="color: #009900;">		<span style="color: #000066;">sandboxRoot</span>=<span style="color: #ff0000;">&quot;http://plurk.com/&quot;</span> </span>
<span style="color: #009900;">		<span style="color: #000066;">documentRoot</span>=<span style="color: #ff0000;">&quot;app:/&quot;</span> </span>
<span style="color: #009900;">		<span style="color: #000066;">src</span>=<span style="color: #ff0000;">&quot;nonapp_sandbox.html&quot;</span> </span>
<span style="color: #009900;">		<span style="color: #000066;">frameborder</span>=<span style="color: #ff0000;">&quot;0&quot;</span> </span>
<span style="color: #009900;">		<span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;0&quot;</span> </span>
<span style="color: #009900;">		<span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;0&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000; font-weight: bold;">&lt;/iframe<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>ID &#8211; amivel majd DOMon keresztül hivatkozunk rá<br />
sandboxRoot &#8211; az a domain amire a karanténon belül szűkítjük a lekéréseket<br />
documentRoot &#8211; amennyiben ez &#8220;app:/&#8221;, akkor kapunk megfelelő <em>non-application sandbox</em> -ot<br />
src &#8211; a html amit betöltünk majd az IFRAME-be</p>
<p><img class="alignnone size-full wp-image-136" title="Air Application Sandboxes" src="http://nec.shell8.net/wp-content/uploads/2008/10/air_abra.jpg" alt="" width="500" height="235" /></p>
<p>Most, hogy van egy szeparált környezetünk, ahol működik az <em>eval(),</em> már csak össze kell kötni a két <em>sandbox</em>-ot. Ezt az AIR egy <em><strong>childSandboxBridge </strong></em>nevű interfészen keresztül tudja megvalósítani.</p>
<p>Az IFRAME-be dugott htmlben hozzunk létre pár függvényt. Először definiálni kell mit akarunk az IFRAME-en kívülre adni a childSandboxBridge-en keresztül.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #009966; font-style: italic;">/* nonapp_sandbox.html */</span>
	window.<span style="color: #000066;">onLoad</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>		    
		window.<span style="color: #660066;">childSandboxBridge</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'myEval'</span><span style="color: #339933;">:</span> myEval<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>			
	<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Majd definiáljuk magát a függvényt amit átadunk.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>4
5
6
7
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #009966; font-style: italic;">/* nonapp_sandbox.html */</span>
	<span style="color: #003366; font-weight: bold;">function</span> myEval<span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>str<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Tehát maga az eval() ebben a zárt környezetben fut le, a végeredményt adja át az alkalmazásnak. Bármi ártalmas kód ami itt végrehajtódik, próbálhozhat, nem fér hozzá az AIR környezethez, s azon keresztül a rendszerhez.</p>
<p>Az alkalmazásunkban onLoad eseménykor definiáljuk a childSandboxBridge interfészen át kapott függvényt.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #009966; font-style: italic;">/* application.html */</span>
	window.<span style="color: #000066;">onLoad</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		window.<span style="color: #660066;">myEval</span> <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'frameId'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">contentWindow</span>.<span style="color: #660066;">childSandboxBridge</span>.<span style="color: #660066;">myEval</span><span style="color: #339933;">;</span>		
	<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>És ennyi, most már használhatjuk eval helyett ezt a saját függvényt. Még kényelmesebb, ha pl az általunk használt javascript keretrendszer érzékenyebb részeit módosítjuk úgy, hogy működjenek ezen az interfészen keresztül, és akkor későbbiekben már észre se vesszük ezt a problémát.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>10
11
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #009966; font-style: italic;">/* application.html */</span>
	<span style="color: #003366; font-weight: bold;">var</span> evaledCode <span style="color: #339933;">=</span> window.<span style="color: #660066;">myEval</span><span style="color: #009900;">&#40;</span> code_string <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><strong>Eddig az Adobe AIR-ről:</strong></p>
<ul>
<li><a href="http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/">#6 SQLite JavaScriptből</a></li>
<li><a href="http://nec.shell8.net/2008/07/11/adobe-air-nativ-menukezeles/">#5 Natív menükezelés</a></li>
<li><a href="http://nec.shell8.net/2008/07/05/adobe-air-dragndrop-filefeltoltes/">#4 Drag’n&#8217;Drop és Filefeltöltés</a></li>
<li><a href="http://nec.shell8.net/2008/06/25/adobe-air-esemenyek">#3 Események</a></li>
<li><a href="http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles">#2 Ablakkezelés</a></li>
<li><a href="http://nec.shell8.net/2008/06/19/adobe-air-alapok">#1 Az alapok</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/10/14/eval-adobe-air-ben/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Plurker béta</title>
		<link>http://nec.shell8.net/2008/08/06/plurker-beta/</link>
		<comments>http://nec.shell8.net/2008/08/06/plurker-beta/#comments</comments>
		<pubDate>Wed, 06 Aug 2008 15:03:14 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[client]]></category>
		<category><![CDATA[desktop]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[plurk]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=65</guid>
		<description><![CDATA[Lehet tesztelni, valamennyire épkézláb állapotba került a plurk desktop kliens, amit csinálgatok pár napja. Erősen béta, alapfunkciókat tud már, a többi meg majd szépen fejlődik, nyáriszünet után. Augusztus végén folytköv.]]></description>
			<content:encoded><![CDATA[<p>Lehet tesztelni, valamennyire épkézláb állapotba került a <a href="http://nec.shell8.net/plurker/">plurk desktop kliens</a>, amit csinálgatok pár napja.</p>
<p>Erősen béta, alapfunkciókat tud már, a többi meg majd szépen fejlődik,<br />
nyáriszünet után.</p>
<p>Augusztus végén folytköv.</p>
<p><span id="more-65"></span><br />
<a href="http://nec.shell8.net/plurker/"><img class="size-full wp-image-64" title="Plurker" src="http://nec.shell8.net/wp-content/uploads/2008/08/plurker.gif" alt="Plurker is a desktop client for Plurk, created with Adobe® AIR™." width="500" height="153" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/08/06/plurker-beta/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Lightroom 2</title>
		<link>http://nec.shell8.net/2008/07/29/lightroom-2/</link>
		<comments>http://nec.shell8.net/2008/07/29/lightroom-2/#comments</comments>
		<pubDate>Tue, 29 Jul 2008 07:50:54 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[CR2]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[lightroom]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=47</guid>
		<description><![CDATA[Gradiens filterek, külső szerkesztőfelületek bevonása (pl noiseNinja, PTlens !!! ), Camera Raw 4.5, rakatnyi új eszköz &#8230; többek között ezekkel lehet örülni a Lightroom 2-nek,  amiből 30 napos trial is van. Valóra vált álom, hangzásra, most jön majd a próba. Plusz link:változások a beta release -hez képest]]></description>
			<content:encoded><![CDATA[<p>Gradiens filterek, külső szerkesztőfelületek bevonása (pl noiseNinja, PTlens !!! ), Camera Raw 4.5, <a href="http://www.computer-darkroom.com/lr2_review/lr2-review-3.htm">rakatnyi új eszköz</a> &#8230; többek között ezekkel lehet örülni a <a href="http://www.adobe.com/products/photoshoplightroom/">Lightroom 2</a>-nek,  amiből <a href="https://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop_lightroom">30 napos trial is van</a>. Valóra vált álom, hangzásra, most jön majd a próba.</p>
<p>Plusz link:<a href="http://lightroom-news.com/2008/07/29/what-are-the-main-changes-from-the-lightroom-20-beta-to-the-release-version/">változások a beta release -hez képest </a></p>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/07/29/lightroom-2/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Adobe AIR #5 Natív menükezelés</title>
		<link>http://nec.shell8.net/2008/07/11/adobe-air-nativ-menukezeles/</link>
		<comments>http://nec.shell8.net/2008/07/11/adobe-air-nativ-menukezeles/#comments</comments>
		<pubDate>Fri, 11 Jul 2008 11:48:23 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[contextmenu]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[menu]]></category>
		<category><![CDATA[nativemenu]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=26</guid>
		<description><![CDATA[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, [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<p>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.<br />
<span id="more-26"></span><br />
<a href="http://nec.shell8.net/wp-content/uploads/2008/06/air_context.jpg"><img class="alignnone size-full wp-image-27" title="Adobe AIR kontext menü" src="http://nec.shell8.net/wp-content/uploads/2008/06/air_context.jpg" alt="" width="530" height="176" /></a></p>
<h4><a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/display/NativeMenu.html">air.NativeMenu</a></h4>
<p>Egy egyszerű menü létrehozásával kezdjük, azt, hogy ez hol jelenik majd meg, majd később döntjük el.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> createFileMenu<span style="color: #009900;">&#40;</span>menuType<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> temp<span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> menu <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">NativeMenu</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
temp <span style="color: #339933;">=</span> menu.<span style="color: #660066;">addItem</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">NativeMenuItem</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Új&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
temp.<span style="color: #660066;">keyEquivalent</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'n'</span><span style="color: #339933;">;</span>
temp.<span style="color: #660066;">data</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'new'</span><span style="color: #339933;">;</span>
&nbsp;
temp <span style="color: #339933;">=</span> menu.<span style="color: #660066;">addItem</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">NativeMenuItem</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Megnyitás&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
temp.<span style="color: #660066;">keyEquivalent</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'o'</span><span style="color: #339933;">;</span>
temp.<span style="color: #660066;">data</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'open'</span><span style="color: #339933;">;</span>
&nbsp;
temp <span style="color: #339933;">=</span> menu.<span style="color: #660066;">addItem</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">NativeMenuItem</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Mentés&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
temp.<span style="color: #660066;">keyEquivalent</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'s'</span><span style="color: #339933;">;</span>
temp.<span style="color: #660066;">data</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'save'</span><span style="color: #339933;">;</span>
&nbsp;
menu.<span style="color: #660066;">addItem</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">NativeMenuItem</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//szeparátor</span>
&nbsp;
temp <span style="color: #339933;">=</span> menu.<span style="color: #660066;">addItem</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">NativeMenuItem</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Kilépés&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
temp.<span style="color: #660066;">keyEquivalent</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'q'</span><span style="color: #339933;">;</span>
temp.<span style="color: #660066;">data</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'quit'</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">item</span> <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> menu.<span style="color: #660066;">items</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">item</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
menu.<span style="color: #660066;">items</span><span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span>air.<span style="color: #660066;">Event</span>.<span style="color: #660066;">SELECT</span><span style="color: #339933;">,</span> menuItemSelectHandler <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000066; font-weight: bold;">return</span> menu<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> menu <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">NativeMenu</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
menu.<span style="color: #660066;">addSubmenu</span><span style="color: #009900;">&#40;</span>createFileMenu<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;File&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>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.</p>
<p>Az <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/display/NativeMenuItem.html">air.NativeMenuItem</a> még további lehetőségeket ad amit elvárhatunk egy menütől pl.:</p>
<ul>
<li>aktív / inaktív menü</li>
<li>pipálható menü</li>
<li>billentyű vezérlés</li>
</ul>
<p>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.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> itemSelected<span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> message <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;Kiválasztott menü: <span style="color: #000099; font-weight: bold;">\&quot;</span>&quot;</span> <span style="color: #339933;">+</span> event.<span style="color: #660066;">target</span>.<span style="color: #660066;">label</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\&quot;</span> adat: &quot;</span> <span style="color: #339933;">+</span> event.<span style="color: #660066;">target</span>.<span style="color: #660066;">data</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;.&quot;</span><span style="color: #339933;">;</span>
air.<span style="color: #660066;">Introspector</span>.<span style="color: #660066;">Console</span>.<span style="color: #660066;">dump</span><span style="color: #009900;">&#40;</span>message<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>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.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>air.<span style="color: #660066;">NativeApplication</span>.<span style="color: #660066;">supportsMenu</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// OSX</span>
    air.<span style="color: #660066;">NativeApplication</span>.<span style="color: #660066;">nativeApplication</span>.<span style="color: #660066;">menu</span> <span style="color: #339933;">=</span> menu<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>air.<span style="color: #660066;">NativeWindow</span>.<span style="color: #660066;">supportsMenu</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// windows</span>
    window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">menu</span> <span style="color: #339933;">=</span> menu<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ne felejtsük el, hogy windows alatt a transparent és chrome mentes ablakokra nem lehetséges igy menüt csatolni &#8211; 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 <em>air.NativeApplication.supportsDockIcon</em> és az <em>air.NativeApplication.supportsSystemTrayIcon</em> vizsgálatát teszi lehetővé.</p>
<p>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 <em>contextmenu</em> esemény jelzi nekünk.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'hasContextMenu'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">'contextmenu'</span> <span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    menu.<span style="color: #660066;">display</span><span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">stage</span><span style="color: #339933;">,</span> event.<span style="color: #660066;">clientX</span><span style="color: #339933;">,</span> event.<span style="color: #660066;">clientY</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Ennyi a pozícionálás, és megjelenítés. A kívánt menü kiválasztásakor eltűnik.</p>
<p>Következő alkalommal az AIR-be épített SQLite adatbázist veszem elő.</p>
<h3>Update: menük egyenesen XMLből és JSONból</h3>
<p>Ú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.</p>
<p>Az XML <em>(textContextMenu.xml)</em>:</p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;root<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;menuitem</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Első menü&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span> 
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;menuitem</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Második menü&quot;</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;check&quot;</span> <span style="color: #000066;">toggled</span>=<span style="color: #ff0000;">&quot;true&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span> 
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;menuitem</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Harmadik menü&quot;</span> <span style="color: #000066;">enabled</span>=<span style="color: #ff0000;">&quot;false&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span> 
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;menuitem</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;separator&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span> 
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;menuitem</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Negyedik menü&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span> 
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;menuitem</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Almenu 1, 4&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span> 
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;menuitem</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Almenu 2, 4&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span> 
        <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;menuitem</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Almenu 3, 4&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span> 
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/menuitem<span style="color: #000000; font-weight: bold;">&gt;</span></span></span> 
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/root<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<p>És a beemelése:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">            <span style="color: #003366; font-weight: bold;">var</span> textMenu <span style="color: #339933;">=</span> air.<span style="color: #660066;">ui</span>.<span style="color: #660066;">Menu</span>.<span style="color: #660066;">createFromXML</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;textContextMenu.xml&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
            air.<span style="color: #660066;">ui</span>.<span style="color: #660066;">Menu</span>.<span style="color: #660066;">setAsContextMenu</span><span style="color: #009900;">&#40;</span>textMenu<span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;contextEnabledText&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
            <span style="color: #006600; font-style: italic;">// az alapértelmezett context menü kikapcsolása</span>
            air.<span style="color: #660066;">ui</span>.<span style="color: #660066;">Menu</span>.<span style="color: #660066;">setAsContextMenu</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><strong>Eddig az Adobe AIR-ről:</strong></p>
<ul>
<li><a href=" http://nec.shell8.net/2008/10/14/eval-adobe-air-ben/">Eval(); Adobe AIR-ben</a></li>
<li><a href="http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/">#6 SQLite JavaScriptből</a></li>
<li><a href="http://nec.shell8.net/2008/07/05/adobe-air-dragndrop-filefeltoltes/">#4 Drag’n&#8217;Drop és Filefeltöltés</a></li>
<li><a href="http://nec.shell8.net/2008/06/25/adobe-air-esemenyek">#3 Események</a></li>
<li><a href="http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles">#2 Ablakkezelés</a></li>
<li><a href="http://nec.shell8.net/2008/06/19/adobe-air-alapok">#1 Az alapok</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/07/11/adobe-air-nativ-menukezeles/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Adobe AIR #4 Drag&#8217;n&#039;Drop és Filefeltöltés</title>
		<link>http://nec.shell8.net/2008/07/05/adobe-air-dragndrop-filefeltoltes/</link>
		<comments>http://nec.shell8.net/2008/07/05/adobe-air-dragndrop-filefeltoltes/#comments</comments>
		<pubDate>Sat, 05 Jul 2008 17:52:05 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[dragndrop]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[file]]></category>
		<category><![CDATA[files]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[upload]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=24</guid>
		<description><![CDATA[Az alapok után, ismerve az ablakkezelést és az eseményeket nézzünk meg egy összetettebb kérdéskört. 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&#8217;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, [...]]]></description>
			<content:encoded><![CDATA[<p>Az <a href="/2008/06/19/adobe-air-alapok/">alapok után</a>, ismerve az <a href="/2008/06/23/adobe-air-ablakkezeles/">ablakkezelést</a> és az <a href="/2008/06/25/adobe-air-esemenyek/">eseményeket</a> nézzünk meg egy összetettebb kérdéskört. </p>
<p>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ű <em>drag&#8217;n'drop</em> 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.<br />
<span id="more-24"></span></p>
<h3>Események</h3>
<p>A drag&#8217;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.</p>
<p>Eseményszinten nézve ezt az alábbiak alkotják:<br />
<strong>a forrás az adatmozgatás eredete<br />
</strong></p>
<ul>
<li>dragstart &#8211; a művelet kezdetén</li>
<li>drag &#8211; folyamatosan a mozgatás ideje alatt</li>
<li>dragend &#8211; az adat &#8220;elengedésekor&#8221;</li>
</ul>
<p><strong>a forrás a mozgatás célpontja illetve lehetséges célpontjai</strong></p>
<ul>
<li>dragover &#8211; folyamatosan küldi, mikor a mozgatott adat az elem fölött van</li>
<li>dragenter &#8211; mikor a mozgatott adat belép az elem fölé</li>
<li>dragleave &#8211; mikor a mozgatott adat elhagyja az elemet</li>
<li>drop &#8211; mikor a felhasználó az elemre <em>ejti</em> a mozgatott adatot</li>
</ul>
<p>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.</p>
<p>Az eseményen belül innentől a <em>dataTransfer</em> objektumra koncentrálunk, ez tartalmazza a művelet során érkező adatokat.</p>
<h3>Adat típusok</h3>
<p>A böngészők nagy általánosságban az alábbi típusokat kezelik le a művelet során:<br />
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.</p>
<p>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.</p>
<p>Az AIR mozgatható adattípusai a következőek:</p>
<ul>
<li>Text &#8211; sima szöveg<br />
(<em>&#8220;text/plain&#8221;</em>)</li>
<li>HTML &#8211; html struktúrált szöveg<br />
(<em>&#8220;text/html&#8221;</em>)</li>
<li>URL &#8211; egy vagy több link<br />
(<em>&#8220;text/uri-list&#8221;</em>)</li>
<li>Bitmap &#8211; bittérkép, kép adat<br />
(<em>&#8220;image/x-vnd.adobe.air.bitmap&#8221;</em>)</li>
<li>File list &#8211; file lista, egy vagy több helyi file-t tartalmaz<br />
(<em>&#8220;application/x-vnd.adobe.air.file-list&#8221;</em>)</li>
</ul>
<p>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 <em>dataTransfer.types </em>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.</p>
<p>Most &#8211; miután látjuk mikor és mit mozgathat a felhasználó &#8211; jön az, hogy mit kezdhet illetve kezdjen az adattal.</p>
<h3>effectAllowed, dropEffect</h3>
<p>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 <em>dataTransfer.</em><em>effectAllowed</em> és a fogadónál a <em>dataTransfer.</em><em>dropEffect</em>. Értékei a következők lehetnek:</p>
<ul>
<li>none &#8211; nincs/nem draggelhető adat, vagy az adott adattípust nem fogadja az elem</li>
<li>copy &#8211; másolás</li>
<li>move &#8211; mozgatás</li>
<li>link &#8211; linkelés</li>
<li>copyLink &#8211; másolás vagy linkelés</li>
<li>copyMove &#8211; másolás vagy mozgatás</li>
<li>linkMove &#8211; linkelés vagy mozgatás</li>
<li>all &#8211; mindegyik</li>
</ul>
<p>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 &#8216;all&#8217; értékkel jön, mi pedig jelezhetjük egy file feltöltésnél hogy ez csak &#8216;copy&#8217; azaz másolás lesz a lehetséges műveletek közül, ekkor az egérkurzor jelzi ezt nekünk.</p>
<h3>Drop</h3>
<p>A művelet vége a <em>drop</em> esemény, ekkor kezdhetjük meg a feldolgozását az adatnak amit kaptunk. Az eseményből a <em>dataTransfer.getData( </em>string<em> mimetype )</em> metódussal nyerhetjük ki azt az adatot, amire típus alapján szükségünk van. A <em>mimetype </em>paraméter a fent ismertetett típusok egyike.</p>
<p>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>
<h3>Példa: filefeltöltés drag&#8217;n'drop -ra</h3>
<p>A tanulmányozás során négy zónát raktam le htmlbe ahova huzogathatok adatokat:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</pre></td><td class="code"><pre class="xml" style="font-family:monospace;">	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;target link&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Linkeket ide<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		Ez csak linkeket fogad.
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;target text&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Szövegelj ide<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		Ez csak szöveget fogad.
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;target file&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Fileok jöhetnek<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		Ez csak fileokat fogad.
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;div</span> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">&quot;target image&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;h1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>Képes vagyok<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h1<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		Ez csak képeket fogad.
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>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 <em>.bind</em> eseménykezélese egyelőre erre nem jó, mert a továbbított Event objektum nem tartalmazza a <em>dataTransfer</em> objektumot.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>19
20
21
22
23
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'div.target'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span>s<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		s.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;dragenter&quot;</span><span style="color: #339933;">,</span> dragEnterOver<span style="color: #009900;">&#41;</span>
		s.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;dragover&quot;</span><span style="color: #339933;">,</span> dragEnterOver<span style="color: #009900;">&#41;</span>
		s.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;drop&quot;</span><span style="color: #339933;">,</span> dragDrop<span style="color: #009900;">&#41;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

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

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>24
25
26
27
28
29
30
31
32
33
34
35
36
37
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">    <span style="color: #003366; font-weight: bold;">function</span> dragEnterOver<span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		event.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'link'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">types</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;text/uri-list&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;link&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">types</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;text/plain&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;copy&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'file'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">types</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;application/x-vnd.adobe.air.file-list&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;copy&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> $<span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">target</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'image'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">types</span>.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;image/x-vnd.adobe.air.bitmap&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&gt;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;copy&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
			event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">dropEffect</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #339933;">;</span>			
		<span style="color: #009900;">&#125;</span>        
    <span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Mivel a statikus HTML elemek alapból nem támogatják a drag&#8217;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.</p>
<p>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ű.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">    <span style="color: #003366; font-weight: bold;">function</span> dragDrop<span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> list <span style="color: #339933;">=</span> event.<span style="color: #660066;">dataTransfer</span>.<span style="color: #660066;">getData</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;application/x-vnd.adobe.air.file-list&quot;</span><span style="color: #009900;">&#41;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">typeof</span> list <span style="color: #339933;">!=</span> <span style="color: #3366CC;">&quot;undefined&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #003366; font-weight: bold;">var</span> request <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">URLRequest</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;http://valami.tavoli.domain.hu/upload.php&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #000066; font-weight: bold;">in</span> list <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				list<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">upload</span><span style="color: #009900;">&#40;</span>
					request<span style="color: #339933;">,</span>
					<span style="color: #3366CC;">'filefile'</span>
				<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				<span style="color: #006600; font-style: italic;">// örömünkben írjuk ki a fileok neveit</span>
				air.<span style="color: #660066;">Introspector</span>.<span style="color: #660066;">Console</span>.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>list<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>A <em>getData</em> és a <em>mime-type</em> használatával kinyerjük a fileokat (40.), ez minden esetben egy file lista, melynet tagjai <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/filesystem/File.html">File</a> objektumok. Ha megnézzük a doksiban, látható, hogy van egy <em><a href="http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&#038;file=00002204.html">upload</a></em> metódusa, amit a <em>FileReference</em> 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 <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/net/URLRequest.html">URLRequest</a> társaságában, fel is tölti őket.</p>
<p>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.</p>
<p><strong>Eddig az Adobe AIR-ről:</strong></p>
<ul>
<li><a href=" http://nec.shell8.net/2008/10/14/eval-adobe-air-ben/">Eval(); Adobe AIR-ben</a></li>
<li><a href="http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/">#6 SQLite JavaScriptből</a></li>
<li><a href="http://nec.shell8.net/2008/07/11/adobe-air-nativ-menukezeles/">#5 Natív menükezelés</a></li>
<li><a href="http://nec.shell8.net/2008/06/25/adobe-air-esemenyek">#3 Események</a></li>
<li><a href="http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles">#2 Ablakkezelés</a></li>
<li><a href="http://nec.shell8.net/2008/06/19/adobe-air-alapok">#1 Az alapok</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/07/05/adobe-air-dragndrop-filefeltoltes/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Adobe AIR #3 Események</title>
		<link>http://nec.shell8.net/2008/06/25/adobe-air-esemenyek/</link>
		<comments>http://nec.shell8.net/2008/06/25/adobe-air-esemenyek/#comments</comments>
		<pubDate>Wed, 25 Jun 2008 16:29:41 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[esemény]]></category>
		<category><![CDATA[event]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[js]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=23</guid>
		<description><![CDATA[Az előző részben az ablakkezelésről esett szó Adobe AIR alkalmazásokban, ebben a részben pedig az AIR eseményeiről és eseménykezeléséről írok majd. Rögtön egy ablakkezeléshez is kapcsolódó példával kezdek, amihez szorosan kötődik egy eseménykezelés, nevezetesen az alkalmazás ablak átméretezése. Esetünkben jQuery segíti a DOM eseménykezelést. $&#40;'span#ResizeBottomLeft'&#41;.mousedown&#40;function&#40;&#41;&#123; window.nativeWindow.startResize&#40;air.NativeWindowResize.BOTTOM_LEFT&#41;; &#125;&#41;; Az átméretezés indítsa után az ablak folyamatosan küld [...]]]></description>
			<content:encoded><![CDATA[<p>Az előző részben az <a href="http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles/">ablakkezelésről esett szó</a> Adobe AIR alkalmazásokban, ebben a részben pedig az AIR eseményeiről és eseménykezeléséről írok majd. Rögtön egy ablakkezeléshez is kapcsolódó példával kezdek, amihez szorosan kötődik egy eseménykezelés, nevezetesen az alkalmazás ablak átméretezése.<br />
<span id="more-23"></span><br />
Esetünkben jQuery segíti a DOM eseménykezelést.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'span#ResizeBottomLeft'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mousedown</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">startResize</span><span style="color: #009900;">&#40;</span>air.<span style="color: #660066;">NativeWindowResize</span>.<span style="color: #660066;">BOTTOM_LEFT</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Az átméretezés indítsa után az ablak folyamatosan küld egy <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/events/Event.html#RESIZE">air.Event.RESIZE</a> típusú eseményt, melynek az <em>afterBounds.height</em> és <em>afterBounds.width</em> é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.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">addEventListener</span><span style="color: #009900;">&#40;</span>air.<span style="color: #660066;">Event</span>.<span style="color: #660066;">RESIZE</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		MyChrome.<span style="color: #660066;">resizeHandler</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Mivel a futtatókörnyezet as/flex scriptrendszere szorosan egybeolvadt a javascriptel, nyugodtan használhatjuk a DOM programozásaink során megszokott <a href="http://developer.mozilla.org/en/docs/DOM:element.addEventListener">addEventListener</a> 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.</p>
<p><strong>Esemény mint sültgalamb</strong></p>
<p>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 <em>standard chrome</em> keretű ablakon. Na de mi van akkor ha nincs chrome?</p>
<p>Akkor a bezárást mi indítjuk (<em>milyen hülye szópárosítás</em>), valószínüleg egy onclick eseményre, valami gombszerű elemen a <em>window.nativeWindow.close()</em> segítsével. Ugyan logikus lehetne, de <span style="text-decoration: underline;">nem fut le magától a CLOSING esemény</span>, 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:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #003366; font-weight: bold;">var</span> eClose <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">Event</span><span style="color: #009900;">&#40;</span>air.<span style="color: #660066;">Event</span>.<span style="color: #660066;">CLOSING</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">dispatchEvent</span><span style="color: #009900;">&#40;</span>eClose<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Tehát létrehozzuk az esemény objektumot egy <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/events/Event.html">air.Event</a> 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.</p>
<p>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.</p>
<p><strong>Saját chrome?</strong></p>
<p>Megoldás erre ha átszervezed az alkalmazásod &#8211; hangsúlyozom, itt most nincs <em>chrome</em> ablak, mindent lefejlesztettünk, átrajzoltunk, gyakorlatilag saját <em>chrome</em>-ot csináltunk. Vedd külön azokat a kontrollokat, jellemzőket és metódusokat, amik csak a saját <em>chrome</em>-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 <em>window.nativeWindow.close()</em> 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 <em>window.nativeWindow.close()</em> segítségével.</p>
<p>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!</p>
<p>Legközelebb belevágunk az AIR file-szintű műveleteibe, és csinálunk AIRben flashmentes multi-uploadert, drag-n-drop közbeiktatásával.</p>
<p><strong>Eddig az Adobe AIR-ről:</strong></p>
<ul>
<li><a href=" http://nec.shell8.net/2008/10/14/eval-adobe-air-ben/">Eval(); Adobe AIR-ben</a></li>
<li><a href="http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/">#6 SQLite JavaScriptből</a></li>
<li><a href="http://nec.shell8.net/2008/07/11/adobe-air-nativ-menukezeles/">#5 Natív menükezelés</a></li>
<li><a href="http://nec.shell8.net/2008/07/05/adobe-air-dragndrop-filefeltoltes/">#4 Drag’n&#8217;Drop és Filefeltöltés</a></li>
<li><a href="http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles">#2 Ablakkezelés</a></li>
<li><a href="http://nec.shell8.net/2008/06/19/adobe-air-alapok">#1 Az alapok</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/06/25/adobe-air-esemenyek/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Adobe AIR #2 Ablakkezelés</title>
		<link>http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles/</link>
		<comments>http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles/#comments</comments>
		<pubDate>Mon, 23 Jun 2008 12:16:17 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[window]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=22</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>Az Adobe AIR-ről összeszedett sorozatom <a href="http://nec.shell8.net/2008/06/19/adobe-air-alapok/">első része</a> 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á.<br />
<span id="more-22"></span></p>
<p><a href="http://nec.shell8.net/wp-content/uploads/2008/06/air_window.gif"><img class="alignnone size-full wp-image-31" title="AIR windows" src="http://nec.shell8.net/wp-content/uploads/2008/06/air_window.gif" alt="" width="530" height="184" /></a></p>
<p>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ó <em>application.xml</em>. 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.</p>
<p>Az ID az a futtatókörnyezeten belüli azonosító, valami egyedi legyen, ha netán hivatkozni kell rá (alapesetekben nem).</p>
<p>A FILENAME lesz az elkészült AIR csomag neve.<br />
A NAME, DESCRIPTION mezők tartalma lesz látható például amikor a telepítő fut a felhasználóknál.<br />
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.</p>
<p>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 <em>index.html</em>. A többit <span style="text-decoration: underline;">részben</span> lehet már javascriptből állítani futás közben.</p>
<p>Ezeket a paramétereket a <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/display/NativeWindow.html">NativeWindow</a> 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.</p>
<p>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 <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/display/NativeWindowInitOptions.html">NativeWindowInitOptions</a> objektumsegítségével tudod beállítani őket.</p>
<p><strong><em>systemChrome</em></strong><br />
Ez határozza meg legyen e ablak egyáltalán, tehát keret, fejléc, gombokkal satöbbi. Két értéke lehet, <em>standard</em> vagy<em> none</em>. 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.</p>
<p><strong><em>transparent</em></strong><br />
Az ablak áttetszőségét állítja, egyszerűen <em>true</em> vagy <em>false</em> é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 &#8220;átkattint&#8221; rajta, az alatta futó alkalmazásba.</p>
<p>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.</p>
<p><strong><em>visible</em></strong><br />
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.</p>
<p>A <strong><em>minimizable, maximizable, resizable</em></strong> 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.</p>
<p>A <strong><em>width, height, x, y, minSize, maxSize</em></strong> 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 <span style="text-decoration: underline;">lehet futás közben is módosítani</span> javascript segítségével.</p>
<p>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.<strong><em>type</em></strong>) ami három fajta lehet:</p>
<ul>
<li>NORMAL &#8211; a hagyományos ablak, megjelenik a taskbaron vagy a dokkban</li>
<li>UTILITY &#8211; eszköztár ablak,kissebb mint a hagyományos, olyan mint ami pl a photoshopban az eszközöket tárolja,vannak vezérlői és nem jelenik meg a taskbaron, sem dokkban</li>
<li>LIGHTWEIGHT &#8211; nincs chrome, se vezérlői, nem jelenik meg a taskbaron, sem dokkban. Programüzenetekre és komboboxokra ajánlja a doksi, lehet vele próbálkozni</li>
</ul>
<p>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.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">	<span style="color: #003366; font-weight: bold;">var</span> _width <span style="color: #339933;">=</span> <span style="color: #CC0000;">300</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> _height <span style="color: #339933;">=</span> <span style="color: #CC0000;">200</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> options	<span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">NativeWindowInitOptions</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> content 	<span style="color: #339933;">=</span> air.<span style="color: #660066;">File</span>.<span style="color: #660066;">applicationDirectory</span>.<span style="color: #660066;">resolvePath</span><span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">&quot;ablak.html&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> bounds	<span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">Rectangle</span><span style="color: #009900;">&#40;</span>
		window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">x</span><span style="color: #339933;">,</span>
		window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">y</span><span style="color: #339933;">,</span>
		_width<span style="color: #339933;">,</span>
		_height
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	options.<span style="color: #660066;">minimizable</span>	<span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	options.<span style="color: #660066;">maximizable</span>	<span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	options.<span style="color: #660066;">resizable</span>	<span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
	options.<span style="color: #660066;">systemChrome</span>	<span style="color: #339933;">=</span> air.<span style="color: #660066;">NativeWindowSystemChrome</span>.<span style="color: #660066;">STANDARD</span><span style="color: #339933;">;</span>
	options.<span style="color: #660066;">transparent</span>	<span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
	options.<span style="color: #660066;">type</span>		<span style="color: #339933;">=</span> air.<span style="color: #660066;">NativeWindowType</span>.<span style="color: #660066;">NORMAL</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #003366; font-weight: bold;">var</span> _window <span style="color: #339933;">=</span> air.<span style="color: #660066;">HTMLLoader</span>.<span style="color: #660066;">createRootWindow</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span> options<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> bounds<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	_window.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">new</span> air.<span style="color: #660066;">URLRequest</span><span style="color: #009900;">&#40;</span>content.<span style="color: #660066;">url</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>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.</p>
<p>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).<br />
Példányosítunk egy <em>NativeWindowInitOptions</em> objektumot. (4.) Most jegyezzük meg, hogy nagyon korrektül az AIR objektumokat az <em>air</em> névtérbe tették.</p>
<p>Meghatározzuk az ablakba betöltendő html állományt (5.) Ez az <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/filesystem/File.html">air.File</a> objektummal történik, az <em>applicationDirectory</em> 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 &#8220;ablak/index.html&#8221;).</p>
<p>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.<em>nativeWindow</em> x és y értékeivel valamint az új ablak szélesség és magasság paramétereivel.</p>
<p>Meghatározzuk az ablak átméretezési képességeit az <em>NativeWindowInitOptions</em> objektumban (12-14) és az ablak keretét, átlátszóságát és típusát (16-18).</p>
<p>Majd jöhet a végszó, az air.<a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/html/HTMLLoader.html">HTMLLoader</a> objektum <em>createRootWindow</em> metódusának megadjuk a paramétereket (20), azaz<br />
visible (true),<br />
options (az options objektumunk),<br />
scrollBarsVisible (false, nem kérünk túllógó tartalom esetén scrollbar -t),<br />
bounds (a bounds objektum a méretekkel).</p>
<p>Kapunk egy objektumot, ami a megnyílt ablakot reprezentálja, ebbe betöltjük a html file-t egy <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/net/URLRequest.html">URLRequest</a> formájában, amihez az urlt a tartalmunk elérési útvonala adja (21).</p>
<p>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 <em>window.nativeWindow</em> objektumban keresd:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>26
27
28
29
30
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #000066;">close</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// bezárás</span>
window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">startMove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// mozgatás kezdete, teszemazt mouseDown eseményre</span>
window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">minimize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// ablak minimalizálás</span>
window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">maximize</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// ablak teljes méret</span>
window.<span style="color: #660066;">nativeWindow</span>.<span style="color: #660066;">startResize</span><span style="color: #009900;">&#40;</span>orientation<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// átméretezés kezdete, az orientation átméretezés iránya</span></pre></td></tr></table></div>

<p>Az átméretezés irányait a <a href="http://help.adobe.com/en_US/AIR/1.1/jslr/flash/display/NativeWindowResize.html">NativeWindowResize</a> objektum rejti, olyan formában mint pl &#8220;T&#8221;, &#8220;TL&#8221;, &#8220;BR&#8221; stb.</p>
<p>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ó.</p>
<p><strong>Eddig az Adobe AIR-ről:</strong></p>
<ul>
<li><a href=" http://nec.shell8.net/2008/10/14/eval-adobe-air-ben/">Eval(); Adobe AIR-ben</a></li>
<li><a href="http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/">#6 SQLite JavaScriptből</a></li>
<li><a href="http://nec.shell8.net/2008/07/11/adobe-air-nativ-menukezeles/">#5 Natív menükezelés</a></li>
<li><a href="http://nec.shell8.net/2008/07/05/adobe-air-dragndrop-filefeltoltes/">#4 Drag’n&#8217;Drop és Filefeltöltés</a></li>
<li><a href="http://nec.shell8.net/2008/06/25/adobe-air-esemenyek">#3 Események</a></li>
<li><a href="http://nec.shell8.net/2008/06/19/adobe-air-alapok">#1 Az alapok</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Adobe AIR #1 Az alapok</title>
		<link>http://nec.shell8.net/2008/06/19/adobe-air-alapok/</link>
		<comments>http://nec.shell8.net/2008/06/19/adobe-air-alapok/#comments</comments>
		<pubDate>Thu, 19 Jun 2008 11:06:40 +0000</pubDate>
		<dc:creator>_nec</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[air]]></category>
		<category><![CDATA[js]]></category>

		<guid isPermaLink="false">http://nec.shell8.net/?p=21</guid>
		<description><![CDATA[Több ( nemtudom mégy hány, de minimum 6 ) részes Adobe AIR ismertetésbe kezdek, megosztva a tapasztalatokat magyarul a népekkel. Miről is lesz szó. Alapvetően HTML/JS/CSS fejlesztő révén az AIR ezen aspektusa ragadott meg leginkább, tehát főleg az AIR API ezen területeit használva fejlesztek teszt és éles alkalmazásokat. Az AIR adottságai révén kitérek majd picit [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://nec.shell8.net/wp-content/uploads/2008/06/air_logo.jpg"><img class="alignleft size-full wp-image-29" style="float: left; border:none;" title="AIR logo" src="http://nec.shell8.net/wp-content/uploads/2008/06/air_logo.jpg" alt="" width="200" height="200"  /></a>Több <em>( nemtudom mégy hány, de minimum 6 )</em> részes Adobe AIR ismertetésbe kezdek, megosztva a tapasztalatokat magyarul a népekkel.</p>
<p><strong>Miről is lesz szó. </strong><br />
Alapvetően HTML/JS/CSS fejlesztő révén az AIR ezen aspektusa ragadott meg leginkább, tehát főleg az AIR API ezen területeit használva fejlesztek teszt és éles alkalmazásokat.<br />
<span id="more-21"></span><br />
Az AIR adottságai révén kitérek majd picit (nagyonpicit, de jót) a flash/flex képességekre is, de arról majd később.</p>
<p><strong>Mire is jó</strong><br />
Ellentétben pár kezdeményezéssel, hogy webes alkalmazásokat az asztalra húzzunk a saját ablakaival, itt pontosan egy asztali alkalmazást fejleszthetünk, ami biztonságosan hozzáfér a rendszerhez és a nethez is egyaránt. Ha az elképzelésedhez kell net, és állandóan futna a böngészőben, érdemes elgondolkodni azon, hogy átülteted AIR-be. Lehet könnyebben menne mint azt elsőre gondolnád.</p>
<p><strong>Mi kell ehhez az egészhez.</strong><br />
Semmi vészesnek tűnő fejlesztőkörnyezet meg árcédulák, mint pl a Flex Builder 3, vagy a Dreamweaver esetében, az <a href="http://www.aptana.com/studio">Aptana Studio</a> kíváló ingyenes eszközt biztosít számunkra. Én személy szerint az <a href="http://www.aptana.com/docs/index.php/Plugging_Aptana_into_an_existing_Eclipse_configuration">Eclipse modulját</a> használom, kinek hogy.</p>
<p>Szükség lesz továbbá az <a href="http://www.adobe.com/products/air/tools/sdk/">Adobe AIR SDK</a> -ra, ami a szükséges (alapból parancssorból használható) fordítóeszközökön kívül példákkal is szolgál.</p>
<p>És persze nem árt ha megvan maga az <a href="http://get.adobe.com/air/">AIR</a>, hogy a csomagokat és példaprogramokat is láthassuk.</p>
<p>Ha nem tetszik az Aptana akkor használhatod a <a href="http://labs.adobe.com/technologies/dreamweavercs4/">Dreamweaver CS4 bétáját</a>, még ingyenes és támogatja az AIR csomagok összeállítását, de összességében a legjobb eszköz HTMLhez AIRben az Aptana.</p>
<p><strong>Hogy működik.</strong><br />
Lényegében az arcok az Adobe -nál összegyúrták a Flex, Flash actionscript nyelvét a javascripttel. Komolyabban szólva ezt ők úgy hívják, hogy <em>Script Bridging</em>. Javascriptből láthatod a flash runtime API eszközeit, és használhatod őket, többek között ez adja az erejét a dolognak.</p>
<p>Technikailag úgy néz ki a dolog, hogy mindegy miben hozod létre az AIR alkalmazásodat, egy Flex futtatókörnyezetet látsz, ami max egy teljes ablakra húzott HTML megjelenítőt (valami iframe-re emlékeztető megoldás flexben, <em>a laikus flexes</em>) tartalmaz. Ebből js segítségével hozzáférsz az ablak rendszerszintű tulajdonságaihoz, a rendszerhez magához (igen, fileszinten is) és a neten keresztül bármihez. De egyelőre maradjunk az ablakban.</p>
<p><strong>Milyen böngésző.</strong><br />
Sokat vaciláltak rajta állítólag, hogy mit építsenek bele, de végül se nem gecko, se nem ie, hanem a <a href="http://webkit.org/">WebKit</a> lett a nyertes. Hála az égnek. A webkit egy nyílt forrású böngésző, több linuxos böngészőnek és az Apple által használt Safarinak is ez adja a motorját, az egyik legdinamikusabban fejlődő böngészőmotor.</p>
<p>Tehát tömören, saját böngészője van, ami rendelkezik dokumentált extrákkal, pl css téren is. Ami még jobb hír, hogy újabb és újabb AIR futtatókörnyezetek verzióiba is frissítik majd a webkitet, követve annak fejlesztéseit (css forgatás, css árnyékok).</p>
<p><strong>Milyen eddig megszokott eszközöket támogat.</strong><br />
Mivel ez egy szabványos böngésző, mindent, amit azokban megszokhattál. jQuery, Prototype, Ext, DOJO&#8230; nem jelentenek gondot, sőt, talán várható azokhoz plugin ami tartalmaz AIR specifikus metódusokat.</p>
<p>Töldsd le a fentieket, lőjj be egy aptanás példa alkalmazást és kezdj kísérletezni.</p>
<p>Még egy utolsó dolog. Az első amit próbálkozások során hiányoltam az egy Firebug szintű eszköz volt, hogy rendesen debugolhassam azt amit írok. Nem néztem át rendesen a példa kódot, pedig ott van a tetején egy kikommentelt javascript. Ugyanazt az eszközd adja amit a firebug, itt IntroSpector -nak hívják, F12re lehet előhívni ha kell (és ha nem kommenteled ki a forrásban).</p>
<p><a href="http://nec.shell8.net/wp-content/uploads/2008/06/air_introspector.jpg"><img class="alignnone size-full wp-image-28" title="AIR Introspector" src="http://nec.shell8.net/wp-content/uploads/2008/06/air_introspector.jpg" alt="" width="500" height="270" /></a></p>
<p>Következő alkalommal az ablakkezelésről lesz szó.</p>
<p><strong>Eddig az Adobe AIR-ről:</strong></p>
<ul>
<li><a href=" http://nec.shell8.net/2008/10/14/eval-adobe-air-ben/">Eval(); Adobe AIR-ben</a></li>
<li><a href="http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/">#6 SQLite JavaScriptből</a></li>
<li><a href="http://nec.shell8.net/2008/07/11/adobe-air-nativ-menukezeles/">#5 Natív menükezelés</a></li>
<li><a href="http://nec.shell8.net/2008/07/05/adobe-air-dragndrop-filefeltoltes/">#4 Drag’n&#8217;Drop és Filefeltöltés</a></li>
<li><a href="http://nec.shell8.net/2008/06/25/adobe-air-esemenyek">#3 Események</a></li>
<li><a href="http://nec.shell8.net/2008/06/23/adobe-air-ablakkezeles">#2 Ablakkezelés</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://nec.shell8.net/2008/06/19/adobe-air-alapok/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

