1. ホーム
2. デベロッパーセンター
3. Flexデベロッパーセンター
4. Flex クイックスタート

Flex クイックスタート： はじめに

目次

• MXML と ActionScript を使用したコード記述
• 初めてのアプリケーション開発
• イベントの処理
• Flex コンポーネントの位置指定と配置
• アプリケーションアセットの埋め込み

---

MXML と ActionScript を使用したコード記述

Adobe® では Flex を ActionScript クラスライブラリとして実装しています。 このクラスライブラリには、コンポーネント（コンテナおよびコントロール）、マネージャクラス、データサービスクラスおよび他のすべての機能のクラスが含まれています。 MXML と ActionScript 言語でクラスライブラリを使用してアプリケーションを開発することができます。

MXML

MXML は XML 言語で、これを使用して Adobe® Flex™ アプリケーションのコンポーネントのユーザインタフェースを配置することができます。 MXML を使用して、アプリケーションの目に見えない面を明確に定義することもできます。たとえば、サーバサイドデータソースへのアクセス、ユーザインタフェースのコンポーネントとデータソース間のデータバインディングなどです。

たとえば、 <mx:Button> タグを使用して Button コントロールのインタフェースを作成するには、次の MXML 文を使用します。

<mx:Button id="myButton" label="I'm a button!"/>

■訳を後の文節にまとめました■ id プロパティを設定して、 Button インスタンスに一意の名前を割り当て、後でこれを参照することができます。 この label プロパティを使用して Button インスタンスに表示するラベルのテキストを設定します。

次の例は、Button コントロールを表示する Flex アプリケーションを作成するために必要なコードすべてです。

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

    <mx:Button id="myButton" label="I'm a button!" />
</mx:Application>

Flex アプリケーションを記述したら、Flex コンパイラを使用してコンパイルする必要があります。 Flex コンパイラは mxmlc という名前の小さな実行可能ファイルで、Flex 2 インストールフォルダの下の Flex SDK 2.0\bin フォルダに置かれています。

手順

1. メモ帳などのテキストエディタで新規ファイルを作成し、MyFirst.mxml という名前で保存します。
2. 上述の例に示したコードを MyFirst.mxml に記述して、ファイルを保存します。
3. スタート／すべてのプログラム／アクセサリ／コマンドプロンプトを選択して、コマンドウィンドウを開きます。
4. カレントディレクトリを、手順 1 で保存した Flex アプリケーションがあるフォルダに変更します。
5. 次のコマンドを入力して Flex コンパイラを起動します。
   mxmlc --strict=true --file-specs MyFirst.mxml
   
   

   コマンド文字列の 2 つのダッシュで始まる部分は コンパイラオプション と呼ばれ、Flex コンパイラの動作を指定するために使用します。 この例では、 --strict オプションを true に設定して、コンパイラを strict モードで起動します。 strict モードでは、より厳密なコード記述が必要になります。 たとえば、変数の型を静的に宣言する必要があります。 ■訳を後の文節にまとめました■ --file-specs オプションを使用して、コンパイルする MXML ファイルを指定します。

6. Windows エクスプローラで SWF ファイルをダブルクリックするか、コマンドラインにファイル名を入力して、スタンドアロンの Adobe Flash Player 9 でファイルを開きます。

この例では次のような SWF ファイルが生成されます。

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

ActionScript

MXML タグは ActionScript のクラスまたはクラスのプロパティに相当します。 Flex アプリケーションをコンパイルすると、Flex によって MXML タグが解析され、対応する ActionScript クラスが生成されます。 次に、これらの ActionScript クラスがコンパイルされて SWF バイトコードが生成され、SWF ファイルに保存されます。

上述の例では、Flex の Button コントロールを定義する ActionScript の Button クラスが生成されます。

注意：この例では、 mx ■訳を後の文節にまとめました■ <mx:Button> タグの mx 接頭辞はネーム空間です。 Application タグ内の一意の URL を使用して宣言されます。 この mx 接頭辞によって mx ネーム空間の各コンポーネントが、完全な修飾子を持つクラス名に割り当てられます。 これによって Flex コンパイラが mx ネーム空間の MXML タグに対応する ActionScript のクラスを見つけることができます。

次の例では、ActionScript を使用して Button コントロールを作成します。 結果は MXML を使用する場合と同様です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/GettingStartedActionScript/index.html"

    creationComplete="creationCompleteHandler();"
    width="300" height="80"
 >

    <mx:Script>

        <![CDATA[
            import mx.controls.Button;
            import mx.events.FlexEvent;

            private var myButton:Button;

            private function creationCompleteHandler():void

            {
                // Create a Button instance and set its label 
                myButton = new Button();
                myButton.label = "I'm a button!";
                
                // Get notified once button component has been created and processed for layout


                myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
                
                // Add the Button instance to the DisplayList
                addChild (myButton);
            } 
            
            private function buttonCreationCompleteHandler ( evt:FlexEvent ):void

            {
                // Center the button 
                myButton.x = parent.width/2 - myButton.width/2;
                myButton.y = parent.height/2 - myButton.height/2;
            }

        ]]>
    </mx:Script>
</mx:Application>

ActionScript を使用して Flex コンポーネントを作成する場合は、コンポーネントのクラスをインポートする必要があります。 また、コンポーネントを表示するには、 addChild() メソッドを使用して、コンポーネントをアプリケーションの DisplayList に追加する必要があります。 この長い複雑なコードの例を MXML を使用した例と比較すれば、明らかに MXML のほうが簡単です。MXML ではタグを使用する明確な構文でコードを記述できるので、ActionScript で長いコードを記述してコンポーネントを配置する場合と比べて時間を節約できます。

この例では次のような SWF ファイルが生成されます。

注意：この例は、 Script タグを使用したインライン ActionScript の使用例です。これは、ActionScript を Flex アプリケーションに含める方法の一例です。 ほかには、スクリプトのブロックを外部 ActionScript ファイルに分割したり、外部 ActionScript クラスを使用する方法があります。

トップへ戻る

---

詳細情報

MXML と ActionScript について詳しくは、『Flex 2 Developer's Guide』の「Developing applications in MXML」、「MXML Syntax」および「Using ActionScript」の章を参照してください。

著者について