You are on page 1of 45

Hokuriku.NET 5.

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用のdllを追加

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

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