HTML 내용에 대해 브라우저와 유사한 사용자 인터페이스 정의

Adobe AIR 1.0 이상

JavaScript에서는 HTML 내용을 표시하는 윈도우를 제어하기 위한 몇 가지 API를 제공합니다. AIR에서 사용자 정의 HTMLHost 클래스를 구현하여 이러한 API를 재정의할 수 있습니다.

HTMLHost 클래스 확장

예를 들어, 응용 프로그램이 탭 인터페이스에서 여러 HTMLLoader 객체를 제공하는 경우 로드된 HTML 페이지에서 기본 윈도우의 제목이 아니라 탭의 레이블을 변경하게 할 수 있습니다. 마찬가지로 코드에서 부모 표시 객체 컨테이너에 있는 HTMLLoader 객체의 위치를 변경하거나, HTMLLoader 객체가 포함된 윈도우를 이동하거나, 아무 작업도 수행하지 않거나, 다른 작업을 전체적으로 수행하여 window.moveTo() 호출에 응답할 수 있습니다.

AIR HTMLHost 클래스는 다음과 같은 JavaScript 속성과 메서드를 제어합니다.

  • window.status

  • window.document.title

  • window.location

  • window.blur()

  • window.close()

  • window.focus()

  • window.moveBy()

  • window.moveTo()

  • window.open()

  • window.resizeBy()

  • window.resizeTo()

new HTMLLoader() 를 사용하여 HTMLLoader 객체를 만드는 경우 나열된 JavaScript 속성이나 메서드가 사용되지 않습니다. HTMLHost 클래스는 브라우저와 유사한 이러한 JavaScript API의 기본 구현을 제공합니다. HTMLHost 클래스를 확장하여 비헤이비어를 사용자 정의할 수도 있습니다. 기본 비헤이비어를 지원하는 HTMLHost 객체를 만들려면 HTMLHost 생성자에서 defaultBehaviors 매개 변수를 true로 설정합니다. 

var defaultHost:HTMLHost = new HTMLHost(true);

HTMLLoader 클래스의 createRootWindow() 메서드를 사용하여 AIR에서 HTML 윈도우를 만드는 경우 기본 비헤이비어를 지원하는 HTMLHost 인스턴스가 자동으로 할당됩니다. 다른 HTMLHost 구현을 HTMLLoader의 htmlHost 속성에 할당하여 호스트 객체 비헤이비어를 변경하거나, null 을 할당하여 기능을 전체적으로 비활성화할 수 있습니다.

참고: AIR에서는 HTML 기반 AIR 응용 프로그램용으로 만들어진 초기 윈도우와 JavaScript window.open() 메서드의 기본 구현으로 만들어진 모든 윈도우에 기본 HTMLHost 객체를 할당합니다.

예제: HTMLHost 클래스 확장

다음 예제에서는 HTMLHost 클래스를 확장하여 HTMLLoader 객체가 사용자 인터페이스에 영향을 주는 방식을 사용자 정의하는 방법을 보여 줍니다.

Flex 예제:

  1. HTMLHost 클래스를 확장하는 클래스(하위 클래스)를 만듭니다.

  2. 사용자 인터페이스 관련 설정의 변경을 처리하도록 새 클래스의 메서드를 재정의합니다. 예를 들어, 아래의 클래스 CustomHost는 window.open() 호출과 window.document.title 변경에 대한 비헤이비어를 정의합니다. window.open() 을 호출하면 새 윈도우에서 HTML 페이지가 열리고 window.document.title (HTML 페이지의 <title> 요소 설정 포함)이 변경되면 해당 윈도우의 제목이 설정됩니다. 

    package 
{ 
    import flash.html.*; 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
 
    public class CustomHost extends HTMLHost 
    { 
        import flash.html.*; 
        override public function 
            createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title; 
        } 
    } 
}

  3. HTMLLoader가 포함된 코드(HTMLHost의 새 하위 클래스에 대한 코드 제외)에서 새 클래스의 객체를 만듭니다. 새 객체를 HTMLLoader의 htmlHost 속성에 할당합니다. 다음 Flex 코드에서는 이전 단계에서 정의된 CustomHost 클래스를 사용합니다. 

    <?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    applicationComplete="init()"> 
    <mx:Script> 
        <![CDATA[ 
            import flash.html.HTMLLoader; 
            import CustomHost; 
            private function init():void 
            { 
                var html:HTMLLoader = new HTMLLoader(); 
                html.width = container.width; 
                html.height = container.height; 
                var urlReq:URLRequest = new URLRequest("Test.html"); 
                html.htmlHost = new CustomHost(); 
                html.load(urlReq); 
                container.addChild(html); 
            } 
        ]]> 
    </mx:Script> 
    <mx:UIComponent id="container" width="100%" height="100%"/> 
