Windows 8 Fragment Navigation

by sunil ravulapalli /13. January 2012 17:57 /windows8 /Comments (0)

This code was tested on Windows 8 developer preview and may be outdated by the time future versions are released.

The contents of default.html are as show below. Just include a div called "contentHost".

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TTips</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="winjs/js/base.js"></script>
    <script src="winjs/js/ui.js"></script>
    <script src="winjs/js/binding.js"></script>
    <script src="winjs/js/controls.js"></script>
    <script src="winjs/js/animations.js"></script>
    <script src="winjs/js/wwaapp.js"></script>
    <!-- TTips references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
    <h1>Traffic Tips</h1>
    <div id="contentHost">
        
    </div>
  
</body>
</html>

In default.js, include the navigated as it is. Don'f forget to include this line WinJS.Navigation.addEventListener('navigated', navigated); as shown. When onmainwindowactivated all you have to do is call WinJS.Navigation.navigate('main.html').

(function () {
    'use strict';
    // Uncomment the following line to enable first chance exceptions.
    // Debug.enableFirstChanceException(true);

    document.addEventListener("DOMContentLoaded", function () {
        WinJS.UI.processAll();
    }, false);

    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                    WinJS.Navigation.navigate('main.html');
        }
    }

    function navigated(e) {
        WinJS.UI.Fragments.clone(e.detail.location, e.detail.state)
            .then(function (frag) {
            var host = document.getElementById('contentHost');
            host.innerHTML = '';
            host.appendChild(frag);
            document.body.focus();

            WinJS.Application.queueEvent({
                type: 'fragmentappended',
                location: e.detail.location,
                fragment: host,
                state : e.detail.state
                });

        });
    }

    WinJS.Navigation.addEventListener('navigated', navigated);
    WinJS.Application.start();
})();
blog comments powered by Disqus