Contenu connexe Similaire à Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev Similaire à Windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介 rev (20) Plus de Shotaro Suzuki (20) 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 テンプレート
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);
}
28. // StartPageViewModel クラスに FirstName プロパティと背後の
フィールドを追加
private string _firstName;
public string FirstName
{
get { return _firstName; }
set { _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); }
}
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"))};
}
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);
}
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>
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); }
}
}
63. Entity Data Model概念モデル (CSDL)
問題領域の概念的な
エンティティやリレーションの定義
マッピング (MSL)
両モデル間の対応付け
ストレージモデル (SSDL)
特定のデータソースに基づく
論理スキーマのモデル
プログラム上の
オブジェクト
Entity SQL
概念モデルのエンティティと
オブジェクトとの間でマッピング
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
ストア
