• SIS Lab
  • >
  • Blog
  • >
  • Flexでウェブアルバムが作りたい!!(3)〜MVCパターンの考え方〜

Flexでウェブアルバムが作りたい!!(3)〜MVCパターンの考え方〜

更新日:2018.05.08 作成日:2010.01.15

MVCパターンの考え方

アプリケーションの機能を「ビュー」「モデル」「コントローラ」という3つのモジュールに分割する設計方法

ビュー

ユーザーインターフェースの部分。モデルに格納されたデータをユーザに提示したり、ユーザからの入力を受け付けたりする。 Flexでは、MXMLでビューを実現する。

モデル

アプリケーションの扱うデータ(場合によっては、それらのデータを操作するための手続きも含む)を表現するもの。

ユーザーインターフェースに関係することは、行わないモデルとビューを分ける利点は、同じデータを複数の方法で表現することが容易に出来る点。Flexでは、ActionScriptでモデルクラスを作成することで実現する。

コントローラ

ビューとモデルの橋渡し。ビューにユーザからの入力があった場合、コントローラがそれをハンドリング、適切に処理し、モデルに反映Flexでは、ActionScriptにコントローラクラスを作成することで実現

モデル内のデータをビューに表示させる

「データバインディング」を用いる。データバインディング・・・モデルとなるクラスのプロパティと、ビュー内のコンポーネントとを結びつけるもの。これにより、モデルの値の更新がビュー側に自動的に反映される。データバインディングを実現させるためには,

  • モデルとなるクラスを作成し、表示する項目に対応するプロパティを用意して、クラス全体を「バインド可能」にする
  • 用意したモデルをMXMLに組み込み、「データバインディング式」を使用して、コンポーネントがモデルのプロパティを参照するように指定する

モデルのクラスをバインド可能として定義するには・・・

クラス定義に[Bindable]というメタデータを指定。データバインディング式を使ってコンポーネントとプロパティを結びつけるには、MXMLのコンポーネントタグに次の式を記述

text="{バインド先プロパティ}"

Related contents