HTML and CSS Reference
In-Depth Information
Detecting view state changes
The next step is adding more to the SnapMe application to make it capable of detecting view state
change and reacting accordingly. For now, you will only record the new view state and display it to
the user via the currentViewState label.
Any Windows Store application written using JavaScript and HTML receives notification of view
state changes via the onresize event on the window object. The event is fired whenever the window
that hosts the application is resized. In Windows 8, this can only happen when the device is rotated
and the orientation changes or one application is snapped or unsnapped. To receive the onresize
event, you need to register a handler. The best place to do so is the SnapMeApp.init function. Here's
the final version of the function's code:
SnapMeApp.init = function () {
window.onresize = addEventListener('resize', SnapMeApp.onResize, false);
SnapMeApp.Current = new SnapMeState();
var buttonCounter = document.getElementById("buttonCounter");
buttonCounter.addEventListener("click", SnapMeApp.add);
SnapMeApp.refresh();
}
Subsequently, you also need to add a new SnapMeApp.onResize function at the bottom of the
SnapMeApp.js file.
SnapMeApp.onResize = function (e) {
// Detect the current view state and saves it as a string
SnapMeApp.Current.currentViewState = SnapMeApp.getViewStateForDisplay();
// Refresh the user interface
SnapMeApp.refresh();
}
As mentioned, the current view state is returned as an integer by a system provided global object:
the Windows.UI.ViewManagement.ApplicationViewState enumeration. The enumeration counts four
possible values—one for each of the possible view states. Four readymade constants make it easy for
developers to make checks against a particular view state. The constants are as follows:
Windows.UI.ViewManagement.ApplicationViewState.snapped
Windows.UI.ViewManagement.ApplicationViewState.filled
Windows.UI.ViewManagement.ApplicationViewState.fullScreenLandscape
Windows.UI.ViewManagement.ApplicationViewState.fullScreenPortrait
The following code transforms the code that indicates a view state into a displayable text.
The following code also belongs to the SnapMeApp.js file.
Search WWH ::




Custom Search