View
1.276
Download
0
Category
Preview:
Citation preview
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)とプログラムコードを疎結合にする 依存の無いテスト可能なコードを書けるようになる
データバインド&コマンド&メッセージ 疎結合にするための仕組み
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" />
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なコード
<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
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
ViewModelBase
Helperクラスが色々定義されているよ
ViewModelの基本クラス
ViewModelはこのクラスを継承します。
MVVM Light概要
・GalaSoft.MvvmLight.WP7.dll
ButtonBaseExtensions
Helperクラスが色々定義されているよ
RelayCommandの基本クラス
RelayCommand<T>
RelayCommand ViewからのCommandを受け取る
ViewからのCommandを受け取る
Viewからの命令呼び出しを処理します。
MVVM Light概要
・GalaSoft.MvvmLight.WP7.dll
各種Messageクラス
Helperクラスが色々定義されているよ
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
MVVM概要 Model – View – ViewModel !!
MVVM導入 WP7でMVVMをはじめる方法
UnitTest 単体テストを書こう
小ネタ その他言い足りないこと色々
Agenda
MVVM概要 Model – View – ViewModel !!
MVVM導入 WP7でMVVMをはじめる方法
UnitTest 単体テストを書こう
小ネタ その他言い足りないこと色々
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
MVVM概要 Model – View – ViewModel !!
MVVM導入 WP7でMVVMをはじめる方法
UnitTest 単体テストを書こう
小ネタ その他言い足りないこと色々
Agenda
MVVM概要 Model – View – ViewModel !!
MVVM導入 WP7でMVVMをはじめる方法
UnitTest 単体テストを書こう
小ネタ その他言い足りないこと色々
Windows Phone って もはやWindow(窓)じゃないよね・・・
でも、それ魅力 シンプルでスタイリッシュ！！
Windows Phone 7は マルチタスクじゃない
なので今回のデモのように 一度ブラウザを開いて戻ってくる場合はデータを退避させる必要がある IsolatedStorageSettings
タイルページなどではプッシュ配信で新着情報などを受信できる
Recommended