Flex Builder での初めてのデスクトップ Flex AIR アプリケーションの作成

Flash Builder には、AIR アプリケーションの開発とパッケージ化用のツールが用意されています。

Flash Builder または Flex Builder で AIR アプリケーションの作成を開始するには、Flex ベースの他のアプリケーションプロジェクトの場合と同様、新しいプロジェクトを定義します。

1. Flash Builder を開きます。

2. ファイル／新規／Flex プロジェクトを選択します。

3. プロジェクト名を AIRHelloWorld と入力します。

4. Flex では、AIR アプリケーションがアプリケーションの種類の 1 つと見なされます。種類のオプションは 2 つあります。

   • Adobe® Flash® Player で実行する Web アプリケーション

   • Adobe AIR で実行するデスクトップアプリケーション

   アプリケーションの種類として「デスクトップ」を選択します。

5. 「終了」をクリックしてプロジェクトを作成します。

作成直後の AIR プロジェクトは 2 つのファイルから成ります。メインの MXML ファイルと、アプリケーション XML ファイル（アプリケーション記述ファイル）です。後者のファイルでは、アプリケーションプロパティを指定します。

詳しくは、「 Flash Builder を使用した AIR アプリケーションの開発 」を参照してください。

「Hello World」アプリケーションのコードを記述するには、エディターで開かれているアプリケーションの MXML ファイル（AIRHelloWorld.mxml）を編集します（ファイルが開かれていない場合は、プロジェクトナビゲーターを使用してファイルを開きます）。

デスクトップの Flex AIR アプリケーションは、MXML の WindowedApplication タグ内に含まれています。MXML の WindowedApplication タグでは、タイトルバーや閉じるボタンなどの基本的なウィンドウコントロールを含む単純なウィンドウが作成されます。

1. 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>

2. アプリケーションに 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>

3. 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>

次に、アプリケーションを透明にするために、アプリケーション記述子で以下のように設定を変更します。

記述したアプリケーションコードをテストするには、デバッグモードで実行します。

1. メインツールバーのデバッグボタン をクリックします。

   実行／デバッグ／AIRHelloWorld コマンドを選択することもできます。

   この結果、以下の例のような AIR アプリケーションが表示されます。

   

2. Label コントロールの horizontalCenter プロパティと verticalCenter プロパティが使用され、テキストがウィンドウ中央に配置されます。一般のデスクトップアプリケーションと同様に、ウィンドウを移動したりサイズを変更したりします。

これで、「Hello World」アプリケーションを配布用 AIR ファイルにパッケージ化する用意ができました。AIR ファイルは、アプリケーションファイルのアーカイブファイルです。アプリケーションファイルとは、プロジェクトの bin フォルダーに含まれているすべてのファイルです。この単純な例の場合、SWF ファイルとアプリケーション XML ファイルです。AIR パッケージをユーザーに配布すると、ユーザーはこれを使用してアプリケーションのインストールを行います。ここで必要となる手順が電子署名です。

1. アプリケーションにコンパイルエラーがなく、正常に実行できることを確認します。

2. プロジェクト／リリースビルドの書き出しを選択します。

3. AIRHelloWorld プロジェクトと AIRHelloWorld.mxml アプリケーションがプロジェクトおよびアプリケーションとしてリストに表示されていることを確認します。

4. 署名済み AIR パッケージとして書き出しオプションを選択します。「次へ」をクリックします。

5. 既存の電子証明書がある場合、「参照」をクリックして証明書を選択します。

6. 自己署名入り電子証明書を新しく作成する必要がある場合、「作成」を選択します。

7. 必要な情報を入力し、「OK」をクリックします。

8. 「終了」をクリックして、AIRHelloWorld.air という AIR パッケージを生成します。

Flash Builder のプロジェクトナビゲーターから、またはファイルシステムから AIR ファイルをダブルクリックすると、アプリケーションをインストールして実行できます。