Adobe Flex 3 ヘルプ

Flex アプリケーションでの ActionScript の使用

Flex 開発者は、ActionScript を使用して Flex アプリケーション内にカスタムビヘイビアを実装できます。最初に MXML タグを使用して、アプリケーションに必要なコンテナ、コントロール、エフェクト、フォーマッタ、バリデータ、Web サービスなどを宣言し、そのユーザーインターフェイスをレイアウトします。これらの各コンポーネントは、あらかじめ定められた標準のビヘイビアを提供します。例えばボタンの上にマウスを置くと、ActionScript を 1 行も記述しなくても、ボタンが自動的にハイライト表示されます。しかし、MXML のような宣言型言語は、ユーザーがボタンをクリックしたときの動作のコーディングには適していません。そのため、実行可能なメソッド、様々なタイプの保持変数、条件やループなどのフロー制御を備えた ActionScript のような手続き型言語を使用する必要があります。一般的な意味では、MXML はアプリケーションの静的側面を実装し、ActionScript は動的側面を実装すると言えます。

ActionScript はオブジェクト指向の手続き型プログラミング言語で、ECMAScript（ECMA-262）Edition 4 言語仕様草案をベースとします。ActionScript と MXML は、次のような様々な方法で組み合わせることができます。

  • ActionScript を使用して MXML イベント属性内でイベントリスナーを定義する
  • <mx:Script> タグを使用してスクリプトブロックを追加する
  • 外部 ActionScript ファイルをインクルードする
  • ActionScript クラスを読み込む
  • ActionScript コンポーネントを作成する

ActionScript のコンパイル

単純な Flex アプリケーションは単一の MXML ファイルまたは ActionScript（AS）ファイルに記述できますが、ほとんどのアプリケーションは複数のファイルに分割されます。例えば、<mx:Application> の <mx:Script> ブロックと <mx:Style> ブロックを個別の AS および CSS ファイルに移動し、それらのファイルをアプリケーションにインクルードするのが一般的です。また、通常は、カスタムの MXML コンポーネントと ActionScript コンポーネントをアプリケーションに読み込みます。これらのカスタムコンポーネントは他のファイル内で定義する必要があり、MXML コンポーネントではさらに別の AS ファイルをインクルードして、その中に自身の <mx:Script> ブロックを移動できます。ソースコードではなくプリコンパイルされた SWC ファイルからコンポーネントを読み込むこともできます。また、実行可能なコードを含む SWF ファイルをアプリケーションに埋め込むことも可能です。これらすべての入力ファイルは最終的に 1 つの SWF ファイルになります。

Flex コンパイラは、メイン MXML ファイルとインクルードされた他のファイルを 1 つの ActionScript クラスに変換します。したがって、MXML ファイルおよびインクルードされた ActionScript ファイルの関数の外部で、クラスを定義したりステートメントを使用したりできません。

読み込んだ ActionScript クラスは MXML アプリケーションファイルから参照できます。これらのクラスは最終的な SWF ファイルに追加されます。ActionScript ファイルへの変換が完了すると、Flex はすべての ActionScript コンポーネントをリンクし、これらのクラスを最終的な SWF ファイルにインクルードします。

生成された ActionScript について

MXML ファイルを記述してコンパイルすると、Flex コンパイラによってクラスが作成され、そのクラスで使用する ActionScript が生成されます。MXML タグおよび ActionScript は、作成されたクラスで複数の方法で使用されます。この情報は、アプリケーションのバックグラウンドで何が実行されているか理解する場合に便利です。

MXML アプリケーション（<mx:Application> タグで始まるファイル）は、Application クラスのサブクラスを定義します。同様に、MXML コンポーネント（<mx:Button> など、その他のコンポーネントタグで始まるファイル）は、そのコンポーネントのサブクラスを定義します。

ファイル名がサブクラスの名前になります。基本クラスは最上位タグのクラスです。MXML アプリケーションは実際には次のクラスを定義します。

class MyApp extends Application

<mx:Button> で始まる MyButton.mxml を作成した場合は、実際には次のクラスを定義していることになります。

class MyButton extends Button

<mx:Script> ブロックの変数と関数の宣言は、サブクラスのプロパティとメソッドを定義します。

クラスの中でコンポーネントインスタンスの id プロパティを設定すると、そのコンポーネントインスタンスへの参照を含むパブリック変数がサブクラスで自動生成されます。例えば、<mx:Button id="myButton"/> タグが複数のコンテナの中に深くネストされていても、このボタンを myButton として参照することが可能です。

イベント属性は、サブクラスで自動生成されたイベントリスナーメソッドの本体になります。例えば、次のようになります。

<mx:Button id="myButton" click="foo = 1; doSomething()">

この行は次のようになります。

private function __myButton_click(event:MouseEvent):void {
    foo = 1;
    doSomething()
}

イベント属性はメソッドの本体になるため、サブクラスの他のプロパティやメソッドにアクセスできます。

MXML ファイル内の ActionScript はすべて、それが <mx:Script> ブロックにあるかタグ内部にあるかにかかわらず、サブクラスのインスタンスを参照する this キーワードで実行されます。

