MVVM in Silverlight presentation for a SI partner site training in 2010.

1. Silverlight を使ったLarge-Scale Applicationの構築- MVVM及び Prism のご紹介 - 鈴木 章太郎 アーキテクトエバンジェリスト マイクロソフト株式会社 http://blogs.msdn.com/shosuz/ Twitter : @shosuz

2. アウトライン MVVM Model – View – ViewModel 何をするものか どこで使えば一番うまく使えるか 応用 Prism MVVMを有効に使うために ギャップを埋めるために オプション

3. ゴール Silverlight におけるMVVM の重要性 ゴールを達成するためには多くの手段がある 実際に動かしてみよう MVVM イネーブラについて学ぼう Prism 独自のものを作成しよう

4. 他にも MV_ とついているものが…? MVVM MVC MVP MV???? アプリケーション構築において、メンテナンス性やスケーラビリティ確保のために、一般的に受け入れられているパターン

5. Model-View-ViewModel全体像MVVM, Prism, MEF - WCF RIA Services連携 WPF、Silverlight の疎結合 ソリューションのパターン 下記の実装を行う (トライアド) Model Data(Web)Service のエンティティ(をラップする) WCF RIA ServicesをModelと することも可能 ViewModel Modelを UI に合わせて公開する View ViewModelをXAML等でバインドする 参照：http://msdn.microsoft.com/ja-jp/magazine/dd458800.aspx

6. MVVMどんなものか？なぜ必要か？ 関心の分離 View = UI を担当 Model = 純粋なデータを含む ViewModel = バインディングを通じたView と Model との間のコミュニケーション Silverlight と WPF とで有効活用可能 XAML ベースのデータバインディング テスト可能

7. MVVMどんなものか？なぜ必要か？ Model ：INotifyPropertyChanged、IDataErrorInfoを実装しているクラス (UI要素は持たず、Setter/Getterとしてのプロパティを持つのみ) ViewModelが取り扱うデータを保持するもの ViewModel：INotifyPropertyChangedを実装しているクラス (UI要素は持たず、ビジネスロジックやサーバーとの通信を担当する) 多くはObservableCollectionとしてViewにバインドするデータ(Model)を取得し、保持するもの 分離コードでCommandとイベントハンドラ(Command Receiver)の対応付けを行う Expression Blendのオブジェクトデータソースとしてスタティックリソース宣言が可能（ドラッグ＆ドロップでUI構築） View： XAMLによるUserControl (UI要素のみ) ViewModelから提供されるデータ(Model)を2-waysデータバインドにより表示・更新する XAML側でCommandの宣言を行う できれば分離コードを一切もたないdumbコントロールとしての実装が望ましい(ViewModelの割り当てをViewの分離コードで実行することもできるが、View –ViewModelの分離が不明確になる可能性がある)

8. The MVVM のトライアドすべてを一緒に View コントロールにデータを表示 UI フレンドリーなエンティティや、UI 状態、アクション データを表すエンティティ ViewModel Model

9. ModelMVVM データを表す エンティティ どこから取得したデータかは知る必要なし WCF サービス、WCF RIA Services 等々 バリデーションを含む場合あり

10. ViewMVVM 画面, UI, SilverlightのUserControl UI のルック&フィールを担当 情報を表示 バインディングを通じて、ViewModelとコミュニケート

11. ViewModelMVVM MVVM トライアドのためのロジックのメインソース Model をView と接続する Viewを抽象化する View にバインドされたPublic プロパティ INotifyPropertyChangedと、INotifyCollectionChangedとによる、バインディングを通じた View との会話 バインディングを通じたView からの変更の通知 MVVMトライアドの外部とのコミュニケートのためのサービスの呼び出し

12. MVVMはどこから始めるのが良いか?MVVM バリエーション View は ViewModelと何らかの関連性を持つ 幾つかの実施可能なオプション View First View Model First MVVM トライアドの個々のパーツのメンテナンス

13. View First MVVM Variations ViewModelは View の XAMLの中のスタティックなリソースとして宣言される Expression Blend で作れる もう一つの方法としては、ViewModelをView の分離コードで作成する

14. View First MVVM demo

15. ViewModel FirstMVVM バリエーション View は、ViewModelのコンストラクタにインジェクト(＝注入)される Example: View がDependency Injection を使って作成されると、ViewModelが 作成される

16. View と ViewModelとの結び付けMVVM バリエーション View は ViewModelと何らかの形で一対になる ViewModelと View は一旦作成され、中間段階を経て、その後一対となる

17. View とViewModelとの結び付け vm = new MyVM(); view = new MyView(); view.DataContext = vm; // With Unity vm = container.Resolve<IMyVM>(); view = container.Resolve<MyView>(); view.DataContext = vm;

