WinJSContrib.ExtendedSplashScreen (NuGet package)

To use this control, reference the javascript and css, and declare it in your default.html, after the navigation control:

add this in your header
<script src="/scripts/winjscontrib/mcnext.ui.extended-splashscreen.js"></script>
<link href="/css/winjscontrib/mcnext.ui.extended-splashscreen.css" rel="stylesheet" />

and add this at the end of body tag :

<div data-win-control="MCNEXT.UI.ExtendedSplash" data-win-options="{text: 'extended splash screen...'}"></div>


You should also plug it in default.js. To load data during the extended splash screen, you will have to provide a callback function that return a promise, like this :

var dataloading = function () {
    return WinJS.Promise.timeout(1000); //replace timeout by your data loading logic
}


Then, you must plug the splash screen in the activated event code like this :

var preparepage = WinJS.UI.processAll().then(function () {
    return MCNEXT.UI.Application.splashscreen.init(args);
});

args.setPromise(preparepage);

preparepage.then(function () {
    return MCNEXT.UI.Application.splashscreen.show(dataloading());
}).then(function appInitSuccess() {
    return WinJS.Navigation.navigate("/pages/home/home.html")
}, function appInitError(err) {
    return WinJS.Navigation.navigate("/pages/errorPage/errorPage.html");
}).then(function () {
    MCNEXT.UI.Application.splashscreen.hide();
});

Last edited Mar 17, 2014 at 5:47 PM by gleborgne, version 7