</mx:WindowedApplication>

여기에서 설명하는 코드를 테스트하려면 응용 프로그램 디렉토리에 다음 내용이 포함된 HTML 파일을 넣습니다. 

<html> 
    <head> 
        <title>Test</title> 
    </head> 
    <script> 
        function openWindow() 
        { 
            window.runtime.trace("in"); 
            document.title = "foo" 
            window.open('Test.html'); 
            window.runtime.trace("out"); 
        } 
    </script> 
    <body> 
        <a href="#" onclick="openWindow()">window.open('Test.html')</a> 
    </body> 
</html>

Flash Professional 예제:

  1. AIR용 Flash 파일을 만듭니다. 문서 클래스를 CustomHostExample로 설정한 다음 파일을 CustomHostExample.fla로 저장합니다.

  2. HTMLHost 클래스를 확장하는 클래스(하위 클래스)가 포함된 CustomHost.as라는 ActionScript 파일을 만듭니다. 이 클래스는 사용자 인터페이스 관련 설정의 변경을 처리하도록 새 클래스의 특정 메서드를 재정의합니다. 예를 들어 아래의 클래스 CustomHost는 window.open() 호출과 window.document.title 변경에 대한 비헤이비어를 정의합니다. window.open() 메서드를 호출하면 새 윈도우에서 HTML 페이지가 열리고 window.document.title 속성(HTML 페이지의 <title> 요소 설정 포함)이 변경되면 해당 윈도우의 제목이 설정됩니다. 

    package 
{ 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
    import flash.events.Event; 
    import flash.events.NativeWindowBoundsEvent; 
    import flash.geom.Rectangle; 
    import flash.html.HTMLLoader; 
    import flash.html.HTMLHost; 
    import flash.html.HTMLWindowCreateOptions; 
    import flash.text.TextField; 
 
    public class CustomHost extends HTMLHost 
    { 
        public var statusField:TextField; 
         
        public function CustomHost(defaultBehaviors:Boolean=true) 
        { 
            super(defaultBehaviors); 
        } 
        override public function windowClose():void 
        { 
            htmlLoader.stage.nativeWindow.close(); 
        } 
        override public function createWindow( 
                                windowCreateOptions:HTMLWindowCreateOptions ):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateLocation(locationURL:String):void 
        { 
            trace(locationURL); 
        } 
        override public function set windowRect(value:Rectangle):void 
        { 
            htmlLoader.stage.nativeWindow.bounds = value; 
        } 
        override public function updateStatus(status:String):void 
        { 
            statusField.text = status; 
            trace(status); 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title + "- Example Application"; 
        } 
        override public function windowBlur():void 
        { 
            htmlLoader.alpha = 0.5; 
        } 
        override public function windowFocus():void 
        { 
            htmlLoader.alpha = 1; 
        } 
    } 
}

  3. 응용 프로그램의 문서 클래스를 포함할 CustomHostExample.as라는 ActionScript 파일을 추가로 만듭니다. 이 클래스는 HTMLLoader 객체를 만들고 호스트 속성을 이전 단계에서 정의된 CustomHost 클래스의 인스턴스로 설정합니다. 

    package 
{ 
    import flash.display.Sprite; 
    import flash.html.HTMLLoader; 
    import flash.net.URLRequest; 
    import flash.text.TextField; 
 
    public class CustomHostExample extends Sprite 
    { 
        function CustomHostExample():void 
        { 
            var html:HTMLLoader = new HTMLLoader(); 
            html.width = 550; 
            html.height = 380; 
            var host:CustomHost = new CustomHost(); 
            html.htmlHost = host; 
             
            var urlReq:URLRequest = new URLRequest("Test.html"); 
            html.load(urlReq); 
             
            addChild(html); 
             
            var statusTxt:TextField = new TextField(); 
            statusTxt.y = 380; 
            statusTxt.height = 20; 
            statusTxt.width = 550; 
            statusTxt.background = true; 
            statusTxt.backgroundColor = 0xEEEEEEEE; 
            addChild(statusTxt); 
             
            host.statusField = statusTxt; 
        } 
    } 
}

    여기에서 설명하는 코드를 테스트하려면 응용 프로그램 디렉토리에 다음 내용이 포함된 HTML 파일을 넣습니다. 

    <html> 
     <head> 
     <title>Test</title> 
     <script> 
     function openWindow() 
     { 
     document.title = "Test" 
     window.open('Test.html'); 
     } 
     </script> 
     </head> 
     <body bgColor="#EEEEEE"> 
     <a href="#" onclick="window.open('Test.html')">window.open('Test.html')</a> 
     <br/><a href="#" onclick="window.document.location='http://www.adobe.com'"> 
     window.document.location = 'http://www.adobe.com'</a> 
     <br/><a href="#" onclick="window.moveBy(6, 12)">moveBy(6, 12)</a> 
     <br/><a href="#" onclick="window.close()">window.close()</a> 
     <br/><a href="#" onclick="window.blur()">window.blur()</a> 
     <br/><a href="#" onclick="window.focus()">window.focus()</a> 
     <br/><a href="#" onclick="window.status = new Date().toString()">window.status=new Date().toString()</a> 
     </body> 
