States of a Windows 8 application - Build Windows 8 Apps with HTML5 and JavaScript - page 182

When snapped, an application has only 320 pixels in width to render its user interface. The width is
at least three times larger in the majority of cases.
A golden rule of Windows Store applications can be quickly summarized as, “Be ready to do
something significant with about 320 x 760 pixels.”
Making the application reactive
Let's see now what an application should do in order to detect and possibly handle view state
changes. Create a new Windows Store application starting from the Blank App project template; you
can name this application SnapMe . Next, make all the preliminary changes to the project that you
did in all previous examples. This entails, for example, adding a header and footer, some styles to the
default.css file, and an application-specific script file. Let's call this new script SnapMeApp.js .
Introducing new practices for application development
In the previous chapters, you didn't pay much attention to the state of the application. All of the
exercises you did, in fact, essentially concerned stateless applications. Nearly any application does
have a state that is updated as the user works with the application. The state needs to be saved to a
permanent store when the application is suspended. In this way, you can easily restore it when the
application is resumed or re-launched thus giving the user a nice feeling of continuity.
With this goal in mind, you add the following code to the newly created SnapMeApp.js file:
var SnapMeApp = SnapMeApp || {};
var SnapMeState = WinJS.Class.define(function () {
var that = {};
that.currentViewState = SnapMeApp.getViewStateForDisplay();
that.total = 0;
return that;
});
SnapMeApp.init = function () {
SnapMeApp.Current = new SnapMeState();
var buttonCounter = document.getElementById("buttonCounter");
buttonCounter.addEventListener("click", SnapMeApp.add);
SnapMeApp.refresh();
}
The sample application you're going to build will just contain a button that increments a counter
variable when clicked. The SnapMeState is a class that describes the state of the application. The
property total in the class counts the number of clicks. The property currentState contains a message
referring to the current view state of the application.