AIR 기본 윈도우의 기초

Adobe AIR 1.0 이상

AIR의 윈도우
기본 윈도우 클래스
기본 윈도우 이벤트 흐름
기본 윈도우 스타일 및 비헤이비어를 제어하는 속성
시각적 윈도우 카탈로그

AIR의 기본 윈도우를 사용한 작업에 대한 빠른 설명 및 코드 예제를 보려면 Adobe Developer Connection에서 다음과 같은 퀵 스타트 문서를 참조하십시오.

AIR은 Flash®, Flex™ 및 HTML 프로그래밍 기술을 사용하여 기본 운영 체제 윈도우를 만드는 데 쉽게 사용할 수 있으며 플랫폼의 영향을 받지 않는 윈도우 API를 제공합니다.

AIR을 사용하면 응용 프로그램의 모양을 개발할 때 융통성이 커집니다. Mac에서 실행될 때는 Apple 스타일과 일치하고 Windows에서 실행될 때는 Microsoft 규칙을 따르며 Linux에서는 윈도우 관리자와 조화를 이루도록 윈도우의 모양을 표준 데스크톱 응용 프로그램과 비슷하게 만들 수 있습니다. 이러한 작업은 모두 플랫폼별 코드 행을 포함하지 않고 수행할 수 있습니다. 또는 Flex 프레임워크에서 제공하며 스킨을 사용할 수 있고 확장 가능한 크롬을 사용하여 응용 프로그램이 실행되는 곳에 관계없이 고유의 스타일을 설정할 수도 있습니다. 데스크톱에 대한 알파 블렌딩과 투명도를 완전히 지원하는 벡터 및 비트맵 아트웍을 사용하여 직접 윈도우 크롬을 그릴 수도 있습니다. 사각형 윈도우가 지겨우면 원형 윈도우를 그려보십시오.

AIR의 윈도우

AIR은 윈도우 작업을 위한 세 가지 고유한 API를 지원합니다.

ActionScript 지향 NativeWindow 클래스는 최하위 수준의 윈도우 API를 제공합니다. ActionScript 및 Flash Professional 제작 응용 프로그램에서는 NativeWindows를 사용합니다. 응용 프로그램에 사용된 윈도우를 구체화하려면 NativeWindow 클래스를 확장하십시오.
HTML 환경에서는 브라우저 기반 웹 응용 프로그램에서와 같이 JavaScript Window 클래스를 사용할 수 있습니다. JavaScript Window 메서드에 대한 호출은 기본 윈도우 객체로 이동됩니다.
Flex 프레임워크인 mx:WindowedApplication 및 mx:Window 클래스는 NativeWindow 클래스를 위한 Flex "래퍼"를 제공합니다. WindowedApplication 구성 요소는 Flex로 AIR 응용 프로그램을 만들 때 응용 프로그램 구성 요소를 바꾸므로 Flex 응용 프로그램에서 항상 초기 윈도우로 사용되어야 합니다.

ActionScript 윈도우

NativeWindow 클래스를 사용하여 윈도우를 만드는 경우 Flash Player 스테이지를 사용하고 목록을 직접 표시합니다. 시각적 객체를 NativeWindow에 추가하려면 윈도우 스테이지의 표시 목록이나 스테이지의 다른 표시 객체 컨테이너에 객체를 추가합니다.

HTML 윈도우

HTML 윈도우를 만들 때 HTML, CSS 및 JavaScript를 사용하여 내용을 표시합니다. 시각적 객체를 HTML 윈도우에 추가하려면 해당 내용을 HTML DOM에 추가합니다. HTML 윈도우는 NativeWindow의 특수한 범주입니다. AIR 호스트는 HTML 윈도우에서 기본 NativeWindow 인스턴스에 액세스할 수 있도록 하는 nativeWindow 속성을 정의합니다. 이 속성을 사용하여 여기에서 설명하는 NativeWindow 속성, 메서드 및 이벤트에 액세스할 수 있습니다.

