Application.PageControlNavigator didn‘t work with extendedSplash Screen Demo

Question

Demo: ttp://code.msdn.microsoft.com/windowsapps/Splash-screen-sample-89c1dc78/view/SourceCode

How to change data-win-control="WinJS.UI.HtmlControl" to data-win-control="Application.PageControlNavigator"?

Answer 1

So, I know this comes a little late but here's what I did in my app when I faced the same issue.

A little background first:

The way the navigation templates works, it's relying on having the PageControlNavigator control defined in the default.html page.

Since the controls defines the 'home' page once the app loads and the splash screen is removed, it navigates to the home page or last url following this code in the default.js file:

args.setPromise(WinJS.UI.processAll().then(function () {
    if (nav.location) {
        nav.history.current.initialPlaceholder = true;
        return nav.navigate(nav.location, nav.state);
    } else {                    
        return nav.navigate(Application.navigator.home);
    }
}));

The contract for windows store apps requires that the app loads in 5secs (or show a content in 5 secs) so the splash screen won't wait until you load all the data asynchronously that you have or whatever you're waiting to load before showing the home page, o you have to extend the splash screen to give the app time to load everything it needs.

So, the way I did it, and I don't know if it's the right way but it's working for me, is to make a function to check if the data is loaded, wait if not and once it's loaded I'm removing the splash screen and navigating to the home screen.

function countDown() {
    if (Data.isReady > 0) {
        ExtendedSplash.remove();

        return nav.navigate("/pages/home/home.html");
    }
    else {
        setTimeout(countDown, 5000);
    }
}

And in the promise you have from the template I changed it to this:

// Use setPromise to indicate to the system that the splash screen must not be torn down
// until after processAll and navigate complete asynchronously.
args.setPromise(WinJS.UI.processAll().then(function () {
    if (nav.location) {
        nav.history.current.initialPlaceholder = true;
            return nav.navigate(nav.location, nav.state);
    }
}));

This way, when the app is loading, it doesn't have a location to go to and the countDown function is in charge of redirecting to the home page once the data is loaded.

Again, I don't now if it's the "right" solution, but you don't lose the single-page navigation control and everything is working like a charm.

Hope it helps.