20140322 mvvm crossforwindowsstoreapps-pdf

1,542 views
1,345 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,542
On SlideShare
0
From Embeds
0
Number of Embeds
608
Actions
Shares
0
Downloads
12
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

20140322 mvvm crossforwindowsstoreapps-pdf

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

×