18. Prism についていつでも選択可能 Prism は、オプションのセット 使いたいものだけを選んで使い、残りは無視して良し 例 : モジュールとコマンドは選ぶが、イベントアグリゲーションとリージョンは無視する Prism: patterns & practices Composite Application Guidance for WPF and Silverlight site http://www.codeplex.com/CompositeWPF

19. Prism の技術コンセプト Commands Shell Modules Bootstrapper Event Aggregation Container Regions Unity and DI

20. Bootstrapperスタートするための機能 アプリケーションを起動 メイン UI コンテナをスタート (Shell) （必要に応じて）モジュールの登録とロード グローバルシングルトンの登録 (オプション) 通常 “Bootstrapperプロジェクト” に含まれる

21. ShellメインView メイン UI コンテナ ロードされ得るすべての Viewをホスト リージョンに分割可能 Shell 自身は、その中に何がロードされるかを知らない

22. RegionsContent エリア View を配置できる Shell の中のエリア 名前を付ける必要あり コンテキストを内包可能 (オプション) RegionManagerによりRegionをメンテナンス可能

23. ModularitySelf Contained Modules ユーザーにとってはシームレス 分割して開発される 他のモジュールを参照してはならない Solution はModules に分割される Example: City government application Module 1: Managing land parcels Module 2: Traffic light administration Module 4: City Parks Modules は、infrastructure と Models をシェアする

24. Dependency InjectionUnityの利用 Unity 又は他の DI ツール群 (例:Ninject) テスト可能でモック作成 抽象化 コンテナオブジェクトにより、クラスがそのインターフェースに従って登録される インターフェースをリクエストされたとき、コンテナは、当該インターフェースと一緒に登録されたクラスを、作成する シングルトンのサポート

25. クラスへのインターフェースの登録 container.RegisterType <IMyViewModel, MyViewModel>();

26. コンクリートClass の作成 container.Resolve<IMyViewModel>();

27. Infrastructure共通のTools Silverlight クラスライブラリプロジェクト モジュールのために共有可能なアイテムを含む Classes Assets Resources 何の参照も作成しない 純粋なライブラリ

28. Commandingアクションとリアクション データバインディングを通じた View とViewModelとの間のイベントを許可 ViewModelが宣言するのは Command receiver Command は XAMLの中で宣言される Button - Click ListBox (Selector) – Selected Command は、ViewModel の Command receiver にデータバインドされる ルールベースで disabled/enabled 設定可能

29. Commanding 実装のための5つのステップ – 前提 Silverlight 4 プロジェクトにおけるICommand実装は、数ステップで足りる 問い合わせの多い個所なので、下記にCommanding 実装のためのシンプルなテクニックを記述する

30. Commanding 実装のための5つのステップ – ICommandの実装 最初のステップは、ICommandインターフェースクラスの実装 このクラスはCommanding アスペクトを管理する 他にも色々オプションがあるところ、ここではシンプルなICommand の実装方法を紹介 当該 DelegatedCommandクラスで実装するのは、ICommandのCanExecuteメソッド、Execute メソッド、そして、CaneExecuteChangedイベント このコードはそのままコピー&ペーストして利用可能