クラスのパブリックプロパティおよびメソッドは、他のコンポーネントの ActionScript コードからアクセスできます。ただしその場合は、myCheckoutAccordion.myAddressForm.firstNameTextInput.text のようなドット表記を使用してその位置を指定するか、parentDocument、parentApplication または Application.application を使用してプロパティまたはメソッドがどのコンポーネントに存在するかを指定する必要があります。

MXML イベントハンドラでの ActionScript の使用

ActionScript コードを Flex アプリケーションで使用する方法の 1 つとして、MXML タグのイベントハンドラの中に ActionScript コードをインクルードする方法があります。次の例に示します。

<?xml version="1.0"?>
<!-- usingas/HelloWorldAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Panel title="My Application" >
     <mx:TextArea id="textarea1"/>
     <mx:Button label="Submit" click="textarea1.text='Hello World';"/>
  </mx:Panel>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

この例では、Button コントロールの click イベントハンドラの本体に ActionScript コードを記述しています。MXML コンパイラはこの click="..." 属性を受け取り、次のイベントハンドラメソッドを生成します。

public function __myButton_click(event:MouseEvent):void {
    textarea1.text='Hello World';
}

このコードでは、ユーザーがボタンをクリックすると、TextArea コントロールの text プロパティの値が 'Hello World'というストリングに設定されます。ほとんどの場合、生成されたコードを開発者が見る必要はありませんが、イベントハンドラをインラインで記述したときの動作を知っておくと役に立ちます。

生成されたコードを確認するには、keep-generated-actionscript コンパイラオプションの値を true に設定します。こうすると、コンパイル時に *.as ヘルパーファイルが /generated ディレクトリに保存されます。このディレクトリは SWF ファイルが存在するディレクトリの下にあります。

イベントの詳細については、イベントの使用を参照してください。コマンドラインコンパイラの使用の詳細については、Flex コンパイラの使用を参照してください。

MXML ファイル内での ActionScript ブロックの使用

<mx:Script> タグは、MXML ファイルに ActionScript ブロックを挿入するために使用します。ActionScript ブロックには、MXML アプリケーションで使用する ActionScript 関数および変数宣言を含めることができます。<mx:Script> タグ内のコードでは、定数（const ステートメントを使用）および名前空間（namespace を使用）の宣言、ActionScript ファイルのインクルード（include を使用）、宣言の読み込み（import を使用）および名前空間の使用（use namespace を使用）も行うことができます。

<mx:Script> タグは、<mx:Application> またはその他の最上位コンポーネントタグの子である必要があります。

ステートメントおよび式は、関数内にラップされている場合のみ、使用できます。また、<mx:Script> ブロック内では、新しいクラスやインターフェイスを定義することはできません。その代わりに、新しいクラスやインターフェイスを別の AS ファイルに配置して、そのファイルを読み込む必要があります。

ブロック内の ActionScript は、アプリケーションがコンパイルされるときに、それ自体を含むファイルのクラスに追加されます。次の例では、関数内で変数を宣言し、その変数の値を設定します。

<?xml version="1.0"?>
<!-- usingas/StatementSyntax.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="doSomething()">
    <mx:Script><![CDATA[
            public var s:Boolean;
            public function doSomething():void {
                // The following statements must be inside a function. 
                s = label1.visible; 
                label1.text = String(s);
            }
    ]]></mx:Script>
    
    <mx:Label id="label1"/>
    
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

ほとんどのステートメントは、<mx:Script> ブロック内の関数の内部に記述する必要があります。ただし、次のステートメントは関数の外部に記述できます。

  • import
  • var
  • include
  • const
  • namespace
  • use namespace

<mx:Script> ブロックを使用する場合は、CDATA 構造内のその内容を折り返す必要があります。これにより、コンパイラによってスクリプトブロックの内容が XML として解釈されることなく、ActionScript が正常に生成されるようになります。<mx:Script> の開始タグと終了タグはすべて、次の例のように記述することをお勧めします。

<mx:Script>
    <![CDATA[
        ...
    ]]>
</mx:Script>

Flex では CDATA 構造内のテキストは解析されないため、山括弧（< および >）やアンパサンド（&）など、XML で解析対象となる文字を使用できます。例えば、小なり（<）記号を含む次のスクリプトは、CDATA 構造内に記述する必要があります。

<?xml version="1.0"?>
<!-- usingas/UsingCDATA.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="doSomething()">
    <mx:Script><![CDATA[
        public var m:Number;
        public var n:Number;
        public function doSomething():void {
            n = 42;
            m = 40;
            label1.text = String(n > m);
        }
    ]]></mx:Script>
    
    <mx:Label id="label1"/>
    
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

ActionScript マニュアルへのアクセス

ActionScript 3.0 プログラミング言語は、Adobe® Flash® Professional や Adobe® Flex™ Builder™ などの様々な開発環境で使用できます。

Flex マニュアルには、ActionScript 言語について解説した『ActionScript 3.0 のプログラミング』があります。ActionScript API リファレンスは、『Adobe Flex リファレンスガイド』の一部に含まれています。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート