WPF MVVM Review
Download as PPTX, PDF13 likes6,546 views
WPF および MVVM について mokusharp on 2013/7/18 (C#勉強会)にて発表した資料です。
WPF MVVM Review
- 1. WPF MVVM Review Takayuki KONDO [email protected] 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
- 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
- 20. プレゼンテーションとドメインの分離 • プレゼンテーションとドメインをなぜ分離するのでしょうか。 • どういったメリットがあるの？ • Martin Fowler氏が気づいたことが… Presentation Domain ユーザーインタフェース ロジック
- 22. プレゼンテーションとドメインの分離 (PDS) • メリット • プレゼンテーションとドメインが分かれていると、理解しやすい • 同じ基本プログラムを、重複コードなしに、複数のプレゼンテーショ ンに対応できる • ユーザインタフェースはテストがしにくいため、それを分離すること により、テスト可能なロジック部分に集中できる • プレゼンテーション部分のコードは、ドメイン部分のコードと違った スキルと知識が必要 Presentation Domain
- 23. プレゼンテーションとドメインの分離 (PDS) • これら多くのメリットがあるにもかかわらず、この原則が破ら れているのをよく目にします • なぜしない？（できない） • 知識がない。 • フレームワークがドメインとプレゼンテーションを安易に、ごちゃま ぜにして分割が困難。 • クラサバ型という意味ではない。同じマシン上でも論理的に分 割すべき http://capsctrl.que.jp/kdmsnr/wiki/bliki/?PresentationDomainSeparation
- 25. プレゼンテーションとドメインの分離 (PDS) • 分離することによる理解のしやすさ • テストがしやすい • テストしにくいUIを分離、テストしやすくする • 変更に強い • プレゼンテーション部分の変更に、ドメインが引きづられない • 複数のプレゼンテーションが用意できる Presentation Domain 呼び出し イベント監視
- 26. プレゼンテーションとドメインの分離 (PDS) • 規模が小さいプログラムでは冗長さが目立つかもしれません • しかしドメインの単体テスト自動化によるメリットは大きいで す Presentation Domain 呼び出し イベント監視
- 27. XAML系でのPDSの適用 How to apply PDS to XAML systems
- 29. XAML系(WPF)でPDSの適用 • XAMLにはXAML固有の都合でバインドするオブジェクトが必 要となる Presentation - XAMLとXAMLの都 合が関係ある部分 Domain XAMLとXAMLの 都合が関係ない 部分 呼び出し イベント監視 XAML と コードビハイ ンド バインドする オブジェクト
- 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
- 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