Windows 8.1 應用再出發 (WinJS) - 幾種新增控件（2）

上篇我們介紹了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand、BackButton、Hub、ItemContainer，本篇我們接着來介紹 NavBar、Repeater 和 WebView。

1. NavBar

NavBar 是專門用于導航指令的應用欄控件，它是AppBar 的子類。可以完成簡單的連結，也可以完成多層連結。

類似XAML 中的 TopAppBar，NavBar 會在使用者通過邊緣滑動或按下 Win + Z 或滑鼠右鍵點選的時候，出現在頁面頂部。

NavBar 包括三個元件：

1） NavBar

2） NavBarContainer， 它包含了導航項，支援分頁和滾動等。在一個NavBar 中可以包含多個NavBarContainer 對象。

3） NavBarCommand， 就是我們剛才說的導航項，使用者單擊它可以導航到目标。

想要實作導航，可以設定NavBarCommand 的 location 屬性，使用者單擊時，可以導航到指定的位置。

另外可以定義NavBar 的 oninvoked 事件，并編寫事件處理程式來執行導航操作。下面看看代碼實作：

<div id="NavBar" data-win-control="WinJS.UI.NavBar">
        <div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Home',
                icon: WinJS.UI.AppBarIcon.home,
                location: '/html/home.html',
                splitButton: false
                }">
            </div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Your apps',
                icon: WinJS.UI.AppBarIcon.favorite,
                location: '/html/yourapps.html',
                splitButton: false
                }">
            </div>
        </div>
    </div>      

我們定義了NavBar，添加了兩個command：Home 和 Your apps。通過location屬性來定義導航目标，來看看效果圖：

下面來看看自定義oninvoked 事件的部分代碼：

<div id="useSplit" data-win-control="WinJS.UI.NavBar">
        <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Home', icon: 'home' }"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Favorite', icon: 'favorite', splitButton: 'true' }"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Your account', icon: 'people' }"></div>
        </div>
    </div>
    <div id="contactFlyout" data-win-control="WinJS.UI.Flyout" data-win-options="{ placement: 'bottom' }">
        <div id="contactNavBarContainer" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Family' }"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Work' }"></div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{ label: 'Friends' }"></div>  
        </div>
    </div>      

(function () {
    "use strict";
    var navcontainer;

    var page = WinJS.UI.Pages.define("/html/main.html", {
        ready: function (element, options) {
            document.body.querySelector('#useSplit').addEventListener('invoked', this.navbarInvoked.bind(this));
            document.body.querySelector('#contactNavBarContainer').addEventListener('invoked', this.navbarInvoked.bind(this));

            var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');
            if (navBarContainerEl) {
                this.setupNavBarContainer();
            } else {
                var navBarEl = document.getElementById('useSplit');
                navBarEl.addEventListener('childrenprocessed', this.setupNavBarContainer.bind(this));
            }
        },

        navbarInvoked: function (ev) {
            var navbarCommand = ev.detail.navbarCommand;
            WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status");
            document.querySelector('select').focus();
        },

        setupNavBarContainer: function () {
            var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');

            navBarContainerEl.addEventListener("splittoggle", function (e) {
                var flyout = document.getElementById("contactFlyout").winControl;
                var navbarCommand = e.detail.navbarCommand;
                if (e.detail.opened) {
                    flyout.show(navbarCommand.element);
                    var subNavBarContainer = flyout.element.querySelector('.win-navbarcontainer');
                    if (subNavBarContainer) {
                        subNavBarContainer.winControl.forceLayout();
                        subNavBarContainer.currentIndex = 0;
                    }
                    flyout.addEventListener('beforehide', go);
                } else {
                    flyout.removeEventListener('beforehide', go);
                    flyout.hide();
                }
                function go() {
                    flyout.removeEventListener('beforehide', go);
                    navbarCommand.splitOpened = false;
                }
            });
        }
    });
})();      

我們為NavBar 定義了三個command， Home、Favorites 和 Your account。其中Favorites 指令點選時，彈出contactFlyout，點選flyout 中的指令時，完成導航。

2. Repeater

Repeater 可以使用模闆從一組資料中生成HTML标記，使用它可以生成自定義清單和表格。Repeater 可以從List 中生成資料，來看看代碼示例：

<div id="exampleFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Example flyout}">
        <div>This is an example AppBarCommand of type 'flyout'.</div>
    </div>
    <div id="listTemplate" data-win-control="WinJS.Binding.Template">
        <li data-win-bind="textContent: title"></li>
    </div>
    <div data-win-control="WinJS.UI.Repeater"
         data-win-options="{data: RepeaterExample.basicList, template: select('#listTemplate')}"
         style="margin: 150px">
    </div>      

var basicList2 = new WinJS.Binding.List(
       [
           { title: "Item 1" },
           { title: "Item 2" },
           { title: "Item 3" },
           { title: "Item 4" }
       ]);

    WinJS.Namespace.define("RepeaterExample",
        {
            basicList: basicList2

        });      

我們在html 代碼中定義了Repeater 和它對應的模闆，并在js中定義了資料。來看看效果圖：

3. WebView

WebView 是用于顯示Web内容的控件。在WebView 出現之前，想要顯示網頁内容，需要使用iframe 元素。WebView 有這麼幾方面的優勢：

• 支援 HTML5  ，WebView 中的頁面可通路大部分HTML5 功能
• 改進的導航支援，WebView有單獨的曆史記錄堆棧，提供了包括前後導航以及重新加載目前頁等方法
• 支援在iframe 中無法使用的站點

WebView 支援使用 src 屬性，navigate 方法 或 navigateToString 方法導航到指定URI，我們分别來看看代碼實作：

1）通過src 屬性導航

<x-ms-webview id="webview" src="http://msdn.microsoft.com/">
    </x-ms-webview>      

我們看，WebView 對應 x-ms-webview 元素。來看看效果圖：

2）使用 navigate 方法 來加載存儲在應用的狀态檔案夾中的Html 内容，這需要ms-appdata:// 協定的配合

Windows.Storage.ApplicationData.current.localFolder.createFolderAsync("NavigateToState", Windows.Storage.CreationCollisionOption.openIfExists).then(function (stateFolder) {
        Windows.ApplicationModel.Package.current.installedLocation.getFileAsync("webViewContent.html").then(function (htmlFile) {
            return htmlFile.copyAsync(stateFolder, "webViewContent.html", Windows.Storage.CreationCollisionOption.failIfExists);
        });
    }).done(function () {
        document.getElementById("webview").navigate("ms-appdata:///local/NavigateToState/webViewContent.html");
    }, function (error) {
        WinJS.log && WinJS.log("Couldn't create HTML file in local app state folder", "sample", "error");
    });      

3）使用 navigateToString 方法來加載Html 字元串

var htmlString = "<!DOCTYPE html>" +
            "<html>" +
            "<head><title>HTML page</title></head>" +
            "<body>" +
                "<h1>Hi!</h1>" +
                "<p>使用navigateToString 加載的網頁</p>" +
            "</body>" +
            "</html>";
    document.getElementById("webview").navigateToString(htmlString);      

另外WebView 還支援通過 navigateWithHttpRequestMessage 方法向指定 URI 方法POST請求和HTTP标頭的方式來顯示網頁，這裡我們不做顯示。

好了，到這裡，我們就把Windows 8.1 和 WinJS 新增的控件介紹完了，希望對大家有所幫助，謝謝。