Layouts and Tiles - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 62

removeClass("selected");
if (newIndex > -1 && newIndex < children.length) {
WinJS.Utilities.addClass(children[newIndex], "selected");
var appview = Windows.UI.ViewManagement.ApplicationView;
if (appview.value == Windows.UI.ViewManagement.ApplicationViewState.snapped){
appview.tryUnsnap();
}
}
});
WinJS.Utilities.children(targetElement).listen("click", function (e) {
ViewModel.State.selectedItemIndex = this.rowIndex - 1;
});
},
…

I have refactored this function so that rows are selected in response to changes in the
ViewModel.State.selectedItemIndex property and not just when the user clicks one of the
rows in the table element. This gives me an ideal opportunity to check the layout of the app
using the ApplicationView object. The effect I want is that if the user selects an item while
the application is snapped, then I change the layout to give myself enough space to show the
elements for editing the item details and viewing the web site of the appropriate store.
he ApplicationView.value property returns the current layout, represented by a value
from the ApplicationViewState enumeration. The values are snapped , filled , fullScreenPor-
trait , and fullScreenLandscape .
If my app layout is snapped, then I call the tryUnsnap method. This will unsnap the appli-
cation. The result seems to be a little inconsistent in the Consumer Preview release; sometimes
my application is switched to the filled layout and other times to the full-screen layout.

■ The ApplicationView object defines an addEventListener method that you can use
to register a handler for the viewstatechanged event. Your handler will be executed whenever
the layout changes.

Tip

Using Tiles and Badges
Tiles are the representation of your application on the Start menu. At their simplest, tiles are just
static icons for starting your app. However, with a little effort, you can use your tile to present
the user with a useful summary of your app's state and to draw their attention to activities they
may want to perform.
In the sections that follow, I demonstrate how to present information through the tile of my
example Metro app. There are two possible, and conflicting, goals when you create a live tile; you are
trying to either encourage the user to run your app or dissuade them from running it. If you are try-
ing to attract the user, then your tile becomes an ad for the experience, insights, or content you offer.
This is appropriate for entertainment apps or those that present external content such as news.
Dissuading the user from running an app may seem like a strange goal, but it can
significantly improve the user experience. Consider productivity apps as an example. I dread to
think the hours I have lost waiting for calendar or to-do apps to load, just so I can check where