31. Commanding 実装のための5つのステップ – ICommandの実装 ① public class DelegateCommand : ICommand { Func<object, bool> canExecute; Action<object> executeAction; boolcanExecuteCache; public DelegateCommand(Action<object> executeAction, Func<object, bool>canExecute) { this.executeAction= executeAction; this.canExecute= canExecute; } …

32. Commanding 実装のための5つのステップ – ICommandの実装 ② #region ICommandMembers public boolCanExecute(object parameter) { booltemp = canExecute(parameter); if (canExecuteCache != temp) { canExecuteCache= temp; if (CanExecuteChanged != null) { CanExecuteChanged(this, new EventArgs()); } } return canExecuteCache; }

33. Commanding 実装のための5つのステップ – ICommandの実装 ② ・・・続き・・・ public event EventHandlerCanExecuteChanged; public void Execute(object parameter) { executeAction(parameter); } #endregion }

34. Commanding 実装のための5つのステップ – Commandの定義 //ICommand を表示するための Public プロパティ を ViewModelに追加 //このプロパティは 、通常は、ボタン等により、 View にバインドされる public ICommand LoadProductsCommand{ get; set; }

35. Commanding 実装のための5つのステップ – Command の作成 //ViewModelのコンストラクタの中で、 1で作成したコマンドプロパティを設定する LoadProductsCommand= new DelegateCommand (LoadProducts, CanLoadProducts);

36. Commanding 実装のための5つのステップ – ViewModelの作成 //ViewModelが View からアクセス可能なこと を確認する // 様々な方法があるところ、シンプルに View の XAML 中の Static Resource として作成 <UserControl.Resources> <local:ProductViewModel x:Key="vm"/> </UserControl.Resources>

37. Commanding 実装のための5つのステップ – Command のバインド //ボタンコントロールを追加し、当該コマンドプロパティを ViewModel の中で作ったコマンドにバインドする //当該Command に parameter を渡したい場合には、 CommandParameterプロパティを、当該 View の中の要素にバインド できる (通常は parameter は必要ないが、例として実装) <Button Content="Load" Width="120" Command="{Binding LoadProductsCommand}" CommandParameter= "{Binding ElementName= FilterTextBox, Path=Text}" />

38. Commanding 実装のための5つのステップ – ProductViewModel完成品 public class ProductViewModel : ViewModelBase { public ProductViewModel() { this.Products= new ObservableCollection<Product>(); this.AllProducts= new ObservableCollection<Product>(); this.AllProducts.Add(new Product { ProductId = 1, ProductName = "Apple" }); this.AllProducts.Add(new Product { ProductId = 2, ProductName = "Orange" }); this.AllProducts.Add(new Product { ProductId = 3, ProductName = "Banana" }); this.AllProducts.Add(new Product { ProductId = 4, ProductName = "Pear" }) this.AllProducts.Add(new Product { ProductId = 5, ProductName = "Grape" }); this.AllProducts.Add(new Product { ProductId = 6, ProductName = "Grapefruit" }); this.AllProducts.Add(new Product { ProductId = 7, ProductName = "Strawberry" }) this.AllProducts.Add(new Product { ProductId = 8, ProductName = "Melon" }); this.AllProducts.Add(new Product { ProductId = 9, ProductName = "Guava" }); this.AllProducts.Add(new Product { ProductId = 10, ProductName = "Kiwi" }); this.AllProducts.Add(new Product { ProductId = 11, ProductName = "Pineapple" }); this.AllProducts.Add(new Product { ProductId = 12, ProductName = "Mango" }); LoadProductsCommand= new DelegateCommand(LoadProducts, CanLoadProducts); } private void LoadProducts(object param) { string filter = param as string ?? string.Empty; this.Products.Clear(); varquery = from p in this.AllProducts where p.ProductName.ToLower().StartsWith(filter.ToLower()) select p; foreach(var item in query) { this.Products.Add(item); } } private boolCanLoadProducts(object param) { return true } public ICommandLoadProductsCommand { get; set; } public ObservableCollection<Product> AllProducts { get; set; } private ObservableCollection<Product> products; public ObservableCollection<Product> Products { get { return products } set { products = value; this.FirePropertyChanged("Product"); } } }

39. Commanding 実装のための5つのステップ –ViewModel Base public abstract class ViewModelBase : INotifyPropertyChanged { public ViewModelBase() { } public event PropertyChangedEventHandlerPropertyChanged; protected void FirePropertyChanged(string propertyname) { varhandler = PropertyChanged; if (handler != null) handler (this, new PropertyChangedEventArgs(propertyname)); } }

40. Event Aggregatorパブリッシャとサブスクライバ 色々な種類のイベントをパブリッシュ及びサブスクライブ可能にする クロスモジュール化可能 サブスクライバによるフィルタリング可能 例えば: Shell の中のMenu アイテム上をクリック イベントはパブリッシャから呼び出される イベントはサブスクライバに受信される それにより、当該サブスクライバは、 Shell の中の、ある Region の中の、一つのViewをロードする

41. Infrastructure共通のTools Infrastructure は、Silverlight class library プロジェクト クラス、アセット、リソースを含み、モジュール間で共有される 他のモジュールを参照してはならない Web サービスをコールしてはならない 純粋なライブラリ

42. Modular MVVM and Prism demo

43. Screen Presentation EnablerScreensを生成する スクリーン間をナビゲート可能にしなければならない View 同志はお互いのことを知らない 独自のScreen Conductor を作成可能 Loading / Unloading Displaying / Hiding そのまま終了して良いですか? 自分でクリーンアップしましょう!

44. Screen Presentation FrameworkKey Players Screen MVVM トライアドを管理 ScreenFactory Screen class を作成 ScreenFactoryRegistry ScreenFactoryディレクトリ ScreenConductor Screen のアクティベーションイベントをリッスンしたり、その上で動いたりする ScreenCollection Screensを収集する

45. Screen Conductor demo

46. 参考情報その他Blog、チュートリアル、サンプル、等々 Introducing the Earthquake Locator – A Bing Maps Silverlight Application, part 1 http://geekswithblogs.net/bdiaz/archive/2010/03/06/introducing-the-earthquake-locator--a-bing-maps-silverlight-application.aspx MVVM Light Toolkit http://www.galasoft.ch/mvvm/getstarted/ Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 25: ViewModel http://blogs.msdn.com/brada/archive/2009/09/07/business-apps-example-for-silverlight-3-rtm-and-net-ria-services-july-update-viewmodel.aspx ViewModel Pattern in Silverlight using Behaviors http://www.nikhilk.net/Silverlight-ViewModel-Pattern.aspx Simple Step for Commanding in Silverlight http://devlicio.us/blogs/christopher_bennage/archive/2010/03/03/1-simple-step-for-commanding-in-silverlight.aspx