Create extended splash screen in windows 8 app

Question

I'm working with a windows 8 app using javascript

I refer the MSDN tutorial for creating extended splash screen using javaScript. Extended splash screen working fine. But the thing is I can't remove it and start the app. Thank you for any help.

This is my defaulf.js file.

(function () {
    "use strict";
    WinJS.Binding.optimizeBindingReferences = true;

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var nav = WinJS.Navigation;

var splash = null; // Variable to hold the splash screen object.
var dismissed = false; // Variable to track splash screen dismissal status.
var coordinates = { x: 0, y: 0, width: 0, height: 0 };

WinJS.Application.onerror = function (e) {
    console.error(e.detail.exception.message, e.detail.exception.stack);
    var dialog = new Windows.UI.Popups.MessageDialog(
    e.detail.exception.stack, e.detail.exception.message);
    dialog.showAsync().done();
    return true;
};

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = {
        "about": { title: "About", href: "/pages/settings/about.html"},
        "privacy": { title: "Privacy Policy", href: "/pages/settings/privacy.html"}          
    };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

app.addEventListener("activated", function (args) {
    WinJS.Namespace.define("GlobalNav", nav);
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

            // Retrieve splash screen object
            splash = args.detail.splashScreen;
            // Retrieve the window coordinates of the splash screen image.
            SdkSample.coordinates = splash.imageLocation;
            // Register an event handler to be executed when the splash screen has been dismissed.
            splash.addEventListener("dismissed", onSplashScreenDismissed, false);
            // Create and display the extended splash screen using the splash screen object.
            ExtendedSplash.show(splash);
            // Listen for window resize events to reposition the extended splash screen image accordingly.
            // This is important to ensure that the extended splash screen is formatted properly in response to snapping, unsnapping, rotation, etc...
            window.addEventListener("resize", onResize, false);
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        if (app.sessionState.history) {
            nav.history = app.sessionState.history;
        }
        args.setPromise(WinJS.UI.processAll().then(function () {
            document.body.classList.add("loaded");
            if (nav.location) {
                nav.history.current.initialPlaceholder = true;
                return nav.navigate(nav.location, nav.state);
            } else {
                return nav.navigate(Application.navigator.home);

            }
        }));
    }

});

function onSplashScreenDismissed() {
    // Include code to be executed when the system has transitioned from the splash screen to the extended splash screen (application's first view).
    SdkSample.dismissed = true;
    // Tear down the app's extended splash screen after completing setup operations here...
    // In this sample, the extended splash screen is torn down when the "Learn More" button is clicked.
    document.getElementById("learnMore").addEventListener("click", ExtendedSplash.remove, false);
    // The following operation is only applicable to this sample to ensure that UI has been updated appropriately.
    // Update scenario 1's output if scenario1.html has already been loaded before this callback executes.
    if (document.getElementById("dismissalOutput")) {
        document.getElementById("dismissalOutput").innerText = "Received the splash screen dismissal event.";
    }
}

function onResize() {
    // Safely update the extended splash screen image coordinates. This function will be fired in response to snapping, unsnapping, rotation, etc...
    if (splash) {
        // Update the coordinates of the splash screen image.
        SdkSample.coordinates = splash.imageLocation;
        ExtendedSplash.updateImageLocation(splash);
    }
}

WinJS.Namespace.define("SdkSample", {
    dismissed: dismissed,
    coordinates: coordinates
});

app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
    // that needs to persist across suspensions here. If you need to 
    // complete an asynchronous operation before your application is 
    // suspended, call args.setPromise().
    app.sessionState.history = nav.history;
};

if (Internet.isConnected()) {app.start();}
else {
    var internetError = Windows.UI.Popups.MessageDialog("Internet connection is not working properly", "Daily Mirror : internet Connection Error");
    internetError.showAsync().done();
}
})();

This is the extendedSplash.js file

