ActionScript を MXML から分離するテクニック -- Flex 2.01

このセクションでは、1 つのサンプルアプリケーションを使用して、ActionScript を MXML から分離する方法について説明します。Temperature アプリケーションは、1 つの入力フィールドから入力を受け取り、関数を使用して入力値を華氏から摂氏に変換します。続いて、変換結果を Label コントロールに表示します。

1 つの関数を呼び出すこの単純なアプリケーションにおいて、MXML と ActionScript を分離する方法はいくつかあります。

以降のセクションでは、それぞれの方法について説明します。

サブトピック

1 つの MXML ドキュメント (イベント属性でのイベント処理ロジック)

次のコードでは、MXML タグの click イベントに ActionScript イベント処理ロジックを記述しています。

<?xml version="1.0"?>
<!-- usingas/ASOneFile.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
     paddingLeft="10" paddingRight="10">
     <mx:HBox>
        <mx:Label text="Temperature in Farenheit:"/>
        <mx:TextInput id="farenheit" width="120"/>
        <mx:Button label="Convert"
           click="celsius.text=String((Number(farenheit.text)-32)/1.8);"/>
        <mx:Label text="Temperature in Celsius:"/>
     <mx:Label id="celsius" width="120" fontSize="24"/>
     </mx:HBox>
  </mx:Panel>
</mx:Application>

1 つの MXML ドキュメント (<mx:Script> ブロックでのイベント処理ロジック)

この例では、MXML ドキュメントの <mx:Script> ブロック内に関数のロジックを記述し、MXML タグの click イベントから呼び出しています。

<?xml version="1.0"?>
<!-- usingas/ASScriptBlock.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     public function calculate():void {
        var n:Number = Number(farenheit.text);
        celsius.text=String((n-32)/1.8);
     }
  ]]></mx:Script>

  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
     paddingLeft="10" paddingRight="10">
     <mx:HBox>
        <mx:Label text="Temperature in Farenheit:"/>
        <mx:TextInput id="farenheit" width="120"/>
        <mx:Button label="Convert" click="calculate();" />
        <mx:Label text="Temperature in Celsius:"/>
        <mx:Label id="celsius" width="120" fontSize="24"/>
     </mx:HBox>
  </mx:Panel>
</mx:Application>

1 つの MXML ドキュメントと 1 つの ActionScript ファイル (個別のスクリプトファイルでのイベント処理ロジック)

次の例では、MXML イベント属性に関数呼び出しを記述し、関数を別の ActionScript ファイルで定義しています。

<?xml version="1.0"?>
<!-- usingas/ASSourceFile.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <!-- Specify the ActionScript file that contains the function. -->
  <mx:Script source="includes/Sample3Script.as"/>

  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
     paddingLeft="10" paddingRight="10">
     <mx:HBox>
        <mx:Label text="Temperature in Farenheit:"/>
        <mx:TextInput id="farenheit" width="120"/>
        <mx:Button label="Convert" click="calculate();"/>
        <mx:Label text="Temperature in Celsius:"/>
        <mx:Label id="celsius" width="120" fontSize="24"/>
     </mx:HBox>
  </mx:Panel>
</mx:Application>

"Sample3Script.as" ActionScript ファイルの内容は次のとおりです。

// usingas/includes/Sample3Script.as
public function calculate():void {
  celsius.text=String((Number(farenheit.text)-32)/1.8);
}

現在のページ: http://livedocs.adobe.com/flex/201_jp/html/usingas_053_7.html