Windows 8 and HTML Part 7: Supporting Snapped View

8/27/2012 7:19:13 AM

Continuing with Part 7 of building WinRT applications with HTML and JavaScript.  You can find earlier installments at their respective links: Part 1Part 2Part 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.

IC536092You 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.

Tags:

HTML | Windows 8 | Blend

Windows 8 and HTML Part 6: Displaying Data with WinJS ListView

8/20/2012 2:51:04 PM

Continuing with Part 6 of building WinRT applications with HTML and JavaScript.  You can find earlier installments at their respective links: Part 1Part 2Part 3- Part 4- Part 5. If you are interested in the source code for the TweetScan application, you can get it off of GitHub.

 

Watch video here

In all honesty, it is easier to watch the video than for me to try and describe in text what I do in this installment. :)

Tags:

Blend | Windows 8 | WinJS

Message Based Navigation for WP7 MVVM Apps

4/26/2011 8:30:00 AM

Do you have an MVVM-based Windows Phone 7 application and you don't like having to hook into the RootFrame to navigate between pages? Do you wish you could just "ask" to navigate to a new view from your view model? One possible solution can be found in my new Channel 9 screencast.

Using an message bus to process navigation messages, view models can publish messages that are then handled by a separate navigation service, successfully decoupling your view model from the Windows Phone navigation service.

Get the finished source code here

Tags:

Blend | Windows Phone | Screencasts | MVVM

Three Reasons Developers Should Use Expression Blend

10/15/2010 1:42:41 PM

Lots of developers are building XAML-based applications today.  Be it WPF, Silverlight or Windows Phone 7, I have seen a lot of people struggle with certain tasks in Visual Studio that would be much easier if undertaken in Expression Blend.  Blend seems to be somewhat intimidating to developers, especially those that are already wrestling with learning XAML. Having spent time in both tools, I can tell you that Blend can make three things dramatically easier, and you should learn how to do these three things with Blend, even if you never use it for anything else.

See the video on Channel 9.

Download Demo Code

Tags:

Headlines | XAML | Silverlight | Blend

Powered by BlogEngine.NET 1.6.0.0
Theme by Mads Kristensen

About the author

Jeff Brand Jeff Brand

This is the personal web site of Jeff Brand, self-proclaimed .NET Sex Symbol and All-Around Good guy. Content from my presentations, blog, and links to other useful .NET information can all be found here.

E-mail me Send mail


Calendar

<<  July 2014  >>
MoTuWeThFrSaSu
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

View posts in large calendar

My Twitter Updates

XBOX
Live

Recent comments

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2014

Sign in