Windows 市集應用程式實作手冊 - 使用 JavaScript : Lab 06

實驗 6 ： 設定和偏好

概述

實驗 3 介紹協定並展示應用程式可以多麼輕鬆地整合分享和搜尋快速鍵。 Windows 8 也包括了設定快速鍵（ Settings charm ），可以用來改變運作中的應用程式之設定或系統設定（如果沒有正在運作中的應用程式的話）。當您選擇設定快速鍵時，設定窗格就會出現作業系統所提供的權限（ Permissions ）命令，允許使用者啟用（ enable ）和停用（ disable ）某些功能，例如網路攝影機和麥克風等的存取。您也可以在設定窗格裡新增自己的命令，並將它們連接到 HTML 頁面控制項，以方便使用者存取「偏好」、「關於」方框、和其他應用程式特定設定的內容。

在本實驗裡，您將在 Contoso 食譜的設定窗格裡新增「關於」和「偏好」命令、您將接觸一個簡單的使用者偏好（只要在其方框內打勾或取消勾選就能切換開關）、您也將使用漫遊設定來儲存該偏好，以便跟隨使用者到處跑。

目標

本實驗將引導您如何：

  • 新增「關於」命令和「關於」頁面到設定窗格裡。

  • 新增偏好命令和偏好頁面到設定窗格裡。

  • 使用漫遊設定來儲存使用者偏好。

系統需求

要完成本實驗，您必須擁有下列東西：

  • Windows 8

  • Microsoft Visual Studio 2012

設定

為了讓您的電腦能進行本實驗，您必須先實作下列步驟：

  1. 安裝 Windows 8。

  2. 安裝 Microsoft Visual Studio 2012 。

練習

本動手做實驗室包含下列練習：

  1. 新增「關於」頁面

  2. 新增偏好頁面

  3. 實作偏好

完成本實驗，估計需要費時： 30 到 40 分鐘。

練習 1 ： 新增「關於」頁面

在這個練習裡，您將新增一個簡單的「關於」頁面到 Contoso 食譜裡。

任務 1 – 新增「關於」命令

新增命令到設定窗格的第一步是為 WinJS.Application.onsettings 事件登錄一個處理常式，以便設定窗格一顯現，這個事件就被觸發，然後，事件處理常式就能新增命令到設定選單裡。

  1. 在 Visual Studio 裡，打開您在實驗 5 所完成的 ContosoCookbook 專案。如果您還未完成實驗 5 或想啟動另外一份參考複本，您可以在本實驗的起始材料中找到一份完整的版本。

  2. 打開 default.js ，在 if (app.sessionState.history) 前面添加下列陳述式。

    JavaScript
    app.onsettings = function (e) {
       e.detail.applicationcommands = {
          // Add an About command
         "about": {
         href: "/pages/about/about.html",
         title: "About"
           }
       }

    WinJS.UI.SettingsFlyout.populateSettings(e);
    };

  3. 按壓 F5 來啟動應用程式。

  4. 顯示常用工具列，選擇「設定」（ Settings ）。

  5. 驗證設定窗格內包含了「關於」命令，如圖 1 所示。

    圖 1
    帶有「關於」命令的設定窗格

  6. 返回 Visual Studio 並停止偵錯。

任務 2 – 新增 about.html 頁面控制項

