快速入門：使用適用於 JavaScript 的 Windows Library 來新增應用程式設定

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這個快速入門將帶領您逐步使用 HTML 與適用於 JavaScript 的 Windows Library 的 SettingsFlyout 類別來實作設定協定。

如需了解此功能的運作情形，請參閱應用程式功能，從開始到完成系列: Windows 市集應用程式 UI，從開始到完成

簡介

在下列範例中，您將在兩個個別的 HTML 檔案中定義 [預設值] 與 [說明] 這兩個 [設定] 飛出視窗。您將使用 JavaScript 來處理 [設定] 飛出視窗和填入 [設定] 窗格。

先決條件

請參閱應用程式設定的指導方針。

1. 建立空白應用程式

建立 "Hello World" 空白應用程式，如建立 "Hello, world" 應用程式中所述。您只需要完成前兩個步驟：

在 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 來處理設定飛出視窗和填入設定窗格。將新的程式碼放入 onactivated 函式，使其在您的 DOM 初始化之後執行。


    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 來設定設定協定。

共用方式為