クイック スタート: JavaScript 用 Windows ライブラリを使ったアプリ設定の追加
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
このクイック スタートでは、JavaScript 用 Windows ライブラリの SettingsFlyout クラスと HTML を使用して設定コントラクトを実装する手順について説明します。
この機能の実際の使い方については「アプリの機能の概要」シリーズの次のトピックをご覧ください: Windows ストア アプリ UI の概要
概要
次の例では、2 つの別々の HTML ファイルで 2 つの設定ポップアップ (Defaults と Help) を定義します。設定ポップアップを処理し、JavaScript を使って設定ウィンドウに表示します。
必要条件
「アプリ設定のガイドライン」をご覧ください。
1. 空のアプリを作成する
「"Hello, world" アプリを作成する」で説明されている空の "Hello World" アプリを作成します。 最初の 2 つの手順のみ実行する必要があります。
- Visual Studio で新しいプロジェクトを作ります。
- アプリを起動します。
2. 既定の設定ポップアップを定義する
Visual Studio で、DefaultSettings.html という名前の HTML ファイルを作成します。
- [ソリューション エクスプローラー] ウィンドウで、"HelloWorld" ソリューションの下にある HelloWorld プロジェクトを右クリックします。
- [追加]、[新しいフォルダー] の順にクリックします。
- 新しいフォルダーに "html" という名前を付けます。
- このフォルダーを右クリックし、[追加]、[新しい HTML ファイル] の順にクリックします。
- [HTML ページ] を選択し、"DefaultSettings.html" という名前を入力し、[追加] をクリックします。
次の内容をコピーし、新しいファイルに貼り付けて内容を上書きします。
<!doctype HTML>
<html>
<head>
<title>App defaults Settings flyout</title>
</head>
<body>
<!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
<!-- Each Settings flyout should be defined in its own HTML file. -->
<!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
<!-- Set the background color for the header to the background color defined for your
app tile in the manifest. -->
<div id="defaultsDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App defaults Settings flyout"
data-win-options="{settingsCommandId:'help',width:'narrow'}">
<div class="win-header" style="background-color:#464646">
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label">Defaults</div>
<img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
</div>
<div class="win-content">
{App defaults content goes here}
</div>
</div>
<!-- ENDTEMPLATE -->
</body>
</html>
3. ヘルプ ポップアップの定義
"html" フォルダーで、HelpUI.html という名前の追加の HTML ファイルを作成します。
次の内容をコピーし、新しいファイルに貼り付けて内容を上書きします。
<!doctype HTML>
<html>
<head>
<title>Help Settings flyout</title>
</head>
<body>
<!-- BEGINTEMPLATE: Template code for an empty Help Flyout. -->
<!-- Each Settings flyout should be defined in its own HTML file. -->
<!-- Set the width to 'narrow' (346px) or 'wide' (646px). -->
<!-- Set the background color for the header to the background color defined for your
app tile in the manifest. -->
<div id="helpDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help Settings flyout"
data-win-options="{settingsCommandId:'help',width:'narrow'}">
<div class="win-header" style="background-color:#464646">
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label">Help</div>
<img src="ms-appx:///images/smalllogo.png" style="position: absolute; right: 40px;" />
</div>
<div class="win-content">
{Help content goes here}
</div>
</div>
<!-- ENDTEMPLATE -->
</body>
</html>
4. 設定ウィンドウの内容の設定
設定ポップアップを処理し、次の JavaScript を default.js に追加することによって設定ウィンドウに表示します。 DOM が初期化されたら実行されるように、onactivated 関数内に新しいコードを配置します。
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
// BEGIN BLOCK OF NEW CODE
// Populate Settings pane and tie commands to Settings flyouts.
WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = {
"defaultsDiv": { href: "html/DefaultSettings.html", title: "App defaults" },
"helpDiv": { href: "html/HelpUI.html", title: "Help" }
};
WinJS.UI.SettingsFlyout.populateSettings(e);
}
// END OF BLOCK
}
};
要約
このクイック スタートでは、HTML と WinJS を使って設定コントラクトをセットアップする方法について説明しました。
関連トピック
サンプル
リファレンス
ドキュメント