'AIR/HTML in AIR'에 해당되는 글 5건

  1. 2009.04.17 자바스크립트 연동 (3)
  2. 2009.04.17 HTML history (2)
  3. 2009.04.17 HTMLLoader 속성
  4. 2009.04.05 AIR에서 PDF문서 보여주기 (4)
  5. 2009.04.05 AIR에서 HTML문서 보여주기
AIR/HTML in AIR2009.04.17 23:28


1 AIR에서 자바스크립트 성분으로 접근 제어
HTMLLoader를 사용하여 HTML을 불러온 경우 HTML Document object model(DOM)로 접근하기위해서는 window속성을 사용한다. 이 속성은 자바스크립트의 window속성과 매핑되며 이를 통해 성분에 접근이 가능하다.
다만 사용시 페이지 로딩이 완료 된 후에 접근하여야 한다.

 var pageTitle = "TEST-AIR";
 var description = "이것은 HTML에서 설정한 문자입니다."

 function showAlert(){
  alert(description)
}


위와 같은 자바스크립트가 있을때 AIR에서는 아래와 같이 HTMLLoader를 통해 접근이 가능하다.
아래 코드는 Event.COMPLETE이 완료된 후에 실행한다.
HTMLLoader인스턴스.window.description = "난 AS이다 내가 값을 바꾸었지롱~";
위처럼 AIR에서 window속성으로 접근하여 값을 바꾼 후 showAlert()을 실행하면
얼럿창에는 "난 AS이다 내가 값을 바꾸었지롱~"라는 메세지가 출력된다.

또한 AIR 어플리케이션의 타이틀을 설정하고자 pageTitle의 값을 아래처럼 읽어와 설정할 수 있다.
ui.stage.nativeWindow.title = _htmlLoader.window.pageTitle;


[ HTML FULL CODE ]
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var pageTitle = "TEST-AIR";
var description = "이것은 HTML에서 설정한 문자입니다."

 function showAlert(){
  alert(description)
 }
//-->
</SCRIPT>
</HEAD>

 <BODY>
 <p id="p1">
  HTML IN AIR
 </p>
 <button onClick="showAlert()">Click</button>
 </BODY>
</HTML>


[ AIR FULL CODE ]
import mx.core.UIComponent;
private var _htmlLoader:HTMLLoader;
private var ui:UIComponent = new UIComponent();
private function init():void
{
    addChild( ui );
    ui.addEventListener(Event.ADDED_TO_STAGE , onStage );
}
   
private function onStage( e:Event ):void
{
    _htmlLoader = new HTMLLoader();
    _htmlLoader.width = ui.stage.stageWidth;
    _htmlLoader.height = ui.stage.stageHeight;
    _htmlLoader.addEventListener( Event.COMPLETE , completeHandler );
    _htmlLoader.load( new URLRequest("./docs/example.html") );
    ui.addChild( _htmlLoader );

   
private function completeHandler( e:Event ):void
{
     ui.stage.nativeWindow.title = _htmlLoader.window.pageTitle;    
     _htmlLoader.window.description = "난 AS이다 내가 값을 바꾸었지롱~";
}




2 자바스크립트에서 Actionscript의 함수처리하기
위와 같은 HTML 예제인데 이번에는 버튼을 누르면 실행되는 자바스크립의 showAlert()을 액션스크립트에서 콜벡으로 가로채 액션스크립트 내부의 함수로 실행시킬 수 있다. 이 때 자바스크립트의 showAlert()는 실행되지 않는다.
private function completeHandler( e:Event ):void
{
    _htmlLoader.window.showAlert = function():void
    {
      Alert.show("자바스크립트 showAlert에 의한 AS실행")
     }

}




3 액션스크립트에서 HTML 엘리먼트 변경
위와 같은 HTML에서 p1이라는 p태그가 있다. 태그안에 내용은 HTML IN AIR으로서 기본적으로 화면에 출력되는데 AIR에서 로드 완료시 이 엘리먼트 값을 바꾸어 화면에 출력되는 내용을 변경할 수 있다.
다만 로드완료하여 변경시 살짝 깜빡거린다.
private function completeHandler( e:Event ):void
{
    _htmlLoader.window.document.getElementById("p1").innerText = "Hello form ActionScript";
}



그림을 보면 빨간 부분이 위의 다른 2개와 다르다는 것을 확인 할 수 있다.

4 액션스크립트에서 HTML객체에 이벤트 등록
역시 같은 HTML을 불러와 사용하는 것으로 Body태그에 등록된 텍스트(p1태그의 HTML IN AIR)를 클릭하면 mx.controls.Alert이 뜨도록 AIR내부에서 이벤트처리하는 방법이다.
private function completeHandler( e:Event ):void
{
    _htmlLoader.window.document.getElementById("p1").onclick = clickHandler;
}
   
private function clickHandler( e:Object ):void
{
    Alert.show("액션스크립트 함수실행");
}





참고) Flex 빌더에서 테스트할때는 항상 Project에서 Clean을 하여야 HTML내용이 갱신됩니다.

