윈도우 만들기

기본 윈도우의 초기화 속성은 데스크톱 윈도우를 만든 다음에는 변경할 수 없습니다. 이러한 변경할 수 없는 속성과 기본값은 다음과 같습니다.

응용 프로그램 설명자 파일에서 AIR을 통해 만들어진 초기 윈도우의 속성을 설정합니다. AIR 응용 프로그램의 기본 윈도우는 항상 type, normal입니다. visible, width 및 height와 같은 추가 윈도우 속성을 지정할 수 있지만 이러한 속성은 언제든지 변경할 수 있습니다.

NativeWindowInitOptions 클래스를 사용하여 응용 프로그램에서 만든 다른 기본 윈도우와 HTML 윈도우의 속성을 설정합니다. 윈도우를 만들 때 윈도우 속성을 지정하는 NativeWindowInitOptions 객체를 NativeWindow 생성자 함수나 HTMLLoader createRootWindow() 메서드에 전달해야 합니다.

다음 코드에서는 유틸리티 윈도우에 대한 NativeWindowInitOptions 객체를 만듭니다.

var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
options.systemChrome = NativeWindowSystemChrome.STANDARD; 
options.type = NativeWindowType.UTILITY 
options.transparent = false; 
options.resizable = false; 
options.maximizable = false; 

transparent가 true이거나 type이 lightweight인 경우 systemChrome을 standard로 설정할 수 없습니다.

Flex mx:Window 클래스를 사용하여 윈도우를 만드는 경우 윈도우에 대한 MXML 선언이나 윈도우를 만드는 코드에서 윈도우 객체 자체에 대한 초기화 속성을 지정합니다. 기본 NativeWindow 객체는 open() 메서드를 호출할 때까지 만들어지지 않습니다. 윈도우가 열리면 이러한 초기화 속성을 변경할 수 없습니다.

AIR에서는 응용 프로그램 설명자에 지정된 속성을 기반으로 초기 응용 프로그램 윈도우를 만들고 내용 요소에서 참조된 파일을 로드합니다. 내용 요소는 SWF 파일이나 HTML 파일을 참조해야 합니다.

초기 윈도우는 응용 프로그램의 기본 윈도우이거나 하나 이상의 다른 윈도우를 시작하는 역할만 수행할 수 있습니다. 초기 윈도우를 표시할 필요는 전혀 없습니다.

NativeWindow를 만들려면 NativeWindowInitOptions 객체를 NativeWindow 생성자에 전달합니다.

var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
options.systemChrome = NativeWindowSystemChrome.STANDARD; 
options.transparent = false; 
var newWindow:NativeWindow = new NativeWindow(options); 

visible 속성을 true로 설정하거나 activate() 메서드를 호출할 때까지 윈도우가 표시되지 않습니다.

윈도우가 만들어지면 윈도우의 속성을 초기화하고 스테이지 속성과 Flash 표시 목록 방법을 사용하여 내용을 윈도우에 로드합니다.

거의 모든 경우 새로운 기본 윈도우의 스테이지 scaleMode 속성을 noScale로 설정해야 합니다(StageScaleMode.NO_SCALE 상수 사용). Flash 크기 조절 모드는 응용 프로그램 작성자가 응용 프로그램 표시 공간의 종횡비를 미리 알 수 없는 경우를 위해 설계되었습니다. 크기 조절 모드를 사용하면 작성자가 내용을 자르거나, 내용을 잡아 늘이거나 납작하게 하거나, 빈 공간으로 채우는 등의 작업 중에서 손상이 가장 적은 방법을 선택할 수 있습니다. AIR에서 표시 공간(윈도우 프레임)을 제어하므로 손상 없이 윈도우의 크기를 내용에 맞게 조절하거나 내용의 크기를 윈도우에 맞게 조절할 수 있습니다.

Flex 및 HTML 윈도우의 크기 조절 모드는 noScale로 자동으로 설정됩니다.

var maxOSSize:Point = NativeWindow.systemMaxSize; 
var minOSSize:Point = NativeWindow.systemMinSize; 

HTML 윈도우를 만들려면 JavaScript Window.open() 메서드를 호출하거나 AIR HTMLLoader 클래스 createRootWindow() 메서드를 호출할 수 있습니다.

