Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev

テクニカルエバンジェリスト http://blogs.msdn.com/b/shosuz MTC アーキテクト http://www.microsoft.com/ja-jp/business/mtc/ads.aspx 呟きネタは主に、Windows Azure, Windows, RIA, HTML5, MVVM, iOS/Android x Windows Azure 連携, Guitar … 等 ASPIC 執行役員 (‘05 ~), Wipse モバイル x クラウド部会長（’11 ~) 東京工業大学大学院（’13～）,早稲田大学大学院 （’05-12）,中央大学総合政策学部（’08-10）で 非常勤講師 Microsoft 軽音楽部 広報担当 (Gt./Key./DAW) (‘12 ～) https://www.facebook.com/shosuz

• http://blogs.msdn.com/b/shosuz
• http://www.microsoft.com/ja-jp/business/mtc/ads.aspx
• https://www.facebook.com/shosuz

Windows ストア LOB アプリ開発

ストアアプリの企業導入に伴う課題 既存アプリケーション との住み分け 開発リソース確保、 技術研修 アプリケーション化 のターゲット 配布の方法

百貨店の店舗用商品カタログのフロー例 XML-RPC マスター情報を検索 商品情報 を検索 REST 7:37 AM 画像 URLを 含む商品情 報を取得 画像 URL を検索 REST SharePoint Site se ar ch username http://sharepoint/url Site Actions Browse Page Parent > Parent > Current Page Page Title 画像情報を リクエスト 画像情報を 返す Current Page Page One Libraries Site Pages Shared Documents 画像 URL を取得 Drop Off Library Custom library Page Two This Site: site search マスター 情報を取得

• http://sharepoint/url

データソースとしての選択肢の選定 データベース との接続 （特に SQL Server） 社内の コンテンツ サーバー WCF Data Services SharePoint Server 2010/2013 Microsoft Architect Forum 2013 クラウド上の コンテンツ サーバー クラウドや 公開された サービスとの 連携 Office 365 ASP.NET Web API、 Mobile Services

