prism for windows runtime入門

Prism for Windows Runtime入門してみた

2013/7/6 めとべや東京 (15:25-16:05)@okazuki大田　一希

自己紹介

大田一希– Microsoft MVP for ClientAppDev 2011/07-2014/06– 富士通アドバンストエンジニアリング

　お仕事は「 Java EE6 」、 Windows 8

– Twitter: @okazuki– ブログ：かずきの Blog@hatenahttp://d.hatena.ne.jp/okazuki

本書いてます– Windows 8 ストア アプリ開発入門– Windows ストア アプリ開発のレシピ 110

犬紹介

Twitter や Blog アイコンの犬はデール– 15 歳で死亡– 雑種

Twitter や Facebook でよく言ってる犬はアンセム– 9 歳（現役）– ミニチュアダックス– 昨日持病の腰痛でダウン

お約束

掲載内容は私自身の見解であり、所属する組織を代表するものではありません

今日のセッションの目標

新しい Windows ストア アプリを作るときに普通のテンプレートではなく Prism for Windows Runtime を使おうかなと思ってもらう

Prism for Windows Runtimeとは

以降 Prism for WinRT

Prism

patterns & practices チームの作ってる XAML 系 platform の開発を行うためのライブラリ– Prism 4.1

WPF 4.0, Silverlight 5 and Windows Phone 7.1– 複合型アプリケーションの作成を目的– 画面に Region と呼ばれる領域を定義して、そこに色んなところから画面を流し込む– モジュール間の連携 , DI コンテナとの連携 , etc…– 途中から MVVM パターンをサポート– よくも悪くも複雑化…

– Prism for WinRT Windows ストア アプリのための Prism– シンプルに MVVM ＋現在の Windows Runtime に足りない部分を補う

Prism for WinRT

MVVM パターンのサポート– ページ (View) と ViewModel のマッピング機能– ViewModel でのページのライフサイクルへ対応– ICommand インターフェースの実装 DelegateCommand を提供

非同期なメソッドからの DelegateCommandの作成とかしてくれる

Windows Runtime 固有の機能のサポート– ページ遷移履歴の保存– サスペンド時の状態保存– フライアウト

一般的なアプリに必要な機能のサポート– 入力値の検証– 疎結合な連携のためのイベントの発行と購読（ EventAggregator)

MVVM サポート

VisualStateAwarePageクラス（ View)– Prism for WinRTの画面用基本クラス（ LayoutAwarePageのようなもの）

ViewModelクラス（ ViewModel)– ページ遷移のコールバックメソッド– NavigationServiceを使うことで ViewModelで画面遷移の処理が可能に– サスペンド時に状態の一時保存と停止状態からの状態復元

BindableBase（ Model）– INotifyPropertyChangedの実装

ValidatableBindableBase （ Model）– プロパティの値の検証機能の実装

ViewModelLocatorクラス（ Viewと ViewModelの接続）– Viewのクラス名から自動的に ViewModelを生成して DataContextに設定

WinRT 固有の機能のサポート

VisualStateAwarePage + NavigationService– 画面遷移履歴– ページ（と ViewModel ）の状態保存・復元

フライアウト– 何故標準にないのか不思議なフライアウトのサポート

設定チャームのコマンドのサポート

検索チャームのサポート

Prism for WinRT の起動処理

MvvmAppBase クラス– INavigationService の初期化

画面遷移– ISessionStateService の初期化

セッションデータの保存– IFlyoutService の初期化

何故か標準でサポートされてないフライアウト

– 利用者は OnLaunchApplication メソッドをオーバーライドしてお膳立てされた状態で開発がスタートできる

Prism for WinRT とは まとめ

MVVM + Windows ストア アプリ固有機能 + α = Prism for WinRT

MVVM– ViewModel, DelegateCommand, ViewModelLocator

ストアアプリ固有機能– 画面遷移– サスペンド時の処理への対応– 何故か標準でサポートされてないフライアウト

α– 入力値の検証– ゆるふわな相互通信（ EventAggregator 今回は時間の都合で…）

Prism for WinRT を使ってみよう

ちょっとめんどくさい…

App クラスの親クラスを MvvmAppBase に変更

Page クラスの親クラスを VisualStateAwarePage に変更

etc...

– 参考： Prism for WinRT入門 Hello world

テンプレート

Prism for Windows Runtime Templateshttp://visualstudiogallery.msdn.microsoft.com/e86649de-2b5e-45bb-bc65-5c6499b92b34– 拡張機能と更新プログラムから Prism で検索でも OK

プロジェクトテンプレート

プロジェクトテンプレート– PrismApp

シンプルな Prism を使ったアプリを作るためのひな形– PrismApp using UnityModel や ViewModel のインスタンスの管理を Unity(ゲームじゃないほう ) で行うためのひな形

アイテムテンプレート (1/2)

アイテムテンプレート– Flyout View (Prism), Flyout View Model (Prism)

フライアウト用の View と ViewModel のテンプレート– Model (Prism)

値の検証を行う機能を持ったクラス– Page View (Prism), View Model (Prism)

ViewModel と接続されたページと ViewModel のテンプレート

アイテムテンプレート (2/2)

アイテムテンプレート– PubSubEvent (Prism)

EventAggregator で発行 / 購読できるイベントを作る– Search Contract (Prism)

検索結果のページ＋ MvvmAppBase の OnSearchApplication をオーバーライド

