XAML /C# を使ったWindows ストアアプリ（LOB）構築 TIPS - Prism 4.5 & Kona Project 等のご紹介 -

鈴木章太郎テクニカルエバンジェリスト兼 MTC アーキテクト日本マイクロソフト株式会社

http://blogs.msdn.com/b/shosuz/

テクニカルエバンジェリストhttp://blogs.msdn.com/b/shosuz

MTC アーキテクトhttp://www.microsoft.com/ja-jp/business/mtc/ads.aspx

呟きネタは主に、Windows Azure, Windows、Windows Phone, RIA, HTML5, MVVM, iOS/Android x Windows Azure連携, Guitar … 等

ASPIC 執行役員 (‘05 ~)

Wipse モバイル x クラウド部会長（’11 ~)

2005-2012 早稲田大学大学院非常勤講師、2008-2010 中央大学非常勤講師

Microsoft 軽音楽部広報担当 (Gt./Key./DAW)

(2012 ～)

https://www.facebook.com/shosuz

アジェンダ

Windowsストア LOB アプリ

LOB アプリケーションにも本格導入検討中の企業が多い

課題としては

既存のアプリケーションとの共存の方法

開発リソースの確保、技術研修等

既存アプリケーションの互換性確認の問題

Windows RT かWindows 8 Pro/Enterprise か

配布の方法（Windowsストア、SCCM、Active Directory、Intune、他）

データソースとしての選択肢 ストアアプリケーションは基本的にデータベース直接接続不可

LOB アプリケーションはヘテロな環境に追加される

新規に構築する and/or 既存のリレーショナルデータベース

新規に公開する and/or 既存のWeb サービス

新規に構築する and/or 既存のコンテンツサーバー

マスターデータが置かれているサーバー, etc.

ASP.NET MVC4 Web API かWCF Data Services か

データベース（特に SQL Server ）は Data Services

サービスの公開だとWeb API が有用だが、LINQ で制限あり

Data Servicesは RDBMS、Web APIはそれ以外のもの

組み合わせて使う（Windows Azureの場合はMobile Services もあり）

百貨店の店舗用商品カタログのフロー例

SharePoint Site

http://sharepoint/url

se

ar

ch

Browse PageSite Actions username

Parent > Parent > Current PagePage Title

This Site: site search

Libraries

Site Pages

Shared

Documents

Drop Off

Library

Custom

library

Current PagePage One Page Two

7:37 AM マスター情報を取得

商品情報を検索

マスター情報を検索

画像 URL

を検索

画像 URL

を取得

画像 URLを含む商品情報を取得

画像情報をリクエスト

画像情報を返す

XML-RPC

REST

REST

Entity Framework + Code First クラスを作成してデータベースを作成

System.ComponentModel.DataAnnotations

スキーマ修正、マイグレーション可能

テストデータを入れられる

新規サービス立ち上げやマッシュアップサービスの構築ニーズに合致

ASP.NET MVC4 Web API でもWCF Data Services でも利用可能

ただし前者の場合は、使いやすいようにクラス設計をすべき

Web API によるサービスの公開

簡単に自動生成可能 コントローラ名決定

スキャフォールディング

オプションから選択 テンプレート

モデルクラス

データコンテキストクラス

クラスを適宜修正・追加 メソッドの追加、等

•

•

•

Kona プロジェクトとは？

Kona Projectとは？

CodePlexに公開されたMVVM

フレームワーク

Prism 4.5の一部を利用

C# / XAMLに特化

Windows ストア LOB アプリ開発のために最適化 設定・検索チャーム

各フレームへの遷移

バリデーション

その他順次追加予定

http://konaguidance.codeplex.com

•

•

•

•

•

•

その前に Prism –元々は…

WPF, Silverlight, Windows Phone開発用

Prism はWindows ストアアプリ向きか？• Modularity

• UI Composition

• Region Navigation

• Decoupled

Communication

• Commands

• MVVM Support

1. Windows Phone 開発の経験を十分に活用する

Windows Phone アプリ Windows ストアアプリ

Deactivate/Tombstoned/Reactiv

ate

Suspend/Terminate/Resume

Microsoft Push Notification

Service (MPN)

Windows Push Notification

Service (WNS)

Windows Phone Marketplace

certification

Windows Store app certification

& Application Excellence Review

(AER)

App manifest declares

capabilities

App manifest declares

capabilities

2. AttachedBehavior にフォーカスする

• AttachedBehavior の経験を活かし、それにフォーカス 後からコントロールに動作を追加できる

• Blend のBehavior<T>

→ 使わない

• Expressionsのバインディング

→ 使わない

3. Push通知には要Windows ストア開発者登録

• Windows ストアに、開発したアプリを申請し、正しいクレデンシャルを取得する

(SID 及びシークレットキー)

• 完全にサイドローディングで配布する前提で設計・開発を行ったアプリからは、WNS

(Windows Notification Service)を使ったプッシュ配信はできない→ 通知ハブ？

async Task<int> AccessTheWebAsync()

{

HttpClient client = new HttpClient();

Task<string> getStringTask = client.GetStringAsync("http://msdn.microsoft.com");

DoIndependentWork();

string urlContents = await getStringTask;

return urlContents.Length;

}

4. .NET 4.5 の asyncと await を活用する

ページ遷移とナビゲーション

Navigation support

protected virtual void GoHome(object sender, RoutedEventArgs e)

protected virtual void GoBack(object sender, RoutedEventArgs e)

protected virtual void GoForward(object sender, RoutedEventArgs e)

Visual state switching

public void StartLayoutUpdates(object sender, RoutedEventArgs e)

public void StopLayoutUpdates(object sender, RoutedEventArgs e)

Process lifetime management

protected override void OnNavigatedTo(NavigationEventArgs e)

protected override void OnNavigatedFrom(NavigationEventArgs e)

protected virtual void LoadState(Object navigationParameter,

Dictionary<String, Object> pageState)

protected virtual void SaveState(Dictionary<String, Object> pageState)

5. LayoutAwarePageクラスの使用ページ遷移、状態管理、および Visual State の管理のため

XAML:

<Button Click="GoBack"

IsEnabled="{Binding Frame.CanGoBack,

ElementName=pageRoot}

"Style="{StaticResource BackButtonStyle}“

/>

<UserControl

Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates“

>

Navigation と Visual State のサポート

protected override void SaveState(System.Collections.Generic.Dictionary<string, object> pageState){

var virtualizingStackPanel = VisualTreeUtilities.GetVisualChild<VirtualizingStackPanel>(itemGridView);

if (virtualizingStackPanel != null && pageState != null){

pageState["virtualizingStackPanelHorizontalOffset"] = virtualizingStackPanel.HorizontalOffset;}

}

protected override void LoadState(object navigationParameter, System.Collections.Generic.Dictionary<string, object> pageState)

{if (pageState != null && pageState.ContainsKey("virtualizingStackPanelHorizontalOffset")){

double.TryParse(pageState["virtualizingStackPanelHorizontalOffset"].ToString(),out virtualizingStackPanelHorizontalOffset);

}}

LoadStateと SaveState : SuspensionManager

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="ApplicationViewStates">

<VisualState x:Name="FullScreenLandscape"/>

<VisualState x:Name="Filled"/>

<VisualState x:Name="FullScreenPortrait">

<Storyboard> ... </Storyboard>

</VisualState>

<VisualState x:Name="Snapped">

<Storyboard> ... </Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

6. Visual State のサポートによるlandscape, portrait, fill, and snap

グローバル対応

7.グローバル対応 -

ロケールごとに分離されたリソース

<ToolTip x:Uid=“PreviewCartoonizeAppBarButtonToolTip”Content=“Preview Cartoonization”… />

Model-View-ViewModel Pattern

View First:this.Frame.Navigate(typeof(ItemDetailPage), itemId);

ViewModel First:

Var itemDetailPageViewModel = new ItemDetailPageViewModel(…){ ItemId = itemId };

navigationService.Navigate(itemDetailPageViewModel);

8. ページ遷移:

View First かViewModel Firstか

public abstract class BindableBase : INotifyPropertyChanged{

public event PropertyChangedEventHandler PropertyChanged;

protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null){

if (object.Equals(storage, value)) return false;storage = value;this.OnPropertyChanged(propertyName);return true;

}

protected void OnPropertyChanged([CallerMemberName] string propertyName = null){

var eventHandler = this.PropertyChanged;if (eventHandler != null){

eventHandler(this, new PropertyChangedEventArgs(propertyName));}

}}

9. BindableBaseクラスの利用によるINotifyPropertyChangedの提供

