20140322 mvvm crossforwindowsstoreapps

50 %
50 %
Information about 20140322 mvvm crossforwindowsstoreapps
Technology

Published on March 22, 2014

Author: tanakata

Source: slideshare.net

仕事 個人 http://tanaka733.net http://tech.tanaka733.net http://www.buildinsider.net/web/iis8

http://metrostyledev.net/ テーマ 次回

Windows Store App とMVVMパターン Xamarinによるマルチプラットフォーム開発 MvvmCrossとは? MvvmCrossによるWindows Store App開発

XAML はBindingファーストな言語 XAMLといえば MVVM pattern GUIアーキテクチャパターンの基礎からMVVMパターンへ

View ViewModel Model 参考資料 GUIアーキテクチャパターンの基礎から MVVMパターンへ 40pより引用

状態変更イベントの発火 コマンドの記述

Simple な単機能アプリなら… 込み入ったアプリを作ると…

ViewModelの変更プロパティ、コマンド ViewModelとModelの連携

MVVM Light Toolkit Pattern & Practices Prism MvvmCross

iOS/Obj-C Android Java Windows Store/Phone C# etc

https://xamarin.com/

Xamarinもネイティブをたたくだけ コードをどこまで共有化できるか

Portability できるだけコードは共通化したい Interface Driven Development IoC による依存性注入 MVVM Native UI プラットフォームネイティブのUIを使おう https://github.com/MvvmCross/MvvmCross/wiki/The-MvvmCross-Manifesto

モバイル・タブレット デスクトップ

PCL(Win Store) View (Android) View (iOS) View ViewModel Model

QuickCross ReactiveUI

プロジェクトを作って起動するまで 実際の開発で使っている機能の紹介 画面遷移の仕組み SQLiteなどプラグインの追加 プラットフォーム固有の機能の追加

Store Appのみの場合 Androidアプリも開発する場合 Xamarin が必要。 VSで開発する場合はBusinessEdition以上でVS拡張をインストール。 iOSアプリも開発する場合 Xamarinに加えてデザイナ、ビルドにMac OS が必要

PCLとストアプロジェクトを作成

NugetでMvvmCrossを検索

Appクラス ViewModel IoCによるServiceクラスの注入

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>(); } } }

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>(); } } }

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>(); } } }

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); } } //続く

private MvxCommand loadCommand; public MvxCommand LoadCommand { get { return loadCommand ?? (loadCommand = new MvxCommand(ExecuteLoadCommand)); } } private void ExecuteLoadCommand() { LoadAsync().FireAndForget(); } }

https://gist.github.com/tanaka-takayoshi/8221618#file-mvxprop-snippet-xml https://gist.github.com/tanaka-takayoshi/8505439#file-mvxcommand-snippet-xml

public MemberListViewModel(IDataService dataService) { this.dataService = dataService; } public override void Initialize() { CreatableTypes() .EndingWith("Service") .AsInterfaces() .RegisterAsLazySingleton(); RegisterAppStart<MemberListViewModel>(); }

Setupクラス App.xaml.cs の修正 Viewの定義

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(); } } }

//前略 if (rootFrame.Content == null) { var setup = new Setup(rootFrame); setup.Initialize(); var start = Mvx.Resolve<IMvxAppStart>(); start.Start(); } //後略

最低限CreateAppメソッド それ以外は命名規約やフォルダ配置規約 https://github.com/MvvmCross/MvvmCross/wiki/Customising-using- App-and-Setup

画面遷移

通常のStore App MvvmCrossでは…

単純には… パラメーターを渡すときは… 遷移先の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

SQLite Plugin

SQLite がおすすめ https://connect.microsoft.com/SQLServer/feedback/details/776328/po rt-sql-compact-to-windows-rt

http://visualstudiogallery.msdn.microsoft.com/1d04f82f-2fe9-4727- a2f9-a2db127ddc9a

Nugetから入れる

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); } //以下略