ストアアプリ Grid テンプレートや MVVM (Model-View-ViewModel) の利用  階層型ページ遷移 Windows ストアアプリ で画面を活用 Grid テンプレート  ユーザーに適切な 情報を提供  画面に必要な コンテンツのみ 表示  MVVM の積極的 MVVM (Model-ViewViewModel）サンプル実装 採用 Contoso Travel My Trips Last minute deals Featured destinations Featured Destinations Top Destinations for 2012 City Guide Last Minute Deals My Trips Barcelona, Spain 7 night Alaska Cruise Featured destinations Barcelona, Spain Last Minute Deals 7 Night Alaska Cruise My Trips Chicago (3/11 – 3/19) Weather 7 days Attractions Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Microsoft Architect Forum 2013 Ocean View Cabins Suites Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port views From $2,099 — only $150/night/person based on double occupancy Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port view From $2,099 — only $150/night/person do Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny

MVVM フレームワークのご紹介

デザイナー担当 開発者が担当 • • • • • MVC Model pattern XAML Presentation View ViewModel Model UI、XAML ロジック、状態 データソース

View XAML 分離コード Data-binding and commands View Model State + Operations Change Notification Data Model

“MVVM” モデル 独自の View XAML 分離コード Data-binding and commands BindableBase View Model State + Operations Change Notification Data Model

実装済みサンプルご紹介 - Adventure Works Reference Implementation

http://prismwindowsruntime.codeplex.com/

• http://prismwindowsruntime.codeplex.com/

Demo Windows Store Business Apps Guidance using Prism for Windows Runtime http://prismwindowsruntime.codeplex.com

ビジネスアプリケーションと Prism - patterns & practices guidance for building Windows Store business apps -

// View フォルダを作りStartPage.xaml を追加
// その中に追加する
<TextBlock
Text="Hello World!!!"
Style="{StaticResource HeaderTextStyle}" />

// App.xaml.cs の using の部分より下を全部消した後、追加 // Microsoft.Practices.Prism.StoreApps ライブラリ参照設定 using Microsoft.Practices.Prism.StoreApps; sealed partial class App : MvvmAppBase { public App() { this.InitializeComponent(); } }

// App.xaml を下記のように囲む <Infrastructure:MvvmAppBase xmlns:Infrastructure= "using:Microsoft.Practices.Prism.StoreApps" > ... </Infrastructure:MvvmAppBase>

protected override void OnLaunchApplication (LaunchActivatedEventArgs args) { NavigationService.Navigate("Start", null); }

MVVM (Model-View-ViewModel） の基本的な実装 - patterns & practices guidance for building Windows Store business apps -

// StartPageViewModel クラスに FirstName プロパティと背後の フィールドを追加 private string _firstName; public string FirstName { get { return _firstName; } set { _firstName = value; } }

// Microsoft.Practices.Prism.StoreApps ライブラリのタイプを StartPageViewModel クラスにインポート // ViewModel Base クラスから StartPageViewModel クラスを作成 することにより、ViewModel Base クラスの INotifyPropertyChanged の実装を利用することが可能 using Microsoft.Practices.Prism.StoreApps;

// Microsoft.Practices.Prism.StoreApps ライブラリを利用し、 FirstName プロパティを SetProperty メソッドを使うように変更 public string FirstName { get { return _firstName; } set { SetProperty(ref _firstName, value); } }

// ViewModelLocator.AutoWireViewModel attached property を StartPage のための Page コントロールに追加する <Page xmlns:Infrastructure= "using:Microsoft.Practices.Prism.StoreApps" Infrastructure:ViewModelLocator.AutoWireViewModel ="True" ... > ... </Page>

// StartPageViewModel クラスを更新し、FirstName プロパティに [RestorableState] アトリビュートを適用 [RestorableState] public string FirstName { get { return _firstName; } set { SetProperty(ref _firstName, value); } }

Flyout Services クラスを使った Flyout の作成・表示 - patterns & practices guidance for building Windows Store business apps -

// SignInFlyout ページを作成 // その中の Grid 内に TextBlock 追加 <Grid Background="White"> <TextBlock Text="Sign In!" Foreground="Black" /> </Grid>

// Microsoft.Practices.Prism.StoreApps ライブラリ 内で StandardFlyoutSize クラスを定義 // FlyoutView base クラスから SignInFlyout クラスを継承するよう 変更。また、コンストラクターの中で Width も決定 public sealed partial class SignInFlyout : FlyoutView { public SignInFlyout() : base(StandardFlyoutSize.Narrow) { this.InitializeComponent(); } }

// SignInFlyout.xaml ファイルを更新し、SignInFlyout View が Microsoft.Practices.Prism.StoreApps ライブラリにある FlyoutView base class を拡張するように変更する <Infrastructure:FlyoutView xmlns:Infrastructure= "using:Microsoft.Practices.Prism.StoreApps" ... </Infrastructure:FlyoutView>

// StartPage が SignInFlyout を表示するように変更する Microsoft.Practices.Prism.StoreApps 名前空間からの インターフェースを StartPageViewModel クラスにインポートする using Microsoft.Practices.Prism.StoreApps.Interfaces // StartPageViewModel クラスにコンストラクタを追加し、 IFlyoutService タイプのパラメータを取るようにする StartPageViewModel クラスにはデフォルトコンストラクタは存在しない public StartPageViewModel(IFlyoutService flyoutService) { }

// ViewModelLocator をファクトリーに提供し StartPage のための ViewModel インスタンスを作成 // App class 内にある OnInitialize メソッドをオーバーライドし ViewModelLocator に StartPageViewModel インスタンス構成を教える protected override void OnInitialize(IActivatedEventArgs args) { ViewModelLocator.Register(typeof(StartPage).ToString(), () => new StartPageViewModel(FlyoutService)); }

// StartPage 内の StackPanel に SignInFlyout を表示するボタンを追加

当該ボタンの Command property は StartPageViewModel クラス内の
SignInCommand にバインドされる

<StackPanel>
<TextBlock Text="Hello World!!!" />
<TextBox Text=
"{Binding FirstName, Mode=TwoWay}" />
<Button Content="ShowFlyout"
Command="{Binding SignInCommand}" />
</StackPanel>

// StartPageViewModel class に System.Windows.Input 名前空間をインポート using System.Windows.Input; // SignInCommand プロパティを StartPageViewModel クラスに追加 Public Icommand SignInCommand { get; private set; } // 当該プロパティは private setter を持つ（内部的にのみセット可能故) // SignInCommand プロパティを DelegateCommand インスタンスに設定しFlyoutServiceを呼び出す public StartPageViewModel(IFlyoutService flyoutService) { SignInCommand = new DelegateCommand(() => flyoutService.ShowFlyout("SignIn")); }

// 設定ペインに SignInFlyout を表示するアイテムを追加する

// アプリを停止し、App class の中の GetSettingsCharmActionItems メソッドをオーバーライド
// このメソッドは SettingsPane class の CommandsRequested イベント が発生したとき呼ばれる
// SignInFlyout を開くための設定ペインに SettingsCharmActionItem を追加する

Protected override Ilist<SettingsCharmActionItem>
GetSettingsCharmActionItems()
{
return new List<SettingsCharmActionItem>{ new
SettingsCharmActionItem("Sign In",

() => FlyoutService.ShowFlyout("SignIn"))};
}

Dependency Injection コンテナ の統合 - patterns & practices guidance for building Windows Store business apps -

// Dependency Injection Container ライブラリへの参照を追加 ※ Unity v3 container via NuGet (http://www.nuget.org/packages/Unity/). // App class に当該コンテナを保持するプライベートメンバー変数追加 private UnityContainer _container = new UnityContainer();

• http://www.nuget.org/packages/Unity/

// App class 内の Resolve メソッドをオーバーライドして 当該コンテナが一つのタイプからオブジェクトインスタンスを 生成できるようにする protected override object Resolve(Type type) { return _container.Resolve(type); }

// MvvmAppBase により提供される3つのサービスを登録するコード protected override void OnInitialize (IActivatedEventArgs args) { _container.RegisterInstance(NavigationService); _container.RegisterInstance(FlyoutService); _container.RegisterInstance(SessionStateService); }

ユーザー入力のバリデーション - patterns & practices guidance for building Windows Store business apps -

HighlightFormFieldOnErrors.PropertyErrors

private string _username; private string _password; public string Username { get { return _username; } set { SetProperty(ref _username, value); } } public string Password { get { return _password; } set { SetProperty(ref _password, value); } }

// 各プロパティに “Required”・“StringLength” DataAnnotations attributes を追加 [Required] [StringLength(10)] public string Username { get { return _username; } set { SetProperty(ref _username, value); } } [Required] [StringLength(20)] public string Password ・・・

// Model クラスができたのでそれを SignInFlyoutViewModel 上で公開 // ViewModels フォルダに SignInFlyoutViewModel 追加 // SignInFlyoutViewModel に当該 Credential Model を公開する プロパティを追加 public class SignInFlyoutViewModel { public SignInFlyoutViewModel() { UserCredential = new Credential(); } public Credential UserCredential { get; set; } }

// SignInFlyout ページ とこのページ (view) とを SignInFlyoutViewModel にバインド ViewModelLocator.AutoWireViewModel=”True”

// いくつか Controls を View に追加して、当該 ViewModel の
Credential Username プロパティと Password プロパティ値を格納
//何らかの Validation error messagesとバインドされた TextBlock群
<TextBox Text=
"{Binding UserCredential.Username, Mode=TwoWay}"
BorderBrush="Black" />
<TextBlock Text="{Binding UserCredential.Errors[Username],
Converter={StaticResource
FirstErrorConverter}}" Foreground="Red" />
<TextBox Text="{Binding UserCredential.Password,
Mode=TwoWay}" BorderBrush="Black" />
<TextBlock Text="{Binding UserCredential.Errors[Password],
Converter={StaticResource
FirstErrorConverter}}" Foreground="Red"/>

