WPF MVVM Review

WPF MVVM Review

Takayuki KONDO [email protected]

mokusharp (C# study meeting)

on 2013/07/18

mailto:[email protected]

目次

• WPF/XAML/MVVM キーワードのおさらい• WPF• XAML• MVVM

• 概念を理解しよう• PDS• XAML 系での PDS 適用

• プレゼンテーションモデル

WPF/XAML/MVVM おさらいRemember some keywords ? WPF, XAML, MVVM, …

“WPF”

• Windows Presentation Foundation• ユーザインタフェースを作成するための新しい技術• 次世代プレゼンテーションシステム• 多機能な対話型クライアントアプリケーションを作成するための UI

フレームワーク• .NET Framework に含まれる GUI 開発ライブラリ

“WPF”

• 概要• Windows フォームが、単に Win32 API をマネージ・コードでラップ

したものであるのに対して、 WPF はマネージ・コードで新たに実装された GUI 開発ライブラリ• 豊かなユーザー体験を提供する先進的な GUI 開発基盤• 3.0 以降の .NET Framework に標準搭載

“WPF” の特徴と利点

• グラフィックス・ハードウェア• コントロール、メディア、文書の統合• UI カスタマイズの柔軟性• 見た目（＝外観デザイン）とロジックの分離

http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html



• グラフィックス・ハードウェア• WPF はコアの部分にグラフィックス・ハードウェアを活用したベク

ター・ベースのレンダリング・エンジンを採用している。ベクター・ベースであるため、 UI 要素にスムーズな拡大・縮小／回転を掛けることができる。また、ハードウェア・アクセラレーションにより、 CPU への負担を最小限に抑えている。

• コントロール、メディア、文書の統合• UI カスタマイズの柔軟性• 見た目（＝外観デザイン）とロジックの分離




• グラフィックス・ハードウェア• コントロール、メディア、文書の統合• WPF は、ボタンやリストボックスなどのコントロール、ラスター画

像やベクター・グラフィックス、頂点メッシュを用いた 3D 描画、動画などのメディア、リッチテキストなどの整形済み文書に対して、統一的な開発機能を提供する。それぞれに別個のプログラミング・モデルを覚える必要がないだけではなく、例えばボタンの中に動画を表示するといった組み合わせも簡単に行える。

• UI カスタマイズの柔軟性• 見た目（＝外観デザイン）とロジックの分離




• グラフィックス・ハードウェア• コントロール、メディア、文書の統合• UI カスタマイズの柔軟性• 既存の GUI 開発ライブラリでは、ボタンなどの UI 要素をカスタマイ

ズするにしても、サイズや背景色の変更程度の機能しか持っていないものも多い。• これに対して WPF では、例えば任意の形状のボタンを作成したり、

背景に動画を流したり、動的に回転や拡大・縮小を行ったりといった非常に柔軟なカスタマイズが可能である。

• 見た目（＝外観デザイン）とロジックの分離




• グラフィックス・ハードウェア• コントロール、メディア、文書の統合• UIカスタマイズの柔軟性• 見た目（＝外観デザイン）とロジックの分離

• WPF では XAML （ Extensible Application Markup Language ）と呼ばれる、 XML 形式の宣言的言語を用いてユーザー・インターフェイスを記述する。

• 見た目（＝外観デザイン）に関する部分を XAML 言語で記述し、ロジックを C# 言語などを用いて記述することで、アプリケーションの見た目に関する部分をロジックから完全に切り離す構造になっている。これは、ビジュアル・デザイナーとロジック開発者との協業を意識したものである。



WPF

•Windows•Presentation•UI/UX

•Foundation•基礎

WPF アーキテクチャ

• PresentationFramework• PresentationCore• milcore• アンマネージ

http://msdn.microsoft.com/ja-jp/library/ms750441

“XAML”

• 宣言型マークアップ言語


<Window x:Class="XAML.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ClickMe" Height="150" Width="200"> <Grid> <StackPanel> <Button Content=" 押してください "></Button> </StackPanel> </Grid></Window>

XAML


XAML の利点

XAML コードと（ C# などの）分離コードを分けることの利点1. ビジュアル・デザイナー向けのツールを用いた外観デザイン

が容易2. UI 要素の階層が深くなった場合に、（一般的なプログラミン

グ言語よりも）階層構造を把握しやすい3. Web 開発で一般的に用いられている HTML ＋ JavaScript に

似た感覚でアプリケーションを開発可能4. C# のようなプログラミング言語では書けない、あるいは、

書きにくい記述が容易

“MVVM”

• XAML 系プラットフォーム（ WPF/Silverlight/WP7/Metro) のために生まれた MVC 系パターン• MVC 系パターン (MVC/MVP/MVVM) の GUI アーキテクチャ