您在前一個任務新增的事件處理常式已將「關於」命令加入設定窗格內，並且將它指向 /pages/about/about.html ，但是，該頁面還未存在。讓我們添加新的頁面控制項到專案裡，以便修正此問題。

  1. 在方案總管裡，用滑鼠右鍵單擊 pages 資料夾並使用加入 > 新增資料夾命令，來新增命名為「 about 」的資料夾。

  2. 用滑鼠右鍵單擊「 about 」資料夾，並使用加入 > 新增項目命令來新增命名為 about.html 頁面到頁面控制項裡，如圖 2 所示。


    圖 2
    新增頁面控制項

  3. 打開 about.html ，並將類別（ class ）為「 about fragment 」的 DIV 元素替換成這個樣子。

    HTML
    <div id="about" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width: 'narrow'}">
    <div class="SettingsPane">
    <div class="win-label">
    <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
    </button>
    <span class="SettingsTitle">About</span>
    </div>
    <article class="SettingsContent">
    <h2>Contoso Cookbook</h2>
    <h4>Trial Version</h4>
    </article>
    </div>
    </div>

    備註： DIV 元素裡的 id="about" 屬性非常重要，因為它對應到「關於」頁面，此頁面是您在任務 1 傳遞給 app.onsettings 處理常式之 e.detail.applicationcommands 的。「關於」頁面目前告知使用者這只是 Contoso 食譜的試用版。您將在實驗 7 使用 Windows 執行階段（ Windows Runtime ）的市集 APIs 來模擬此應用程式的購買。購買行為發生之後，您將以授權資訊來替換「試用版」的字眼。

  4. 打開 about.css 並新增下列 CSS 類別。

    CSS
    .SettingsPane {
    margin-top:36px;
    margin-left:48px;
    }

    .SettingsTitle {
    margin-left: 36px;
    }

    .SettingsContent {
    margin-top: 24px;
    }
    #about {
    background-color: gray ;
    }

任務 3 – 測試結果

現在，應該來測試您的變更並觀察「關於」頁面的樣子了。

  1. 請按壓 F5 來執行應用程式。
  2. 顯示常用工具列並選擇設定（ Settings ）。
  3. 從設定窗格裡選擇「關於」命令。
  4. 確認「關於」頁面已出現，如圖 3 所示。

    圖 3
    Contoso 食譜的「關於」頁面
  5. 返回 Visual Studio 並停止偵錯。

練習 2 ：新增「偏好」頁面

既然您已經了解如何在設定窗格裡新增頁面，那麼，就請您新增另一個頁面吧。這一次，請您添加偏好頁面，以便允許使用者來輸入和編輯偏好。在這裡，我們將只引導您新增一個偏好，讓您了解其作法。這以後，您當然可以隨意添加自己所喜歡的偏好。您即將新增的偏好是可以讓使用者配置 Contoso 食譜，以便在它一被啟動，就返回上一次所顯示的食譜配方或食譜群組。

任務 1 – 新增偏好命令

首先，讓我們修改可以新增「關於」命令到設定窗格裡的 onsettings 處理常式，以便新增一偏好命令。

  1. 打開 default.js ，找出您在前一個練習新增的 app.onsettings 函式。

  2. 修改此函式使包括一偏好命令。

    JavaScript
    app.onsettings = function (e) {
    e.detail.applicationcommands = {
    // Add an About command
    "about": {
    href: "/pages/about/about.html",
    title: "About"
    },
    "preferences": {
    href: "/pages/preferences/preferences.html",
    title: "Preferences"
    }
    }

    WinJS.UI.SettingsFlyout.populateSettings(e);
    };

  3. 請按壓 F5 來啟動應用程式並使用設定快速鍵來展示設定窗格。

  4. 確認設定窗格已包括一偏好命令，如圖 4 所示。

    圖 4
    帶有偏好命令的設定窗格

  5. 返回 Visual Studio 並停止偵錯。

任務 2 – 新增 preferences.html 頁面控制項

接下來的任務是創建一個偏好命令可叫用的頁面控制項。

  1. 在方案總管裡，使用滑鼠右鍵單擊 pages 資料夾並使用加入 > 新增資料夾命令來新增命名為「 preferences 」的資料夾。

  2. 用滑鼠右鍵單擊「 preferences 」資料夾並使用加入 -> 新增項目命令來新增命名為 preferences.html 的頁面控制項。

  3. 打開 preferences.html ，並將類別（ class ）為「 preferences fragment 」的 DIV 元素替換成這個樣子。

    HTML
    <div id="preferences" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{width: 'narrow'}">
    <div class="SettingsPane">
    <div class="win-label">
    <button onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton">
    </button>
    <span class="SettingsTitle">Preferences</span>
    </div>
    <article class="SettingsContent">
    <div id="remember" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{ title: 'Remember where I was' }" />
    </article>
    </div>
    </div>

  4. 打開 preferences.css 並新增下列 CSS 類別。

    CSS
    .SettingsPane {
    margin-top:36px;
    margin-left:48px;
    }

    .SettingsTitle {
    margin-left: 36px;
    }

    .SettingsContent {
    margin-top: 24px;
    }

    #preferences {
    background-color: gray;
    }

  5. 請按壓 F5 來執行此應用程式。

  6. 顯示常用工具列和選擇設定快速鍵。

  7. 從設定窗格裡選擇偏好命令。

  8. 確認偏好頁面已出現並包含一切換開關，如圖 5 所示。

    圖 5
    Contoso 食譜的偏好頁面

  9. 返回 Visual Studio 並停止偵錯。

