20140322 mvvm crossforwindowsstoreapps-pdf

  • 902 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
902
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
9
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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