PageControl实现页面之间的跳转

win8 store app并不像iOS app那样有一条链串联起整个的程序框架,通过这段时间的学习才深有体会,今天一整天都在了解学习win8应用中页面的跳转和如何返回等,发现,它并不像iOS那样,在两个ViewController之间,按住control键拖动到鼠标到目标ViewController就可以完成一个跳转,在WinJS里,要实现这个,是需要做很多事情的.

一开始看着MSDN给的一些demo,看着那些代码,初一看,觉得好麻烦,而且完全看不懂,接着,边查看WinJS的API文档,边看代码,自己又动手做了一下,突然就明白, 发现,win8应用的这种页面转换到的方法其实是很不错的一种方法,好了,废话少说,开始进入正题.

之前说过一些html的跳转方法,就是用window.location.reload(url)方法，在这里完全没用，虽然，它可以简单的实现跳转到另一个html，但是如果要返回呢，想着在重新reload一下不就行了吗？不，这是完全行不通的。就比如在之前的文章中提到的，我的第一个html里面嵌入了一个html，跳转之后，在跳转后的也能写个backbutton想着再重新reload第一个html，然后发现，嵌入的html就不见了，这个我也不去深究原因，行不通就换别的办法。

终于，WinJS的PageControl帮我解决了这个问题，原理很简单，以默认的html为基底,然后在上面嵌入新的html,准确的说,是一个page,然后,page之间的转换跳转可以用WinJS.UI.Animation来实现.

首先在底html文件里定义一个div:

<div id="contentHost"></div>

在默认生成的js文件里面,在程序启动时将第一个要显示的html嵌入到底html,即在函数onactivated里面实现:

args.setPromise(WinJS.UI.processAll().then(function () {
                WinJS.Navigation.navigate(url);
            }));

最重要的,给WinJS.Navigation添加事件监听器,没有这一步,你嵌入的html是没办法显示出来的

WinJS.Navigation.addEventListener("navigated", function (eventObject) {
        var url = eventObject.detail.location;
        var host = document.getElementById("contentHost");
        // Call unload method on current scenario, if there is one
        host.winControl && host.winControl.unload && host.winControl.unload();
        WinJS.Utilities.empty(host);
        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {
            WinJS.Application.sessionState.lastUrl = url;
        }));
    });

接着,在嵌入的html中加个button,在与其对应的js文件中实现响应事件,即跳转到下一个界面

js文件中最重要的一步是以当前html的url创建一个Page,这一步是很重要的,不然的话,当前html的里的控件无法响应事件.

var page=WinJS.UI.Pages.define(url,members);

member是即page里面包含的成员,button的响应可以在members里实现:

button.addEventListener("click", function () {

                WinJS.UI.Animation.exitPage(mainDiv, null).done(function () {
                    WinJS.Navigation.navigate(url);
                });
            });

WinJS.UI.Animation.exitPage是一个page退出动画,mainDiv就是你要退出的内容,然后将下一个要显示的url嵌入,这里还可以设置页面交替的动画,这里设置为null,即为默认值,设置的话,可以按照如下格式:

{top:string,left:string,rtlflip:true||false }

string是像素,即动画开始的起始位置,rtlflip为true即动画是从右到左实现.更多的用途会在以后更深入的学习研究

至此,跳转到下一页面后,可以设置一个backbutton,响应事件和上面说过的button一样,这样,就完成了进入下一界面,而且可以返回的功能了

就个人的理解,WinJS的这种机制是很不错的,首先,页面跳转的流畅性自不用说,再就是它的跳转不会说像iOS那样会产生一个新的ViewController压入到栈里,耗费内存,它其实就只是page之间的交替互换.