任務 3 – 製作偏好相黏

現在，偏好頁面裡的「記住我在哪兒」的切換開關尚未連結到任何東西，而且它也無法記住它的狀態。讓我們修正這問題，其方法是使用漫遊設定來儲存切換開關每一次被點擊時的狀態，並在偏好頁面每一次被顯示時，將它初始化（ initialize ）。

  1. 打開 preferences.js ，並在 "use strict" 行後面，新增下列陳述式。

    JavaScript
    var appdata = Windows.Storage.ApplicationData;

  2. 仍然在 preferences.js 的情況下，新增下列陳述式到 ready 函式，以便記錄漫遊設定每一次被點擊時切換開關的狀態，並在偏好頁面每一次被顯示時，初始化該切換開關。

    JavaScript
    var toggle = document.querySelector("#remember").winControl;

    var remember = appdata.current.roamingSettings.values["remember"];
    remember = !remember ? false : remember; // false if value doesn’t exist
    toggle.checked = remember;

    toggle.addEventListener("change", function (e) {
    appdata.current.roamingSettings.values["remember"] = e.target.winControl.checked;
    });

    備註：為了協助儲存和恢復設定和其他應用程式資料做工作， Windows 執行階段（ Windows Runtime ）給您 Windows.Storage.ApplicationData 類別（ class ）。ApplicationData 讓您儲存資料於本地、漫遊、或臨時存儲器。透過命名為 LocalSettings 和 RoamingSettings 的 ApplicationData 屬性，您所儲存的資料能以名稱 - 值配對（ name-value pairs ）的形式被儲存起來，或被儲存在以特別的應用程式-獨有的（ app-specific ）資料夾來創建的檔案內。這些應用程式-獨有的（ app-specific ）資料夾可以透過 ApplicationData 的 LocalFolder 、 RoamingFolder 、和 TemporaryFolder 等屬性來存取。 持續留存資料於任何一個漫遊儲存庫的好處是這些資料會「跟隨」使用者從某一裝置到另一個裝置 — Windows 會負責在裝置與裝置之間複製資料並保持資料的同步。此外，假如果應用程式將資料寫到 RoamingSettings 或 RoamingFolder 裡，而使用者未登錄 Microsoft 帳戶或未連線到網際網路， Windows 執行階段（ Windows Runtime ）會自動持續留存資料於本地。所以，使用 RoamingSettings 或 RoamingFolder 來儲存使用者偏好，幾乎不會發生資料遺失的現象，反而得到許多好處。唯一要注意的是此平台會限制可以儲存在漫遊存儲器裡的資料量，但是您可以從 ApplicationData.RoamingStorageQuota 屬性的運作時間來判斷資料量的儲存限額。

  3. 按壓 F5 來執行此應用程式。

  4. 打開設定快速鍵。

  5. 從設定窗格裡，選擇偏好命令。

  6. 點擊**「記住我在哪兒」（ Remember where I was ）**來開啟切換開關。

  7. 退出設定窗格。

  8. 返回 Visual Studio 並停止偵錯。

  9. 按壓 F5 來再度啟動應用程式。

  10. 進到偏好頁面並確認切換開關處於開啟（ on ）狀態。

  11. 返回 Visual Studio 並停止偵錯。

練習 3 ：實作偏好

