20140322 mvvm crossforwindowsstoreapps-pdf

仕事

個人

http://tanaka733.net

http://tech.tanaka733.net

http://www.buildinsider.net/web/iis8

http://metrostyledev.net/

テーマ

次回

XAML はBindingファーストな言語

XAMLといえば MVVM patternGUIアーキテクチャパターンの基礎から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がおすすめ

https://connect.microsoft.com/SQLServer/feedback/details/776328/port-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);} //以下略

たとえば、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>{}

}

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

まずは豊富な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

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はストアアプリ単体を作る視点においても高機能

は

今回の内容は割とまだ基本的な機能レベル

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%E3%83%A3