Flash Builder에서 첫 번째 데스크톱 Flex AIR 응용 프로그램 만들기

AIR 프로젝트 만들기
AIR 응용 프로그램 코드 작성
AIR 응용 프로그램 테스트
AIR 응용 프로그램 패키지, 서명 및 실행

Adobe® AIR® 작동 방식을 빠르게 살펴보려면 다음 지침에 따라 Adobe® Flash® Builder를 사용하여 간단한 SWF 파일 기반 AIR "Hello World" 응용 프로그램을 만들어 패키지화해 보십시오.

아직 Flash Builder를 설치하지 않았다면 지금 다운로드하여 설치하십시오. 또한 www.adobe.com/go/air_kr 에서 최신 버전의 Adobe AIR를 다운로드하여 설치하십시오.

AIR 프로젝트 만들기

Flash Builder에는 AIR 응용 프로그램을 개발하고 패키지화할 수 있는 도구가 포함되어 있습니다.

다른 Flex 기반 응용 프로그램 프로젝트를 만들 때와 마찬가지로 새 프로젝트를 정의하여 Flash Builder 또는 Flex Builder에서 AIR 응용 프로그램을 만들 수 있습니다.

Flash Builder를 엽니다.
[File] > [New] > [Flex Project]를 선택합니다.
프로젝트 이름을 AIRHelloWorld로 입력합니다.
Flex에서 AIR 응용 프로그램은 응용 프로그램 유형으로 간주됩니다. 두 가지 방법이 있습니다.
- Adobe® Flash® Player에서 실행되는 웹 응용 프로그램
- Adobe AIR에서 실행되는 데스크톱 응용 프로그램
응용 프로그램 유형으로 [Desktop]을 선택합니다.
[Finish]를 클릭하여 프로젝트를 만듭니다.

초기 AIR 프로젝트는 기본 MXML 파일과 응용 프로그램 XML 파일(응용 프로그램 설명자 파일이라고 함)의 두 가지 파일로 구성됩니다. 후자는 응용 프로그램 속성을 지정합니다.

자세한 내용은 Flash Builder을 사용하여 AIR 응용 프로그램 개발 을 참조하십시오.

AIR 응용 프로그램 코드 작성

"Hello World" 응용 프로그램 코드를 작성하려면 응용 프로그램 MXML 파일(AIRHelloWorld.mxml)을 편집기에서 열어 편집해야 합니다. 파일이 열려 있지 않으면 Project Navigator를 사용하여 여십시오.

데스크톱의 Flex AIR 응용 프로그램은 MXML WindowedApplication 태그 내에 포함됩니다. MXML WindowedApplication 태그는 제목 표시줄, 닫기 버튼 같은 기본 윈도우 컨트롤이 포함된 간단한 윈도우를 만듭니다.

WindowedApplication 구성 요소에 title 특성을 추가하고 값으로 "Hello World" 를 할당합니다.

<?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" 
                       title="Hello World"> 
</s:WindowedApplication>

응용 프로그램에 Label 구성 요소를 추가(WindowedApplication 태그 안에 배치)합니다. Label 구성 요소의 text 속성을 "Hello AIR" 로 설정한 후 다음과 같이 텍스트를 가운데에 맞추는 레이아웃 제한을 설정합니다.

<?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" 
                       title="Hello World"> 
 
    <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
</s:WindowedApplication>

여는 WindowedApplication 태그와 앞서 입력한 레이블 구성 요소 태그 사이에 다음 스타일 블록을 추가합니다.

<fx:Style> 
    @namespace s "library://ns.adobe.com/flex/spark"; 
    s|WindowedApplication 
    { 
     
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
        background-color:#999999; 
        background-alpha:"0.7"; 
    }          
</fx:Style>

이 스타일 설정은 전체 응용 프로그램에 적용되어 윈도우 배경을 조금 투명한 회색으로 렌더링합니다.

이제 응용 프로그램 코드가 다음과 같아야 합니다.

