Continuing with Part 7 of building WinRT applications with HTML and JavaScript. You can find earlier installments at their respective links: Part 1 – Part 2 - Part 3- Part 4- Part 5- Part 6. If you are interested in the source code for the TweetScan application, you can get it off of GitHub. Make sure you sign up for How to develop a Windows 8 app in 30 days from Generation App.
Watch video here
Snapped view is one of the key requirements for any Windows 8 Store application. You app must support Snapped view to get into the Store. As a result, supporting Snap is one of the most important features to think about when building an application. It is so important, you should have Snap support in the back of your head with each page you add to your app. Consider how you will support Snap as you layout and develop your UX.
You may not be familiar with Snap, then here is a quick introduction. In Windows 8, your application usually controls the entire screen. However, users can drag your app into what is called a Snap View. A Snapped application lives in a smaller piece of screen real estate positioned on either the right or left edge of the screen. See the image at right for an idea of what this would look like. When in this snapped state, the frame your application resides in is only 320px wide. As a result, you should change your UX to work better in this vertical environment, not to mention smaller one. A simple example of how you make things better for your user is to layout your content in a vertically scrolling manner, rather than the typical horizontal one used by a full screen Windows 8 application.
What kind of functionality you provide in Snap is up to you. Obviously, the more functionality you can provide, the better the experience for the user. A game, for example, may put up a Paused graphic with details about the game (score, level, etc.) since it may not be possible to show the game in such a small space and still be playable. In addition, an app in the Snapped state is not usually the app receiving the bulk of the user’s attention, so letting game play continue may not be the best idea. However, in an app like TweetScan, we can provide a lot of functionality in a small amount of space. Things you will need to consider include layout, changes to templates, appbar functionality, what data recalls are required for the new view, etc. We do not cover all of these scenarios in this video, but will be talking about them as we get further into the series.
When thinking about Snap view for you app, you have two broad categories of things you have to deal with. The changes to your code and the changes to you UX. Dealing with code is fairly easy. To detect the change in view, all you need to so is hook into the resize event on the window object:
window.addEventListener('resize',onResize,false);
Inside your event handler, you can easily detect the current view state with:
var currentViewState = Windows.UI.ViewManagement.ApplicationView.value;
This returns an integer value. A set of enums are provided so you don’t have to remember which integer matches which view state at Windows.UI.ViewManagment.ApplicationViewState.
In TweetScan, we need to change the layout renderer for our listView control. This is by far the most common action for Windows 8 HTML/JavaScript applications. In the demo app, we handle the resize event with the following funciton:
var lastViewState;
function onResize(e) {
var view = gridView1.winControl;
var currentViewState = Windows.UI.ViewManagement.ApplicationView.value;
var snapped = Windows.UI.ViewManagement.ApplicationViewState.snapped;
if (currentViewState === snapped) {
view.layout = new WinJS.UI.ListLayout();
}
else if (lastViewState === snapped && currentViewState !== snapped) {
view.lastViewState = new WinJS.UI.GridLayout();
}
}
The UX changes are handled using CSS3 media queries. There are several included already for the default templates. Just look in default.css and you will find the @media screen and (-ms-view-state: snapped) media query. Inside, you will find several rules that change the layout of the .fragment class and some of its child elements. For example, the header at the top of the page has the following rule applied:
.fragment header[role=banner] {
-ms-grid-columns: auto 1fr;
margin-left: 20px;
}
This rule gets ride of the 120px column that serves as a gutter for the page title and replaces it with a collapsed column and a 20px margin. This gets the page title into a much more natural position for the small width of the Snap view.
In TweetScan, we update home.css to that the @media screen and (-ms-view-state: snapped) query looks like this:
.homepage section[role=main] {
margin-left: 20px;
}
#gridView1 {
width: 300px;
}
.tweet {
width: 280px;
margin-bottom: 5px;
}
The rule for homepage was provided for us by the default template. It places a matching 20px “gutter” on the main section of the app. The #gridView1 rule sets the width of the listView control to the remaining width of the Snap window (320px – 20px gutter = 300px). This ensures that the listView’s scroll bar will be visible to the user. the .tweet rule changes the width of the tweet template to fit into the new window (500px to 280px) and puts some space between each tweet with a bottom margin. With these changes, we now have a nice vertical list of all the tweets for our current search. If the user changes TweetScan to full, filled, or portrait mode, we will go back to our grid layout when the resize event is processed.
Subscribe