Converters

たとえば、ViewModel でVisibilityを制御したい

たとえば、ViewModel でVisibilityを制御したい Converterを使おう

MvxVisibilityというのがPluginで提供されている

MvxVisibilityというのがPluginで提供されている が、自分でひと手間かける必要あり

private MvxVisibility attendedVisibility = MvxVisibility.Visible; public MvxVisibility AttendedVisibility { get { return attendedVisibility; } set { if (attendedVisibility == value) { return; } attendedVisibility = value; RaisePropertyChanged(() => AttendedVisibility); } }

Store 側にNativeConvertersを作る namespace RoomMetro.RegisterService.Store.NativeConverters { public class VisibilityConverter : MvxNativeValueConverter<MvxVisibilityValueConverter> { } public class ColorConverter : MvxNativeValueConverter<MvxNativeColorValueConverter> { } }

<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}}" />

IoC

まずは豊富なPluginをチェック すでに誰かが用意してくれているかもしれない 自前でやるならModelに書きたい IoC を使って分離しよう or Plugin を作ろう

Core (PCL)(Win Store) View (Android) View (iOS) View ViewModel Model

Core (PCL)(Win Store) View (Android) View (iOS) View ViewModel Model IPiyo (Win Store) StorePiyo (Android) DroidPiyo (iOS) TouchPiyo

Plugin Core (PCL)(Win Store) View (Android) View (iOS) View ViewModel Model IPiyo (Win Store) StorePiyo (Android) DroidPiyo (iOS) TouchPiyo

https://github.com/MvvmCross/MvvmCross/wiki/MvvmCross- plugins https://speakerdeck.com/cirrious/plugins-in-mvvmcross

namespace RoomMetro.RegisterationService.Core { public interface INotification { void Notify(string message); } }

public class StoreNotification : INotification { public void Notify(string message) { //トースト通知のコード省略 } } public class Setup : MvxStoreSetup { //これ以外のメソッド省略 protected override void InitializeLastChance() { base.InitializeLastChance(); Mvx.RegisterSingleton<INotification>(new StoreNotification()); } }

MvvmCross はストアアプリ単体を作る視点においても高機能 は 今回の内容は割とまだ基本的な機能レベル

AndroidやiOS側の実装 Xamarinのコストパフォーマンス

https://github.com/MvvmCross/MvvmCross https://github.com/MvvmCross/MvvmCross/wiki https://github.com/MvvmCross/NPlus1DaysOfMvvmCross

http://ytabuchi.hatenablog.com/ 実際にMvvmCrossでアプリを開発した経験に基づく記事があります (Xamarin Studioを使ったiPhone/Androidアプリ) http://iseebi.hatenablog.com/

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

20140322 mvvm crossforwindowsstoreapps-pdf - Technology

20140322 mvvm crossforwindowsstoreapps-pdf ...
Read more

20140322-MvvmCrossforWindowsStoreApps - Docs.com

20140322-MvvmCrossforWindowsStoreApps, published by Tanaka Takayoshi on Docs.com. ... Store App における MVVM ...
Read more

MVP Com Camp 2014 で MvvmCross でストアアプリの話をしてきました - 銀の光と碧い空

20140322 mvvm crossforwindowsstoreapps-pdf from Takayoshi Tanaka. tanaka733 2014-03-22 14:57 list Tweet. Share on Tumblr ...
Read more

MvvmCross - 銀の光と碧い空 - tech.tanaka733.net

20140322 mvvm crossforwindowsstoreapps-pdf from Takayoshi Tanaka. MVP Com Camp 2014 で MvvmCross ... MVVM Light では RelayCommand というICommand ...
Read more

MVVM DesignPatterns - Documents

MVVM 은 WPF 플랫폼 에 적합하며, WPF 는 여러 패턴 중에서도 MVVM 패턴을 사용하여 ... 20140322 mvvm crossforwindowsstoreapps-pdf
Read more