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