플래시 air 안에서 브라우져 html 띄우기 붙이기 관련

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

출처: http://blog.naver.com/PostView.nhn?blogId=q3korea&logNo=120118702277

Flash Android App (StageWebView) 

WebTest.fla

0.01MB

WebTest.apk

0.03MB

WebTest-app.xml

0.00MB

AIR 1.0부터 사용가능한 flash.html.HTMLLoader Class는 Flash 상에서 웹페이지를 간편하게 

호출해서 출력할 수 있다. 하지만, Android 2.2 Froyo 기반에서 AIR 2.5로 제작한 Flash App은 

HTMLLoader가 Device상에서 정상 동작하지 않는다.

 

PC 개발환경에선 정상동작 하지만, Device에 탑재되면 웹페이지를 호출하지 못하는 현상이 발생한다.

 

* HTMLLoader 샘플코드

import flash.html.HTMLLoader;
import flash.net.URLRequest;

var html : HTMLLoader = new HTMLLoader ();
var request : URLRequest = new URLRequest ('http://www.naver.com');
html.width = this.stage.stageWidth;
html.height = this.stage.stageHeight;
html.load (request);
this.addChild (html);

 

하지만, 이번에 AIR 2.5에 새롭게 추가된 StageWebView Class를 사용하면 위의 HTMLLoader처럼 

Flash 컨텐츠에서 웹페이지를 간편하게 호출할 수 있으며, Android 2.2 Froyo에서도 정상동작 

하는것 을 확인할 수 있다.

 

HTMLLoader는 DisplayObject를 상속받아 구현하지만, StageWebView는 EventDispatcher만

상속받아 구현한다. 즉, HTMLLoader는 표시목록으로 등록하여 처리를 하지만, StageWebView는 

Class 자신을 웹페이지 표시객체처럼 처리한다. 그러므로 HTMLLoader와는 그 출력방식이 다르다.

 

샘플코드는 간단하게 구현할 수 있는데, 살펴보면 다음과 같다.

 
import flash.media.StageWebView;
import flash.geom.Rectangle;
import flash.desktop.NativeApplication;
import flash.desktop.SystemIdleMode;
import flash.system.Capabilities;
import flash.ui.Keyboard;

 

// StageWebView 인스턴스 생성
var html : StageWebView = new StageWebView ();
html.stage = this.stage;

 

// View Port의 크기설정

// apk로 컴파일 할때 LandScape, FullScreen으로 반드시 설정한다.
html.viewPort = new Rectangle (0, 0, this.stage.stageWidth, this.stage.stageHeight);
html.loadURL ('http://www.naver.com');

if (Capabilities.cpuArchitecture == 'ARM')
{
 NativeApplication.nativeApplication.addEventListener (Event.ACTIVATE, evtActivate);
 NativeApplication.nativeApplication.addEventListener (Event.DEACTIVATE, evtDeactivate);
 NativeApplication.nativeApplication.addEventListener (KeyboardEvent.KEY_DOWN, evtKeyboard);
}

 

// App 구동될때 Sleep Mode로 진입하지 않도록 설정
function evtActivate (e : Event) : void
{
 NativeApplication.nativeApplication.systemIdleMode = SystemIdleMode.KEEP_AWAKE;
}

 

// App 닫힐경우 close 처리

function evtDeactivate (e : Event) : void
{
 NativeApplication.nativeApplication.exit ();
}

 

// 이전, 다음 키 처리

function evtKeyboard (e : KeyboardEvent) : void
{
 switch (e.keyCode)
 {
  // 이전

  case Keyboard.BACK :
   if (html.isHistoryBackEnabled)
   {
    html.historyBack ();
    e.preventDefault ();
   }
   else
   {
    NativeApplication.nativeApplication.exit ();
   }
  break;
 

 // 다음 
  case Keyboard.SEARCH :
   if (html.isHistoryForwardEnabled)
   {
    html.historyForward ();
   }
   break;
 }
}

 

.apk로 컴파일 할때 -app.xml 작성시 fullScreen값은 true, aspectRatio는 landscape로 처리를 하고

퍼미션은 android:name="android.permission.INTERNET" 으로 반드시 설정해줘야 한다.

 

Device에 설치한 후 구동해보면 웹페이지가 출력되며, 이전/다음 및 기본적인 링크처리, 확대/축소

동작은 정상동작 하는것을 확인할 수 있다. Flash 기반에서 웹 페이지를 보여줄 필요가 있는경우

StageWebView Class를 잘 활용하면 효과적인 App을 개발할 수 있으리라 생각된다.

IT·컴퓨터, 모바일, 안드로이드, 액션스크립트, 액션스크립트3.0, 플래시, ActionScript, ActionScript3.0, AIR, AirforAndroid

[출처] Flash Android App (StageWebView)|작성자 코랴

 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

출처: http://butterguy.tistory.com/241

 

AIR에서 HTML문서 보여주기

AIR에는 HTMLLoader()라는 클래스를 지원한다. 이를 인스턴스로 사용하여 렌더링할 페이지를 지정해주면 AIR를 이용하여 간단한 브라우저 정도는 만들수 있을 것이다.

HTMLLoader는 HTML과 PDF등을 렌더링 할 수 있게 하며 URL히스토리 기능을 지원하기 때문에 브라우저와 같은 커맨드기능을 구혈 할 수 있으며 자바스크립트 또한 연동이 가능하다...하지만 완전한 브라우저를 개발하기 위해서는 뭔가 2%아쉬움이 남는다. 

[ URL 랜더링 ]
var htmlLoader:HTMLLoader = new HTMLLoader();
htmlLoader.width = parent.stage.stageWidth;
htmlLoader.height = parent.stage.stageHeight;
htmlLoader.load( new URLRequest("http://www.naver.com") )
addChild( htmlLoader );

위와 같은 경우는 URL을 통해 웹페이지를 불러와 렌더링을 한 것이다.
두번째 경우는 아래 코드처럼 HTML 문자열을 사용하여 렌더링할 수 있다.

[ 문자열 랜더링 ]
 var htmlLoader:HTMLLoader = new HTMLLoader();
htmlLoader.width = parent.stage.stageWidth;
htmlLoader.height = parent.stage.stageHeight;
htmlLoader.loadString( 
"<HTML><BODY>  <h1><a href=#>HTML In AIR</a></h1> </BODY></HTML>" 
)
addChild( htmlLoader );

사용법은 간단하다 위처럼 속성을 설정하고 load를 호출하기만 하면 된다.
단 불러들인 HTML에 한글이 있는 경우 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
를 추가하여 캐릭터 셋을 맞추어준다.

 

 

 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

출처: http://adnaru.com/176

 

Flash Platform의 한글문제는 정말 여러곳에서 발생하는 것 같습니다. 이번에 제가 다룰 문제는 Flash Platform 자체의 문제라기 보단 서버 환경의 문제라고 볼 수 있겠네요.

 

 

작년 초 릴리즈된 Adobe의 데스크탑 런타임인 AIR는 웹에서 구현한 사용자 경험을 그대로 데스크탑으로 확장할 수 있다는 강력한 장점이 있지만, 그 장점에 덧붙여 로컬데이터베이스, 네이티브 드래그앤드롭 등 강력한 Native API도 지원하고 있습니다.

특히, Adobe AIR는 사파리, 구글크롬등에서 채택한 Webkit엔진이 런타임내에 탑재되어 있으며, HTMLLoader 클래스를 이용해 간단히 브라우징 기능도 만들 수 있습니다. 특히, Webkit 엔진을 이용해 ActionScript를 전혀 모르는 웹퍼블리셔의 경우에도 AIR 애플리케이션 저작이 가능하며, JS상에서 AIR의 Native API를 이용한 개발도 가능합니다.

위처럼, 어도비에서는 AIR 개발을 위한 개발툴킷(SDK)를 Flex 개발자용과, AJAX 개발자용으로 나눠 제공하고 있습니다. 
(Flash에서는 AIR 개발툴킷을 SDK로 부르지 않고 Extension으로 부르며 CS4에는 내장되어 있습니다.)

그럼 본론으로 돌아와서, 제가 이번에 소개하고자 하는 문제점은 Webkit 엔진 기반의 클래스인 HTMLLoader에서 발생하는 문제점으로, 웹페이지의 캐릭터켓이 EUC-KR일 경우, HTMLLoader(Flex에서는 HTML컴포넌트)에서 해당 페이지를 정상적으로 표현할 수 없는 문제점이 있습니다.

 

 

이 문제점과 비슷한 문제점으로는 MP3파일의 헤더가 EUC-KR인경우 ID3태그를 불러올 수 없는 문제점인데, 이 같은 문제는 AIR 애플리케이션을 개발할 때 흔히 겪는 문제로, 주로 윈도우플랫폼의 인코딩셋과 관련이 되어있습니다.

윈도우 플랫폼은 타사의 운영체제와 달리, 캐릭터셋을 별도로 CPC949로 사용하게 되는데, 이 경우 Runtims 상에서 ByteArray를 이용해 파일의 정보를 제대로 불러오지 못하는 문제점이 흔히 발생하게 됩니다.

이번에 제가 소개한 문제는, 위에서 살펴본 문제와는 달리 서버의 캐릭터셋의 문제점으로, 최근 대부분 포털사/개인블로그등에서는 웹문서에 EUC-KR 인코딩을 채택하고 있지 않기 때문에, 자주 발생하는 문제는 아닙니다.

