NoteBill vol.1 Nov.8 - F-site seminar note

NoteBill vol.1 > 02 「知っている」と「知ったこちゃあらへん」

02 「知っている」と「知ったこちゃあらへん」

なんちゅうタイトルやねん。

説明ばかりじゃ ようわからん と 絵を探すと よく見かける図で 下のような図があります。（図01 MVCの概念）

その図をもとに そろそろActionScript の話をしましょう :)

MVVの概念図01 MVCの概念

 

「参照」 というのは 相手を「知っている」とも言えます。 相手に直接メッセージを送れます。

ASでいうと 相手のオブジェクトのメソッドを呼び出す ということができる ということですね。

ViewとControllerは お互いに「知っている」ので 仲良ろしいなぁ という感じ。

ViewとControllerは Modelを「知っている」ので Modelが用意しているメソッドを使用できます。


// 知っている相手.やってください(こんな感じで)
this.model.updateNote(id, noteObj);

ではModelは？ 「参照」の矢印がないので ViewもControllerも「知らない」となりますね。

じゃあViewに対する「通知」というのは何なんやろ？

相手が誰か「知らない」し どうなろうが 「知ったこちゃあらへん」ねんけど

聞いてる誰かに 自分の言いたいことを「聞いてぇなぁ」という感じでしょうか。

 

こういうModelとViewの 間接的な関係を 何とかうまく実現すれば

Modelを場合によって交換したり 違うView とControllerと入れ替えたりできるのでしょう。

 

そんなときに ブロードキャスト というやり方があります。イベント通知を放送する という感じですね。

例えば Model の データが更新されたとき(イベント発生) Viewにお知らせするとします。


// 全てのViewに 更新イベントを通知します
o.updateViews = function() {
    var a = this._views.slice(); // _views 配列のコピー
    var len = a.length;
    var event = arguments.shift(); // 最初の引数が イベントハンドラメソッド名
    // 全てのView に対して event 通知
    for (var i = 0; i < len; ++i) {
        var view = a[i]; // i番目のview
        view[event].apply(view, arguments); // 残りの引数を view の event イベントハンドラ の引数として 実行
    }
};

 

いきなり ややこしうなりましたね:)

Modelの _views という配列のなかに View が多分います。

ModelはどんなViewがその配列にいるかは 詳しう知りまへん。そのViewに 更新イベントをお知らせします。

例えば onAddNote という note追加イベント を View にお知らせする というのはこんな感じになります

 


// Model のnote追加 メソッド内で
this.updateViews("onAddNote", id);

 

あとは そのイベント通知を受けた View が 何をしようが View の勝手です。

イベントが起きたときに それを扱うメソッドは イベントハンドラと呼ばれています。

上の例の onAddNote イベントハンドラメソッドを Viewに持たせておいて そこで Viewは 表現すればいいのです。

そのとき Modelの更新されたデータを取得して 表現するために ViewはModelのことを 「知っている」必要があります。 


// note追加イベント の イベントハンドラ onAddNote を View に持たせておく
o.onAddNote = function(id) {
    var note = this.model.getNoteById(id); // idを指定してModelから note を取得
    // ここでViewは表現します...
};

 

こんな感じでViewが Modelの更新イベント通知を受けるためには

Modelの_views 配列内に Viewがいなくちゃなりまへん。View を追加するメソッドが Modelに必要ということですね。

Viewは Modelを「知っている」ので

// this は View です
this.model.addView(this);

という感じで登録することにしましょう。

このブロードキャストを聞いているものは リスナー と呼ばれてますね。

ASでは add/removeListener というメソッドが

Mouse, Key, Selection, Stage, TextField.prototype に用意されていますよね。

そのやりかたと 同じように考えていいでしょう。(詳しくは AsBroadcaster)

 

さて これだけでは データの更新が見えるだけ ですね。

そのデータを更新するのは ここでは ユーザーの入力 とします。

ユーザーの入力としては マウス・キーボード・マイク・タッチPC・Webカメラ... と ようさんあります。

その入力イベントは そのシステム自体が感知して教えてくれますよね。

Flashなら ボタンイベント onPress/Release ... キーイベント onKeyDown/Up マウスイベント onMouseDown/Up/Move ...

と これまたよーさんあります。

Controller には その ユーザ入力に対して何をするかを 決めてもらいましょう。

 

具体的には Modelのデータを更新するのか それとも Viewだけを変更するのか といったところです。

そのため Controllerは Model と View をどちらも「知っている」ということになります

 

// Model のnote追加メソッドを実行する
this.model.addNote(id, noteObj);

あるいは

// View のBox描画メソッドを実行する
this.view.drawBox();

例えば ユーザーがマウスドラッグで 画面上のボールを動かすとき

動かされた通りにViewであるボールが動けばいいですよね。

でも その動きを再現する必要がある場合はどうしましょうか。

そんなときは データとして扱ってその更新を表示する方が良さそうですね。

ここで Controller は ユーザー入力によって

Modelに 「こうして」と言うか(それは いずれViewに伝わる)

Viewだけに「こうして」と言うか

を 決めるのが お仕事だと言えそうです。あとのことは Model View に任せちゃいましょう。

 

さて ざっと というか だらだらと MVCって何やろ と考えました。

という感じです。

が Flashで やりたいことを実現するために ほんまに便利なんでしょうか?

私も 実のところ わかりません。わからないなりに やってみる価値はありそうです。

じゃあ いっぺん MVCっぽく 何か作ってみよー ... ということで ... よか？

<< 前へ | INDEX | 次へ >>

©2003 icutommy - Shinya Tomikawa