참고: JavaScript Window 객체에는 moveTo() 및 close() 와 같이 포함하는 윈도우를 스크립팅하기 위한 메서드도 있습니다. 사용할 수 있는 메서드가 겹치는 경우 편리한 메서드를 사용하면 됩니다.

Flex 프레임워크 윈도우

Flex 프레임워크를 사용하여 윈도우를 만드는 경우 일반적으로 MXML 구성 요소를 사용하여 윈도우를 채웁니다. Flex 구성 요소를 윈도우에 추가하려면 해당 구성 요소를 윈도우 MXML 정의에 추가합니다. ActionScript를 사용하여 내용을 동적으로 추가할 수도 있습니다. mx:WindowedApplication 및 mx:Window 구성 요소는 Flex 컨테이너로 설계되었으므로 Flex 구성 요소를 직접 받아들일 수 있지만 NativeWindow 객체는 그럴 수 없습니다. 필요한 경우 NativeWindow 속성 및 메서드는 nativeWindow 속성을 사용하여 WindowedApplication 및 Window 객체를 통해 액세스할 수 있습니다.

초기 응용 프로그램 윈도우

응용 프로그램의 첫 번째 윈도우는 AIR에서 자동으로 만듭니다. AIR은 응용 프로그램 설명자 파일의 initialWindow 요소에 지정된 매개 변수를 사용하여 윈도우의 속성과 내용을 설정합니다.

루트 내용이 SWF 파일이면 AIR은 NativeWindow 인스턴스를 만든 다음 SWF 파일을 로드하여 윈도우 스테이지에 추가합니다. 루트 내용이 HTML 파일이면 AIR은 HTML 윈도우를 만들고 HTML을 로드합니다.

기본 윈도우 클래스

기본 윈도우 API에는 다음과 같은 클래스가 포함되어 있습니다.

패키지	클래스
flash.display	NativeWindow NativeWindowInitOptions NativeWindowDisplayState NativeWindowResize NativeWindowSystemChrome NativeWindowType
flash.events	NativeWindowBoundsEvent NativeWindowDisplayStateEvent

기본 윈도우 이벤트 흐름

기본 윈도우는 중요한 변경이 발생하려고 하거나 이미 발생했음을 관련 구성 요소에 알리기 위해 이벤트를 전달합니다. 많은 윈도우 관련 이벤트가 쌍으로 전달됩니다. 첫 번째 이벤트는 변경이 발생하려고 한다고 경고합니다. 두 번째 이벤트는 변경이 수행되었다고 알립니다. 경고 이벤트를 취소할 수 있지만 알림 이벤트는 취소할 수 없습니다. 사용자가 윈도우의 최대화 버튼을 클릭할 때 발생하는 이벤트의 흐름은 다음과 같습니다.

NativeWindow 객체가 displayStateChanging 이벤트를 전달합니다.
등록된 리스너가 이벤트를 취소하지 않으면 윈도우가 최대화됩니다.
NativeWindow 객체가 displayStateChange 이벤트를 전달합니다.

또한 NativeWindow 객체도 윈도우 크기 및 위치의 관련 변경에 대한 이벤트를 전달합니다. 윈도우는 이러한 관련 변경에 대한 경고 이벤트를 전달하지 않습니다. 관련 이벤트는 다음과 같습니다.
1. move 이벤트는 최대화 작업 때문에 윈도우의 왼쪽 맨 위 모서리가 이동한 경우 전달됩니다.
2. resize 이벤트는 최대화 작업 때문에 윈도우 크기가 변경된 경우 전달됩니다.
NativeWindow 객체는 윈도우의 최소화, 복원, 닫기, 이동 및 크기 조절 시 유사한 이벤트 시퀀스를 전달합니다.

경고 이벤트는 윈도우 크롬이나 운영 체제에서 제어하는 다른 메커니즘을 통해 변경이 시작될 때만 전달됩니다. 윈도우 메서드를 호출하여 윈도우 크기, 위치 또는 표시 상태를 변경하는 경우 윈도우는 이러한 변경을 알리기 위해서만 이벤트를 전달합니다. 윈도우 dispatchEvent() 메서드를 사용하여 경고 이벤트를 전달한 다음 변경을 계속하기 전에 경고 이벤트가 취소되었는지 확인할 수 있습니다.

윈도우 API 클래스, 메서드, 속성 및 이벤트에 대한 자세한 내용은 Adobe Flash Platform용 ActionScript 3.0 참조 설명서 를 참조하십시오.

기본 윈도우 스타일 및 비헤이비어를 제어하는 속성

다음 속성은 윈도우의 기본적인 모양과 비헤이비어를 제어합니다.

type
systemChrome
transparent
owner

윈도우를 만들 때 윈도우 생성자에 전달된 NativeWindowInitOptions 객체에서 이러한 속성을 설정합니다. AIR은 응용 프로그램 설명자에서 초기 응용 프로그램 윈도우의 속성을 읽습니다(응용 프로그램 설명자에서 설정할 수 없고 항상 normal 로 설정되는 type 속성 제외). 이러한 속성은 윈도우를 만든 후 변경할 수 없습니다.

이러한 속성의 일부 설정은 상호 호환되지 않습니다. transparent 가 true 이거나 type 이 lightweight 인 경우 systemChrome 을 standard 로 설정할 수 없습니다.

윈도우 유형

AIR 윈도우 유형의 경우 기본 운영 체제의 가시성 특성과 크롬을 결합하여 세 가지 기능의 윈도우 유형을 만듭니다. NativeWindowType 클래스에 정의된 상수를 사용하여 코드에서 유형 이름을 참조합니다. AIR은 다음과 같은 윈도우 유형을 제공합니다.

유형	설명
일반	일반적인 윈도우입니다. 일반 윈도우는 전체 크기 스타일의 크롬을 사용하고 Windows 작업 표시줄 및 Mac OS X 윈도우 메뉴에 표시됩니다.
유틸리티	도구 팔레트입니다. 유틸리티 윈도우는 보다 간단한 시스템 크롬 버전을 사용하며 Windows 작업 표시줄 및 Mac OS X 윈도우 메뉴에 표시되지 않습니다.
경량	경량 윈도우에는 크롬이 없으며 Windows 작업 표시줄이나 Mac OS X 윈도우 메뉴에 표시되지 않습니다. 또한 경량 윈도우에는 Windows의 시스템 메뉴(Alt+Space)가 없습니다. 경량 윈도우는 알림 버블링 및 잠시 사용되는 표시 영역을 여는 콤보 상자와 같은 컨트롤에 적합합니다. 경량 `유형` 을 사용할 때는 `systemChrome` 을 `none` 으로 설정해야 합니다.

윈도우 크롬

윈도우 크롬은 데스크톱 환경에서 윈도우를 조작하는 데 사용할 수 있는 컨트롤의 집합입니다. 크롬 요소에는 제목 표시줄, 제목 표시줄 버튼, 테두리, 크기 조절 그리퍼 등이 있습니다.

시스템 크롬

systemChrome 속성을 standard 또는 none 으로 설정할 수 있습니다. 사용자의 운영 체제에서 만들어지고 스타일이 지정된 표준 컨트롤의 집합을 윈도우에 제공하려면 standard 시스템 크롬을 선택하고, 윈도우에 사용자 고유의 크롬을 제공하려면 none 을 선택합니다. 코드에서 시스템 크롬 설정을 참조하려면 NativeWindowSystemChrome 클래스에 정의된 상수를 사용합니다.