보안 샌드박스의 HTML 내용은 표준 JavaScript Window.open() 메서드를 사용할 수 있습니다. 내용이 응용 프로그램 샌드박스 밖에서 실행되는 경우에는 마우스 클릭이나 키 누르기와 같은 사용자 상호 작용에 대한 응답으로만 open() 메서드를 호출할 수 있습니다. open()이 호출되면 지정된 URL의 내용을 표시하기 위해 시스템 크롬을 사용하여 윈도우가 만들어집니다. 예를 들면 다음과 같습니다.

newWindow = window.open("xmpl.html", "logWindow", "height=600, width=400, top=10, left=10");

응용 프로그램 보안 샌드박스의 내용은 윈도우를 만드는 더욱 강력한 메서드인 HTMLLoader.createRootWindow()에 액세스할 수 있습니다. 이 메서드를 사용하면 새 윈도우를 만드는 모든 옵션을 지정할 수 있습니다. 예를 들어 다음 JavaScript 코드에서는 크기가 300x400 픽셀이고 시스템 크롬을 사용하지 않는 경량 유형의 윈도우를 만듭니다.

var options = new air.NativeWindowInitOptions(); 
options.systemChrome = "none"; 
options.type = "lightweight"; 
 
var windowBounds = new air.Rectangle(200,250,300,400); 
newHTMLLoader = air.HTMLLoader.createRootWindow(true, options, true, windowBounds); 
newHTMLLoader.load(new air.URLRequest("xmpl.html"));

투명 윈도우를 만들면 해당 윈도우에 로드되는 HTML에 포함된 SWF 내용이 표시되지 않는 경우도 있습니다. 객체의 wmode 매개 변수나 SWF 파일을 참조하는 데 사용되는 embed 태그를 opaque 또는 transparent로 설정해야 합니다. wmode의 기본값은 window이므로 기본적으로 SWF 내용은 투명 윈도우에 표시되지 않습니다. 어떤 wmode 값을 설정하더라도 PDF 내용은 투명 윈도우에 표시할 수 없습니다. AIR 1.5.2 이전에는 SWF 내용도 투명 윈도우에 표시할 수 없었습니다.

createRootWindow() 메서드로 만든 윈도우는 여는 윈도우와 독립적으로 유지됩니다. JavaScript Window 객체의 parent 및 opener 속성은 null입니다. 여는 윈도우는 createRootWindow() 함수에서 반환되는 HTMLLoader 참조를 사용하여 새 윈도우의 Window 객체에 액세스할 수 있습니다. 이전 예제의 맥락에서 newHTMLLoader.window 문은 만들어진 윈도우의 JavaScript Window 객체를 참조합니다.

mx:Window를 만들려면 mx:Window를 루트 태그로 사용하여 MXML 파일을 만들거나 Window 클래스 생성자를 직접 호출할 수 있습니다.

다음 예제에서는 Window 생성자를 호출하여 mx:Window를 만들고 표시합니다.

var newWindow:Window = new Window(); 
newWindow.systemChrome = NativeWindowSystemChrome.NONE; 
newWindow.transparent = true; 
newWindow.title = "New Window"; 
newWindow.width = 200; 
newWindow.height = 200; 
newWindow.open(true);

AIR 윈도우에 내용을 추가하는 방법은 윈도우 유형에 따라 달라집니다. 예를 들어 MXML 및 HTML을 사용하면 윈도우의 기본 내용을 선언적으로 정의할 수 있습니다. 응용 프로그램 SWF 파일에 리소스를 포함하거나 별도의 응용 프로그램 파일에서 리소스를 로드할 수 있습니다. Flex, Flash 및 HTML 내용은 모두 즉석에서 만들어 윈도우에 동적으로 추가할 수 있습니다.

SWF 내용이나 JavaScript가 포함된 HTML 내용을 로드할 때 AIR 보안 모델을 고려해야 합니다. 응용 프로그램 보안 샌드박스의 내용, 즉 응용 프로그램과 함께 설치되고 app: URL 스킴으로 로드 가능한 내용은 모든 AIR API에 액세스할 수 있는 전체 권한을 갖습니다. 이 샌드박스 밖에서 로드된 내용은 AIR API에 액세스할 수 없습니다. 응용 프로그램 샌드박스 밖의 JavaScript 내용은 JavaScript Window 객체의 runtime, nativeWindow 또는 htmlLoader 속성을 사용할 수 없습니다.

