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