</html>

window.location 속성의 변경 처리

HTML 페이지의 URL 변경을 처리하도록 locationChange() 메서드를 재정의합니다. locationChange() 메서드는 페이지의 JavaScript에서 window.location 의 값을 변경할 때 호출됩니다. 다음 예제에서는 요청된 URL을 로드합니다. 

override public function updateLocation(locationURL:String):void 
{ 
    htmlLoader.load(new URLRequest(locationURL)); 
}
참고: HTMLHost 객체의 htmlLoader 속성을 사용하여 현재 HTMLLoader 객체를 참조할 수 있습니다.

window.moveBy(), window.moveTo(), window.resizeTo(), window.resizeBy()에 대한 JavaScript 호출 처리

HTML 내용 경계의 변경을 처리하도록 set windowRect() 메서드를 재정의합니다. set windowRect() 메서드는 페이지의 JavaScript에서 window.moveBy() , window.moveTo() , window.resizeTo() 또는 window.resizeBy() 를 호출할 때 호출됩니다. 다음 예제에서는 데스크톱 윈도우의 경계를 업데이트합니다. 

override public function set windowRect(value:Rectangle):void 
{ 
    htmlLoader.stage.nativeWindow.bounds = value; 
}

window.open()에 대한 JavaScript 호출 처리

window.open() 에 대한 JavaScript 호출을 처리하도록 createWindow() 메서드를 재정의합니다. createWindow() 메서드의 구현은 새 HTMLLoader 객체를 만들고 반환하는 작업을 담당합니다. 일반적으로 HTMLLoader를 새 윈도우에 표시하지만 윈도우를 만들 필요는 없습니다.

다음 예제에서는 HTMLLoader.createRootWindow() 를 사용하여 윈도우와 HTMLLoader 객체를 만드는 createWindow() 함수를 구현하는 방법을 보여 줍니다. NativeWindow 객체를 별도로 만들고 HTMLLoader를 윈도우 스테이지에 추가할 수도 있습니다. 

override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader{ 
    var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
    var bounds:Rectangle = new Rectangle(windowCreateOptions.x, windowCreateOptions.y,  
                                windowCreateOptions.width, windowCreateOptions.height); 
    var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                    windowCreateOptions.scrollBarsVisible, bounds); 
    htmlControl.htmlHost = new HTMLHostImplementation(); 
    if(windowCreateOptions.fullscreen){ 
        htmlControl.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE; 
    } 
    return htmlControl; 
}
참고: 이 예제에서는 window.open() 을 사용하여 만든 새 윈도우에 사용자 정의 HTMLHost 구현을 할당합니다. 다른 구현을 사용하거나 새 윈도우의 htmlHost 속성을 null로 설정할 수도 있습니다.

createWindow() 메서드에 매개 변수로 전달되는 객체는 HTMLWindowCreateOptions 객체입니다. HTMLWindowCreateOptions 클래스에는 window.open() 호출에서 features 매개 변수 문자열에 설정된 값을 보고하는 속성이 포함되어 있습니다.

HTMLWindowCreateOptions 속성

window.open()에 대한 JavaScript 호출에서 기능 문자열의 해당 설정

fullscreen

fullscreen

height

height

locationBarVisible

location

menuBarVisible

menubar

resizeable

resizable

scrollBarsVisible

scrollbars

statusBarVisible

status

toolBarVisible

toolbar

width

width

x

left 또는 screenX

y

top 또는 screenY

HTMLLoader 클래스가 기능 문자열에 지정할 수 있는 기능을 모두 구현하는 것은 아닙니다. 적절한 경우 응용 프로그램에서 스크롤 막대, 위치 막대, 메뉴 모음, 상태 표시줄 및 툴바를 제공해야 합니다.

JavaScript window.open() 메서드의 다른 인수는 시스템에서 처리됩니다. createWindow() 구현은 HTMLLoader 객체에 내용을 로드하거나 윈도우 제목을 설정하면 안 됩니다.

window.close()에 대한 JavaScript 호출 처리

window.close() 메서드에 대한 JavaScript 호출을 처리하도록 windowClose() 를 재정의합니다. 다음 예제에서는 window.close() 메서드가 호출될 때 데스크톱 윈도우를 닫습니다. 

override public function windowClose():void 
{ 
    htmlLoader.stage.nativeWindow.close(); 
}

