Question

In Windows 8 when the view state changes from snapped to filled to full screen;

How can I catch these events and respond to them with WinJs ?

Answer 1

See this blog post on how to catch view state changes. Basically the recommendation boils down to catching the resize event and then checking the view state like this:

 window.addEventListener("resize", onResize);


function onResize() { 
    // Update view for the new window size 
    updateView(); 
} 

function updateView() { 
    // Query for the current view state 
    var myViewState = Windows.UI.ViewManagement.ApplicationView.value; 

    var viewStates = Windows.UI.ViewManagement.ApplicationViewState; 
    var statusText; 

    // Assign text according to view state 
    switch (myViewState) { 
        case viewStates.snapped: 
            statusText = "This app is snapped!"; 
            break; 
        case viewStates.filled: 
            statusText = "This app is in filled state!"; 
            break; 
        case viewStates.fullScreenLandscape: 
            statusText = "This app is full screen landscape!"; 
            break; 
        case viewStates.fullScreenPortrait: 
            statusText = "This app is full screen portrait!"; 
            break; 
        default: 
            statusText = "Error: Invalid view state returned."; 
            break; 
    }

If you look in the Microsoft Visual Studio Express 2012 RC for Windows 8 template for Javascript you will see something like this in navigator.js:

window.onresize = this._resized.bind(this);

_resized: function(args) {
    if (this.pageControl && this.pageControl.updateLayout) {
        this.pageControl.updateLayout.call(this.pageControl, this.pageElement, appView.value, this.lastViewstate);
    }
    this.lastViewstate = appView.value;
},

//*page*.js

updateLayout: function (element, viewState, lastViewState) {
     /// <param name="element" domElement="true" />
     var listView = element.querySelector(".itemslist").winControl;
     if (lastViewState !== viewState) {
          if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
               var handler = function (e) {
               listView.removeEventListener("contentanimating", handler, false);
               e.preventDefault();
          }
          listView.addEventListener("contentanimating", handler, false);
          var firstVisible = listView.indexOfFirstVisible;
          this._initializeLayout(listView, viewState);
          if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
                listView.indexOfFirstVisible = firstVisible;
           }
       }
   }
},

_initializeLayout: function (listView, viewState) {

    if (viewState === appViewState.snapped) {
        listView.layout = new ui.ListLayout();
    } else {
        listView.layout = new ui.GridLayout();
    }
},

According to this msdn page you can also use media queries when view state changes affect the CSS properties or layout specified in the CSS. For all other changes onResize should be used.