IMXMLObjectの仕組みを拡張したテクニック

1.分割はできたけれど・・・

IMXMLObjectを使用した分割方法を紹介させて頂きました。ですが、私はこれだけでは不十分であると考えました。確かにロジックファイルを外部化することでスクリプトの実装はMXMLから分割することができました。しかしながら、デザインからでコードのメソッドを実行する際には、デザイン部のコンポーネントにイベント定義を記述する必要があります。先程の例でいえば、以下の部分です。

■ソースコード（imxmlsample.mxml）

<mx:Button id="button1" … click="viewHelper.button1Click(event);"/>

コンポーネントのイベントに対して特定のメソッド（イベントハンドラ）を実行するには、通常は上記のように対応するメソッドを記述する必要があります。つまり、外部ロジックファイルにスクリプトを記述することでスクリプトの実体をデザインから切り離すことはできますが、各イベントからの呼び出しについてはデザイン側に呼び出しのコードを記述する必要があります。

2.更に拡張した仕組み（AbstractViewHelperクラス）

この問題を解決すべく分割方法に更に改良を加えた仕組みとして、AbstractViewHelperクラスを紹介します。 AbstractViewHelperクラスのテーマは
「デザイン側に呼び出しコードを記述せずともイベントハンドラを実行する」
です。ロジックファイルにメソッドを記述するだけで自動的にデザイン部のコンポーネントと連動して、メソッドを実行します。 仕組みについては後程紹介するとして、まずは具体的な使用方法を紹介します。先程の作成したサンプルプログラムをAbstractViewHelperクラスを使用したものに書き換えてみます。

■ソースコード（imxmlsample.mxml）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
	<local:imxmlsampleViewHelper id="viewHelper"/>
	<mx:Button id="button1" x="218.5" y="10" label="Click"/>
</mx:Application>

■ソースコード（imxmlsampleViewHelper.as）

package
{
	import flash.events.MouseEvent;
	import viewhelper.AbstractViewHelper;
	import mx.controls.Alert;
    
	public class imxmlsampleViewHelper extends AbstractViewHelper
	{
    
		public function button1OnClickHandler(event:MouseEvent):void
		{
			Alert.show("Hello World");
		}
	}
}

いかがでしょうか？コードにそれほど大きな変更は必要ありません。具体的な変更点は3箇所になります。

• 変更点1.デザイン部”Button”よりclickイベントに関する記述がなくなっている。
• 変更点2.ロジック部のクラスがAbstractViewHelperのサブクラスとして定義されている。
• 変更点3.Buttonクリックのメソッドの名称が変更されている。（button1Click -> button1OnClickHandler）

動作可能なサンプルは以下よりダウンロードできます。

• DOWNLOOAD

3. AbstractViewHelperクラスの使用方法

AbstractViewHelperクラスの使用方法を説明します。基本的にはIMXMLObjectを使用した仕組みと大変似た仕組みになっています。

3-1. AbstractViewHelperクラスのサブクラスとしてロジック部を作成する

IMXMLObjectはインターフェースですが、AbstractViewHelperはクラスです。よって、実装するのではなくサブクラスとしてロジック部を作成することになります。

3-2. イベントハンドラは命名規則に従った名称で作成する

AbstractViewHelperは指定の命名規則に則った名称のメソッドを作成することで、デザイン部のコンポーネントと連動します。この”命名規則による関連付け”こそがAbstractViewHelperの最大の特徴であり、デザイン部に呼び出しのコードを記述せずともメソッドの実行を可能にしている仕掛けです。書き換え後のサンプルのロジック部で、メソッド名をbutton1OnClickHandlerから、以前のbutton1Clickに戻して実行してみて下さい。ボタンを押下してもAlertは表示されません。

3-3. 命名規則

メソッドの命名規則は、全部で3種類です。

• ○一般的なコンポーネント（Button、ComboBox、DataGrid･･･etc）に対する命名規則
  <コンポーネント.id>+"On"+<イベント名>+"Handler“
• ○デザイン部（MXML）自体に対する命名規則
  "On"+<イベント名>+"Handler“
• ○デザイン部が定義しているStateに対する命名規則
  <State.name>+"On"+<イベント名>+"Handler“

そして注意する点は、”On”や”Handler”は大文字、小文字を判断していますので、記述を誤ると認識することができず、メソッドが実行されません。以下、正しいパターンと誤ったパターンの一部です。

• 正：button1OnClickHandler
• 誤：button1onClickHandler（×on -> ○On）
• 誤：Button1OnClickHandler（×Button1 -> ○button1）

FlexのEventまたはEventのサブクラスで定義されているイベント名には、”creationComplete”のように大文字、小文字が混合しているものもあります。このような場合、MXMLのcreationCompleteイベントハンドラを記述する際は” OnCreationComplete”という名称にします。各イベントのイベント定数については、Flex3リファレンスガイドを参照して下さい。

ページ 3 / 5

前のページ

次のページ