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

BEACHSIDE BLOG

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

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

個人的にXamarin.Forms入門中ということもあり、MVVMの基礎について通称 Petzold's book の18章「MVVM」で学んでみました。
(他の章はまだ読んでない...)

ASP.NETのサーバーサイド寄りな私なので、MVVMの概念は多少知ってますがディープに踏み込んだことはなく...基礎から学んでみようという感じです。

Overview

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

Environment

検証した環境は以下で本日(2016-09-29)時点で最新の状態にしています。

1. MVVM interrelationships

Petzold's book 491ページです。MVVMの相互関係...基本的な概念が書かれていますが、ここが一番大切だと思ってます。しかし、ここでは本の要約はしません...コードを書いて筋トレという基本方針で進めます♪。

2. ViewModels and data bindings

Petzold's book 493ページです。本題のデータバインディングです。
気づきがあったところとして、

  • PropertyChanged handlerは、コンストラクターの処理が終わってからアタッチされる
  • INotifyPropertyChangedはINPCって略すんだー(#どうでもいい)。

A ViewModel clock

Petzold's book 494ページ、サンプルコードが出てきましたのでプロジェクト作ってコード書いて進めます。具体的には、時計のアプリを作って時間の表示をMVVMで実装し、動的に表示するというものです。
ちなみに、コードの中でプロパティ名とかを個人的好みで変えてます。

Visual Studio新しいプロジェクト > 左ペインでCross-Platform > Blank App(Xamarin.Forms Portable)のプロジェクトを作成します。

f:id:beachside:20160930003853p:plain

プロジェクト名は、PetzoldBook.Chap18、ソリューション名はPetzoldBookにしました。(ネーミングセンスが微妙でしょうか...)
PetzoldBook.Chap18(移植可能)のプロジェクトに、個人的な好みで2つのフォルダーを作ります。

  • Views
  • ViewModels

先に言っておくと、最終的な構成はこのようにしました。

f:id:beachside:20160930024420p:plain

ViewModelsフォルダーの直下にDateTimeViewModelクラスを作ります。ViewModelにはお決まりのINotifyPropertyChangedインターフェースを実装して、以下のようにコーディングです。

DateTimeViewModelについて、パブリックなプロパティは、DateTime型のCurrentTimeだけです(27行目)。セッターでPropertyChangedEventHandlerをFireさせます(発火させます...と訳すべき?)。
また、11行目のコンストラクターに記載しているコードは、15ミリ秒ごとに、OnTimerTick()メソッドをCallし、CurrentTimeプロパティの値をガンガン更新しています。

36行目については、理由があるんだなー..ふむふむ(Petzold's book496ページの真ん中らへん)

In a multithreaded environment, a PropertyChanged handler might be detached between the if statement that checks for a null value and the actual firing of the event. Saving the handler in a separate variable prevents that from causing a problem, so it’s a good habit to adopt even if you’re not yet working in a multithreaded environment.

次は、Viewを作ります。Viewsフォルダー直下にForms Xaml Pageを追加します。名前は、MvvmClockPage.xmalにしました。
f:id:beachside:20160930011225p:plain

コードは、

XAMLについて詳しくは言及しませんが、ContentPage.Resourcesセクションで、バインドするDateTimeViewModelと、Labelのスタイルを定義しています。さらにStackLayoutの中で、時、分、秒、ミリ秒をバインドしています。

次は、App.csの中で、コンストラクターを以下のように書き換えて、アプリ起動時にMvvmClockPageが表示されるようにします。

今回はAndroidでしかデバッグしないので、PetzoldBook.Chap18.Droidプロジェクトを右クリックして、スタートアッププロジェクトに設定し、レッツ・デバッグAndroidエミュレーターデバッグして動かしてみると、想像通りの動きになりました。

f:id:beachside:20160930023746g:plain

Petzold's bookの以降~500ページまで、Xamlで別の書き方の紹介が続きますので、ここでは省略...。

他の仕事も色々やってたせいで遅い時間になったので、次の「Interactive properties in a ViewModel」は、次回....