안전한 크로스 스크립팅을 허용하려면 샌드박스 브리지를 사용하여 응용 프로그램 내용과 비 응용 프로그램 내용 간의 제한된 인터페이스를 제공할 수 있습니다. HTML 내용에서 응용 프로그램의 페이지를 비 응용 프로그램 샌드박스에 매핑하여 해당 페이지의 코드에서 외부 내용의 크로스 스크립팅을 허용할 수도 있습니다. 자세한 내용은 AIR 보안을 참조하십시오.

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.net.URLRequest; 
    import flash.display.Loader; 
 
    public class LoadedSWF extends Sprite 
    { 
        public function LoadedSWF(){ 
            var loader:Loader = new Loader(); 
            loader.load(new URLRequest("visual.swf"));                    
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadFlash); 
        } 
 
        private function loadFlash(event:Event):void{ 
            addChild(event.target.loader);  
        } 
    } 
}

//newWindow is a NativeWindow instance 
var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.width = 300; 
htmlView.height = 500; 
 
//set the stage so display objects are added to the top-left and not scaled 
newWindow.stage.align = "TL"; 
newWindow.stage.scaleMode = "noScale"; 
newWindow.stage.addChild( htmlView ); 
 
//urlString is the URL of the HTML page to load 
htmlView.load( new URLRequest(urlString) );

<html> 
<head> 
<title>Bouncers</title> 
<script src="AIRAliases.js" type="text/javascript"></script> 
<script language="JavaScript" type="text/javascript"> 
air.Shape = window.runtime.flash.display.Shape; 
 
function Bouncer(radius, color){ 
    this.radius = radius; 
    this.color = color; 
 
    //velocity  
    this.vX = -1.3; 
    this.vY = -1; 
 
    //Create a Shape object and draw a circle with its graphics property 
    this.shape = new air.Shape();     
    this.shape.graphics.lineStyle(1,0); 
    this.shape.graphics.beginFill(this.color,.9); 
    this.shape.graphics.drawCircle(0,0,this.radius); 
    this.shape.graphics.endFill(); 
     
    //Set the starting position 
    this.shape.x = 100; 
    this.shape.y = 100; 
 
 
    //Moves the sprite by adding (vX,vY) to the current position 
    this.update = function(){ 
        this.shape.x += this.vX; 
        this.shape.y += this.vY; 
         
        //Keep the sprite within the window 
        if( this.shape.x - this.radius < 0){  
            this.vX = -this.vX; 
        } 
        if( this.shape.y - this.radius < 0){ 
            this.vY = -this.vY; 
        } 
        if( this.shape.x  + this.radius > window.nativeWindow.stage.stageWidth){ 
            this.vX = -this.vX; 
        } 
        if( this.shape.y  + this.radius > window.nativeWindow.stage.stageHeight){ 
            this.vY = -this.vY; 
        } 
         
    }; 
} 
 
function init(){ 
    //turn off the default HTML background 
    window.htmlLoader.paintsDefaultBackground = false; 
    var bottom = new Bouncer(60,0xff2233); 
    var top = new Bouncer(30,0x2441ff); 
 
    //listen for the enterFrame event 
    window.htmlLoader.addEventListener("enterFrame",function(evt){ 
        bottom.update(); 
        top.update(); 
    }); 
     
    //add the bouncing shapes to the window stage 
    window.nativeWindow.stage.addChildAt(bottom.shape,0); 
    window.nativeWindow.stage.addChild(top.shape); 
} 
</script> 
<body onload="init();"> 
<h1>de Finibus Bonorum et Malorum</h1> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
et quasi architecto beatae vitae dicta sunt explicabo.</p> 
<p style="background-color:#FFFF00; color:#660000;">This paragraph has a background color.</p> 
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias 
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui 
officia deserunt mollitia animi, id est laborum et dolorum fuga.</p> 
</body> 
</html>

다음 예제에서는 기본 윈도우를 만드는 방법을 보여 줍니다.

public function createNativeWindow():void { 
    //create the init options 
    var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
    options.transparent = false; 
    options.systemChrome = NativeWindowSystemChrome.STANDARD; 
    options.type = NativeWindowType.NORMAL; 
     
    //create the window 
    var newWindow:NativeWindow = new NativeWindow(options); 
    newWindow.title = "A title"; 
    newWindow.width = 600; 
    newWindow.height = 400; 
     
    newWindow.stage.align = StageAlign.TOP_LEFT; 
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE; 
 
    //activate and show the new window 
    newWindow.activate(); 
}