wpf mvvm review
DESCRIPTION
WPF および MVVM について mokusharp on 2013/7/18 (C#勉強会)にて発表した資料です。TRANSCRIPT
![Page 2: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/2.jpg)
目次
• WPF/XAML/MVVM キーワードのおさらい• WPF• XAML• MVVM
• 概念を理解しよう• PDS• XAML 系での PDS 適用
• プレゼンテーションモデル
![Page 3: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/3.jpg)
WPF/XAML/MVVM おさらいRemember some keywords ? WPF, XAML, MVVM, …
![Page 4: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/4.jpg)
“WPF”
• Windows Presentation Foundation• ユーザインタフェースを作成するための新しい技術• 次世代プレゼンテーションシステム• 多機能な対話型クライアントアプリケーションを作成するための UI
フレームワーク• .NET Framework に含まれる GUI 開発ライブラリ
![Page 5: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/5.jpg)
“WPF”
• 概要• Windows フォームが、単に Win32 API をマネージ・コードでラップ
したものであるのに対して、 WPF はマネージ・コードで新たに実装された GUI 開発ライブラリ• 豊かなユーザー体験を提供する先進的な GUI 開発基盤• 3.0 以降の .NET Framework に標準搭載
![Page 6: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/6.jpg)
“WPF” の特徴と利点
• グラフィックス・ハードウェア• コントロール、メディア、文書の統合• UI カスタマイズの柔軟性• 見た目(=外観デザイン)とロジックの分離
http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html
![Page 7: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/7.jpg)
“WPF” の特徴と利点
• グラフィックス・ハードウェア• WPF はコアの部分にグラフィックス・ハードウェアを活用したベク
ター・ベースのレンダリング・エンジンを採用している。ベクター・ベースであるため、 UI 要素にスムーズな拡大・縮小/回転を掛けることができる。また、ハードウェア・アクセラレーションにより、 CPU への負担を最小限に抑えている。
• コントロール、メディア、文書の統合• UI カスタマイズの柔軟性• 見た目(=外観デザイン)とロジックの分離
http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html
![Page 8: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/8.jpg)
“WPF” の特徴と利点
• グラフィックス・ハードウェア• コントロール、メディア、文書の統合• WPF は、ボタンやリストボックスなどのコントロール、ラスター画
像やベクター・グラフィックス、頂点メッシュを用いた 3D 描画、動画などのメディア、リッチテキストなどの整形済み文書に対して、統一的な開発機能を提供する。それぞれに別個のプログラミング・モデルを覚える必要がないだけではなく、例えばボタンの中に動画を表示するといった組み合わせも簡単に行える。
• UI カスタマイズの柔軟性• 見た目(=外観デザイン)とロジックの分離
http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html
![Page 9: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/9.jpg)
“WPF” の特徴と利点
• グラフィックス・ハードウェア• コントロール、メディア、文書の統合• UI カスタマイズの柔軟性• 既存の GUI 開発ライブラリでは、ボタンなどの UI 要素をカスタマイ
ズするにしても、サイズや背景色の変更程度の機能しか持っていないものも多い。• これに対して WPF では、例えば任意の形状のボタンを作成したり、
背景に動画を流したり、動的に回転や拡大・縮小を行ったりといった非常に柔軟なカスタマイズが可能である。
• 見た目(=外観デザイン)とロジックの分離
http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html
![Page 10: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/10.jpg)
“WPF” の特徴と利点
• グラフィックス・ハードウェア• コントロール、メディア、文書の統合• UIカスタマイズの柔軟性• 見た目(=外観デザイン)とロジックの分離
• WPF では XAML ( Extensible Application Markup Language )と呼ばれる、 XML 形式の宣言的言語を用いてユーザー・インターフェイスを記述する。
• 見た目(=外観デザイン)に関する部分を XAML 言語で記述し、ロジックを C# 言語などを用いて記述することで、アプリケーションの見た目に関する部分をロジックから完全に切り離す構造になっている。これは、ビジュアル・デザイナーとロジック開発者との協業を意識したものである。
http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html
![Page 11: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/11.jpg)
WPF
•Windows•Presentation•UI/UX
•Foundation•基礎
![Page 12: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/12.jpg)
WPF アーキテクチャ
• PresentationFramework• PresentationCore• milcore• アンマネージ
http://msdn.microsoft.com/ja-jp/library/ms750441
![Page 13: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/13.jpg)
“XAML”
• 宣言型マークアップ言語
http://msdn.microsoft.com/ja-jp/library/ms752059
<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
![Page 14: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/14.jpg)
XAML の利点
XAML コードと( C# などの)分離コードを分けることの利点1. ビジュアル・デザイナー向けのツールを用いた外観デザイン
が容易2. UI 要素の階層が深くなった場合に、(一般的なプログラミン
グ言語よりも)階層構造を把握しやすい3. Web 開発で一般的に用いられている HTML + JavaScript に
似た感覚でアプリケーションを開発可能4. C# のようなプログラミング言語では書けない、あるいは、
書きにくい記述が容易
![Page 15: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/15.jpg)
“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
![Page 16: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/16.jpg)
MVVM パターンの概要
• Model/View/ViewModel の3つの責務に GUI アプリケーションを分割するパターン• View は ViewModel に依存、 ViewModel は Model に依存。逆方向の依存はない
http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_01.html
Notifications
ViewView ModelViewModel
Presentation Logic Business Logic and DataUI and UI Logic(Code behind)
Data Binding
Commands
![Page 17: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/17.jpg)
“MVVM”
• MVVM パターンは、 WPF と Silverlight のデータバインディング、データテンプレート、コマンド、ビヘイビアのようないくつかのコア機能を活用するように最適化された、プレゼンテーションモデルパターンの”近い変形”のことです
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
![Page 18: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/18.jpg)
プレゼンテーションパターンの概念を理解しようなんのために行うの?
![Page 19: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/19.jpg)
プレゼンテーションとドメインの分離 (PDS)PresentationDomainSeparation
![Page 20: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/20.jpg)
プレゼンテーションとドメインの分離
• プレゼンテーションとドメインをなぜ分離するのでしょうか。• どういったメリットがあるの?• Martin Fowler氏が気づいたことが…
Presentation Domain
ユーザーインタフェース ロジック
![Page 21: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/21.jpg)
プレゼンテーションとドメインの分離(PDS)•有用な”設計原則”に、プレゼンテーション層(ユーザインタ
フェース)とその他機能をうまく分ける、というのがあります。私はこれを発見して以来、ずって慣行している。長い間これを使ってきていくつものメリットを発見しました
http://capsctrl.que.jp/kdmsnr/wiki/bliki/?PresentationDomainSeparation
Presentation Domain
![Page 22: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/22.jpg)
プレゼンテーションとドメインの分離(PDS)• メリット• プレゼンテーションとドメインが分かれていると、理解しやすい• 同じ基本プログラムを、重複コードなしに、複数のプレゼンテーショ
ンに対応できる• ユーザインタフェースはテストがしにくいため、それを分離するこ
とにより、テスト可能なロジック部分に集中できる• プレゼンテーション部分のコードは、ドメイン部分のコードと違った
スキルと知識が必要
Presentation Domain
![Page 23: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/23.jpg)
プレゼンテーションとドメインの分離(PDS)• これら多くのメリットがあるにもかかわらず、この原則が破
られているのをよく目にします• なぜしない?(できない)• 知識がない。• フレームワークがドメインとプレゼンテーションを安易に、ごちゃまぜにして分割が困難。
• クラサバ型という意味ではない。同じマシン上でも論理的に分割すべき
http://capsctrl.que.jp/kdmsnr/wiki/bliki/?PresentationDomainSeparation
![Page 24: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/24.jpg)
プレゼンテーションとドメインの分離(PDS)Presentation と Domain のそれぞれの感心事を分離する。
ただし相互依存は望ましくないため、 Observer パターンが良い
Presentation Domain
呼び出し
イベント監視
![Page 25: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/25.jpg)
プレゼンテーションとドメインの分離(PDS)• 分離することによる理解のしやすさ• テストがしやすい• テストしにくい UI を分離、テストしやすくする
• 変更に強い• プレゼンテーション部分の変更に、ドメインが引きづられない• 複数のプレゼンテーションが用意できる
Presentation Domain
呼び出し
イベント監視
![Page 26: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/26.jpg)
プレゼンテーションとドメインの分離(PDS)•規模が小さいプログラムでは冗長さが目立つかもしれません• しかしドメインの単体テスト自動化によるメリットは大きい
です
Presentation Domain
呼び出し
イベント監視
![Page 27: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/27.jpg)
XAML 系での PDS の適用How to apply PDS to XAML systems
![Page 28: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/28.jpg)
XAML 系 (WPF) で PDS の適用
• XAML には XAML固有の都合でバインドするオブジェクトが必要となる
Presentation
XAML と XAMLの都合が関係あ
る部分
Domain
XAML と XAMLの都合が関係な
い部分
呼び出し
イベント監視
![Page 29: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/29.jpg)
XAML 系 (WPF) で PDS の適用
• XAML には XAML固有の都合でバインドするオブジェクトが必要となる
Presentation - XAML と XAMLの都合が関係ある部分
Domain
XAML と XAMLの都合が関係な
い部分
呼び出し
イベント監視
XAMLと
コードビハインド
バインドするオブジェクト
データバインディング
![Page 30: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/30.jpg)
XAML 系 (WPF) で PDS の適用
Domain
XAML と XAMLの都合が関係な
い部分
呼び出し
イベント監視
XAMLと
コードビハインド
バインドするオブジェクト
データバインディング
![Page 31: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/31.jpg)
XAML 系 (WPF) で PDS の適用
Domain
XAML と XAMLの都合が関係な
い部分
呼び出し
イベント監視
XAMLと
コードビハインド
XAMLの状態ストア
データバインディング
View ViewModel Model
![Page 32: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/32.jpg)
Domain
XAML とXAML の都合が関係ない部
分
呼び出し
イベント監視
XAMLと
コードビハインド
XAMLの状態スト
ア
データバインディング
View ViewModel ModelNotifications
ViewView ModelViewModel
Presentation Logic Business Logic and DataUI and UI Logic(Code behind)
Data Binding
Commands
![Page 33: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/33.jpg)
Notifications
ViewView ModelViewModel
Presentation Logic Business Logic and DataUI and UI Logic(Code behind)
Data Binding
Commands
Presentation Domain
呼び出し
イベント監視
![Page 34: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/34.jpg)
プレゼンテーションモデルRepresent the state and behavior of the presentation independently of the GUI controls used in the interface
![Page 35: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/35.jpg)
プレゼンテーションモデル
Controller
View
ModelPresentation
Model委譲
http://martinfowler.com/eaaDev/PresentationModel.htmlhttp://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_10/greatblogentry_10_01.html
![Page 36: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/36.jpg)
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
![Page 37: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/37.jpg)
UI アーキテクチャの違いドメインロジックの場所
プレゼンテーションロジックの場所
オブザーバ同期
MVC Model View または Model View が Model を監視
プレゼンテーションモデル
Model Presentation Model View がPresentaionModel を監視
MVVM Model ViewModel View がViewModel を監視(双方向データバンド )
http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_10/greatblogentry_10_01.html
![Page 38: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/38.jpg)
MVVM パターンを適用するためには
• ほかのすべての責任分割型の UI設計パターンと同様に、さまざまなシナリオで MVVM パターンを効果的に適用する鍵は、正しいロールを適切にコードとして実装する方法を理解することと、それぞれの責務がどうやって相互に対話するかをよく理解することです。• 「各責務が何を担当するのか?」• 「なぜそうするのか?」• 「各責務はどうやって対話をするのか?」
• それらを知ることが、 MVVM パターンを理解し、それぞれの開発案件に合わせて応用できるようになることにつながるはずです。
• Prism 開発ガイドより
![Page 39: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/39.jpg)
責務
• View• XAML で記述され、 UI の外観と構造を定義します。• 基本 UI のコードビハインドには、初期の InitializeComponent メソッド以外何も記述されているべきではありません
• ViewModel• プレゼンテーション・ロジックとステート(=状態)を持つ• Model の公開するステートをいちいちラップして View に公開するの
も ViewModel の役目
• Model• ビジネスドメイン。ビジネスドメインの状態も持つことになる。
![Page 40: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/40.jpg)
MVVM の sample
• HelloWorld 程度で MVVM のメリットを享受することは難しいですが、 View 部分、 ViewModel 部分、 Model 部分がどのように分割されているか慣れましょう
Demo
![Page 41: WPF MVVM Review](https://reader035.vdocuments.net/reader035/viewer/2022081505/5565fcf7d8b42a2a4d8b4bd9/html5/thumbnails/41.jpg)
参考資料・サイト・文献
• @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