Flex 2 ファーストステップガイド > レッスン > 初めてのアプリケーションの作成 > アプリケーションの作成および実行

アプリケーションの作成および実行

このセクションの手順は、Lessons プロジェクトの作成が終了していて、自動構築が有効になっていることを前提としています。詳細については、Lessons プロジェクトの作成を参照してください。

1. Flex Builder で "Lessons.mxml" ファイルをまだ開いていない場合は、ナビゲータビューでファイルをダブルクリックして開きます。
2. ドキュメントツールバーで [ソース] ボタンをクリックして MXML エディタのソースモードに切り替えます。

   
   
   

   "Lessons.mxml" ファイルが作成されたときに次のコードがファイルに挿入されました。

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   </mx:Application>
   

3. <mx:Application> の開始タグと終了タグの間に次の <mx:Panel> タグを入力して、Panel コンテナを追加します。

   <mx:Panel title="My Application" width="200" height="300">
   </mx:Panel>
   

   Panel コンテナは、多くの Flex レイアウトの基本的な構築ブロックです。

4. <mx:Panel> の開始タグと終了タグの間に次の <mx:Label> タグを入力して、Label コントロールを追加します。

   <mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight"/>
   

   最終的なアプリケーションは次のようになります。

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
       <mx:Panel title="My Application" width="200" height="300">
           <mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight"/>
       </mx:Panel>
   </mx:Application>
   

   ヒント

   ドキュメントツールバーの [デザイン] ボタンをクリックすると、レイアウトをプレビューできます (手順 2 の画像を参照)。

5. ファイルを保存します。

   ファイルを保存すると、アプリケーションが自動的に構築されます。ウィンドウの右下隅にあるインジケータで構築の進行状況を監視できます。アプリケーションを構築している間も作業を続行できます。

   
   
   

6. 構築が完了したら、ツールバーの [実行] ボタンをクリックしてアプリケーションを起動します。Flex Builder のプラグイン構成を使用する場合、[実行]-[実行]-[Flex アプリケーション] を選択します。

   
   
   

   ブラウザが開き、アプリケーションが実行されます。

   
   
   

   メモ

   アプリケーションを実行するには、ブラウザに Flash Player 9 がインストールされている必要があります。Flex Builder をインストールするときに、選択したブラウザに Flash Player 9 をインストールするオプションがあります。Flash Player 9 がインストールされているブラウザに切り替えるには、Flex Builder で、[ウィンドウ]-[設定]-[一般]-[Web ブラウザー] を選択します。

7. "Welcome to Flex!" をクリックして、WipeRight エフェクトを確認します。

   エフェクトの詳細については、ビヘイビアの使用のレッスンを実行するか、『Flex 2 開発ガイド』のビヘイビアの使用を参照してください。

Flex Builder によって生成された SWF ファイルを Web サーバーにアップロードすることにより、アプリケーションを展開できます。Web ブラウザで SWF ファイルを実行するために、HTML ラッパーファイル ("Lessons.html") をアップロードすることもできます。ファイルは、プロジェクトフォルダの "bin" フォルダ内にあります。

このレッスンでは、Flex Builder でプロジェクトを作成する方法について学習しました。また、Flex Builder で Flex アプリケーションをコンパイル、実行する方法についても学習しました。このトピックの詳細については、『Flex Builder 2 ユーザーガイド』のプロジェクトの構築を参照してください。

Flex 2.01