Flex SDK를 사용하여 첫 번째 데스크톱 AIR 응용 프로그램 만들기

이 단원에서는 응용 프로그램 설명자를 만드는 방법을 설명합니다. 응용 프로그램 설명자는 다음과 같은 구조를 갖는 XML 파일입니다.

<application xmlns="..."> 
    <id>...</id> 
    <versionNumber>...</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>

1. HelloWorld-app.xml 이라는 XML 파일을 만들어 프로젝트 디렉토리에 저장합니다.

2. AIR 네임스페이스 특성을 포함하여 <application> 요소를 추가합니다.

   <application xmlns="http://ns.adobe.com/air/application/2.7"> 네임스페이스의 마지막 세그먼트인 "2.7"은 응용 프로그램에 필요한 런타임의 버전을 지정합니다.

3. <id> 요소를 추가합니다.

   <id>samples.flex.HelloWorld</id> 응용 프로그램 ID는 제작자 ID(응용 프로그램 패키지에 서명하는 데 사용된 인증서에서 파생됨)와 함께 응용 프로그램을 고유하게 식별합니다. 권장되는 형식은 "com.company.AppName" 과 같이 DNS 스타일과 반대 방향인, 점으로 구분된 문자열입니다. 응용 프로그램 ID는 설치, 개인 응용 프로그램 파일 시스템 저장소 디렉토리 액세스, 개인 암호화 저장소 액세스 및 응용 프로그램 간 통신에 사용됩니다.

4. <versionNumber> 요소를 추가합니다.

   <versionNumber>1.0</versionNumber> 사용자에게 설치하는 응용 프로그램의 버전을 알려 줍니다.

   참고: AIR 2 이하를 사용하는 경우 <versionNumber> 요소 대신 <version> 요소를 사용해야 합니다.

5. <filename> 요소를 추가합니다.

   <filename>HelloWorld</filename> 응용 프로그램 실행 파일, 설치 디렉토리 및 운영 체제의 참조와 유사한 항목에 사용되는 이름입니다.

6. 초기 응용 프로그램 윈도우의 속성을 지정하는 다음과 같은 자식 요소를 포함하는 <initialWindow> 요소를 추가합니다.

   <content>HelloWorld.swf</content> AIR에서 로드할 루트 SWF 파일을 식별합니다.

   <visible>true</visible> 윈도우를 즉시 보이게 만듭니다.

   <width>400</width> 윈도우 폭을 픽셀 단위로 설정합니다.

   <height>200</height> 윈도우 높이를 설정합니다.

7. 파일을 저장합니다. 전체 응용 프로그램 설명자 파일은 다음과 같은 형태가 됩니다.

   <?xml version="1.0" encoding="UTF-8"?> 
   <application xmlns="http://ns.adobe.com/air/application/2.7"> 
       <id>samples.flex.HelloWorld</id> 
       <versionNumber>0.1</versionNumber> 
       <filename>HelloWorld</filename> 
       <initialWindow> 
           <content>HelloWorld.swf</content> 
           <visible>true</visible> 
           <width>400</width> 
           <height>200</height> 
       </initialWindow> 
   </application>

이 예제에서는 사용 가능한 응용 프로그램 속성 중 일부만 설정합니다. 윈도우 크롬, 윈도우 크기, 투명도, 기본 설치 디렉토리, 연결된 파일 유형, 응용 프로그램 아이콘 등을 지정할 수 있는 전체 응용 프로그램 속성을 보려면 AIR 응용 프로그램 설명자 파일 을 참조하십시오.

모든 Flex 기반 응용 프로그램과 마찬가지로, Flex 프레임워크로 구축된 AIR 응용 프로그램에는 기본 MXML 파일이 포함되어 있습니다. 데스크톱 AIR 응용 프로그램은 Application 구성 요소 대신 WindowedApplication 구성 요소를 루트 요소로 사용합니다. WindowedApplication 구성 요소는 응용 프로그램과 해당 초기 윈도우를 제어하기 위한 속성, 메서드 및 이벤트를 제공합니다. AIR가 여러 윈도우를 지원하지 않는 플랫폼 및 프로파일에서는 Application 구성 요소를 계속 사용하십시오. 모바일 Flex 응용 프로그램에서는 View 또는 TabbedViewNavigatorApplication 구성 요소를 사용할 수도 있습니다.

다음 절차에 따라 Hello World 응용 프로그램을 만듭니다.

1. 텍스트 편집기를 사용하여 HelloWorld.mxml 이라는 파일을 만들고 다음 MXML 코드를 추가합니다.

   <?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>

2. 그런 다음 응용 프로그램에 Label 구성 요소를 추가합니다(WindowedApplication 태그 안에 배치).

3. Label 구성 요소의 text 속성을 "Hello AIR" 로 설정합니다.