// FirstErrorConverter のソース
public sealed class FirstErrorConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, string language)
{
ICollection<string> errors = value as ICollection<string>;
return errors != null && errors.Count > 0 ?
errors.ElementAt(0):null;
}
public object ConvertBack(object value, Type targetType,
object parameter, string language)
{
throw new NotImplementedException();
}
}

// この値コンバータを Static resource として使うには、 App.xaml の中で参照設定する <ResourceDictionary> ... <converters:FirstErrorConverter x:Key="FirstErrorConverter" /> </ResourceDictionary>

// Model プロジェクトの全てのプロパティをバリデートする UserCredential.ValidateProperties() public SignInFlyoutViewModel() { UserCredential = new Credential(); ValidateAll = new DelegateCommand(() => UserCredential.ValidateProperties()); } public Credential UserCredential { get; set; } public ICommand ValidateAll { get; set; }

// View にボタンを追加して ValidateAll command にバインド <Button Command="{Binding ValidateAll}" Content="Validate All" Foreground="Black"/>

public class MyViewModel : ViewModel, INavigationAware { private string _name; [RestorableState] public string Name { get { return _name; } set { SetProperty(ref _name, value); } } }

Model の追加（1） Entity Framework + Code First によるデータモデル構築

問題領域の概念的な エンティティやリレーションの定義 マッピング (MSL) 両モデル間の対応付け ストレージモデル (SSDL) 特定のデータソースに基づく 論理スキーマのモデル Entity SQL 概念モデルのエンティティと オブジェクトとの間でマッピング Entity Data (CSDL) Model 概念モデル プログラム上の オブジェクト

