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