(function () {
"use strict";
// Displays the extended splash screen. Pass the splash screen object retrieved during activation.
function show(splash) {
    var extendedSplashImage = document.getElementById("extendedSplashImage");
    // Position the extended splash screen image in the same location as the system splash screen image.
    extendedSplashImage.style.top = splash.imageLocation.y + "px";
    extendedSplashImage.style.left = splash.imageLocation.x + "px";
    extendedSplashImage.style.height = splash.imageLocation.height + "px";
    extendedSplashImage.style.width = splash.imageLocation.width + "px";
    // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.       
    var extendedSplashProgress = document.getElementById("extendedSplashProgress");
    extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";     
    // Once the extended splash screen is setup, apply the CSS style that will make the extended splash screen visible.
    var extendedSplashScreen = document.getElementById("extendedSplashScreen");
    WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

// Updates the location of the extended splash screen image. Should be used to respond to window size changes.
function updateImageLocation(splash) {
    if (isVisible()) {
        var extendedSplashImage = document.getElementById("extendedSplashImage");

        // Position the extended splash screen image in the same location as the system splash screen image.
        extendedSplashImage.style.top = splash.imageLocation.y + "px";
        extendedSplashImage.style.left = splash.imageLocation.x + "px";
        extendedSplashImage.style.height = splash.imageLocation.height + "px";
        extendedSplashImage.style.width = splash.imageLocation.width + "px";

        // Position the extended splash screen's progress ring. Note: In this sample, the progress ring is not used.
        /*
        var extendedSplashProgress = document.getElementById("extendedSplashProgress");
        extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";
        */
    }
}

// Checks whether the extended splash screen is visible and returns a boolean.
function isVisible() {
    var extendedSplashScreen = document.getElementById("extendedSplashScreen");
    return !(WinJS.Utilities.hasClass(extendedSplashScreen, "hidden"));
}

// Removes the extended splash screen if it is currently visible.
function remove() {
    if (isVisible()) {
        var extendedSplashScreen = document.getElementById("extendedSplashScreen");
        WinJS.Utilities.addClass(extendedSplashScreen, "hidden");            
    }
}

WinJS.Namespace.define("ExtendedSplash", {
    show: show,
    updateImageLocation: updateImageLocation,
    isVisible: isVisible,
    remove: remove
});
})();

and finally there is splash.html file

<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
    <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" />
    <!-- Optionally, add a progress ring. Note: In this sample, the progress ring is not used. -->
    <!--
    <progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
    -->
    <div id="extendedSplashDescription">
        <span id="extendedSplashText">The splash screen was dismissed and the image above was positioned using the splash screen API.</span>
        <br /><br />
        <button class="action" id="learnMore">Learn More</button>
    </div>
</div>

help me with example or guide me please... Thank you very much. This is working fine when I change start page to splash.html but app working fine with default.html

Answer 1

If I understand you correctly, you're not sure how to make the extended splash screen (splash.html) disappear and have the content in default.html appear, correct?

The key thing is how the extended splash screen is dismissed and how you get the app home page to show--the MSDN tutorial isn't particularly good at pointing out how this works.

There are two ways to approach the implementation here.

One is to have the content for your extended splash screen AND your app's home page as sibling elements in default.html, like this:

<body>
<div id="mainContent">
    <h1>This is the real start page</h1>    
    <p>Other content goes here.</p>
</div>

<!-- This div (declared last) will overlay the rest of the page initially; the elements within it will be
        repositioned according to the default splash screen layout, then animated or shown. -->
<div id="splashScreen">
    <p><span id="counter"></span></p>
    <img id="logo" src="/images/splashscreen.png" />
    <img id="title" src="/images/splashscreentitle.png" />
    <progress id="progress" class="win-ring win-large"></progress>
</div>
</body>

Because the second div overlays the first, that's the content that will be visible as the extended splash screen. When it's time to remove that splash screen, you can make that element hidden (as you are doing) or remove it entirely from the DOM (to free memory).

The second approach is to use page controls, where default.html hosts the PageControlNavigator and the first page to which you navigate is the extended splash screen page. When it's done its work, it then navigates to the app home page. (In this case, set WinJS.Navigation.history.current.initialPlaceholder to true beforehand if you want to not have the splash screen in the history, see my blog on http://kraigbrockschmidt.com/blog/?p=741.)

In your code, I see that you're using the navigator already, but I don't think it's doing what you want.

The bottom line is that you somehow have to navigate from splash.html to default.html, and I don't see where in your code you're doing anything like that. This is why having the ext. splash screen as part of default.html makes good sense, and I find that an easier way than trying to navigate page controls for this purpose. I have an ExtendedSplashScreen example in the preview of my second edition book (http://aka.ms/BrockschmidtBook2), Chapter 3 (but will be in an appendix in the upcoming second preview), that does this.