快速入門：針對配置和瀏覽使用 Hub 控制項

發行項
12/11/2015

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

了解如何將 Hub 控制項新增到使用 JavaScript 的 Windows 市集應用程式。

為協助您的應用程式選擇最佳的瀏覽模式，請參閱瀏覽模式。

另外也可以參閱應用程式功能，從開始到完成系列中的單層瀏覽和階層式瀏覽模式。

先決條件

指示

1. 使用空白應用程式範本建立新專案

啟動 Microsoft Visual Studio Express 2013 for Windows。
在 [起始頁] 索引標籤，按一下 [新增專案]****。隨即開啟 [新增專案] 對話方塊。
在 [已安裝的]**** 窗格中，展開 [範本] 和 [JavaScript]****，然後按一下 [Windows 市集應用程式] 範本類型。適用於 JavaScript 的可用專案範本會顯示在對話方塊的中央窗格中。
在中央窗格中，挑選 [空白應用程式]**** 專案範本。
在 [名稱] 文字方塊中，輸入中樞示範。
按一下 [確定] 來建立專案。

2. 將中樞定義新增到專案

您可以在 HTML 頁面中以宣告方式定義 Hub 控制項，或在執行階段使用隨頁面載入的 JavaScript 來定義。這個範例會在 HTML 標記中以宣告方式建立中樞。

開啟 default.html，在 body 元素內插入下列 HTML。中樞應該是 body 元素的直屬子系。建議在文件物件模型 (DOM) 中，將全域命令放在關聯式命令前面，以便在使用者調整應用程式大小時取得最佳配置效果。

此範例會以宣告方式，新增具有三個 HubSection 物件的中樞，其中第二個 HubSection 是 Hub 中第一個可見的區段。為 Hub 和 HubSection 控制項，使用預設樣式或撰寫您自己的階層式樣式表 (CSS)。


<div data-win-control="WinJS.UI.Hub" id="hub"
    data-win-options="{
        sectionOnScreen : '1',
    }">
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Ancient Greek authors',
            isHeaderStatic: true
        }">
        My favorite authors of Ancient Greek (Homeric, Attic, Ionic):
        <ul>
            <li>Homer</li>
            <li>Herodotus</li>
            <li>Thucydides</li>
            <li>Plato</li>
        </ul>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'Latin authors'
        }">
        <div>
            My favorite authors of works in Classical Latin:
            <ul>
                <li>Marcus Tullius Cicero</li>
                <li>Caius Julius Caesar</li>
                <li>Publius Virgilius Maro (Virgil)</li>
                <li>Titus Livius Patavinus (Livy)</li>
            </ul>
        </div>
    </div>
    <div data-win-control="WinJS.UI.HubSection"
        data-win-options="{
            header: 'English authors',
            isHeaderStatic: false
        }">
        My favorite authors of works in Middle and Early Modern English: 
        <ul>
            <li>Geoffrey Chaucer</li>
            <li>William Shakespeare</li>
            <li>Christopher Marlowe</li>
        </ul>
    </div>
</div>

3. 新增程式碼以處理中樞事件

此範例中的其中兩個 HubSection 物件包含動態標頭：根據預設，當您按一下時，它們會引發 Hub.onheaderinvoked 事件。若要設定動態或靜態標頭，請使用 HubSection.isHeaderStatic 屬性，這個屬性預設會設為 false。

在 Hub.onheaderinvoked 事件處理常式中，可以從事件引數中擷取 HubSection 物件或叫用的 HubSection 物件的索引 (索引是以零起始)。

下列範例會將處理常式新增到 Hub.onheaderinvoked 事件。處理常式會取得叫用 HubSection 的索引，並設定 Hub.sectionOnScreen 值。

在 [方案總管] 中，從 js 資料夾開啟 default.js。

在 default.js 檔案中，以此程式碼取代現有程式碼。


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var hub;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }

        // Get the hub control from the HTML page and
        // add a handler to the headerInvoked event.
        hub = WinJS.Utilities.query("#hub")[0];
        hub.winControl.onheaderinvoked = onHeaderInvoked;
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    // When a HubSection header is clicked, call this code to
    // make the section completely visible within the hub.
    function onHeaderInvoked(args) {
        hub.winControl.sectionOnScreen = args.detail.index;
    }

    app.start();
})();

將執行階段環境設為 [模擬器]****，然後按 F5 執行應用程式。
變更模擬器視窗的解析度，讓中樞頁面移動瀏覽到左邊時，最後一個中樞區段會部分移到畫面之外。
按一下中樞中最後一個部分顯示的區段標頭，以移動瀏覽中樞頁面，如此一來，就能完整顯示中樞區段。

4. 在中樞應用程式內瀏覽

中樞應用程式遵循階層式瀏覽模式。如需 Windows 市集應用程式中瀏覽使用者經驗的其他資訊，請參閱瀏覽模式。

在包含大型內容集合或許多不同內容區段供使用者探索的應用程式中，您通常希望為使用者提供一種方式，讓他們能夠以瀏覽到這裡的相同方式快速向後瀏覽。中樞應用程式中的頁面和區段標題可以裝載 BackButton 控制項。每個頁面都可以裝載返回按鈕並使其保持隱藏狀態，直到您從其他頁面瀏覽到該頁面時，才會在頁面上顯示返回按鈕。您可以在頁面的 HTML 中以宣告方式建立 BackButton 控制項，或者在執行階段使用 JavaScript 來建立。

BackButton 控制項不需要您執行許多工作。事實上，大部分與返回按鈕的瀏覽功能相關聯的程式碼都內建於適用於 JavaScript 的 Windows Library (WinJS) 平台中。您只需要在 HTML 標記中宣告該控制項即可，如下所示。

<!DOCTYPE html>
<html>
<head>
    <title>home</title>
</head>
<body>
    <header role="banner">
        <button data-win-control="WinJS.UI.BackButton"></button>
        <h1 class="titlearea">Home</h1>
    </header>
</body>
</html>

不需要設定樣式，BackButton 控制項會顯示於頁面標題上方的個別區塊中。若要產生隨標題內嵌顯示返回按鈕的 Windows 樣式，您必須在專案中新增一些自訂的 CSS。具體來說，您必須在父元素 (<section> 標記) 內建立格線，以並排方式排列這兩個元素。

在 default.css (css 資料夾中) 新增下列 CSS 程式碼，以調整頁面上 BackButton 控制項和標題的配置。

#contenthost {
    height: 100%;
    width: 100%;
}

header[role=banner] {
    display: -ms-grid;
    -ms-grid-columns: 37px 83px 1fr;
    -ms-grid-rows: 1fr;
}

    header[role=banner] button {
        -ms-grid-column: 2;
        margin-top: 57px;
    }

    header[role=banner] h1 {
        -ms-grid-column: 3;
        margin-top: 37px;
    }

摘要

在這個快速入門中，您新增了一個具有三個 HubSection 物件的 Hub 控制項。您也新增了一個簡單的處理常式函式到 Hub.onheaderinvoked 事件。

而且，還將 BackButton 控制項新增到應用程式中的每一個頁面。