![// StartPageViewModel クラスを更新し、FirstName プロパティに
[RestorableState] アトリビュートを適用
[RestorableState]
public string FirstName
{
get { return _firstName; }
set { SetProperty(ref _firstName, value); }
}](https://image.slidesharecdn.com/windowslob-rev-130510232740-phpapp01/85/Windows-lob-rev-32-320.jpg)
![// 各プロパティに “Required”・“StringLength” DataAnnotations
attributes を追加
[Required]
[StringLength(10)]
public string Username
{
get { return _username; }
set { SetProperty(ref _username, value); }
}
[Required]
[StringLength(20)]
public string Password ・・・](https://image.slidesharecdn.com/windowslob-rev-130510232740-phpapp01/85/Windows-lob-rev-52-320.jpg)
![// いくつか 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"/>](https://image.slidesharecdn.com/windowslob-rev-130510232740-phpapp01/85/Windows-lob-rev-55-320.jpg)
![public class MyViewModel : ViewModel, INavigationAware
{
private string _name;
[RestorableState]
public string Name
{
get { return _name; }
set { SetProperty(ref _name, value); }
}
}](https://image.slidesharecdn.com/windowslob-rev-130510232740-phpapp01/85/Windows-lob-rev-61-320.jpg)
Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev
- 2. テクニカルエバンジェリスト 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
- 4. Windows ストア LOB アプリ開発
- 6. 百貨店の店舗用商品カタログのフロー例 SharePoint Site http://sharepoint/url se ar ch Browse PageSite Actions username Parent > Parent > Current Page Page 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
- 7. Microsoft Architect Forum 2013 データソースとしての選択肢の選定 データベース との接続 （特に SQL Server） 社内の コンテンツ サーバー クラウド上の コンテンツ サーバー クラウドや 公開された サービスとの 連携 WCF Data Services SharePoint Server 2010/2013 Office 365 ASP.NET Web API、 Mobile Services
- 8. Microsoft Architect Forum 2013 ストアアプリ Grid テンプレートや MVVM (Model-View-ViewModel) の利用 階層型ページ遷移 で画面を活用 ユーザーに適切な 情報を提供 画面に必要な コンテンツのみ 表示 MVVM の積極的 採用 MVVM (Model-View- ViewModel）サンプル実装 Contoso Travel Featured destinations Last minute deals 7 night Alaska Cruise Last Minute Deals Featured destinationsBarcelona,Spain Last Minute Deals7 Night Alaska Cruise Ocean View Cabins 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 Suites 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 My Trips Weather 7 days Chicago (3/11 – 3/19) Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Attractions My TripsFeatured Destinations Top Destinations for 2012 Barcelona, Spain My Trips City GuideCity Guide Windows ストアアプリ Grid テンプレート
- 10. • • • MVC • Presentation Model pattern • XAML デザイナー担当 開発者が担当 View ViewModel Model UI、XAML ロジック、状態 データソース
- 11. Data Model View XAML 分離コード View Model State + Operations Change Notification Data-binding and commands
- 12. 独自の “MVVM” モデル BindableBase Data Model View XAML 分離コード View Model State + Operations Change Notification Data-binding and commands
- 13. 実装済みサンプルご紹介 - Adventure Works Reference Implementation
- 17. Demo Windows Store Business Apps Guidance using Prism for Windows Runtime http://prismwindowsruntime.codeplex.com
- 18. ビジネスアプリケーションと Prism - patterns & practices guidance for building Windows Store business apps -
- 22. // View フォルダを作りStartPage.xaml を追加 // その中に追加する <TextBlock Text="Hello World!!!" Style="{StaticResource HeaderTextStyle}" />
- 23. // App.xaml.cs の using の部分より下を全部消した後、追加 // Microsoft.Practices.Prism.StoreApps ライブラリ参照設定 using Microsoft.Practices.Prism.StoreApps; sealed partial class App : MvvmAppBase { public App() { this.InitializeComponent(); } }
- 25. protected override void OnLaunchApplication (LaunchActivatedEventArgs args) { NavigationService.Navigate("Start", null); }
- 26. MVVM (Model-View-ViewModel） の基本的な実装 - patterns & practices guidance for building Windows Store business apps -
- 28. // StartPageViewModel クラスに FirstName プロパティと背後の フィールドを追加 private string _firstName; public string FirstName { get { return _firstName; } set { _firstName = value; } }
- 29. // Microsoft.Practices.Prism.StoreApps ライブラリのタイプを StartPageViewModel クラスにインポート // ViewModel Base クラスから StartPageViewModel クラスを作成 することにより、ViewModel Base クラスの INotifyPropertyChanged の実装を利用することが可能 using Microsoft.Practices.Prism.StoreApps;
- 30. // Microsoft.Practices.Prism.StoreApps ライブラリを利用し、 FirstName プロパティを SetProperty メソッドを使うように変更 public string FirstName { get { return _firstName; } set { SetProperty(ref _firstName, value); } }
- 31. // ViewModelLocator.AutoWireViewModel attached property を StartPage のための Page コントロールに追加する <Page xmlns:Infrastructure= "using:Microsoft.Practices.Prism.StoreApps" Infrastructure:ViewModelLocator.AutoWireViewModel ="True" ... > ... </Page>
- 32. // StartPageViewModel クラスを更新し、FirstName プロパティに [RestorableState] アトリビュートを適用 [RestorableState] public string FirstName { get { return _firstName; } set { SetProperty(ref _firstName, value); } }
- 33. Flyout Services クラスを使った Flyout の作成・表示 - patterns & practices guidance for building Windows Store business apps -
- 35. // SignInFlyout ページを作成 // その中の Grid 内に TextBlock 追加 <Grid Background="White"> <TextBlock Text="Sign In!" Foreground="Black" /> </Grid>
- 36. // Microsoft.Practices.Prism.StoreApps ライブラリ 内で StandardFlyoutSize クラスを定義 // FlyoutView base クラスから SignInFlyout クラスを継承するよう 変更。また、コンストラクターの中で Width も決定 public sealed partial class SignInFlyout : FlyoutView { public SignInFlyout() : base(StandardFlyoutSize.Narrow) { this.InitializeComponent(); } }
- 37. // SignInFlyout.xaml ファイルを更新し、SignInFlyout View が Microsoft.Practices.Prism.StoreApps ライブラリにある FlyoutView base class を拡張するように変更する <Infrastructure:FlyoutView xmlns:Infrastructure= "using:Microsoft.Practices.Prism.StoreApps" ... </Infrastructure:FlyoutView>
- 38. // StartPage が SignInFlyout を表示するように変更する Microsoft.Practices.Prism.StoreApps 名前空間からの インターフェースを StartPageViewModel クラスにインポートする using Microsoft.Practices.Prism.StoreApps.Interfaces // StartPageViewModel クラスにコンストラクタを追加し、 IFlyoutService タイプのパラメータを取るようにする StartPageViewModel クラスにはデフォルトコンストラクタは存在しない public StartPageViewModel(IFlyoutService flyoutService) { }
- 39. // ViewModelLocator をファクトリーに提供し StartPage のための ViewModel インスタンスを作成 // App class 内にある OnInitialize メソッドをオーバーライドし ViewModelLocator に StartPageViewModel インスタンス構成を教える protected override void OnInitialize(IActivatedEventArgs args) { ViewModelLocator.Register(typeof(StartPage).ToString(), () => new StartPageViewModel(FlyoutService)); }
- 40. // 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>
- 41. // 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")); }
- 42. // 設定ペインに 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"))}; }
- 43. Dependency Injection コンテナ の統合 - patterns & practices guidance for building Windows Store business apps -
- 45. // Dependency Injection Container ライブラリへの参照を追加 ※ Unity v3 container via NuGet (http://www.nuget.org/packages/Unity/). // App class に当該コンテナを保持するプライベートメンバー変数追加 private UnityContainer _container = new UnityContainer();
- 46. // App class 内の Resolve メソッドをオーバーライドして 当該コンテナが一つのタイプからオブジェクトインスタンスを 生成できるようにする protected override object Resolve(Type type) { return _container.Resolve(type); }
- 48. // MvvmAppBase により提供される3つのサービスを登録するコード protected override void OnInitialize (IActivatedEventArgs args) { _container.RegisterInstance(NavigationService); _container.RegisterInstance(FlyoutService); _container.RegisterInstance(SessionStateService); }
- 49. ユーザー入力のバリデーション - patterns & practices guidance for building Windows Store business apps -
- 51. 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); } }
- 52. // 各プロパティに “Required”・“StringLength” DataAnnotations attributes を追加 [Required] [StringLength(10)] public string Username { get { return _username; } set { SetProperty(ref _username, value); } } [Required] [StringLength(20)] public string Password ・・・
- 53. // Model クラスができたのでそれを SignInFlyoutViewModel 上で公開 // ViewModels フォルダに SignInFlyoutViewModel 追加 // SignInFlyoutViewModel に当該 Credential Model を公開する プロパティを追加 public class SignInFlyoutViewModel { public SignInFlyoutViewModel() { UserCredential = new Credential(); } public Credential UserCredential { get; set; } }
- 54. // SignInFlyout ページ とこのページ (view) とを SignInFlyoutViewModel にバインド ViewModelLocator.AutoWireViewModel=”True”
- 55. // いくつか 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"/>
- 57. // 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(); } }
- 58. // この値コンバータを Static resource として使うには、 App.xaml の中で参照設定する <ResourceDictionary> ... <converters:FirstErrorConverter x:Key="FirstErrorConverter" /> </ResourceDictionary>
- 59. // Model プロジェクトの全てのプロパティをバリデートする UserCredential.ValidateProperties() public SignInFlyoutViewModel() { UserCredential = new Credential(); ValidateAll = new DelegateCommand(() => UserCredential.ValidateProperties()); } public Credential UserCredential { get; set; } public ICommand ValidateAll { get; set; }
- 60. // View にボタンを追加して ValidateAll command にバインド <Button Command="{Binding ValidateAll}" Content="Validate All" Foreground="Black"/>
- 61. public class MyViewModel : ViewModel, INavigationAware { private string _name; [RestorableState] public string Name { get { return _name; } set { SetProperty(ref _name, value); } } }
- 62. Model の追加（1） Entity Framework + Code First によるデータモデル構築
- 63. Entity Data Model概念モデル (CSDL) 問題領域の概念的な エンティティやリレーションの定義 マッピング (MSL) 両モデル間の対応付け ストレージモデル (SSDL) 特定のデータソースに基づく 論理スキーマのモデル プログラム上の オブジェクト Entity SQL 概念モデルのエンティティと オブジェクトとの間でマッピング
- 64. プレゼンテーション層 ドメイン層 データ層 public partial class Entry { public virtual int ID { get; set; } RDB
- 65. Model の追加（2） ASP.NET MVC4 Web API によるサービスの公開と利用
- 67. • await XAML / C# ASP.NET Web APIJSON Get/Post/ Put/Delete var client = new HttpClient(); HttpResponseMessage response = await client.GetAsync(“サービスのURI"); var result = await response.Content.ReadAsStringAsync(); var pictures = JsonArray.Parse(result); // JSONの結果をオブジェクトにバインド …
- 68. Windows Azure 連携シナリオ • オンライン楽器ストアアプリ 各商品を表示 タイトルを編集 詳細情報編集、削除可能 スタートスクリーン 全商品表示（Hub） 一覧・登録（Sections） 個別商品表示・編集（Details）
- 69. アーキテクチャー概要 Windows ストアアプリ ・店舗管理者用 - 編集・登録 ・一般ユーザー用 - 閲覧・購入・ プッシュ通知（Mobile Services）・ メール（SendGrid) 69 Entity Framework SQL Database Windows Azure Web サイト Windows Azure Windows Azure Websites Windows Azure SQL Database Windows Azure Storage (BLOB) 画像 文字 数値 ASP.NET Web API Entity Framework ドメイン モデル 店舗 管理者 一般 ユーザー Grid テンプレート Get/Post/ Put/Delete JSON REST CodeFirst サイド ローディング Windows ストア
- 70. Demo Musical Instruments Store utilizing Adventure Works RI working with Windows Azure as Model