HTML5 + JavaScript Windows ストアアプリの構造
ホストプロセス
WWAHost.exe
Windows 8.1
アプリ
API
JavaScript
Windows ランタイム
直接呼び出し(Compiled)
ロード
<Azure Web サイト>商品サービス
ASP.NET Web API
<Azure Web サイト>注文モニタ
ASP.NET SignalR
<Azure モバイルサービス>注文サービス
TodoItem テーブル
画面作成
Blend
ロジック実装
Visual Studio
デバッグ実行
Visual Studio
HTML 要素はそのまま、CSS でカスタマイズ
#<要素のID> {
<CSS プロパティ> : <値>;
}
.<クラス名> {
<CSS プロパティ> : <値>;
}
#Title {font-size:42px;
}
.Item {font-size:24px;text-align:center;
}
-ms-grid を活用する
.ms-grid {display:-ms-grid;-ms-grid-rows: 120px 1fr;-ms-grid-columns: 120px 1fr;width: auto;height: inherit;
}
#myTitle {-ms-grid-column:2;
}
#myListView {-ms-grid-column:2;-ms-grid-row:2;
}
WinJS.xhr({ url: "http://aka.ms/cfCatalog" }).done(function onCompleted(res) {
// 取得したJSON 文字列を処理、ListViewにバインド
var dataJson = JSON.parse(res.responseText);sampleData = new WinJS.Binding.List(dataJson);myListView.winControl.itemDataSource
= sampleData.dataSource;},function onAbort() {//通信が失敗した時の処理…}
); http://msdn.microsoft.com/ja-jp/library/windows/apps/hh761502.aspx
WinJSControls
Promises
Navigation
Localization
Application
Xhr
Binding
Templating
Namespaces
Classes
Utilities
Animations
ListView
Repeater
Hub
Pivot
ItemContainer
MediaTile
Flyout
FlipView
http://visualstudiogallery.msdn.microsoft.com/315c13a7-2787-4f57-bdf7-adae6ed54450
http://msdn.microsoft.com/ja-jp/library/windows/apps/br229565
http://msdn.microsoft.com/ja-jp/library/windows/apps/jj129451(v=vs.110).aspx
http://msdn.microsoft.com/en-us/library/hh755833.aspx