아울러, HTMLLoader 클래스는 메타태그의 문자 인코딩을 지정할 수 있는 textEncodingOverride, textEncodingFallback 프로퍼티가 있습니다. 즉, 헤더에 캐릭터셋이 EUC-KR인 웹페이지의 경우 아래처럼, textEncodingOverride 프로퍼티를 이용해, 캐릭터셋을 재정의 할 수 있습니다.

var hloader:HTMLLoader = new HTMLLoader();

hloader.addEventListner(Event.COMPLETE, oncomp);

// 메타태그의 케릭터셋을 utf-8로 오버라이딩한다. 이 경우, 반드시 로드전에 한번씩 지정해야함

hloader.textEncodingOverride = 'utf-8';

hloader.load(new URLRequest('http://www.naver.com'));

 

function oncomp(event:Event):void

{

// 해당 웹 페이지의 메타태그의 케릭터셋이 지정되어 있지 않은경우 캐릭터셋을 지정한다.

hloader.textEncodingFallback = 'utf-8';

}

 

 

하지만, 위의 방법을 쓰더라도, 웹 페이지가 정상적으로 표현되지 않는 문제는 여전히 발생하게 됩니다. 따라서 인코딩셋을 변경하였지만 이 문제점이 발생하는 곳은 메타태그에 정의된 캐릭터셋의 문제가 아니라, html 파일 자체를 작성에 사용된 케릭터셋이 문제원인임을 알 수 있습니다.

즉 이 문제점을 해결하기 위해서는, 작성된 html 파일 자체의 문자열을 utf-8로 변환하는 방법을 사용해야 합니다. 다만, 현재의 HTMLLoader에서는 그러한 기능이 구현되어있지 않아서, 개인적으로 HTMLLoader 클래스를 확장하여 이 문제점을 수정하였습니다.

 

package com.lhd

{

import flash.html.HTMLLoader;

import flash.events.Event;

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.net.URLStream;

import flash.utils.ByteArray;

 

/**  

    * 희희덕덕(http://adnaru.com)  

    * lhd1413 골뱅이 네이뇬 닭 컴  

    * 어떤용도에서든 사용하셔도 좋습니다.  

    */  

public class MultiHtmlLoader extends HTMLLoader

{

override public function MultiHtmlLoader()

{

super();

}

 

// HTML 파일에 캐릭터셋이 ANSI인지 확인하기 위해 URLSTREAM을 통해, ByteArray를 불러온다.

// 이를 위해 load 메서드를 오버라이드한다.

override public function load(urlRequestToLoad:URLRequest):void

{

var ustream:URLStream = new URLStream();

ustream.addEventListener(Event.COMPLETE, oncomp)

ustream.load(urlRequestToLoad);

}

 

private function oncomp(event:Event):void

{

var ustream:URLStream = event.target as URLStream;

var bt:ByteArray = new ByteArray();

         ustream.readBytes(bt);

        

var htmlstr:String;

 

var ansiStr:String = bt.readMultiByte(bt.bytesAvailable, "ANSI");

var unicodeStr:String = bt.toString();

 

if(ansiStr.length < unicodeStr.length)

{

this.textEncodingOverride = "utf-8";

htmlstr = ansiStr;

}else

htmlstr = unicodeStr;

 

//웹페이지 본문내용을 다시 loadstring 메서드를 통해 표현한다.

this.loadString(htmlstr);

}

 

}

}

 

 

MultiHtmlLoader 클래스는, load 메서드를 오버라이드해, 웹 페이지를 URLStream 형식으로 내려 받아, ANSI 문자열인지 체크하고, 변환된 문자열을 다시 loadString 메서드를 호출해 표현하는 형식으로 확장하였습니다. 위의 클래스를 사용하게 되면 EUC-KR HTML 파일을 비롯해, UTF-8 HTML 파일도 모두 표현할 수 있습니다.

 

 

위의 스크린샷은 왼쪽은 일반 HTMLLoder에서, 오른족은 MultiHtmlLoader에서 EUC-KR HTML파일을 불러온 결과를 비교한 사진입니다. HTMLLoader에서는 페이지가 정상적으로 표시되지 않고, 문자열도 깨져서 나타나는지만, MultiHtmlLoader에서는 페이지도 정상적으로 표시되며, 문자열도 정상적으로 출력되는것을 볼 수 있습니다.

MultiHtmlLoader 클래스는 마음껏 사용하셔도 좋습니다. 다만, 가끔은 제 블로그를 들러주시는 센스도 잊지말아주세요 ^^;;

이번에 소개한 한글 문제는 AIR Runtime의 문제는 아니지만, HTMLLoader을 이용해 프로젝트를 진행할 때 비교적 흔히 발생할 수 있는 문제인 만큼, 대비가 필요할 것 같네요.. ^^;;

 

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

플래시 air 안에서 브라우져 띄우기 붙이기 관련

출처: http://blog.jidolstar.com/621

 

 

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 )

 

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////