Prism Development Guide Chapter 5: Implementing the MVVM Pattern

Notifications

ViewView ModelViewModel

Presentation Logic Business Logic and DataUI and UI Logic(Code behind)

Data Binding

Commands

http://msdn.microsoft.com/en-us/library/gg405484(v=PandP.40).aspx


MVVM パターンの概要

• Model/View/ViewModel の３つの責務に GUI アプリケーションを分割するパターン• View は ViewModel に依存、 ViewModel は Model に依存。逆方向の依存はない

http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_01.html

Notifications



Data Binding

Commands


“MVVM”

• MVVM パターンは、 WPF と Silverlight のデータバインディング、データテンプレート、コマンド、ビヘイビアのようないくつかのコア機能を活用するように最適化された、プレゼンテーションモデルパターンの”近い変形”のことです

Prism Development Guide Chapter 5: Implementing the MVVM Pattern

Notifications



Data Binding

Commands



プレゼンテーションパターンの概念を理解しようなんのために行うの？

プレゼンテーションとドメインの分離 (PDS)PresentationDomainSeparation

プレゼンテーションとドメインの分離

• プレゼンテーションとドメインをなぜ分離するのでしょうか。• どういったメリットがあるの？• Martin Fowler氏が気づいたことが…

Presentation Domain

ユーザーインタフェースロジック

プレゼンテーションとドメインの分離(PDS)•有用な”設計原則”に、プレゼンテーション層（ユーザインタ

フェース）とその他機能をうまく分ける、というのがあります。私はこれを発見して以来、ずって慣行している。長い間これを使ってきていくつものメリットを発見しました

http://capsctrl.que.jp/kdmsnr/wiki/bliki/?PresentationDomainSeparation

Presentation Domain


プレゼンテーションとドメインの分離(PDS)• メリット• プレゼンテーションとドメインが分かれていると、理解しやすい• 同じ基本プログラムを、重複コードなしに、複数のプレゼンテーショ

ンに対応できる• ユーザインタフェースはテストがしにくいため、それを分離するこ

とにより、テスト可能なロジック部分に集中できる• プレゼンテーション部分のコードは、ドメイン部分のコードと違った

スキルと知識が必要

Presentation Domain

プレゼンテーションとドメインの分離(PDS)• これら多くのメリットがあるにもかかわらず、この原則が破

られているのをよく目にします• なぜしない？（できない）• 知識がない。• フレームワークがドメインとプレゼンテーションを安易に、ごちゃまぜにして分割が困難。

• クラサバ型という意味ではない。同じマシン上でも論理的に分割すべき



プレゼンテーションとドメインの分離(PDS)Presentation と Domain のそれぞれの感心事を分離する。

ただし相互依存は望ましくないため、 Observer パターンが良い

Presentation Domain

呼び出し

イベント監視

プレゼンテーションとドメインの分離(PDS)• 分離することによる理解のしやすさ• テストがしやすい• テストしにくい UI を分離、テストしやすくする

• 変更に強い• プレゼンテーション部分の変更に、ドメインが引きづられない• 複数のプレゼンテーションが用意できる

Presentation Domain

呼び出し

イベント監視

プレゼンテーションとドメインの分離(PDS)•規模が小さいプログラムでは冗長さが目立つかもしれません• しかしドメインの単体テスト自動化によるメリットは大きい

です

Presentation Domain

呼び出し

イベント監視

XAML 系での PDS の適用How to apply PDS to XAML systems

XAML 系 (WPF) で PDS の適用

• XAML には XAML固有の都合でバインドするオブジェクトが必要となる

Presentation

XAML と XAMLの都合が関係あ

る部分

Domain

XAML と XAMLの都合が関係な

い部分

呼び出し

イベント監視


• XAML には XAML固有の都合でバインドするオブジェクトが必要となる