プレゼンテーション層 ドメイン層 データ層 RDB public partial class Entry { public virtual int ID { get; set; }

Model の追加（2） ASP.NET MVC4 Web API によるサービスの公開と利用

Web サーバー クライアント データソース アプリ Get/Post/ Put/Delete ブラウザー JSON/XML • ASP.NET Web API Entity Framework サービス

XAML / C# Get/Post/ Put/Delete JSON ASP.NET Web API var client = new HttpClient(); HttpResponseMessage response = await client.GetAsync(“サービスのURI"); • await var result = await response.Content.ReadAsStringAsync(); var pictures = JsonArray.Parse(result); // JSONの結果をオブジェクトにバインド …

Windows Azure 連携シナリオ • オンライン楽器ストアアプリ スタートスクリーン 全商品表示（Hub） 一覧・登録（Sections） 個別商品表示・編集（Details） 各商品を表示 タイトルを編集 詳細情報編集、削除可能

アーキテクチャー概要 サイド ローディング Windows Azure Windows ストアアプリ ・店舗管理者用 - 編集・登録 REST ASP.NET Web API JSON Windows ストア ・一般ユーザー用 - 閲覧・購入・ プッシュ通知（Mobile Services）・ メール（SendGrid) Entity Framework 一般 ユーザー Get/Post/ Put/Delete ドメイン モデル 69 Windows Azure Storage (BLOB) 画像 Windows Azure SQL Database 文字 数値 SQL Database Windows Azure Code First Grid テンプレート Entity Framework 店舗 管理者 Windows Azure Web サイトWebsites

Demo Musical Instruments Store utilizing Adventure Works RI working with Windows Azure as Model

http://aka.ms/VS2012-Case http://aka.ms/VS2012-Sol http://aka.ms/VS2012-Prod http://aka.ms/VS2012-Try http://aka.ms/VS2012-Lic

• http://aka.ms/VS2012-Case
• http://aka.ms/VS2012-Sol
• http://aka.ms/VS2012-Prod
• http://aka.ms/VS2012-Try
• http://aka.ms/VS2012-Lic

http://prismwindowsruntime.codeplex.com .exe .zip

• http://prismwindowsruntime.codeplex.com/