WPF MVVM Review

1. WPF MVVM Review Takayuki KONDO tkondou@gmail.com mokusharp (C# study meeting) on 2013/07/18

2. 目次 • WPF/XAML/MVVMキーワードのおさらい • WPF • XAML • MVVM • 概念を理解しよう • PDS • XAML系でのPDS適用 • プレゼンテーションモデル

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

4. “WPF” • Windows Presentation Foundation • ユーザインタフェースを作成するための新しい技術 • 次世代プレゼンテーションシステム • 多機能な対話型クライアントアプリケーションを作成するためのUIフレームワーク • .NET Framework に含まれるGUI開発ライブラリ

5. “WPF” • 概要 • Windowsフォームが、単にWin32 APIをマネージ・コードでラップしたものであるのに対して、WPFはマネージ・コードで新たに実装されたGUI開発ライブラリ • 豊かなユーザー体験を提供する先進的なGUI開発基盤 • 3.0以降の .NET Framework に標準搭載

6. “WPF”の特徴と利点 • グラフィックス・ハードウェア • コントロール、メディア、文書の統合 • UIカスタマイズの柔軟性 • 見た目（＝外観デザイン）とロジックの分離 http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html

7. “WPF”の特徴と利点 • グラフィックス・ハードウェア • WPFはコアの部分にグラフィックス・ハードウェアを活用したベクター・ベースのレンダリング・エンジンを採用している。ベクター・ベースであるため、UI要素にスムーズな拡大・縮小／回転を掛けることができる。また、ハードウェア・アクセラレーションにより、CPU への負担を最小限に抑えている。 • コントロール、メディア、文書の統合 • UIカスタマイズの柔軟性 • 見た目（＝外観デザイン）とロジックの分離 http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html

8. “WPF”の特徴と利点 • グラフィックス・ハードウェア • コントロール、メディア、文書の統合 • WPFは、ボタンやリストボックスなどのコントロール、ラスター画像やベクター・グラフィックス、頂点メッシュを用いた3D描画、動画などのメディア、リッチテキストなどの整形済み文書に対して、統一的な開発機能を提供する。それぞれに別個のプログラミング・モデルを覚える必要がないだけではなく、例えばボタンの中に動画を表示するといった組み合わせも簡単に行える。 • UIカスタマイズの柔軟性 • 見た目（＝外観デザイン）とロジックの分離 http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html

9. “WPF”の特徴と利点 • グラフィックス・ハードウェア • コントロール、メディア、文書の統合 • UIカスタマイズの柔軟性 • 既存のGUI開発ライブラリでは、ボタンなどのUI要素をカスタマイズするにしても、サイズや背景色の変更程度の機能しか持っていないものも多い。 • これに対してWPFでは、例えば任意の形状のボタンを作成したり、背景に動画を流したり、動的に回転や拡大・縮小を行ったりといった非常に柔軟なカスタマイズが可能である。 • 見た目（＝外観デザイン）とロジックの分離 http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html

10. “WPF”の特徴と利点 • グラフィックス・ハードウェア • コントロール、メディア、文書の統合 • UIカスタマイズの柔軟性 • 見た目（＝外観デザイン）とロジックの分離 • WPFではXAML（Extensible Application Markup Language）と呼ばれる、XML形式の宣言的言語を用いてユーザー・インターフェイスを記述する。 • 見た目（＝外観デザイン）に関する部分をXAML言語で記述し、ロジックをC#言語などを用いて記述することで、アプリケーションの見た目に関する部分をロジックから完全に切り離す構造になっている。これは、ビジュアル・デザイナーとロジック開発者との協業を意識したものである。 http://www.atmarkit.co.jp/ait/articles/1005/14/news105.html

11. WPF •Windows •Presentation •UI/UX •Foundation •基礎

12. WPF アーキテクチャ • PresentationFramework • PresentationCore • milcore • アンマネージ http://msdn.microsoft.com/ja-jp/library/ms750441

13. “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

14. XAMLの利点 XAMLコードと（C#などの）分離コードを分けることの利点 1. ビジュアル・デザイナー向けのツールを用いた外観デザインが容易 2. UI要素の階層が深くなった場合に、（一般的なプログラミング言語よりも）階層構造を把握しやすい 3. Web開発で一般的に用いられているHTML＋JavaScriptに似た感覚でアプリケーションを開発可能 4. C#のようなプログラミング言語では書けない、あるいは、書きにくい記述が容易

15. “MVVM” • XAML系プラットフォーム（WPF/Silverlight/WP7/Metro)のために生まれたMVC系パターン • MVC系パターン(MVC/MVP/MVVM)のGUIアーキテクチャ Prism Development Guide Chapter 5: Implementing the MVVM Pattern Notifications View View ModelViewModel Presentation Logic Business Logic and DataUI and UI Logic(Code behind) Data Binding Commands

16. MVVMパターンの概要 • Model/View/ViewModelの３つの責務にGUIアプリケーションを分割するパターン • ViewはViewModelに依存、ViewModelはModelに依存。逆方向の依存はない http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_02/greatblogentry_02_01.html Notifications View View ModelViewModel Presentation Logic Business Logic and DataUI and UI Logic(Code behind) Data Binding Commands

17. “MVVM” • MVVMパターンは、WPFとSilverlightのデータバインディング、データテンプレート、コマンド、ビヘイビアのようないくつかのコア機能を活用するように最適化された、プレゼンテーションモデルパターンの”近い変形”のことです Prism Development Guide Chapter 5: Implementing the MVVM Pattern Notifications View View ModelViewModel Presentation Logic Business Logic and DataUI and UI Logic(Code behind) Data Binding Commands

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

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

20. プレゼンテーションとドメインの分離 • プレゼンテーションとドメインをなぜ分離するのでしょうか。 • どういったメリットがあるの？ • Martin Fowler氏が気づいたことが… Presentation Domain ユーザーインタフェースロジック

21. プレゼンテーションとドメインの分離 (PDS) • 有用な”設計原則”に、プレゼンテーション層（ユーザインタフェース）とその他機能をうまく分ける、というのがあります。私はこれを発見して以来、ずって慣行している。長い間これを使ってきていくつものメリットを発見しました http://capsctrl.que.jp/kdmsnr/wiki/bliki/?PresentationDomainSeparation Presentation Domain

22. プレゼンテーションとドメインの分離 (PDS) • メリット • プレゼンテーションとドメインが分かれていると、理解しやすい • 同じ基本プログラムを、重複コードなしに、複数のプレゼンテーションに対応できる • ユーザインタフェースはテストがしにくいため、それを分離することにより、テスト可能なロジック部分に集中できる • プレゼンテーション部分のコードは、ドメイン部分のコードと違ったスキルと知識が必要 Presentation Domain

23. プレゼンテーションとドメインの分離 (PDS) • これら多くのメリットがあるにもかかわらず、この原則が破られているのをよく目にします • なぜしない？（できない） • 知識がない。 • フレームワークがドメインとプレゼンテーションを安易に、ごちゃまぜにして分割が困難。 • クラサバ型という意味ではない。同じマシン上でも論理的に分割すべき http://capsctrl.que.jp/kdmsnr/wiki/bliki/?PresentationDomainSeparation

24. プレゼンテーションとドメインの分離 (PDS) PresentationとDomain のそれぞれの感心事を分離する。ただし相互依存は望ましくないため、Observerパターンが良い Presentation Domain 呼び出しイベント監視

25. プレゼンテーションとドメインの分離 (PDS) • 分離することによる理解のしやすさ • テストがしやすい • テストしにくいUIを分離、テストしやすくする • 変更に強い • プレゼンテーション部分の変更に、ドメインが引きづられない • 複数のプレゼンテーションが用意できる Presentation Domain 呼び出しイベント監視

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

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

28. XAML系(WPF)でPDSの適用 • XAMLにはXAML固有の都合でバインドするオブジェクトが必要となる Presentation XAMLとXAMLの都合が関係ある部分 Domain XAMLとXAMLの都合が関係ない部分呼び出しイベント監視

29. XAML系(WPF)でPDSの適用 • XAMLにはXAML固有の都合でバインドするオブジェクトが必要となる Presentation - XAMLとXAMLの都合が関係ある部分 Domain XAMLとXAMLの都合が関係ない部分呼び出しイベント監視 XAML とコードビハインドバインドするオブジェクト

30. XAML系(WPF)でPDSの適用 Domain XAMLとXAMLの都合が関係ない部分呼び出しイベント監視 XAML とコードビハインドバインドするオブジェクト

31. XAML系(WPF)でPDSの適用 Domain XAMLとXAMLの都合が関係ない部分呼び出しイベント監視 XAML とコードビハインド XAML の状態ストア View ViewModel Model

32. Domain XAMLとXAML の都合が関係ない部分呼び出しイベント監視 XAML とコードビハインド XAML の状態ストア View ViewModel Model Notifications View View ModelViewModel Presentation Logic Business Logic and DataUI and UI Logic(Code behind) Data Binding Commands

33. Notifications View View ModelViewModel Presentation Logic Business Logic and DataUI and UI Logic(Code behind) Data Binding Commands Presentation Domain 呼び出しイベント監視

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

35. プレゼンテーションモデル Controller View Model Presentation Model 委譲 http://martinfowler.com/eaaDev/PresentationModel.html http://www.atmarkit.co.jp/fdotnet/chushin/greatblogentry_10/greatblogentry_10_01.html

36. 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

37. 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

38. MVVMパターンを適用するためには • ほかのすべての責任分割型のUI設計パターンと同様に、さまざまなシナリオでMVVMパターンを効果的に適用する鍵は、正しいロールを適切にコードとして実装する方法を理解することと、それぞれの責務がどうやって相互に対話するかをよく理解することです。 • 「各責務が何を担当するのか？」 • 「なぜそうするのか？」 • 「各責務はどうやって対話をするのか？」 • それらを知ることが、MVVMパターンを理解し、それぞれの開発案件に合わせて応用できるようになることにつながるはずです。 • Prism開発ガイドより

39. 責務 • View • XAMLで記述され、UIの外観と構造を定義します。 • 基本UIのコードビハインドには、初期のInitializeComponentメソッド以外何も記述されているべきではありません • ViewModel • プレゼンテーション・ロジックとステート（＝状態）を持つ • Modelの公開するステートをいちいちラップしてViewに公開するのも ViewModelの役目 • Model • ビジネスドメイン。ビジネスドメインの状態も持つことになる。

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

41. 参考資料・サイト・文献 • @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_0 1.html • MVVMパターンで学ぶGUIアーキテクチャパターン • http://ugaya40.net/architecture/mvvm_to_mvc.html • Separating User Interface Code • http://martinfowler.com/ieeeSoftware/separation.pdf

WPF MVVM Review

Takayuki Kondou

WPF MVVM Review