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

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

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

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

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

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

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

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

12. MVVM Light Toolkit
Pattern & Practices Prism
MvvmCross

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

15. https://xamarin.com/

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

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

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

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

22. QuickCross
ReactiveUI

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

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

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

29. NugetでMvvmCrossを検索

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

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

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

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

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

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

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

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

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

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

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

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

43. 画面遷移

44. 通常のStore App
MvvmCrossでは…

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

46. SQLite Plugin

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

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

49. Nugetから入れる

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

51. Converters

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

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

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

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

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

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

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

59. IoC

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

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

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

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

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

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

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

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

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

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

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

71. 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