Xamarin.Forms での MVVM の基礎について、通称 Petzold's book の18章「MVVM」をざっくり試しています。
前回の続きです。
Overview
Petzold's bookの内容に沿ってにざっくり進めます。
- 1. MVVM interrelationships（chapter.18 その1）
- MVVMの概要説明
- 時計の表示をMVVMで行うサンプル
- スライダーの値を掛け算するサンプル
- 色の変化を楽しむ？サンプル
- 「ViewModelの簡素化」についてまとめました（...本文を要約）
- ICommandインターフェースの概要
- 3の累乗計算アプリのサンプル
- 簡易足し算アプリのサンプル
Environment
検証した環境は以下で前回同様2016-09-29時点で最新の状態にしています。
- Visual Studio 2015 (Enterprise update3)
- Xamarin.Forms
簡易足し算アプリのサンプル
前回の「3の累乗計算アプリ」よりもちょっと実践的な内容になりそうです。具体的には、ICommandが持っているExecuteメソッドとCanExecuteを使ったViewModelの実装です。完成イメージはこちら。
足し算しかできない計算機のサンプルで、以下のざっくりですが機能を満たしたコードサンプルです。
- ページ上部ボタンの入力履歴が表示
- 足し算の合計は、キーパッドの上部に表示
- KeyPad（0～9のボタン）について
- 数字を入力できる最大桁数は5桁
- クリックで数字が入力
+ボタンについて- 数字が入力された状態で有効化
- 連続してクリックはできない
⇐ボタン（バックスペース）について- 数字が入力されている状態でのみ有効化
- 入力中の数字の1桁削除
Cボタンをクリックで、全てクリアCEボタンをクリックで、入力中のものをクリア
それでは、VeiwModelから進めます。
（コンストラクターながっ！と思いつつ...）ささっと解説します。
まず、publicなpropertyですが２つ。
CurrentEntory(19行目）
足し算の合計を表します。またKeypadの数字をクリックすると、その数字が表示され、+ボタンをクリックするとまた合計が表示されます。よくある計算機の動きですね。HistoryString（25行目）
入力した足し算の履歴を表します。
ボタンとバインドするCommandは、122行目から6つ定義しています。コンストラクター（33行目）で、ICommandインターフェースが持つvoidのExecuteと、（今回の主役的存在の）bool型のCanExecuteをラムダ関数で定義しています。
CanExecuteメソッドが定義されていない場合、常にButtonは有効です。今回だとCボタンにバインドされているClearCommandと、CEボタンにバインドされているClearEntryCommandが常にクリックできる状態となります。
その他のCommandはCanExecuteメソッドが定義されているため、メソッドの戻り値がfalseの場合、ボタンは無効、trueであれば有効となります。
それぞれのラムダ関数の中でボタンをクリックする度にRefreshCanExecutes()メソッド（107行目）を呼び出しています。メソッドの中身は、4つのCommandのExecuteCanExecuteChangedいベンドを発火させ、CanExecuteを更新することで、ボタンの有効/無効を更新しています。
ViewModelの説明はこれくらいにして、Viewの実装に移ります。AddingMachinePage.xamlという名前でForms Xaml Pageを追加します。コードは以下の通り。
各ボタンで、Commandとバインドさせています。
今回、ViewでViewModelのバインドを定義していません。Viewのコードビハインド側で定義しています（12行目）。
最後にApp.csを以下のように変更します。
これで今回のコーディングは完成です。最初に載せたイメージ通りに動きます。
コメントアウトされているRestoreState（22行目）とSaveState（30行目）に関しては次回実装出てきます。
次回、18章のFINALでは、ViewModelのライフサイクルということで、アプリがスリープしたときに画面の情報を保存 → 再度起動したときに以前のデータを表示できるような話です。