시스템 크롬은 시스템에서 관리됩니다. 응용 프로그램에서는 컨트롤 자체에 직접 액세스할 수 없지만 컨트롤이 사용될 때 전달된 이벤트에 응답할 수 있습니다. 윈도우에 표준 크롬을 사용하는 경우 transparent 속성을 false 로 설정해야 하고 type 속성이 normal 또는 utility 여야 합니다.

Flex 크롬

Flex WindowedApplication 또는 Window 구성 요소를 사용하는 경우 윈도우에서 시스템 크롬이나 Flex 프레임워크에서 제공하는 크롬을 사용할 수 있습니다. Flex 크롬을 사용하려면 윈도우를 만드는 데 사용된 systemChrome 속성을 none 으로 설정합니다. mx 구성 요소가 아닌 Flex 4 spark 구성 요소를 사용하는 경우 Flex 크롬을 사용하려면 스킨 클래스를 지정해야 합니다. 기본 제공 스킨을 사용하거나 사용자의 스킨을 제공할 수 있습니다. 다음 예에서는 기본 제공 spark WindowedApplication 스킨 클래스를 사용하여 윈도우 크롬을 제공하는 방법을 보여 줍니다.

<?xml version="1.0" encoding="utf-8"?> 
<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/mx"> 
<fx:Style> 
@namespace "library://ns.adobe.com/flex/spark"; 
WindowedApplication 
{ 
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
} 
</fx:Style> 
</s:WindowedApplication>

자세한 내용은 Flex 4 사용: AIR 윈도우 컨테이너 정보: 윈도우 크롬 제어 를 참조하십시오.

사용자 정의 크롬

시스템 크롬을 사용하지 않고 윈도우를 만드는 경우 사용자와 윈도우의 상호 작용을 처리하기 위해 사용자 고유의 크롬 컨트롤을 추가해야 합니다. 또한 사각형이 아닌 투명 윈도우를 만들 수 있습니다.

mx:WindowedApplication 또는 mx:Window 구성 요소와 함께 사용자 정의 크롬을 사용하려면 showFlexChrome 스타일을 false 로 설정해야 합니다. 그렇지 않으면 Flex에서 자체의 고유한 크롬을 윈도우에 추가합니다.

윈도우 투명도

바탕 화면이나 다른 윈도우와 윈도우의 알파 블렌딩을 허용하려면 윈도우 transparent 속성을 true 로 설정합니다. transparent 속성은 윈도우를 만들기 전에 설정해야 하며 변경할 수 없습니다.

투명 윈도우에는 기본 배경이 없습니다. 응용 프로그램에서 그린 객체가 포함되지 않은 윈도우 영역은 표시되지 않습니다. 표시된 객체의 알파가 1보다 작게 설정되면 동일한 윈도우, 다른 윈도우 및 바탕 화면에 있는 다른 표시 객체를 비롯하여 객체 아래에 있는 모든 것이 표시됩니다.

투명 윈도우는 모양이 불규칙하거나 "페이드 아웃"되거나 표시되지 않는 테두리를 사용하여 응용 프로그램을 만들려는 경우 유용합니다. 그러나 알파 블렌딩된 큰 영역을 렌더링하는 경우 속도가 느릴 수 있으므로 이 효과는 반드시 필요한 경우에만 사용해야 합니다.

중요: Linux에서는 마우스 이벤트가 완전히 투명한 픽셀을 통과하지 않습니다. 따라서 보이지 않는 방식으로 데스크톱의 다른 윈도우 또는 항목에 대한 사용자의 액세스를 차단할 수 있으므로 완전히 투명한 영역이 큰 윈도우를 만들어서는 안 됩니다. Mac OS X 및 Windows의 경우에는 마우스 이벤트가 완전히 투명한 픽셀을 통과합니다.

시스템 크롬이 있는 윈도우에는 투명도를 사용할 수 없습니다. 또한 HTML의 SWF 및 PDF 내용은 투명 윈도우에 표시되지 않을 수 있습니다. 자세한 내용은 SWF 또는 PDF 내용을 HTML 페이지에 로드하는 경우의 고려 사항 을 참조하십시오.