window.close() 에 대한 JavaScript 호출에서는 포함하는 윈도우를 닫을 필요가 없습니다. 예를 들어, 다음 코드와 같이 HTMLLoader를 표시 목록에서 제거하여 다른 내용이 있을 수 있는 윈도우를 열어 둘 수 있습니다. 

override public function windowClose():void 
{ 
    htmlLoader.parent.removeChild(htmlLoader); 
}

window.status 속성의 변경 처리

window.status 의 값에 대한 JavaScript 변경을 처리하도록 updateStatus() 메서드를 재정의합니다. 다음 예제에서는 상태 값을 추적합니다. 

override public function updateStatus(status:String):void 
{ 
    trace(status); 
}

요청된 상태는 updateStatus() 메서드에 문자열로 전달됩니다.

HTMLLoader 객체는 상태 표시줄을 제공하지 않습니다.

window.document.title 속성의 변경 처리

window.document.title 값의 JavaScript 변경을 처리하도록 updateTitle() 메서드를 재정의합니다. 다음 예제에서는 윈도우 제목을 변경하고 "Sample"이라는 문자열을 제목에 추가합니다. 

override public function updateTitle(title:String):void 
{ 
    htmlLoader.stage.nativeWindow.title = title + " - Sample"; 
}

document.title 이 HTML 페이지에서 설정되면 요청된 제목이 updateTitle() 메서드에 문자열로 전달됩니다.

document.title 이 변경될 때 HTMLLoader 객체가 포함된 윈도우의 제목이 반드시 변경되지는 않습니다. 예를 들어, 텍스트 필드 등의 다른 인터페이스 요소를 변경할 수 있습니다.

window.blur() 및 window.focus()에 대한 JavaScript 호출 처리

다음 예제와 같이 window.blur() 및 window.focus() 에 대한 JavaScript 호출을 처리하도록 windowBlur() 및 windowFocus() 메서드를 재정의합니다. 

override public function windowBlur():void 
{ 
    htmlLoader.alpha = 0.5; 
} 
override public function windowFocus():void 
{ 
    htmlLoader.alpha = 1.0; 
    NativeApplication.nativeApplication.activate(htmlLoader.stage.nativeWindow); 
}
참고: AIR에서는 윈도우나 응용 프로그램을 비활성화하기 위한 API를 제공하지 않습니다.

스크롤하는 HTML 내용으로 윈도우 만들기

HTMLLoader 클래스에는 정적 메서드 HTMLLoader.createRootWindow() 가 포함되어 있습니다. 이 메서드를 사용하면 HTMLLoader 객체가 포함된 새 윈도우(NativeWindow 객체로 나타냄)를 열고 이 윈도우에 대한 일부 사용자 인터페이스 설정을 정의할 수 있습니다. 이 메서드는 사용자 인터페이스를 정의할 수 있는 네 가지 매개 변수를 사용합니다.

매개 변수

설명

visible

윈도우가 처음에 표시되는지( true ) 아니면 표시되지 않는지( false )를 지정하는 부울 값

windowInitOptions

NativeWindowInitOptions 객체입니다. NativeWindowInitOptions 클래스는 윈도우의 최소화, 최대화 또는 크기 조절 가능 여부, 윈도우에 시스템 크롬이 있는지, 아니면 사용자 정의 크롬이 있는지 여부, 윈도우가 투명한지 여부(시스템 크롬을 사용하지 않는 윈도우의 경우) 및 윈도우 유형과 같은 NativeWindow 객체에 대한 초기화 옵션을 정의합니다.

scrollBarsVisible

스크롤 막대가 있는지( true ) 아니면 없는지( false )를 지정하는 부울 값

bounds

새 윈도우의 위치와 크기를 정의하는 Rectangle 객체입니다.

예를 들어 다음 코드에서는 HTMLLoader.createRootWindow() 메서드를 사용하여 스크롤 막대를 사용하는 HTMLLoader 내용으로 윈도우를 만듭니다. 

var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
var bounds:Rectangle = new Rectangle(10, 10, 600, 400); 
var html2:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, true, bounds); 
var urlReq2:URLRequest = new URLRequest("http://www.example.com"); 
html2.load(urlReq2); 
html2.stage.nativeWindow.activate();
참고: JavaScript에서 createRootWindow() 를 직접 호출하여 만든 윈도우는 여는 HTML 윈도우와 독립적으로 유지됩니다. 예를 들어, JavaScript Window opener 및 parent 속성은 null 입니다. 그러나 createRootWindow() 를 호출하도록 HTMLHost createWindow() 메서드를 재정의하여 createRootWindow() 를 간접적으로 호출하면 opener 및 parent 가 여는 HTML 윈도우를 참조합니다.