<?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" 
                       title="Hello World"> 
     
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style> 
 
    <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
</s:WindowedApplication>

다음으로, 응용 프로그램 설명자에서 응용 프로그램을 투명하게 만드는 몇 가지 설정을 변경합니다.

Flex Navigator 윈도우에서 프로젝트의 소스 디렉토리에 있는 응용 프로그램 설명자 파일을 찾습니다. 프로젝트 이름을 AIRHelloWorld로 지정했으므로 이 파일의 이름은 AIRHelloWorld-app.xml입니다.
응용 프로그램 설명자 파일을 두 번 클릭하여 Flash Builder에서 편집합니다.
XML 코드에서 systemChrome 및 transparent 속성에 대한 주석 줄을 찾습니다. 이 줄은 initialWindow 속성 안에 있습니다. 주석을 제거합니다. 즉, "" 주석 구분 기호를 제거하십시오.
다음과 같이 systemChrome 속성의 텍스트 값을 none 으로 설정합니다.
```
<systemChrome>none</systemChrome>
```
다음과 같이 transparent 속성의 텍스트 값을 true 로 설정합니다.
```
<transparent>true</transparent>
```
파일을 저장합니다.

AIR 응용 프로그램 테스트

작성한 응용 프로그램 코드를 테스트하려면 디버그 모드에서 응용 프로그램을 실행합니다.

기본 툴바에서 [Debug] 버튼 을 클릭합니다.

또는 [Run] > [Debug] > [AIRHelloWorld] 명령을 선택할 수도 있습니다.

최종 AIR 응용 프로그램은 다음 예제와 같은 모습입니다.
Label 컨트롤의 horizontalCenter 및 verticalCenter 속성을 사용하여 텍스트를 윈도우 가운데에 배치합니다. 다른 모든 데스크톱 응용 프로그램과 마찬가지로 윈도우를 이동하거나 윈도우의 크기를 조정할 수 있습니다.

참고: 응용 프로그램이 컴파일되지 않으면 코드에서 잘못 입력한 구문 오류나 맞춤법 오류가 없는지 확인하고 해당 오류를 수정합니다. 오류와 경고는 Flash Builder의 Problems 보기에 표시됩니다.

AIR 응용 프로그램 패키지, 서명 및 실행

이제 "Hello World" 응용 프로그램을 AIR 파일로 패키지화하여 배포할 수 있습니다. AIR 파일은 프로젝트의 bin 폴더에 들어 있는 모든 파일(응용 프로그램 파일)이 포함된 보관 파일입니다. 이 간단한 예제에서는 SWF 파일과 응용 프로그램 XML 파일이 보관 파일에 포함됩니다. 이제 AIR 패키지를 배포하면 사용자가 응용 프로그램을 설치하고 사용할 수 있습니다. 이 과정의 필수 단계는 패키지에 디지털 서명을 하는 것입니다.

응용 프로그램에서 컴파일 오류가 발생하지 않고 예상대로 실행되는지 확인합니다.
[프로젝트] > [릴리스 빌드 내보내기]를 선택합니다.
AIRHelloWorld 프로젝트 및 AIRHelloWorld.mxml 응용 프로그램이 프로젝트 및 응용 프로그램의 목록에 있는지 확인합니다.
[Export as signed AIR package] 옵션을 선택합니다. 그런 다음 [Next]를 클릭합니다.
사용할 수 있는 기존 디지털 인증서가 있다면 [Browse]를 클릭하여 인증서를 선택합니다.
새 자체 서명 디지털 인증서를 만들려면 [Create]를 선택합니다.
필요한 정보를 입력하고 [OK]를 클릭합니다.
[Finish]를 클릭하여 AIR 패키지를 생성합니다. 생성된 패키지의 이름은 AIRHelloWorld.air입니다.

이제 Flash Builder의 Project Navigator나 파일 시스템에서 AIR 파일을 두 번 클릭하여 응용 프로그램을 설치하고 실행할 수 있습니다.