20140322 mvvm crossforwindowsstoreapps

677 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
677
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

20140322 mvvm crossforwindowsstoreapps

  1. 1. 仕事 個人 http://tanaka733.net http://tech.tanaka733.net http://www.buildinsider.net/web/iis8
  2. 2. http://metrostyledev.net/ テーマ 次回
  3. 3. Windows Store App とMVVMパターン Xamarinによるマルチプラットフォーム開発 MvvmCrossとは? MvvmCrossによるWindows Store App開発
  4. 4. XAML はBindingファーストな言語 XAMLといえば MVVM pattern GUIアーキテクチャパターンの基礎からMVVMパターンへ
  5. 5. View ViewModel Model 参考資料 GUIアーキテクチャパターンの基礎から MVVMパターンへ 40pより引用
  6. 6. 状態変更イベントの発火 コマンドの記述
  7. 7. Simple な単機能アプリなら… 込み入ったアプリを作ると…
  8. 8. ViewModelの変更プロパティ、コマンド ViewModelとModelの連携
  9. 9. MVVM Light Toolkit Pattern & Practices Prism MvvmCross
  10. 10. iOS/Obj-C Android Java Windows Store/Phone C# etc
  11. 11. https://xamarin.com/
  12. 12. Xamarinもネイティブをたたくだけ コードをどこまで共有化できるか
  13. 13. Portability できるだけコードは共通化したい Interface Driven Development IoC による依存性注入 MVVM Native UI プラットフォームネイティブのUIを使おう https://github.com/MvvmCross/MvvmCross/wiki/The-MvvmCross-Manifesto
  14. 14. モバイル・タブレット デスクトップ
  15. 15. PCL(Win Store) View (Android) View (iOS) View ViewModel Model
  16. 16. QuickCross ReactiveUI
  17. 17. プロジェクトを作って起動するまで 実際の開発で使っている機能の紹介 画面遷移の仕組み SQLiteなどプラグインの追加 プラットフォーム固有の機能の追加
  18. 18. Store Appのみの場合 Androidアプリも開発する場合 Xamarin が必要。 VSで開発する場合はBusinessEdition以上でVS拡張をインストール。 iOSアプリも開発する場合 Xamarinに加えてデザイナ、ビルドにMac OS が必要
  19. 19. PCLとストアプロジェクトを作成
  20. 20. NugetでMvvmCrossを検索
  21. 21. Appクラス ViewModel IoCによるServiceクラスの注入
  22. 22. using Cirrious.CrossCore.IoC; using Cirrious.MvvmCross.ViewModels; using RoomMetro.RegisterationService.Core.ViewModels; namespace RoomMetro.RegisterationService.Core { public class App : MvxApplication { public override void Initialize() { CreatableTypes() .EndingWith("Service") .AsInterfaces() .RegisterAsLazySingleton(); RegisterAppStart<MemberListViewModel>(); } } }
  23. 23. using Cirrious.CrossCore.IoC; using Cirrious.MvvmCross.ViewModels; using RoomMetro.RegisterationService.Core.ViewModels; namespace RoomMetro.RegisterationService.Core { public class App : MvxApplication { public override void Initialize() { CreatableTypes() .EndingWith("Service") .AsInterfaces() .RegisterAsLazySingleton(); RegisterAppStart<MemberListViewModel>(); } } }
  24. 24. using Cirrious.CrossCore.IoC; using Cirrious.MvvmCross.ViewModels; using RoomMetro.RegisterationService.Core.ViewModels; namespace RoomMetro.RegisterationService.Core { public class App : MvxApplication { public override void Initialize() { CreatableTypes() .EndingWith("Service") .AsInterfaces() .RegisterAsLazySingleton(); RegisterAppStart<MemberListViewModel>(); } } }
  25. 25. public class MemberListViewModel : MvxViewModel { private readonly IDataService dataService; public MemberListViewModel(IDataService dataService) { this.dataService = dataService; } private ObservableCollection<MemberViewModel> members = new ObservableCollection<MemberViewModel>(); public ObservableCollection<MemberViewModel> Members { get { return members; } set { if (members == value) { return; } members = value; RaisePropertyChanged(() => Members); } } //続く
  26. 26. private MvxCommand loadCommand; public MvxCommand LoadCommand { get { return loadCommand ?? (loadCommand = new MvxCommand(ExecuteLoadCommand)); } } private void ExecuteLoadCommand() { LoadAsync().FireAndForget(); } }
  27. 27. https://gist.github.com/tanaka-takayoshi/8221618#file-mvxprop-snippet-xml https://gist.github.com/tanaka-takayoshi/8505439#file-mvxcommand-snippet-xml
  28. 28. public MemberListViewModel(IDataService dataService) { this.dataService = dataService; } public override void Initialize() { CreatableTypes() .EndingWith("Service") .AsInterfaces() .RegisterAsLazySingleton(); RegisterAppStart<MemberListViewModel>(); }
  29. 29. Setupクラス App.xaml.cs の修正 Viewの定義
  30. 30. namespace RoomMetro.RegisterService.Store { public class Setup : MvxStoreSetup { public Setup(Frame rootFrame) : base(rootFrame) {} protected override IMvxApplication CreateApp() { return new RegisterationService.Core.App(); } protected override IMvxTrace CreateDebugTrace() { return new DebugTrace(); } } }
  31. 31. //前略 if (rootFrame.Content == null) { var setup = new Setup(rootFrame); setup.Initialize(); var start = Mvx.Resolve<IMvxAppStart>(); start.Start(); } //後略
  32. 32. 最低限CreateAppメソッド それ以外は命名規約やフォルダ配置規約 https://github.com/MvvmCross/MvvmCross/wiki/Customising-using- App-and-Setup
  33. 33. 画面遷移
  34. 34. 通常のStore App MvvmCrossでは…
  35. 35. 単純には… パラメーターを渡すときは… 遷移先のViewModelでは次のようにして受け取る ShowViewModel<MemberViewModel>(); ShowViewModel<MemberDetialViewModel>(new MemberDetailParameters {Id = 1}); public class MemberDetialViewModel : MvxViewModel { public void Init(MemberDetailParameters param) { var id = param.Id; //idを使って詳細情報を取ってくるなど } } https://github.com/MvvmCross/MvvmCross/wiki/ViewMo del--to-ViewModel-navigation
  36. 36. SQLite Plugin
  37. 37. SQLite がおすすめ https://connect.microsoft.com/SQLServer/feedback/details/776328/po rt-sql-compact-to-windows-rt
  38. 38. http://visualstudiogallery.msdn.microsoft.com/1d04f82f-2fe9-4727- a2f9-a2db127ddc9a
  39. 39. Nugetから入れる
  40. 40. public class DataService : IDataService { private readonly ISQLiteConnection connection; public DataService(ISQLiteConnectionFactory factory) { connection = factory.Create("roommetro.sql"); connection.CreateTable<Member>(); } public Member Get(int id) { return connection.Get<Member>(id); } public void Insert(Member member) { connection.Insert(member); } //以下略
  41. 41. Converters
  42. 42. たとえば、ViewModel でVisibilityを制御したい
  43. 43. たとえば、ViewModel でVisibilityを制御したい Converterを使おう
  44. 44. MvxVisibilityというのがPluginで提供されている
  45. 45. MvxVisibilityというのがPluginで提供されている が、自分でひと手間かける必要あり
  46. 46. private MvxVisibility attendedVisibility = MvxVisibility.Visible; public MvxVisibility AttendedVisibility { get { return attendedVisibility; } set { if (attendedVisibility == value) { return; } attendedVisibility = value; RaisePropertyChanged(() => AttendedVisibility); } }
  47. 47. Store 側にNativeConvertersを作る namespace RoomMetro.RegisterService.Store.NativeConverters { public class VisibilityConverter : MvxNativeValueConverter<MvxVisibilityValueConverter> { } public class ColorConverter : MvxNativeValueConverter<MvxNativeColorValueConverter> { } }
  48. 48. <Application xmlns:nativeConverters="using:RoomMetro.RegisterService.Store.NativeConverters"> <Application.Resources> <x:String x:Key="AppName">めとべや参加登録アプリ カッコカリ</x:String> <nativeConverters:VisibilityConverter x:Key="Visibility" /> <nativeConverters:ColorConverter x:Key="NativeColor" /> </Application.Resources> </Application> <TextBlock Text="{Binding Name}" Foreground="{Binding AttendedStatusColor, Converter={StaticResource NativeColor}}" Visibility="{Binding AttendedVisibility, Converter={StaticResource Visibility}}" />
  49. 49. IoC
  50. 50. まずは豊富なPluginをチェック すでに誰かが用意してくれているかもしれない 自前でやるならModelに書きたい IoC を使って分離しよう or Plugin を作ろう
  51. 51. Core (PCL)(Win Store) View (Android) View (iOS) View ViewModel Model
  52. 52. Core (PCL)(Win Store) View (Android) View (iOS) View ViewModel Model IPiyo (Win Store) StorePiyo (Android) DroidPiyo (iOS) TouchPiyo
  53. 53. Plugin Core (PCL)(Win Store) View (Android) View (iOS) View ViewModel Model IPiyo (Win Store) StorePiyo (Android) DroidPiyo (iOS) TouchPiyo
  54. 54. https://github.com/MvvmCross/MvvmCross/wiki/MvvmCross- plugins https://speakerdeck.com/cirrious/plugins-in-mvvmcross
  55. 55. namespace RoomMetro.RegisterationService.Core { public interface INotification { void Notify(string message); } }
  56. 56. public class StoreNotification : INotification { public void Notify(string message) { //トースト通知のコード省略 } } public class Setup : MvxStoreSetup { //これ以外のメソッド省略 protected override void InitializeLastChance() { base.InitializeLastChance(); Mvx.RegisterSingleton<INotification>(new StoreNotification()); } }
  57. 57. MvvmCross はストアアプリ単体を作る視点においても高機能 は 今回の内容は割とまだ基本的な機能レベル
  58. 58. AndroidやiOS側の実装 Xamarinのコストパフォーマンス
  59. 59. https://github.com/MvvmCross/MvvmCross https://github.com/MvvmCross/MvvmCross/wiki https://github.com/MvvmCross/NPlus1DaysOfMvvmCross
  60. 60. http://ytabuchi.hatenablog.com/ 実際にMvvmCrossでアプリを開発した経験に基づく記事があります (Xamarin Studioを使ったiPhone/Androidアプリ) http://iseebi.hatenablog.com/
  61. 61. https://www.slideboom.com/presentations/591514/GUI%E3%82%A2 %E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E 3%83%A3

×