4. 텍스트를 항상 가운데에 맞추도록 레이아웃 제한 사항을 설정합니다.

   다음 예제는 지금까지 작성한 코드를 보여 줍니다.

   <?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>

응용 프로그램을 실행하고 디버깅하려면 먼저 amxmlc 컴파일러를 사용하여 MXML 코드를 SWF 파일로 컴파일하십시오. amxmlc 컴파일러는 Flex SDK의 bin 디렉토리에서 찾을 수 있습니다. 필요한 경우 컴퓨터의 경로 환경을 Flex SDK bin 디렉토리를 포함하도록 설정할 수 있습니다. 경로를 설정하면 명령줄에서 유틸리티를 더 쉽게 실행할 수 있습니다.

1. 명령 셸 또는 터미널을 열고 AIR 응용 프로그램의 프로젝트 폴더로 이동합니다.

2. 다음 명령을 입력합니다.

   amxmlc HelloWorld.mxml 

amxmlc 를 실행하면 HelloWorld.swf 가 생성되며, 응용 프로그램의 컴파일된 코드가 이 파일에 포함됩니다.

자세한 내용은 AIR용 MXML 및 ActionScript 소스 파일 컴파일 을 참조하십시오.

명령줄에서 응용 프로그램을 실행하고 테스트하려면 ADL(AIR Debug Launcher)을 사용하여 해당 응용 프로그램 설명자 파일을 통해 응용 프로그램을 시작합니다. ADL은 Flex SDK의 bin 디렉토리에서 찾을 수 있습니다.

명령 프롬프트에서 다음 명령을 입력합니다.

adl HelloWorld-app.xml 

그러면 다음 그림과 비슷한 AIR 응용 프로그램이 표시됩니다.

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

자세한 내용은 ADL(AIR Debug Launcher) 을 참조하십시오.

응용 프로그램이 성공적으로 실행되면 ADT 유틸리티를 사용하여 응용 프로그램을 AIR 설치 파일로 패키지화할 수 있습니다. AIR 설치 파일은 사용자에게 응용 프로그램을 배포할 수 있도록 응용 프로그램의 모든 파일을 포함하는 보관 파일입니다. 패키지화된 AIR 파일을 설치하려면 먼저 Adobe AIR를 설치해야 합니다.

응용 프로그램 보안을 유지하기 위해 모든 AIR 설치 파일은 디지털 서명이 되어야 합니다. ADT나 다른 인증서 생성 도구에서는 개발 용도로 사용할 기본적인 자체 서명 인증서를 생성할 수 있습니다. 상업용 인증 기관에서 상업용 코드 서명 인증서를 구입할 수도 있습니다. 사용자가 자체 서명된 AIR 파일을 설치할 경우 설치 과정에서 제작자가 "알 수 없음"으로 표시됩니다. 이것은 자체 서명된 인증서가 AIR 파일이 만들어진 이후로 변경되지 않았다는 것만 보장하기 때문입니다. 악의적인 AIR 파일을 자체 서명하여 응용 프로그램으로 제공하는 것 자체를 막을 방법은 없습니다. 따라서, 공개적으로 배포되는 AIR 파일에는 검증 가능한 상용 인증서를 사용하는 것이 좋습니다. AIR 보안 문제에 대한 개요는 AIR 보안 (ActionScript 개발자용) 또는 AIR security (HTML 개발자용)을 참조하십시오.

자체 서명 인증서 및 키 쌍 생성

명령 프롬프트에서 다음 명령을 입력합니다. ADT 실행 파일은 Flex SDK의 bin 디렉토리에서 찾을 수 있습니다.

adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

이 예제에서는 인증서에 설정할 수 있는 최소한의 특성만 사용합니다. 키 유형은 1024-RSA 또는 2048-RSA 여야 합니다( AIR 응용 프로그램 서명 참조).

AIR 패키지 만들기

명령 프롬프트에서 다음 명령을 한 줄에 입력합니다.

adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.swf

키 저장소 파일의 암호를 입력하라는 메시지가 나타납니다. 암호를 입력하고 Enter 키를 누릅니다. 보안상의 이유로 암호 문자는 표시되지 않습니다.

HelloWorld.air 인수는 ADT가 생성한 AIR 파일입니다. HelloWorld-app.xml은 응용 프로그램 설명자 파일입니다. 그 이후의 인수는 응용 프로그램에 사용되는 파일입니다. 이 예제에서는 파일 세 개만 사용하지만 원하는 수의 파일 및 디렉토리를 포함할 수 있습니다.

AIR 패키지가 만들어지면 해당 패키지 파일을 두 번 클릭하여 응용 프로그램을 설치하고 실행할 수 있습니다. 셸이나 명령 윈도우에서 명령으로 AIR 파일 이름을 입력할 수도 있습니다.

자세한 내용은 데스크톱 AIR 설치 파일 패키지화 를 참조하십시오.