20140322 mvvm crossforwindowsstoreapps-pdf
TRANSCRIPT
仕事
個人
http://tanaka733.net
http://tech.tanaka733.net
http://www.buildinsider.net/web/iis8
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