Hokuriku_NET55

Hokuriku.NET 5.5

WindowsPhone7で

MVVM入門&UnitTest(さわり)

Agenda

MVVM概要 Model – View – ViewModel !!

MVVM導入 WP7でMVVMをはじめる方法

UnitTest 単体テストを書こう

小ネタその他言い足りないこと色々

Agenda





MVVMの概要

Model-View-ViewModelパターンの略モデル - ビュー -ビューモデル

基本はMVCパターン MVCは知ってるよね

表示(XAML)とプログラムコードを疎結合にする依存の無いテスト可能なコードを書けるようになる

データバインド&コマンド&メッセージ疎結合にするための仕組み

View

ViewModel

Model

UnitTest

MVVMじゃないコード

これまでのやり方(XAML) あるあるRIA開発

<TextBox Name="nameText" Text="" /> <TextBlock Name=“nameLabel" Text="Name" /> <TextBox Name="ageText" Text="" /> <TextBlock Name=“ageLabel" Text="Age" /> <Button Content="Send" Name=“sendBtn" Click=" sendBtn _Click" />


これまでのやり方(C#) あるあるRIA開発

private void sendBtn_Click(object sender, RoutedEventArgs e) { var name = this.nameText.Text; var age = this.ageText.Text; MessageBox.Show(“名前=” + name + “/年齢=" + age); }


これまでのやり方(C#) あるあるRIA開発

private void sendBtn_Click(object sender, RoutedEventArgs e) { var name = this.nameText.Text; var age = this.ageText.Text; MessageBox.Show(“名前=” + name + “/年齢=" + age); }

XAMLコードと直結している！！

MVVMなコード

<Command:EventToCommand Command=“{Binding testCommand}” CommandParameter=“{Binding Text, ElementName=textBlock1}“ />

(XAML)

public void _testCommand(string name) { // anything code // テキストボックスのTextプロパティにアクセスする必要がなくなっている }

(C#コード)

MVVMなコード

・・・といかにも「MVVM便利ー!!」な風に書きましたが、

MVVMなコード

<Button Content=“Send" Name="button1>

<Interactivity:Interaction.Triggers> <Interactivity:EventTrigger EventName="Click" x:Name="btnSearchClickedEventTrigger"> <Command:EventToCommand Command="{Binding testCommand}" CommandParameter="{Binding Text, ElementName=textBlock1}"/> </Interactivity:EventTrigger> </Interactivity:Interaction.Triggers>

(XAML省略した部分を表示)

MVVMなコード

this.testCommand = new RelayCommand<string>((string name) => { this._testCommand(name), (param) => { return true; }); } } public RelayCommand<string> testCommand { get; private set; } public void _testCommand(string name) { // anything code // テキストボックスのTextプロパティにアクセスする必要がなくなっている }

(C#コード抜粋)

MVVMなコード

コード量は増えます。

私見ですが、 Viewが数画面でロジックも簡単なアプリケーションを作成するのに MVVMは必要無いと思います。

Agenda





Agenda





導入

・MVVM Light Hotfix

for Windows Phone 7 developer tools

http://geekswithblogs.net/lbugnion/Default.aspx

導入

・VisualStudio用のテンプレートもあるが WP7SDKのRTMに対応していないので今は使わない

・Binaries (WPF3.5SP1/SL3/WPF4/SL4/Windows Phone 7) をダウンロード。中身のdllを利用

MVVM Light概要

・GalaSoft.MvvmLight.WP7.dll

ViewModelBase

Helperクラスが色々定義されているよ

ViewModelの基本クラス

ViewModelはこのクラスを継承します。

MVVM Light概要


ButtonBaseExtensions


RelayCommandの基本クラス

RelayCommand<T>

RelayCommand ViewからのCommandを受け取る

ViewからのCommandを受け取る

Viewからの命令呼び出しを処理します。

MVVM Light概要


各種Messageクラス


Messageクラス色々

ViewModelからの命令を処理するためのクラス

MVVM Light概要

・GalaSoft.MvvmLight.Extra.WP7.dll

EventToCommand

Silverlight4から対応のCommandをWP7で使えるようになる

XAMLからViewModelにコマンドを送信する

ViewからViewModelに命令を送ります

View

ViewModel

Command Message

デモ

MVVMっぽく楽天Book情報を取得します

捕捉

ModelViewクラスはVS2010のデフォルトプロジェクトの中にも生成されるものがありますが、CommandやMessageが利用できるか未検証。 SLでCommandが利用できるのは4からだったと記憶。 WP7のSLは3ベース。

Agenda





Agenda





UnitTest

MVVMは単体テスト可能なコードを生成すると話しました。

View

ViewModel

Model

UnitTest

UnitTest

それではMVVMの紹介の最後に Windows Phone 7でUnitTestを行う方法を紹介します。

UnitTest

Jeff Wilcox's UnitTest(仮)

http://www.jeff.wilcox.name/2010/05/sl3-utf-bits/

本家サイトは情報不足状態だが、利用している人が多いのである程度参考にして実装できる。

UnitTest導入

http://www.jeff.wilcox.name/2010/05/sl3-utf-bits/

の下部リンクからバイナリーファイルをダウンロード

UnitTest導入

展開すると以下ファイルがあります。後程これを参照に追加して利用。

UnitTest導入

UnitTest用のプロジェクトを追加

UnitTest導入

テスト対象となるプロジェクトを参照に追加

テスト対象で利用しているdllも必要にあわせて追加

先ほどDLしたUnitTest用のｄｌｌを追加

UnitTest導入

UnitTest導入

MainPage.xaml.csを修正

public MainPage() { InitializeComponent(); Content = UnitTestSystem.CreateTestPage(); IMobileTestPage imtp = Content as IMobileTestPage; if (imtp != null) { BackKeyPress += (x, xe) => xe.Cancel = imtp.NavigateBack(); } }

UnitTest導入

デモ

UnitTest導入

その他のテストケースなどの詳細は以下を参照 http://codingsolutions.blogspot.com/2010/03/windows-phone-7-tdd-kata-using-mvvm-and.html

Agenda





Agenda





Windows Phone ってもはやWindow(窓)じゃないよね・・・

でも、それ魅力シンプルでスタイリッシュ！！

Windows Phone 7はマルチタスクじゃない

なので今回のデモのように一度ブラウザを開いて戻ってくる場合はデータを退避させる必要がある IsolatedStorageSettings

タイルページなどではプッシュ配信で新着情報などを受信できる

Documents

Hokuriku_NET55