FlexでRIA開発入門【その3】～ビューとロジックの分離～

今回はちょっと小ネタ的な感じですが。

前回のHello Worldでは、MXMLファイル内に ActionScript が入っていて、ちょっと気持ちが悪いというか、ビューとロジックは分けて疎結合にしないとまずいのです。

そこで、今回はこれらを分離する方法を考えていきたいと思います。

IMXMLObject

以前はinitializeハンドラで初期化時に実行させる関数としてAlertを表示させました。今回は、IMXMLObjectというインターフェイスを実装したクラスを用いることで初期化イベントをつかまえます。

まず、ファイル > 新規 > ActionScript Class でActionScriptのクラス作成ダイアログを表示します。パッケージは任意でよいのですが、今回はテストなので hello とします。クラス名も何でも良いのですが、HelloViewHelper としました。

インターフェイスのところで、追加...を押して、IMXMLObjectを選択してください。
以上で、終了を押すとクラスが作成されます。

生成されたクラスにはあらかじめ雛形が既に生成されていると思いますが、最終的に以下のようなコードを書きます。

package hello
{
	import mx.controls.Alert;
	import mx.core.IMXMLObject;
	import mx.events.FlexEvent;

	public class HelloViewHelper implements IMXMLObject
	{
		private var view:hello;
		
		public function initialized(document:Object, id:String):void
		{
			view = document as hello;
			view.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
		}
		
		private function creationCompleteHandler(event:FlexEvent):void
		{
			Alert.show("Hello World!!");
		}
	}
}

このクラスを、MXML内に配置することによって、アプリケーション初期化時にinitialized()メソッドが呼ばれ、さらにその内部の定義によってCREATION_COMPLETEイベント発生時にcreationCompleteHandler()メソッドが呼ばれることになります。前回の Hello World!! 表示部分はこのハンドラ内に記述しています。

MXMLの書き換え

次に、MXML側も書き換えていく必要がありますが、ほとんどは前回の追加部分の削除となります。

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

大きく異なるのは、xmlns:helper属性の追加と、<helper:HelloViewHelper>の追加です。前者は、名前空間としてhelper:*タグにhelloパッケージ配下のクラスを扱えるようにしたことで、後者は実際にActionScriptで定義したクラスを配置していることです。

これで、無事にロジック部分を外に出すことができました。実際に実行すると結果が前回と同じことを確認できると思います。

Tweet

Pocket