MVC ってこういうこと？(3) -View-【閃光的網站・弛緩複合体 -Review Division-】

MVC ってこういうこと？(3) -View-

2009/10/05 20:13 - AS3.0

MVC を学ぶシリーズ、今回は View の話。View は簡単なので、さらっと流します。

今回説明しているコードについていうと、View と関わりを持っているのは Model だけです。

そして、前回の Model のときに説明したように、Model が Observer パターンによって、View の参照を持つ方法ではなく、Model が発するイベントを View が捕らえるという仕組みを採っています。そのため View が Model の参照を持ち、addEventLister でイベントを監視するようになっています。

この View の挙動ですが、Model からイベントを捕らえたとき、Model 内の3つのメンバ変数を読み取り、一つ目は変数を自分のX座標を、二つ目の変数は自分の scaleY を、三つ目の変数は自分の rotation を変動させるのに使用します。

前回触れたとおり、Model は自らのメンバ変数を加算することだけをおこなっており、そのためメンバ変数の数値はどんどん大きくなっていきます。 View はそれを勝手に Math.sin() や Math.cos でもって -1～1 に変換し、自分のプロパティを揺らすために使います。

このように、Model は View が何をするのかは知ったこっちゃないです。 Model のメッセージをどのように解釈するのかは View の権限です。

つまり今回は View.x、View.scaleY、View.rotation の変更をおこなうものでしたが、コードの組み方次第で、同じ Model を使っていながら、View 自らの色を変えたり、View 自らに TextField を持って、その中に Model のメンバ変数の値を表示したり等々、いろいろな View が実現可能となるということですね。

そして、ユーザインタラクティブを必要としない、オートマチックな作品は、この MV だけで完結するわけです。

そう考えると、やっぱり入力用 View は Controller に所属させるべきなのかなー、とか思ってきたりもします。

// <<Model を形にする>>
// Model 内の変化を反映した表示をおこなう
// Model への参照を持ち、データを取得するために使う
package {
	
	import flash.display.BlendMode;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;

public class View extends Sprite {
		// ----- Model への参照 -----
		private var _model:Model;

// ----- Model からのイベントを捕捉 （Model -> View という流れ）-----
		private function changeHandler(event:Event):void {
			// 自分の各プロパティの値を Model のそれによって更新する
			x = Math.sin(_model.value1 * Math.PI / 180) * 200 + 465 / 2;
			scaleY = Math.cos(_model.value2 * Math.PI / 180);
			rotation = _model.value3;
		}
		// ----- Model からのイベントを捕捉 （Model -> View という流れ）-----

public function View(model:Model) {
			_model = model;
			_model.addEventListener(Event.CHANGE, changeHandler);

draw();
		}
		[Embed(systemFont = "sansserif", fontName = "myFont", mimeType = "application/x-font")]
		private static const myFont:Class;
		private function draw():void {
			graphics.beginFill(0xFFFFFF);
			graphics.drawRect( -100, -100, 100, 200);
			graphics.beginFill(0x000000);
			graphics.drawRect(0, -100, 100, 200);
			graphics.endFill();
			
			var textFormat:TextFormat = new TextFormat("myFont", 40);
			textFormat.align = TextFormatAlign.CENTER;
			var textField:TextField = new TextField();
			textField.defaultTextFormat = textFormat;
			textField.text = "ABCDEFG\nHIJKLMN";
			textField.autoSize = TextFieldAutoSize.LEFT;
			textField.embedFonts = true;
			textField.selectable = false;
			textField.x = -textField.width / 2;
			textField.y = -textField.height / 2;
			textField.blendMode = BlendMode.INVERT;
			addChild(textField);
		}
		
	}

}