読者です 読者をやめる 読者になる 読者になる

BEACHSIDE BLOG

MicrosoftとかC#を好むレンジャーの個人的メモ

Xamarin.Forms の MVVM 基礎 ( Petzold's book - chapter.18 その5)

Xamarin.Forms での MVVM の基礎について、通称 Petzold's book の18章「MVVM」をざっくり試しています。
前回の続きです。

Overview

Petzold's bookの内容に沿ってにざっくり進めます。

  • 1. MVVM interrelationships(chapter.18 その1
    • MVVMの概要説明
  • 2. ViewModels and data binding(chapter.18 その1
    • 時計の表示をMVVMで行うサンプル
  • Interactive properties in a ViewModel(chapter.18 その2
    • スライダーの値を掛け算するサンプル
  • A Color ViewModel(chapter.18 その2
    • 色の変化を楽しむ?サンプル
  • Streamlining the ViewModel(chapter.18 その3
    • 「ViewModelの簡素化」についてまとめました(...本文を要約)
  • The Command interface 1 (chaptr.18 その4
    • ICommandインターフェースの概要
    • 3の累乗計算アプリのサンプル
  • The Command interface 2 (今回)
    • 簡易足し算アプリのサンプル
  • ViewModels and the application lifecycle(chapter.18 FINAL

Environment

検証した環境は以下で前回同様2016-09-29時点で最新の状態にしています。

簡易足し算アプリのサンプル

前回の「3の累乗計算アプリ」よりもちょっと実践的な内容になりそうです。具体的には、ICommandが持っているExecuteメソッドとCanExecuteを使ったViewModelの実装です。完成イメージはこちら。

f:id:beachside:20161020085554g:plain

足し算しかできない計算機のサンプルで、以下のざっくりですが機能を満たしたコードサンプルです。

  • ページ上部ボタンの入力履歴が表示
  • 足し算の合計は、キーパッドの上部に表示
  • KeyPad(0~9のボタン)について
    • 数字を入力できる最大桁数は5桁
    • クリックで数字が入力
  • +ボタンについて
    • 数字が入力された状態で有効化
    • 連続してクリックはできない
  • ボタン(バックスペース)について
    • 数字が入力されている状態でのみ有効化
    • 入力中の数字の1桁削除
  • Cボタンをクリックで、全てクリア
  • CEボタンをクリックで、入力中のものをクリア

それでは、VeiwModelから進めます。

コンストラクターながっ!と思いつつ...)ささっと解説します。

まず、publicなpropertyですが2つ。

  • 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のライフサイクルということで、アプリがスリープしたときに画面の情報を保存 → 再度起動したときに以前のデータを表示できるような話です。