Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WPF MVVM Review

5,790 views

Published on

WPF および MVVM について mokusharp on 2013/7/18 (C#勉強会)にて発表した資料です。

Published in: Technology
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { https://urlzs.com/UABbn } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { https://urlzs.com/UABbn }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

WPF MVVM Review

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

×