Adobe AIR 2.0 으로 만든 웹브라우져

Adobe AIR로 만든 아주아주 간단한 웹브라우져이다. Adobe AIR는 Webkit 엔진을 내장한 HTMLLoader라는 클래스가 있다. Webkit엔진은 사파리, 구글 크롬등에 사용하는 엔진이다. Flex 4에서는 이것을 HTML로 한번 랩핑해서 사용하고 있다. Adobe AIR에서 이 엔진을 사용하면 로드되는 페이지의 DOM에 직접 접근이 가능하며 DOM 이벤트 발생시 ActionScript 3.0 함수를 호출하게끔 하는 형태로도 변경이 가능해진다. 생각보다 활용도가 무궁무진하다. 게다가 AIR 2.0부터는 한글입력 문제가 해결되었다 . 또한 HTML5/CSS3를 지원하기 시작했다.

아래 코드는 AIR 2.0, Flash Builder 4 Beta 2 환경에서 만들었다. 이 환경을 구축하는 방법은 다음과 같이 한다.

만약 Flash Builder를 설치 안했다면 다음 링크를 통해 받는다.

http://www.adoberia.co.kr/pds/down.html?src=text&kw=000026

AIR 2.0 SDK와 Runtime을 다운로드 받는다.

다운받은 Runtime을 실행해 설치한다.

(MS Windows의 경우)SDK는 압축을 풀고 그안에 있는 내용을 Flash builder가 설치된 sdks/4.0.0과 sdks/3.4.1 폴더에 각각 덮어씌운다. 본인의 경우는 C:\Program Files\Adobe\Adobe Flash Builder Plug-in Beta 2\sdks\4.0.0

Flash Builder를 실행한다.

메뉴에서 File > New > Flex Project를 선택한다.

프로젝트 이름을 적고 Application Type은 AIR를 선택한다. Finish를 한다.

다음 아래 코드를 메인 코드에 복사해서 덮어씌운다.

<?xml version="1.0" encoding="utf-8"?>
<!--
	간단한 Adobe AIR 웹브라우져
	제작 : 지용호 
-->
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/halo"
					   backgroundFrameRate="0.01"
					   windowComplete="windowedapplication1_windowCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import flash.events.Event;
			import flash.net.URLRequest;
			import flash.net.navigateToURL;
			
			import mx.events.AIREvent;

			private function windowedapplication1_windowCompleteHandler(event:AIREvent):void {
				nativeWindow.x = 0;
				nativeWindow.y = 0;
				width = 1280;
				height = 900;
				//browser.htmlLoader.navigateInSystemBrowser = true;
			}
			private function linkClickHandler(o:Object):void {
				navigateToURL( new URLRequest(o.currentTarget.href), "blank" );
			}
			private function browser_locationChangeHandler(event:Event):void {
				trace( "browser_locationChangeHandler" );
				tiAddress.text = browser.location;
				btnBack.enabled = browser.historyPosition==0?false:true;
				btnNext.enabled= (browser.historyPosition < browser.historyLength-1)?true:false;
			}
			private function onGoHandler(event:Event):void {
				browser.location = tiAddress.text;
			}
			private function browser_completeHandler(event:Event):void
			{
				trace( "browser_completeHandler" );
				tiAddress.text = browser.location;
				var dom:Object = HTML(event.currentTarget).domWindow.document;
				var links:Object = dom.getElementsByTagName("a");
				for( var i:Number = 0; i < links.length; i++ ) {
					if( links[i].target.toLowerCase() == "_blank" || links[i].target.toLowerCase() == "_new" ) {
						links[i].onclick = linkClickHandler;
					}
				}
			}
		]]>
	</fx:Script>
	<s:VGroup width="100%" height="100%">
		<s:HGroup verticalAlign="middle" paddingLeft="10" paddingRight="10" paddingTop="5" paddingBottom="5">
			<s:Button id="btnBack" label="뒤로" click="browser.historyBack()"/>
			<s:Button id="btnNext" label="앞으로" click="browser.historyForward()"/>
			<s:Button label="새로고침" click="browser.reload()"/>
			<s:Label text="주소 : "/>
			<s:TextInput id="tiAddress" width="400" enter="onGoHandler(event)"/>
			<s:Button label="가기" click="onGoHandler(event)"/>
		</s:HGroup>
		<s:HGroup verticalAlign="middle" paddingLeft="10" paddingRight="10" paddingTop="5" paddingBottom="5">
			<s:Button label="지돌스타 블로그" click="browser.location='http://blog.jidolstar.com'"/>
			<s:Button label="위콘 블로그" click="browser.location='http://weconize.com'"/>
			<s:Button label="천문노트" click="browser.location='http://astronote.org'"/>
			<s:Button label="Adobe RIA" click="browser.location='http://adoberia.co.kr'"/>
			<s:Button label="Adobe Labs" click="browser.location='http://labs.adobe.com'"/>
			<s:Button label="Adobe Development Center" click="browser.location='http://www.adobe.com/devnet/'"/>
		</s:HGroup>
		<!-- http://labs.adobe.com/wiki/index.php/Apollo:Articles:Using_HTML_in_Flex-based_Apollo_Applications -->
		<mx:HTML id="browser" width="100%" height="100%" 
				 location="http://blog.jidolstar.com"
				 complete="browser_completeHandler(event)"
				 locationChange="browser_locationChangeHandler(event)"/>
	</s:VGroup>
</s:WindowedApplication>

Ajax, ActionScript 3.0, Flex, Flash등을 이용하면 AIR 애플리케이션을 만들 수 있다. Flash를 몰라도 Ajax를 알면 만들 수 있기 때문에 웹개발자들이 데스크탑 영역으로의 개발이 가능해졌다. 실제로 Ajax로 만들어진 애플리케이션도 꽤 된다. Adobe AIR 세계에 많은 개발자가 동참하길 바란다.


글쓴이 : 지돌스타( http://blog.jidolstar.com/621 )