– UserControl View (Prism) 普通のユーザーコントロール。存在意義がわからない。

新規作成したアプリの基本構造

超シンプルApp.xaml

MvvmAppBase継承エントリポイント : OnLaunchApplication

MainPage.xamlVisualStateAwarePage継承

MainPageViewModel.csViewModel継承

NavigationService で遷移

ViewModelLocator で接続

画面遷移

MvvmAppBase クラスの NavigationService プロパティを使う– MvvmAppBase の OnLaunchApplication メソッドがエントリポイン

ト

– 文字列“ Main” → Views 名前空間の” Main”Page クラスがページ

View と ViewModel の接続

ViewModelLocator.IsAutoWiredViewModel=“True” が肝

– MainPage クラス → ViewModels 名前空間の“ MainPage”ViewModelが DataContext に設定される

規約のカスタマイズも可能

画面名のクラス名の規約– MvvmAppBase クラスの Type GetPageType(string pageToken) を

オーバーライド

ViewModel のクラス名の規約– ViewModelLocator の SetDefaultViewTypeToViewModelResolver(Func<Type, Type> viewTypeToViewModelTypeResolver) で設定

規約ではなく個別設定も可能– デフォルトのコンストラクタ以外で ViewModel をインスタンス化したい場合はこれがお手軽

– ViewModelLocator.Register( typeof(MainPage).ToString(), () => new MainViewModel(NavigationService));

あとは育てていく

Views 名前空間にページを増やす

ViewModels 名前空間に対応する ViewModel を増やす

Models 名前空間にアプリケーションの肝を作りこむ

まとめ

テンプレートを使おう

MvvmAppBase の OnLaunchApplication がエントリポイント

MvvmAppBase の NavigationService で画面遷移

規約を覚えよう– Main -> Views.MainPage– MainPage -> ViewModels.MainPageViewModel– カスタマイズもできることを覚えておこう

あとは育てる！

How to ...

色々やりたいこと別に

画面遷移したいんです

MvvmAppBase クラスの NavigationService プロパティを使おう– ViewModel のインスタンス化の時に渡すのが綺麗

– ViewModel から遷移処理を書く

HubPage へ遷移

画面遷移時の処理がしたいんです

ViewModel の OnNavigateFrom/To をオーバーライド

サスペンド時の対応がしたいです その１

ViewModel のプロパティに RestoreableStateAttributeをつけましょう

サスペンド時の対応がしたいです その２

ページの状態の保持は SaveState メソッド、復元にはLoadState メソッドを使いましょう

ViewModel は、その１の属性による方法か NavigateTo, NavigateFrom で行いましょう。

– 参考： Prism for WinRTでGridViewのスクロール位置を記録する

入力値の検証がしたいです

ValidatableBindableBase を継承した Model を作りましょう– プロパティに System.ComponentModel.DataAnnotations をつけ

る

– 参考： Prism for WinRTのValidatableBindableBase

フライアウトを出したいです

FlyoutView を作りましょう必要に応じて FlyoutViewModel を作って接続しましょう– 閉じる処理や、設定チャームに戻る処理などは ViewModel に用意され

ます– フライアウトの表示は MvvmAppBase クラスの FlyoutService クラス

の ShowFlyout(string flyoutId) で行います

– 参考： Prism for WinRTでフライアウトを出したい

ViewModel の生成を楽したいです (1/2)

一定数の規模を超えてくると View と ViewModel の紐づけが大変– ViewModelLocator.Register(View 名 , () => ViewModel 生成

処理 );– デフォルトコンストラクタでよければ、↑はいらないけどそんな単純に物事はすすまない

UnityContainer などの DI コンテナに処理を任せましょう– Prism app using Unity をもとにアプリを作る

ViewModel の生成を楽したいです (2/2)

App クラスの中身が以下のようになる

View/ViewModel が増えても App クラスが

肥大化しない。

まとめ

Prism for Windows Runtime

MVVM + WinRT + α– ViewModel, VisualStateAwarePage, DelegateCommand, Flyout, etc...

プロジェクトテンプレート / アイテムテンプレートを使おう– Prism for Windows Runtime Templateshttp://visualstudiogallery.msdn.microsoft.com/e86649de-2b5e-45bb-bc65-5c6499b92b34

標準のテンプレートよりはいけてる– Enterprise向けだけじゃなく、一般向けでも使いやすい。

今回はなしてない機能もあります

EventAggregator– 祖結合なイベントでのやり取り

SearchPane– 検索コントラクトの表示とか

設定コントラクト– 設定コントラクトにコマンドを簡単に置けます

認証情報の保存– 安全な場所へのパスワードなどのばれたらいけない情報を保存できます

おまけ

Windows 8.1 Preview では…– 検索コントラクトの動きちげー– 画面のスナップ・フィル・ポートレイト・ランドスケープがなくなった

（幅と高さとかから自分で最適な見た目を制御するっぽい）– そもそもプロジェクトテンプレートの中身がちげー– API めっちゃ増えとる

キャッチアップして Blog りたいのでよろしくお願いします

参考情報

patterns & practices: Prism for the Windows Runtime– http://prismwindowsruntime.codeplex.com/

Developing a Windows Store business app using C#, XAML, and Prism for the Windows Runtime– http://msdn.microsoft.com/en-us/library/windows/apps/xx130643.aspx