Hokuriku.NET 5.

WindowsPhone7で
MVVM入門&UnitTest(さわり)
Agenda
MVVM概要
Model – View – ViewModel !!

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

UnitTest
単体テストを書こう

小ネタ
その他言い足りないこと色々
Agenda
MVVM概要
Model – View – ViewModel !!

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

UnitTest
単体テストを書こう

小ネタ
その他言い足りないこと色々
MVVMの概要
Model-View-ViewModelパターンの略
モデル - ビュー -ビューモデル

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

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

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

ViewModel

Model
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" />

MVVMじゃないコード
これまでのやり方(C#)
あるあるRIA開発

private void sendBtn_Click(object sender, RoutedEventArgs e)

{
var name = this.nameText.Text;
var age = this.ageText.Text;

MessageBox.Show(“名前=” + name + “/年齢=" + age);

}
MVVMじゃないコード
これまでのやり方(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なコード

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

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

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

(XAML省略した部分を表示)
<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>
MVVMなコード
(C#コード抜粋)
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プロパティにアクセスする必要がなくなっている
}
MVVMなコード

コード量は増えます。

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

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

UnitTest
単体テストを書こう

小ネタ
その他言い足りないこと色々
Agenda
MVVM概要
Model – View – ViewModel !!

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

UnitTest
単体テストを書こう

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

・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
Helperクラスが色々定義されているよ

ViewModelBase
ViewModelの基本クラス

ViewModelはこのクラスを継承します。
MVVM Light概要
・GalaSoft.MvvmLight.WP7.dll
Helperクラスが色々定義されているよ

ButtonBaseExtensions
RelayCommandの基本クラス

RelayCommand
ViewからのCommandを受け取る

RelayCommand<T>
ViewからのCommandを受け取る

Viewからの命令呼び出しを処理します。
MVVM Light概要
・GalaSoft.MvvmLight.WP7.dll
Helperクラスが色々定義されているよ

各種Messageクラス
Messageクラス色々

ViewModelからの命令を処理するための
クラス
MVVM Light概要
・GalaSoft.MvvmLight.Extra.WP7.dll
Silverlight4から対応のCommandをWP7で使えるようになる

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

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

Command Message

ViewModel
デモ

MVVMっぽく楽天Book情報を取得します
捕捉
ModelViewクラスはVS2010のデフォルト
プロジェクトの中にも生成されるものがあ
りますが、CommandやMessageが利用で
きるか未検証。

SLでCommandが利用できるのは4からだっ
たと記憶。

WP7のSLは3ベース。
Agenda
MVVM概要
Model – View – ViewModel !!

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

UnitTest
単体テストを書こう

小ネタ
その他言い足りないこと色々
Agenda
MVVM概要
Model – View – ViewModel !!

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

UnitTest
単体テストを書こう

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

MVVMは

単体テスト可能なコードを生成する

と話しました。
UnitTest View

ViewModel

Model
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/wind
ows-phone-7-tdd-kata-using-mvvm-and.html
Agenda
MVVM概要
Model – View – ViewModel !!

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

UnitTest
単体テストを書こう

小ネタ
その他言い足りないこと色々
Agenda
MVVM概要
Model – View – ViewModel !!

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

UnitTest
単体テストを書こう

小ネタ
その他言い足りないこと色々
Windows Phone って
もはやWindow(窓)じゃな
いよね・・・
でも、それ魅力
シンプルでスタイリッシュ！！
Windows Phone 7は
マルチタスクじゃない
なので今回のデモのように
一度ブラウザを開いて戻ってく
る場合はデータを退避させる必
要がある

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