专栏首页Windows CommunityWindows 8.1 应用再出发 (WinJS) - 几种新增控件(2)

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 新增的控件介绍完了,希望对大家有所帮助,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Windows 8.1 应用再出发 (WinJS) - 几种新增控件(1)

    Windows 8.1 和 WinJS 引入了以下新控件和功能,分别是:AppBarCommand、BackButton、Hub、ItemContainer、...

    Shao Meng
  • 在Windows商店应用中使用浅色主题

    在开发商店应用时会遇到这样的情况,设计师给我们的设计是浅色背景/深色文本,而商店应用默认是深色背景/浅色文本。那我们需要在每个页面去显式声明背景色和前景色吗,这...

    Shao Meng
  • Extensions in UWP Community Toolkit - ViewExtensions

    概述 UWP Community Toolkit Extensions 中有一个为 View 提供的扩展 - View Extensions,本篇我们结合代码详...

    Shao Meng
  • 面对手机游戏,男女习惯大不同–信息图

    在传统印象里,女性玩家无疑属于稀有动物,即使在网游大行其道之后这个观念也只是稍有改观。如今,许多数据调查机构的报告却显示,随着手机游戏的日益崛起,女性玩家在游戏...

    小莹莹
  • OpenResty 的过去、现在和未来(下)

    这是春哥在去年 OpenResty 大会上的分享实录。满满的干货,我搭配 PPT 整理为三部分,分期发出来给大家。如果是有什么错漏,是我整理的问题。

    温铭@APISIX
  • 【Vue原理】Mixins - 源码版

    今天探索的是 mixins 的源码,mixins 根据不同的选项类型会做不同的处理

    神仙朱
  • Closed connection [connectionId{XXXX}] to 172.16.11.47:27017

    qubianzhong
  • Java 反射

    万物皆对象,类也是个对象。foo是Foo的实例对象,那么Foo又是谁的实例对象呢? 是java.lang.Class的对象。任何一个类都是其对象。

    许杨淼淼
  • QT程序在发布的时候应注意的地方

    ---恢复内容开始---     我们用QT开发好的应用程序,如果要发布到其他计算机上运行怎么办呢?我们在用VC编程时,单独运行编译好的可执行文件时,经常会发现...

    24K纯开源
  • 更新表里的数据

    数据没变,提交更新,返回false; 数据变,提交更新,返回true; 返回的不是false 而是0 你要用恒等判断 是否提交失败

    公众号php_pachong

扫码关注云+社区

领取腾讯云代金券