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.

Xamarin.formsでのmvvm利用のコツ

5,201 views

Published on

Xamarin.Forms の MVVM パターンの解説です。
MVVM の基礎と、Xmarin.Forms 特有の MVVM パターンを説明しています。

Published in: Software

Xamarin.formsでのmvvm利用のコツ

  1. 1. Xamarin.Formsでの MVVM利用のコツ Microsoft MVP C# 増田智明 Moonmile Solutions
  2. 2. 自己紹介  増田智明masdua@moonmile.net  執筆業&プログラマ  C#によるiOS, Android, Windowsアプリケーション開発入門  逆引き大全Visual C# 2013, Visual Basic 2013  逆引き大全iPhone/iPad アプリ開発  作って覚えるiPhone/iPad アプリ入門
  3. 3. アジェンダ シンプルにMVVMの仕組みを知る MVVMの得意なところを知る Xamarin.Forms特有のMVVM MVVMの限界を知る
  4. 4. シンプルにMVVMの仕組みを理解 必要な時にを必要なものだけを使う
  5. 5. シンプルなMVVM View ViewModel Model XAML Glue Data XAML ViewModel(Model) ViewModelに データを含ませて しまうことが多い シンプルに 実装したいから
  6. 6. クラス分けする View ViewModel Model XAML ViewModel Class Codebehind *.cs INotifyPropertyChanged ICommand Azure/ Web API etc
  7. 7. Bindingの関係(Label) <ContentPage> <Label Text="{Binding Name}"/> XAML ViewModel+Model Class Codebehind *.cs public class MyItem : BindableBase { private string _Name; public string Name { get { return _Name; } set { this.SetProperty(ref this._Name, value); } } var vm = new MyItem(); this.BindingContext = vm;
  8. 8. Bindingの関係(Label) <ContentPage> <Label Text="{Binding Name}"/> XAML ViewModel+Model Class Codebehind *.cs public class MyItem : BindableBase { private string _Name; public string Name { get { return _Name; } set { this.SetProperty(ref this._Name, value); } } var vm = new MyItem(); this.BindingContext = vm;
  9. 9. Bindingの関係(ListView) <ListView> <ListView.ItemTemplate> <DataTemplate> XAML ViewModel+Model Class Codebehind *.cs <ViewCell> <StackLayout> <Label Text="{Binding Name}" /> public class MyItems : ObservableCollection<MyItem> { var items = new MyItems(); lv.ItemsSource = items; public class MyItem : BindableBase { private string _Name; public string Name { get; set; } { get { return _Name; } set { this.SetProperty(ref this._} ※ただし、一度だけの表示であれば、 INotifyPropertyChanged を実装する必要はない。
  10. 10. Bindingの関係(ListView複合) <ContentPage> <ListView ItemsSource="{Binding Items}"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout> XAML ViewModel+Model Class Codebehind *.cs <Label Text="{Binding Name}" /> public class MyViewModel { public MyItems Items { get; set; } public class MyItems : ObservableCollection<MyItem> { var vm = new MyViewModel(); this.BindingContext = vm; public class MyItem : BindableBase { private string _Name; public string Name { get; set; } { get { return _Name; } set { this.SetProperty(ref this._}
  11. 11. シーケンス図(ViewModeで変更) Codebehind XAML ViewModel *.cs Binding INotifyPropertyChanged Change Display Create
  12. 12. シーケンス図(Viewで変更) Codebehind XAML ViewModel *.cs Binding Changed Lookup Changed Create
  13. 13. Entryの入力をLabelに反映するパターン Codebehind XAML ViewModel *.cs Changed Changed INotifyPropertyChanged Change Display ユーザの入力を自動 でView に反映させる トリック
  14. 14. ICommandの関係 <ContentPage> <Button Command="{Binding UpdateCommand}"/> XAML ViewModel+Model Class Codebehind *.cs var vm = new MyItem(); this.BindingContext = vm; this.UpdateCommand = new Command(() => { }); Xamarin.Forms.CommandでIcommandを実装できる
  15. 15. ICommandの関係(パラメータ付き) <ContentPage> <Button Command="{Binding UpdateCommand}“ CommandParameter="..."/> XAML ViewModel+Model Class Codebehind *.cs var vm = new MyItem(); this.BindingContext = vm; this.UpdateCommand = new Command<string>((param) => { });
  16. 16. イベントの場合 <ContentPage> <Button Click="OnButtonClicked"/> XAML ViewModel+Model Class Codebehind *.cs void OnButtonClicked(object sender, EventArgs e) { vm.UpdateCommand(); } Or btn.Click += (s,e) => { vm.UpdteCommand(); } ルールを決めればどちらでも良い
  17. 17. シーケンス図 Codebehind XAML ViewModel *.cs Binding Execute Event Create Action
  18. 18. MVVMの得意なところ 汎用ではない道具は何に特化しているのか?
  19. 19. Viewをプラットフォーム依存にする View ViewModel Model XAMLによる実装 WPF Windows Store Windows Phone Xamarin.Forms プラットフォーム非依存 のライブラリにできる ライブラリ PCL Shared Project ※ただし、活用範囲が狭ければ、 ライブラリにする必要はない
  20. 20. ViewModelをTDD可能にする View ViewModel Model プラットフォーム非依存に することにより、 TDD で自動テストが可能 になる
  21. 21. Viewの切り替えが可能 View ViewModel Model View View 動的にViewを切り替える ことが可能 ※ただし、現状のXAML(MS/Xamarin.Forms) では、動的切り替えはあまり考えられてない。
  22. 22. 別のMVVMフレームワークの利用 View ViewModel Model インターフェース System.ComponentModel.INotifyPropertyChanged System.Windows.Input.Icommand が同じなので、他のMVVMフレームワークと互換性がある WPFのMVVM, MvvmCross, Prism, Xamarin.Forms など
  23. 23. ViewModelのコツ  プラットフォーム非依存にする Viewを呼ばない プラットフォーム固有の機能を使わない 同時にデメリットでもある
  24. 24. Xamarin.Forms特有のMVVM てこの原理を使って効果を最大化する
  25. 25. Xamarin.FormsのMVVM WPF/Windows Store AppのXAMLと同じよ うに作れる INotifyPropertyChanged、ICommand のイ ンターフェースがある デザインビューがないので直打ち Try&Errorがやり辛い
  26. 26. 単体のバインド <StackLayout> this.SetBinding(Label.TextProperty, Item.Name) <Label Text="設置場所情報" /> <Label Text="施設名" Font="Small" /> <Label Text="{Binding Item.LocationName}" /> <Label Text="住所" Font="Small"/> <Label Text="{Binding Item.FullAddress}" /> ModelViewのクラス構造を入れ子にできる
  27. 27. コレクションのバインド listView.ItemsSource = Items <ListView ItemsSource="{Binding Items}"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout> セル指定 <Label Text="{Binding LocationName}" /> セル内のレイアウト を作成 セルにバインド
  28. 28. 数値フォーマットの表示 int型 <Label Text="{Binding Count,StringFormat='{0}'}"/> String.Formatに変換 適宜フォーマットする コンバータ利用 Xamarin.Forms.IValueConverter
  29. 29. その他のXamarin.Forms のバインド機能 Part 4. Data Binding Basics http://developer.xamarin.com/guides/cr oss-platform/xamarin-forms/xaml-for-xamarin- forms/data_binding_basics/ Part 5. From Data Bindings to MVVM http://developer.xamarin.com/guides/cr oss-platform/xamarin-forms/xaml-for-xamarin- forms/data_bindings_to_mvvm/
  30. 30. AEDSearch によるデモ
  31. 31. TMPuzzleXForms によるデモ
  32. 32. MVVMの限界 限界があるからこそ、最大限の利用が可能。それ以後は場を変える。
  33. 33. 画面遷移の不都合 ViewModelがプラットフォーム非依存 のため、View(プラットフォーム依 存)ができない/やりにくい。 this.Navigation.PushAsync 素直にViewのイベントを使う
  34. 34. 複雑なイベント処理がICommandではや りづらい ICommandでは静的なパラメータのみ 利用可能 <Button Command=“…” CommandParameter=“…” /> 素直にイベントを利用 コードビハイドからViewModelへ渡す
  35. 35. GoF Commandパターン 大量の命令(コマンド)を一括で扱う System.Windows.Input.ICommand SendMessage EevntHandler パラメタの型が失われる欠点
  36. 36. その他の欠点  プロパティ伝播が過敏 非同期(async/await)が使えない Viewでの不意な重たい処理に弱い  コレクションの変更に過敏  プラットフォーム依存データが扱いにくい
  37. 37. と云う限界を知ってMVVM を使う XAML+イベントの使い分け Rxの利用 C++, F# でパイプの利用 動的XAMLロード
  38. 38. 参考文献  Cross-Platform User Interfaces with Xamarin.Forms http://developer.xamarin.com/guides/cross-platform/xamarin-forms/  MvvmCross https://github.com/MvvmCross  Prism 5.0 for .NET 4.5 http://compositewpf.codeplex.com/releases/view/117297  Reactive Alliance http://www.reactivealliance.com/  AED Opendata Search Sample http://code.msdn.microsoft.com/AED-Opendata-Search-Sample-117dfafc  moonmile/TMPuzzleXForms https://github.com/moonmile/TMPuzzleXForms  moonmile/XFormsPreviewer https://github.com/moonmile/XFormsPreviewer

×