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

To comfortably create a new task, you probably want to use a larger section of the screen. At the
same time, you can probably comfortably list tasks in the 320 pixels of the snapped view. So when
the user pushes some “Add new task” button, you programmatically unsnap the application. To
practice with the unsnap functionality, add the following code to the SnapMeApp.add function in the
SnapMeAdd.js ile.
SnapMeApp.add = function () {
SnapMeApp.Current.total++;
var viewState = Windows.UI.ViewManagement.ApplicationViewState;
if (SnapMeApp.Current.total >== 10 &&
viewState === Windows.UI.ViewManagement.ApplicationViewState.snapped) {
Windows.UI.ViewManagement.ApplicationView.tryUnsnap();
}
SnapMeApp.refresh();
}
In the example, when the counter reaches a threshold value of 10, the application will
automatically unsnap if it is currently snapped. If you call the tryUnsnap function from within a
non-snapped application, then the call results in a no-operation.
Use a proportional design
A proportional design refers to the idea that any content you display should be rendered using
sizes and measurements proportional to the width of the container element. Using a proportional
layout (also often referred to as liquid or fluid layout) automatically makes the application's content
potentially capable of adapting to any size.
In the context of a proportional layout, you won't give, say, a DIV element a fixed width—as we've
done in the code behind Figure 8-8. In general, though, there's no guarantee that any applications
can be given a fluid layout that renders well in a 320-pixel width.
In Windows Store applications, developers tend to employ a user interface that works by
listing and flowing elements. The underlying framework encourages this by the means of ad hoc
components such as ListView and SemanticZoom— components that you practiced with in the
previous chapter. Any content displayed through any of these components has a great chance to
render nicely in a snapped view.
Let's learn a bit more about fluid layouts.
Fluid layouts
The linchpin of fluid layouts is the ability of HTML elements (such as, images, containers, text) to
maintain their position and size relative to each other and the screen. In addition to proper resizing
and font scaling, another major issue of fluid layouts is how to manage excess space so that elements
can be allocated proportionately in the available area.