10. Kona ViewModelLocatorの利用• Convention ベースのルックアップ

• MyNamespace.MyPage -> MyNamespace.MyPageViewModel

• ルールに基づく例外により Conventionのオーバーライドが可能

• ViewModelをインスタンス化するのにコンテナを活用可能

WPF/Silverlight における典型的なバリデーション

• Implement INotifyDataErrorInfo

• UI コントロールでエラーのディクショナリにバインド

• NotifyOnValidationError=True

<TextBox Text="{Binding Id, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True}"/>

View:

<TextBoxText="{Binding Address.FirstName, Mode=TwoWay}" behaviors:HighlightFormFieldOnErrors.PropertyErrors=

"{Binding Errors[FirstName]}" />

-----------------------------------------------------------------------------

ViewModel:

_bindableValidator = new BindableValidator(_address);

public BindableValidator Errors{

get { return _bindableValidator; }}

11. Kona BindableValidatorの利用

Decoupled Eventing• “ハリウッド式ペアレンタルスタイルの UI コンポジション”

(ユーザーコントロール)

• 子コントロールは、長時間持続するサービスにより発生したイベントをリッスンする必要があるも、自らそれを、取り外すことはできない

• Prism の EventAggregator部分をポーティング

12. 必要に応じて EventAggregator使用public SubscriberViewModel(IEventAggregator eventAggregator){

eventAggregator.GetEvent<ShoppingCartUpdatedEvent>()

.Subscribe(s => UpdateItemCountAsync());}

public PublisherViewModel(IEventAggregator eventAggregator){

_eventAggregator = eventAggregator;}

_eventAggregator.GetEvent<ShoppingCartUpdatedEvent>()

.Publish(string.Empty);

Commanding と ViewModel Method Invocation

ICommand:

void Execute(object)

bool CanExecute(object)

event EventHandler CanExecuteChanged

Command Invoker:

ButtonBase

-----------------------------------------------------

Event -> Action

13. コントロールにICommandをサポートする DelegateCommandを使用

View:

<Button Content=“Go to shopping cart”Command="{Binding ShoppingCartNavigationCommand}" />

---------------------------------------------------------------------

ViewModel:

ShoppingCartNavigationCommand = new DelegateCommand(NavigateToShoppingCartPage,

CanNavigateToShoppingCartPage);

ShoppingCartNavigationCommand.RaiseCanExecuteChanged();

14. AttachedBehavior や Action を使用する

View:

<GridView x:Name="itemGridView“

ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"

ItemTemplate="{StaticResource KonaRI250x250ItemTemplate}"

SelectionMode="None“ IsItemClickEnabled="True"

behaviors:ListViewItemClickedToAction.Action=

"{Binding CategoryNavigationAction}">

----------------------------------------------------------------------------------

ViewModel:

CategoryNavigationAction = NavigateToCategory;

Suspend, Resume, 及びTerminate

15. Kona RestorableStateAttributeとMVVM フレームワークの利用

public class MyViewModel : ViewModel, INavigationAware{

private string _name;

[RestorableState]public string Name

{get { return _name; }set { SetProperty(ref _name, value); }

}}

WindowsAzure Store

WindowsPhone Store

16. Visual Studio との統合

ALM ソリューションの提供

ALM ソリューションの提供

Visual Studio Ultimate 2012アプリケーション ライフサイクル全体を包括的にカバー

クライアント

サーバー

Visual Studio Team Foundation Server 2012アプリケーション開発プロジェクトの統合開発基盤

Visual Studio Premium 2012統合開発環境とテスト機能を搭載

Visual Studio Professional 2012開発機能を提供する統合開発環境

Visual Studio Test Professional 2012包括的なテストの実施と管理を支援

参考情報 Visual Studio 2012 導入事例

http://aka.ms/VS2012-Case

Visual Studio 2012 が提供する統合ソリューション

http://aka.ms/VS2012-Sol

Visual Studio 2012 製品ガイド（PDF, 16MB)

http://aka.ms/VS2012-Prod

Visual Studio 2012 試用版

http://aka.ms/VS2012-Try

Visual Studio 2012 ライセンスホワイトペーパー

http://aka.ms/VS2012-Lic

Resource

http://konaguidance.codeplex.com

英語版 OS でないと .exe は解凍できない場合あり

Source Code → Download で .zip を落としてください