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

2009.12.02 19:26

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를 설치 안했다면 다음 링크를 통해 받는다.
  • 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 )

    Adobe AIR , , , , , , , , ,

    1. 음.. 저는 사실 Apollo 시절부터, Flex보다는 AIR에 더 비중을 두고 있는데,
      정작 일을 하려니, AIR 관련해서는 즐거운 프로젝트(?)를 만나기가 어렵네요..

    2. Flash의 장점을 잘 살리면서 AIR만의 매력을 잘 살릴 수 있는 그 무언가가 있을텐데요. ^^

    3. 안녕하세요.
      제가 air를 공부하는중에 브라우저 구현시 궁금한게 있어 실례를 무릅쓰고 문의 드립니다.

      우선 화면에서 특정 웹페이지를 띄워서 이용할려고 합니다.

      그래서
      <mx:HTML id="browser" width="100%" height="100%" location="http://localhost:8080/m/" />

      이렇게해서 화면은 띄웠는데요.

      제가 페이지안에 jquery로 ajax를 이용해서 서버단을 호출합니다.

      문제는 서버단까지는 제대로 넘어가는데 서버단에서 데이타를 넘기는데 클라이언트에서는 데이타를 받지 못하고 있습니다.

      물론 일반 브라우저로 보면 제대로 데이타를 받을수 있구요.

      $.post(
      "/talk/list.do"
      , queryString
      , function(data, textStatus) {
      if( textStatus != "success" ) {
      alert("실패 했습니다.");
      return ;
      }
      alert(data);
      }
      , "json"
      );

      위와 같은 코드를 사용하는데 function(data, textStatus) {에서 계속 data가 null이 넘어옵니다.

      제가 알기로는 webkit 엔진을 쓴다고 하는데 맞는지요?

      html5라던가 html을 이용해서 동적인 화면을 구성해 air에서 보여줄려고 하는데 생각같이 잘 안되네요..

      조언좀 부탁드립니다..

      감사합니다..

    4. 지금 정보만 가지고는 내용을 알기가 힘든 것 같습니다. 분명 통신은 잘됩니다. 다른 문제가 있을것으로 생각됩니다.

    5. Blog Icon
      bumworld

      답변 감사합니다.
      혹시 몰라 다시 한번 문의 드리겠습니다..
      제가 작성한 소스는 아래와 같습니다.
      호출한 url은 m.openur.com 이구요.
      화면까지는 제대로 나옵니다.
      사람들/카페 라는 버튼을 클릭하면 ajax를 호출하게 되어 있습니다.
      air에서 브라우저를 호출하는 부분에 뭔가 더 해줘야 할게 있을지요?
      ------------------------------------------------------------------------
      <?xml version="1.0" encoding="utf-8"?>
      <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/mx">
      <s:VGroup width="100%" height="100%">
      <s:HGroup verticalAlign="middle" paddingLeft="10" paddingRight="10" paddingTop="5" paddingBottom="5">
      <s:Button label="새로고침" click="browser.reload()"/>
      </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://m.openur.com"
      />
      </s:VGroup>

      </s:WindowedApplication>

    6. HTML은 HTMLLoader를 Flex에서 사용할 수 있도록 랩핑한 것입니다. HTMLLoader에 대한 API 문서를 보시고 보안적인 측면이나 제약사항을 먼저 파악하시고 난다음에 관련 내용을 시행해보세요.

    7. Blog Icon

      flash builder 4.7을 깔고 위 예제를 돌려보니..
      <mx:HTML> 태그에서 에러가 납니다.
      <mx1:HTML>로 바꿔주면 잘 돌아가구요..
      예제 감사합니다.