Presentation - XAML と XAMLの都合が関係ある部分

Domain


い部分

呼び出し

イベント監視

XAMLと

コードビハインド

バインドするオブジェクト

データバインディング


Domain


い部分

呼び出し

イベント監視

XAMLと


バインドするオブジェクト



Domain


い部分

呼び出し

イベント監視

XAMLと


XAMLの状態ストア


View ViewModel Model

Domain

XAML とXAML の都合が関係ない部

分

呼び出し

イベント監視

XAMLと


XAMLの状態スト

ア


View ViewModel ModelNotifications



Data Binding

Commands

Notifications



Data Binding

Commands

Presentation Domain

呼び出し

イベント監視

プレゼンテーションモデルRepresent the state and behavior of the presentation independently of the GUI controls used in the interface

プレゼンテーションモデル

Controller

View

ModelPresentation

Model委譲

http://martinfowler.com/eaaDev/PresentationModel.htmlhttp://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_10/greatblogentry_10_01.html

http://martinfowler.com/eaaDev/PresentationModel.html


MVVM とプレゼンテーションパターン

• MVVM は、 Martin Fowler氏によって導入された特別なプレゼンテーションモデルデザインパターンとして、 Microsoftに由来するソフトウェア工学で使用されるアーキテクチャパターンです• 大部分は、 MVC パターンをベースとしており、 MVVM は、

HTML5, WPF, Silverlight, ZK Framework のようなイベント駆動プログラミングをサポートする UI 開発プラットフォームをターゲットとしています

http://en.wikipedia.org/wiki/MVVM

http://ja.wikipedia.org/wiki/Model_View_ViewModel

http://en.wikipedia.org/wiki/MVVM

http://ja.wikipedia.org/wiki/Model_View_ViewModel

UI アーキテクチャの違いドメインロジックの場所

プレゼンテーションロジックの場所

オブザーバ同期

MVC Model View または Model View が Model を監視

プレゼンテーションモデル

Model Presentation Model View がPresentaionModel を監視

MVVM Model ViewModel View がViewModel を監視(双方向データバンド )



MVVM パターンを適用するためには

• ほかのすべての責任分割型の UI設計パターンと同様に、さまざまなシナリオで MVVM パターンを効果的に適用する鍵は、正しいロールを適切にコードとして実装する方法を理解することと、それぞれの責務がどうやって相互に対話するかをよく理解することです。• 「各責務が何を担当するのか？」• 「なぜそうするのか？」• 「各責務はどうやって対話をするのか？」

• それらを知ることが、 MVVM パターンを理解し、それぞれの開発案件に合わせて応用できるようになることにつながるはずです。

• Prism 開発ガイドより

責務

• View• XAML で記述され、 UI の外観と構造を定義します。• 基本 UI のコードビハインドには、初期の InitializeComponent メソッド以外何も記述されているべきではありません

• ViewModel• プレゼンテーション・ロジックとステート（＝状態）を持つ• Model の公開するステートをいちいちラップして View に公開するの

も ViewModel の役目

• Model• ビジネスドメイン。ビジネスドメインの状態も持つことになる。

MVVM の sample

• HelloWorld 程度で MVVM のメリットを享受することは難しいですが、 View 部分、 ViewModel 部分、 Model 部分がどのように分割されているか慣れましょう

Demo

参考資料・サイト・文献

• @IT WPF入門• http://

www.atmarkit.co.jp/ait/subtop/features/da/ap_introwpf_index.html

• MVVM パターンの常識• http://ugaya40.net/mvvm/mvvm-2011.html• http://

www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_01.html

• MVVM パターンで学ぶ GUI アーキテクチャパターン• http://ugaya40.net/architecture/mvvm_to_mvc.html

• Separating User Interface Code• http://martinfowler.com/ieeeSoftware/separation.pdf

http://www.atmarkit.co.jp/ait/subtop/features/da/ap_introwpf_index.html

http://www.atmarkit.co.jp/ait/subtop/features/da/ap_introwpf_index.html

http://ugaya40.net/mvvm/mvvm-2011.html

http://ugaya40.net/mvvm/mvvm-2011.html




http://ugaya40.net/architecture/mvvm_to_mvc.html

http://martinfowler.com/ieeeSoftware/separation.pdf

WPF MVVM Review

Technology