2010年9月26日日曜日

MVVMパターンでSilverlightアプリを開発する その1

WPFかSilverlightで開発する場合に非常に有用なデザインパターンがMVVMだ。MVVMが最初に提唱され始めたのが2006年ごろらしいので、かれこれ4年ほどたち、その間にMVVM Light ToolkitやPrismなどかなりこなれたライブラリ群が多数出たおかげで、現在はMVVMにのっとった開発が容易になっている。今回はPrismよりも簡易に使い始められるMVVM Light ToolkitでMVVMでの開発方法を紹介する。

MVVM Light Toolkitの導入
MVVM Light Toolkitの公式サイト
MVVM Light Toolkitのインストール方法
上記2つ目のリンクから「Binaries (WPF3.5SP1/SL3/WPF4/SL4/Windows Phone 7)」のリンクをクリックしてDLL群をダウンロードしよう。解凍するとProgram Files配下のフォルダができるのでそれをコピーしてProgram Files配下へと配置する。


あわせて
「Templates for Visual Studio 2010 (WPF3.5SP1/SL3/WPF4/SL4/Windows Phone 7)」
「Snippets for Visual Studio 2008, Visual Studio 2010 and Visual Studio 2010 Express (WPF3.5SP1/SL3/WPF4/SL4/Windows Phone 7)」
からテンプレートとコードスニペットをダウンロードしておくと良いだろう(私の環境はVS2010なのでそれようのファイルをダウンロードしている。自分の環境にあったものを選択してほしい)。配置方法はZipファイルを解凍後、それぞれ所定の位置にコピーすればよい。所定の位置は下図を参考にしてほしい。

例)C:\Users\Yoo\Documents\Visual Studio 2010\Templates

例)C:\Users\Yoo\Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets


セットアップが完了したらVisual Studio 2010を起動し、新規プロジェクトの作成を選択し、Silverlightの項目を選択しよう。テンプレートをコピーしている場合は下図のようにMvvm Lightという項目があるはずなのでSL4のほうを選択しよう。


プロジェクトのスケルトンは下図のようになる。


MVVMについて
ここでMVVMパターンについて簡単に説明しておこう。

MVVMはModel View ViewModelの略称でMVC(Model View Controller), MVP(Model View Presenter)の流れから来ている。このMVVMを理解するうえで最も重要なのはVMの部分で、ViewModelがなんぞや、というのを理解すればおのずとMVVMがどういうものか理解できる。


※ここでViewModelのやりとりしている矢印がData Access Layerだけなのは、ViewとのやりとりはBindingを介して行うのでMVVMパターンの建前上ViewとViewModelの間にはやり取りが発生しない(Code Behindにイベントハンドラを記述する必要がなくなる)。

ここで上の微妙な図を使って図解する。図を見てもらうと分かると思うが、ViewModelはViewとModelの中間に位置する。ViewModelの存在意義はいくつがあるが、そのうちもっとも重要なのは、ModelとViewの間にある必要な情報の差を埋める部分にある。アプリケーションは多種多様な情報を扱うが、大体バックエンドのデータストアにはSQL ServerなりOracleなどのデータベースを使うのが一般的だろう。そのため、バックエンドにデータを流し込んだり、取得する単位はテーブルエンティティ毎になりやすい。しかし、RDBのテーブル構成はデータ保持の観点からは大変優秀だが、UIにそのまま表示する情報の形式としては足りなかったり、過剰であったりする。そこで、View(ここでいうUI)とModel(ここでいうテーブルエンティティ)の間を取り持つのにViewModelが存在する。つまりViewModelには、多様なデータを取得しViewに必要な情報を形成する役割とユーザのインプットをModelにしデータアクセスレイヤーに渡す役割という2つの大きな役割がある。

また、ViewModelにはそれ以外にもCommandとしてユーザのアクションハンドラーを公開することが求められる。ユーザのアクションハンドラー(要するにイベントハンドラー)をCommandとして公開する理由は下記の通り。
  • ViewのUI要素のCommand(Button.Commandなど)とViewModel.CommandをBindingすることが可能となり、Code Behindにイベントハンドラを記述する必要がなくなる(保守性がアップ)
  • イベントハンドラも含めてビジネスロジックはすべてViewModel上にあるので単体テストを行うことが容易になる(Testabilityがアップ)

以下に簡単にまとめる。
  • View:UI要素の集合。プレゼンテーション層
  • Model:テーブルエンティティだったり、DTOだったり、ビジネスエンティティだったり
  • ViewModel:ViewとModelの中間層。ビジネスロジックはここ。Commandもここ

MVVM Light Toolkitの説明
ここで簡単にMVVM Light Toolkitの説明をする。基本となる要素は下記の通りだ。
  • ViewModelBase
  • Messenger
  • RelayCommand
ViewModelBaseは名前の通りにViewModelの基底クラスだ。いくつか便利な関数が用意されているので特別な理由が無い限りViewModelはこのクラスから派生することをお勧めする。

MessengerはViewModel間に限らず、ありとあらゆる場所への通知が可能だ。画面遷移やViewModel間の値変更の通知などはこのクラスが担うことになる。

RelayCommandはMVVM Light Toolkitが提供するCommandクラスだ。これの他にもEventToCommandというかなり強力なCommandクラスがあるので、SelectionChangedイベントなどCommandとしてハンドルできないUI要素のイベントがある場合はこちらを使うことになる。

と、ここまでで結構長くなってしまったのでコードを使っての解説は次回以降に持ち越すことにする。

0 件のコメント:

コメントを投稿