到目前為止，每一次啟動 Contoso 食譜，它都會顯示起始頁面。在前一個練習裡，我們之所以添加被稱為**「記住我在哪兒」（ Remember where I was ）**的使用者偏好，其目的就是要讓使用者能夠配置應用程式，讓它每一次被啟動，就返回上一次它被關閉時所顯示的頁面。這個使用者偏好只要求您稍微變動程式碼，因為 Visual Studio 早已包含程式碼，可以在您的應用程式被暫停時，儲存其瀏覽狀態。

任務 1 – 修改 default.js

default.js 早已包含程式碼，可以在應用程式被暫停時儲存其瀏覽狀態，並在應用程式被終止時恢復它。我們將使用類似的策略來恢復瀏覽狀態，如果使用者啟動已被關閉的應用程式，而「記住我在哪兒」也被啟動的話。

  1. 打開 default.js ，到「文件」頂部附近找到定義 nav 變數的陳述式，在它後面新增下列陳述式。

    JavaScript
    var appdata = Windows.Storage.ApplicationData;

  2. 新增下列陳述式到已被啟動的事件處理常式，就添加在 if (args.detail.kind === activation.ActivationKind.launch) 這個陳述式的後面。

    JavaScript
    // If "Remember where I was" is enabled and roaming settings
    // contains a history, apply it to go back to where the user
    // was before
    var remember = appdata.current.roamingSettings.values["remember"];
    remember = !remember ? false : remember; // false if value is undefined

    if (remember) {
    var history = appdata.current.roamingSettings.values["history"];
    if (history !== undefined) {
    nav.history = JSON.parse(history);
    }
    }

  3. 在 default.js 底部附近找到 app.oncheckpoint 處理常式，將下列陳述式新增到它的後面：

    JavaScript
    // If "Remember where I was" is enabled, write the history to
    // roaming settings so it can be restored later
    var remember = appdata.current.roamingSettings.values["remember"];
    remember = !remember ? false : remember; // false if value is undefined

    if (remember) {
    appdata.current.roamingSettings.values["history"] = JSON.stringify(nav.history);
    }

任務 2 – 測試結果

現在就只剩下小小的測試工作了，以便確保我們所做的變更是可行的。

  1. 請按壓 F5 來執行應用程式。
  2. 打開設定快速鍵。
  3. 從設定窗格裡，選擇偏好命令。
  4. 驗證記住我在哪兒仍然在「啟動」（ on ）中，如果沒有，就打開它。
  5. 退出設定窗格。
  6. 進到任一食譜頁面。
  7. 從螢幕上方往下刷或按壓 Alt + F4 來關閉應用程式（不要使用 Visual Studio 的停止偵錯命令來關閉應用程式。）
  8. 返回 Visual Studio 並稍候幾秒鐘，等待處理程序結束。（一般情況下，大約等 10 秒鐘。）
  9. 按壓 F5 ，再度啟動應用程式。
  10. 確認 Contoso 食譜返回您關閉應用程式時的食譜畫面。
  11. 到偏好頁面並將記住我在哪兒切換成「關閉」（ off ）。
  12. 在查看食譜頁面的同時，從螢幕上方往下刷或按壓 Alt + F4 ，來再度關閉應用程式。
  13. 返回 Visual Studio 並等待處理程序結束。
  14. 按壓 F5 ，再度啟動應用程式。
  15. 確認應用程式回到起始頁面，而不是您上次查看的食譜配方。
  16. 返回 Visual Studio 並停止偵錯。

摘要

設定和偏好幾乎是每一個應用程式的重要組成要素。設定快速鍵提供了熟悉而且一致的模型來查看和編輯應用程式設定。在本實驗裡，您已經學習得知：應用程式可以透過設定窗格輕鬆自在地顯示內容。

您也學習得知： Windows 如何自動漫遊於使用者的偏好之間，只要您將它們儲存在 RoamingSettings 容器內。

打從實驗 1 到現在，我們已經走了相當長的一段路，但是，要做的事仍然很多。接下來，又是走向應用程式明星路的另一個重要步驟：「磚」和通知。

繼續下一個實驗 
  • Last updated on