楽しいアプリ制作の会#13 はじめてのMVVM

+4

No comments posted yet

Comments

Slide 1

はじめてのMVVM 楽しいアプリ制作の会 代表 大場知悟(@tworks) 楽しいアプリ制作の会 #13 スマートフォンアプリ 開発のツボ

Slide 2

自己紹介 大場知悟(Tomonori Ohba) PFUアプリケーションズ(株)所属 SE職 WPF/Silverlight/iOS/Androidなど Twitter @tworks コミュニティー活動 楽しいアプリ制作の会 代表 Windows Phone Arch 神戸地区スタッフ たのアプ #13 1

Slide 3

著書 たのアプ #13 2

Slide 4

アジェンダ MVVMの生い立ち MVVMを支えるもの データバインディング コマンドバインディング Behavior MVVM実装 MVVM Light Toolkit (on Windows Phone) FAQ・まとめ たのアプ #13 3

Slide 5

MVVM生い立ち MVVMとは? MVCと同じアプリケーション設計パターン MSのWPF/Silverlightを構成する技術「XAML」に最適化された階層化パターン たのアプ #13 4

Slide 6

コードビハインド View (XAML) よくある たのアプ #13 5 View操作・アニメーション ビジネスロジック ビジネスロジック View操作

Slide 7

コードビハインドとViewが強結合 コードビハインドにビジネスロジックとView操作が混在、View変更でビジネスロジックも影響 変更に弱い マズいスパゲッティ たのアプ #13 6

Slide 8

そこで階層化 たのアプ #13 7 View (XAML) ・コントロール(UI) ・アニメーション ViewModel ViewとModelの中継ぎ。 基本はViewのレンダリング用。 Model アプリケーションのビジネスロジック。 ViewModel以外のものがすべてここに。 コマンド バインディング データ バインディング メソッド 呼び出し

Slide 9

各階層の責務 たのアプ #13 8 View UI/アニメーション(Storyboard) ViewModel Viewのレンダリング用データ Viewの状態 Model ビジネスロジック ViewModel以外の処理

Slide 10

階層間の連携 たのアプ #13 9 ViewーViewModel データバインディング コマンドバインディング ViewModelーModel メソッド呼び出し メソッド復帰値取得 VMのプロパティ変更

Slide 11

MVVM階層化=素結合 たのアプ #13 10 コマンド バインディング データ バインディング メソッド 呼び出し Unit Test Unit Test

Slide 12

MVVMを支えるもの(1) データバインディング ViewーViewModel間のデータ連携を疎結合に View.プロパティとVM.プロパティの受渡し 受渡しの方向は、双方向/片方向 たのアプ #13 11

Slide 13

MVVMを支えるもの(2) コマンドバインディング イベントハンドラの置換え ViewのイベントをViewModelに通知する 方向はView→ViewModelへ片方向 Behavior たのアプ #13 12

Slide 14

MVVM Light Toolkit WPF/Silverlight/Windows PhoneでMVVMアプリを開発するためのフレームワーク http://mvvmlight.codeplex.com/ MITライセンス たのアプ #13 13

Slide 15

ViewModel View (XAML) MVVM Light Toolkit実装 たのアプ #13 14 MainPage.xaml Application.Resources ViewModelLocator MainViewModel データ バインディング コマンド バインディング アプリケーション

Slide 16

ViewModel View (XAML) MVVM Light Toolkit実装 たのアプ #13 15 MainPage.xaml Application.Resources ViewModelLocator MainViewModel データ バインディング コマンド バインディング SecondViewModel SecondPage.xaml データ バインディング アプリケーション Viewを加えるときは ViewModelも加えよう

Slide 17

MVVM Light Toolkit コマンドバインディング RelayCommand Behavior EventTrigger EventToCommand NavigateToPageAction たのアプ #13 16

Slide 18

MVVM Light Toolkit Demo たのアプ #13 17

Slide 19

FAQ ViewとViewModelの関係は1:1? 原則それが好ましいです。ViewModelはViewの射影の位置づけです。 ViewModelとModelの責任分界点は? ViewレンダリングのためのデータやロジックをViewModelに置き、それ以外はModelが良いと思います。 画面遷移のロジックはどこに置くべき? ViewModelかModelになります。画面分岐のための状態管理をどの層でやっているか次第です。 たのアプ #13 18

Slide 20

まとめ MVVMパターンの概要、構成要素、Light Toolkitでの実装パターンについて説明しました イベントハンドラはコマンドバインドやBehaviorで簡単に置き換え可能です TextBox#Textのデータバインドは癖がありますので注意しましょう たのアプ #13 19

Slide 21

ご清聴ありがとうございました

Tags: mvvm light toolkit

URL: