FlexでのMVC設計による開発パターン - その1 -

d:id:shogo4405:20110521:1305947042をMVC的な考え方を踏襲した設計パターンです。ショッピングカート系のアプリケーションを開発するという前提で、僕ならこう設計していくよー。という話。

Modelの設計

WebServiceやHTTPServiceと連携すること考慮しておきます。ただし今回は簡単のためショッピングカートクラスの中身は次のようにシンプルにWebServiceの連携を考えない。
加えてのポイントは[Bindable]を忘れないことと、Singletoneパターンを活用すること。

myapp.controls.ShoppingCart

数量しか持っていないショッピングカート(何を買うんだろう…)で。addメソッドで数量を追加するというイメージ。

package myapp.models 
{
  [Bindable]
  public class ShoppingCart 
  {
    private static var instance:ShoppingCart = new ShoppingCart();
    // 買い物相手も数量
    public var quantity:int;
    // コンストラクタ
    public function ShoppingCart() {
       quantity = 0;
    };
    // 買い物かごのアイテムを追加
    public function add():void {
      quantity++;
    };
    public static function getInstance():ShoppingCart {
      return instance;
    };
  };
};

Controllerの設計

mx.controller.*を原則拡張するように設計します。IMXMLObjectを拡張して専用のControllerクラスをつくる…みたいなことはあえてしません。Webだったら/foo/aMethod or /foo/bMethodみたいに、メソッド数が少なくて済むけど。
GUI系だったらContollerの数が例えばボタンのイベント数。インプットフォームのイベント数と膨大になりがちになるのでこれも分割。mx.controller.*を拡張することで適当な大きさのControllerに分割します。みたいなこと必要？

package myapp.controls 
{
  import flash.events.MouseEvent;
  import mx.controls.*;
  import myapp.models.ShoppingCart;

  public class AddButtun extends Button
  {
    private var model:ShoppingCart;
		
    public function AddButtun()
    {
       this.model = ShoppingCart.getInstance();
       this.addEventListener(MouseEvent.CLICK, click);
    };

    private function click(e:*):void{
      model.add();
    };
  };
};

Viewの設計

もちろん、ここはmxmlを前提にして設計。mx.containers.*系はクラスを拡張して利用してあげること。appendChildとかメンドクサイのでしません。

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:local="myapp.controls.*"
    >
    <mx:Script>
      <![CDATA[
      import myapp.models.*;
      [Bindable]
      public var model:ShoppingCart = ShoppingCart.getInstance();
      ]]>
    </mx:Script>
  <mx:TextInput text="{model.quantity}" />
  <local:AddButtun label="addCart" />
</mx:Application>

というわけで

上記のようにコーディングしていくと、View → Model ← Controllerで、Modelを媒介としてControllerでModelを更新してあげれば、Viewが勝手に更新されていく。実質、ControllerはViewのことを知らなくてもいい。Viewは、Controllerを知らなくていいみたいなことことができる。
これを実現している、Flexの[BIndable]で、[Bindable]を利用すると結合ぐあいがゆるく分離できるので良いです。