ps) 제가 정리한 대부분의 AIR 포스팅은 위키북스의 AIR인 액션(AIR in Action)의 커리큘럼 토대로 테스트 정리하였습니다. AIR in Action원서가 출시(2006년 5월)된지 3년이나 지난 내용이라 일부 레퍼런스가 변경되고 삭제된 부분을 테스트하며 포스팅하다보니 스포일러처럼 되어버린거 같습니다. AIR in Action에는 훨씬 많은 내용과 유익한 내용이 많이 있습니다. 보시다 안되는 부분은 제 포스팅을 참고만 하여 주신다면 감사하겠습니다.
관련 커뮤니티 : http://cafe.naver.com/airinaction

Posted by 정윤수 버터백통
AIR/HTML in AIR2009.04.17 17:50

일반적으로 브라우저를 보면 이전과 다음으로 가는 커맨드 기능이 있다. 일반적인 Actionscript라면
javascript와 연동하여 기능을 구현할 수 있지만 AIR에서는 HTMLLoader에서 제공하고 있다.

* 히스토리 관련 메소드
HTMLLoader.historyBack() :
상대적으로 다음 URL로 이동
HTMLLoader.historyForward() : 상대적으로 이전 URL로 이동
HTMLLoader.historyGo( int ) : 지정된 단계 값만큼 이동
HTMLHistoryItem.getHistoryAt( uint ) : 지정된 위치의 값을 반환

참고)
http://www.asual.com/swfaddress/
나온지 좀 오래 되었지만 커맨드 기능을 구현한 SWFAddress라는 라이브러리를 사용하면 일반 웹SWF에서도 구현이 가능하다.

Posted by 정윤수 버터백통
AIR/HTML in AIR2009.04.17 17:01

콘텐츠 캐싱 사용 여부 설정
HTMLLoader.load()를 호출하기 전에 HTMLLoader.cacheResponse = true/false (true : 캐싱사용 , false : 캐싱사용 안함)
    
사용자 인증제어 : 서버에서 인증을 요구하여 특정 콘텐츠로의 접근 허용 여부
HTMLLoader.load()를 호출하기 전에 htmlLoader.authenticate = true/false (false를 설정하면 서버에서 인증 요구시 대화창을 띄우지 않는다.)
    
서버에서 웹콘텐트를 요청하는 애플리케이션을 user agent라 한다. user agent가 서버에 웹콘텐트를 요청할 때 자신의 정보를 같이 보낸다. HTMLLoader를 사용하여 이정보를 위장할 수 있다
(예로는 과거 IE가 네스케이프용 컨텐트로 접근하기 위해 "Mozilla/<version>"이라는 정보를 보낸 사례가 있다.)
htmlLoader.userAgent = 값 
    
쿠키설정하기
htmlLoader.manageCookies = true/false (true : 쿠키사용 , false : 쿠키 사용 안함)
    
각각의 모든 설정에 기본값으로 설정하기
htmlLoader.useCache = true/false ( true : 기본값으로 사용 , false : 기본값으로 사용하지 않기)
Posted by 정윤수 버터백통
AIR/HTML in AIR2009.04.05 14:25
AIR의 HTMLLoader를 사용하면 어도비의 PDF문서를 랜더링 할 수 있다.
사용법은 HTML문서를 불러들이는 것과 같이 간단하다.

var htmlLoader:HTMLLoader = new HTMLLoader();
htmlLoader.width = parent.stage.stageWidth;
htmlLoader.height = parent.stage.stageHeight;
htmlLoader.load( new URLRequest("./docs/FX_Web.pdf") )
addChild( htmlLoader );
Posted by 정윤수 버터백통
AIR/HTML in AIR2009.04.05 14:18

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" />
를 추가하여 캐릭터 셋을 맞추어준다.

Posted by 정윤수 버터백통