정적 NativeWindow.supportsTransparency 속성은 윈도우 투명도를 사용할 수 있는지 여부를 보고합니다. 투명도가 지원되지 않으면 응용 프로그램이 검정 배경에 합성됩니다. 이러한 경우 응용 프로그램의 투명한 영역은 모두 불투명한 검정으로 표시됩니다. 따라서 이 속성이 false 로 판단되는 경우에 대비하여 대체 동작을 제공하는 것이 좋습니다. 예를 들어 경고 대화 상자를 사용자에게 표시하거나 투명하지 않은 사각형 사용자 인터페이스를 표시할 수 있습니다.

Mac 및 Windows 운영 체제에서는 투명도가 항상 지원됩니다. Linux 운영 체제에서 투명도를 사용하려면 합성 윈도우 관리자가 필요하지만 합성 윈도우 관리자가 활성 상태인 경우에도 사용자 표시 옵션 또는 하드웨어 구성으로 인해 투명도를 사용하지 못할 수 있습니다.

MXML 응용 프로그램 윈도우의 투명도

투명 윈도우를 만드는 경우에도 MXML 윈도우의 배경은 기본적으로 불투명합니다. 투명도 효과는 윈도우의 모서리에서 확인할 수 있습니다. 윈도우의 배경을 투명하게 표시하려면 응용 프로그램 MXML 파일에 포함된 <mx:Style> 요소나 스타일 시트의 배경색과 알파 값을 설정합니다. 예를 들어 다음과 같은 스타일 선언은 배경에 약간 투명한 녹색 음영을 제공합니다.

WindowedApplication 
{ 
    background-alpha:".8"; 
    background-color:"0x448234"; 
}

HTML 응용 프로그램 윈도우의 투명도

포함하는 윈도우가 투명한 경우에도 HTML 윈도우나 HTMLLoader 객체에 표시되는 HTML 내용의 배경은 기본적으로 불투명합니다. HTML 내용에 대해 표시되는 기본 배경을 해제하려면 paintsDefaultBackground 속성을 false 로 설정합니다. 다음 예제에서는 HTMLLoader를 만들고 기본 배경을 해제합니다.

var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.paintsDefaultBackground = false;

이 예제에서는 JavaScript를 사용하여 HTML 윈도우의 기본 배경을 해제합니다.

window.htmlLoader.paintsDefaultBackground = false;

HTML 문서의 요소가 배경색을 설정하는 경우 해당 요소의 배경은 투명하지 않습니다. 부분 투명도(또는 불투명도) 값 설정은 지원되지 않습니다. 그러나 투명한 PNG 형식 그래픽을 페이지나 페이지 요소의 배경으로 사용하여 유사한 시각적 효과를 얻을 수 있습니다.

윈도우 소유권

한 개의 윈도우는 다른 윈도우를 하나 이상 소유 할 수 있습니다. 소유된 윈도우는 항상 마스터 윈도우 앞에 나타나며, 마스터 윈도우와 함께 최소화 및 복원되고 마스터 윈도우가 닫히면 함께 닫힙니다. 윈도우 소유권은 다른 윈도우로 이동하거나 제거할 수 없습니다. 윈도우는 하나의 마스터 윈도우에서만 소유될 수 있지만 임의의 개수의 다른 윈도우를 소유할 수 있습니다.

윈도우 소유권을 활용하면 도구 팔레트 및 대화 상자에 사용되는 윈도우를 더욱 쉽게 관리할 수 있습니다. 예를 들어 [저장] 대화 상자를 문서 윈도우와 연결해 표시한 경우 문서 윈도우가 대화 상자를 소유하도록 하면 대화 상자가 문서 윈도우 앞에 자동으로 유지됩니다.