ViewState handler updateLayout method never get hit when handled within default.js

Question

I am starting with a blank template where I get a default.htm and default.js. I want to handle the event when app goes from full to snap or filled mode etc. I have added updateLayout method but when I add a breakpoint here, its never get hit. The break point on ready method is getting hit. What am I doing wrong here?

// For an introduction to the Page Control template, see the following documentation:  
// http://go.microsoft.com/fwlink/?LinkId=232511  
(function () {  
    "use strict";  
    WinJS.UI.Pages.define("default.html", {  
        // This function is called whenever a user navigates to this page. It  
        // populates the page elements with the app's data.  
        ready: function (element, options) {  

        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element, viewState, lastViewState) {

        }
    });


})();

Answer 1

It's a bit confusing, but updateLayout isn't actually an event handler.

The navigation framework, which is included when starting from other templates, handles a different event (window.onresize), and calls the updateLayout function if it exists. If you create a new project using the Navigation template, for example, and inspect navigator.js, you will see where the onresize event is handled, and the updateLayout function is called.

If you start from the Blank template, this functionality is not in place, so you would either need to (a) handle the onresize event, (b) add navigator.js to your project, or (c) use a different project template.