Dec
21
2012

Build Your Game Today!

imageI have recently acquired GameMaker by Yo Yo Games for cross-platform game development. Among the supported platforms are Windows 8 and Windows Phone 8!

This gaming tool allows anyone with decent computer skills to develop a game rapidly. I recently lead  a group of students (many who had never written a single line of code before) to create a simple game in one hour. I could not believe how much the students accomplished in such a short period of time.

I highly recommend GameMaker, and suggest you start creating your game today! There is a free version of GameMaker available to download now.  However, I strongly suggest that you buy GameMaker:Studio Professional while it is 50% off (offer ends January 4th 2013).

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Dec
11
2012

Microsoft DevRadio: Media Capture

To play video, hover above and press play button.

Abstract: win8genapp30
Michael Palermo and Jeremy Foster are back again to demonstrate how to use media capture via codeSHOW.

Watch previous episodes here...
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Dec
4
2012

Microsoft DevRadio: Promises

To play video, hover above and press play button.

Abstract: win8genapp30
Michael Palermo and Jeremy Foster discuss the role of promises and demonstrate via codeSHOW.

Watch previous episodes here...
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Dec
3
2012

Microsoft DevRadio: Storage

To play video, hover above and press play button.

Abstract: win8genapp30
In this episode, Michael Palermo welcomes fellow evangelist Jeremy Foster to the show to discuss storage options for Windows Store apps. Check out codeSHOW featured in this episode!

Watch previous episodes here...
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Nov
19
2012

Microsoft DevRadio: Adding an App Bar

To play video, hover above and press play button.

Abstract: win8genapp30
In this episode, Michael Palermo shows how easy it is to add an application bar to your app!

Next Steps:
Step #1 – Download Windows 8 and Windows 8 SDK
Step #2 – Download Visual Studio Express for Windows 8
Step #3 – Start building your own Apps for Windows 8

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Developing for Windows 8 in 1/2 the time!

Watch previous episodes here...
    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
30
2012

Microsoft DevRadio: CSS3 Animations

To play video, hover above and press play button.

Abstract: win8genapp30
Michael Palermo is back for an episode and shows us how to implement CSS3 animations into Windows Store apps!

Next Steps:
Step #1 – Download Windows 8 and Windows 8 SDK
Step #2 – Download Visual Studio Express for Windows 8
Step #3 – Start building your own Apps for Windows 8

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Developing for Windows 8 in 1/2 the time!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
22
2012

Microsoft DevRadio: Using Event Handlers

To play video, hover above and press play button.

Abstract: win8genapp30
In today's episode, Michael Palermo shows how easy it is to attach event handlers in JavaScript. Watch this short demo to see the various techniques to do it!

Next Steps:
Step #1 – Download Windows 8 and Windows 8 SDK
Step #2 – Download Visual Studio Express for Windows 8
Step #3 – Start building your own Apps for Windows 8

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Developing for Windows 8 in 1/2 the time!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
8
2012

Microsoft DevRadio: Developing for Device Features

To play video, hover above and press play button.

Abstract: win8genapp30
Ever wonder how you can develop for device features you really like even though your personal device doesn’t support it? Well in this episode, Michael Palermo shows you the power of the Simulator in Visual Studio and how you can test features for various devices.

Next Steps:
Step #1 – Download Windows 8 and Windows 8 SDK
Step #2 – Download Visual Studio Express for Windows 8
Step #3 – Start building your own Apps for Windows 8

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Developing for Windows 8 in 1/2 the time!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
2
2012

Microsoft DevRadio: Media Queries

To play video, hover above and press play button.

Abstract: win8genapp30
In today’s episode Michael Palermo will show you how to manage your programs to work in different layouts via Media Queries. If you need to know how to control what needs to be done in various layouts – Portrait, landscape, snap-view, etc. this short how-to video is just for you.

Next Steps:
Step #1 – Download Windows 8 and Windows 8 SDK
Step #2 – Download Visual Studio Express for Windows 8
Step #3 – Start building your own Apps for Windows 8

Subscribe to our podcast via iTunes, Zune, or RSS

If you're interested in learning more about the products or solutions discussed in this episode, click on any of the below links for free, in-depth information:

Websites:

Developing for Windows 8 in 1/2 the time!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Oct
2
2012

JavaScript for Windows Store Apps: View States

Creating an application for the Windows Store requires forethought to a number of considerations – one of which is how will you want your app to appear when seen in different view states.

When your application is running full screen in Windows 8, it will be in either landscape or portrait orientation.  When the orientation is landscape mode, two additional views are possible: snapped or fill.  A snapped view is docked either on the right or left side of the screen, with a width of 320px.  The fill view is the larger remaining portion of the screen when another app is in snapped view. 

Note Snapped and fill options are only available when the screen resolution is a minimum of 1366 x 768 and supporting wide screen (16:9) aspect ratio.

When developing apps using JavaScript, you have two main ways to manage the view states in your apps:  Programmatically via JavaScript, or declaratively with CSS3 Media Queries.  It is recommended that you use media queries to manage view state changes.  However, there are times when you will need to respond to a view state change in code, and that is going to be our focus in this post.

What is Your Current View?

The Windows.UI.ViewManagement namespace provides some classes and enumerations for managing an applications view.  The ApplicationView class can be used to determine the applications current view state by calling the value property.  The return type of value is numeric, and maps to the ApplicationViewState enumeration.  Armed with both, the following code shows a helper method for returning a string with the current view state name:

var appView = Windows.UI.ViewManagement.ApplicationView;
var viewStates = Windows.UI.ViewManagement.ApplicationViewState;

function getViewStateName(viewState) {
    viewState = viewState || appView.value;
    var vs;
    switch (viewState) {
        case viewStates.fullScreenLandscape: // 0
            vs = "FullScreenLandscape";
            break;
        case viewStates.filled:              // 1
            vs = "Filled";
            break;
        case viewStates.snapped:             // 2
            vs = "Snapped";
            break;
        case viewStates.fullScreenPortrait:  // 3
            vs = "FullScreenPortrait";
            break;
        default:
            vs = "Unknown";
            break;
    }
    return vs;
}

The above code is useful for determining what the current view state is.  What about being notified when a view state change occurs?  One way to accomplish this is by responding to the resizing of the window as seen here:

// manage view state in anonymous handler
window.addEventListener("resize", function(){ }); 

The above line of code would allow you to write code in the anonymous function to query the applications view state and respond accordingly.

If you happen to be using Page Controls you are also likely using the PageControlNavigator, which is a class defined in a navigator.js file included in Visual Studio projects that support single-page navigation model.  Let’s look under the hood of PageControlNavigator, particularly when it responds to the application resizing:

_resized: function (args) {
    // if a page control exists and has updateLayout defined
    if (this.pageControl && this.pageControl.updateLayout) {
        this.pageControl.updateLayout.call(
            this.pageControl,  // instance of pageControl
            this.pageElement,  // element containing page 
            appView.value,     // current view state
            this.lastViewstate // previous view state
        );
    }
    // capture view state
    this.lastViewstate = appView.value;
},

The above snippet of code shows what the PageControlNavigator does when it responds to resizing.  The code checks to see if the current page control has defined an updateLayout function, and if it has, it calls it with parameters useful for interrogating.  Now let’s look at an example of an updateLayout function inside a page control:

updateLayout: function (element, viewState, lastViewState) {
    /// <param name="element" domElement="true" />

    // TODO: Respond to changes in viewState.
    pageTitle.innerText = getViewStateName(viewState);
}

In the example above, an element with the ID of “pageTitle” sets it’s text to equal the response of the helper method shown previously – which returns a string with the current view state name.

Responding to a Different View

Now that we have established where to write code when the view changes, it is now time to focus on what you might do in that response.  Suppose you have a ListView control on the page that displays items in full screen mode like so:

SNAGHTML1e5e652d

Now when going to snapped view, it looks like this:

image

Notice in snapped view the scroll bar is still moving horizontally.  What if we want the list to scroll vertically when in snapped view?  This is where a few lines of code can make the difference to improve the user experience.

The ListView has a layout property that allows you to change from a horizontal grid to a vertical list.  When a view state change occurs, the following code conditionally switches the layout:

// viewStates is Windows.UI.ViewManagement.ApplicationViewState;
if (viewState == viewStates.snapped) {
    // vertical scrolling list of data
    list.layout = new WinJS.UI.ListLayout();
} else {
    // horizontal scrolling grid of data
    list.layout = new WinJS.UI.GridLayout();
}

The code above (written inside the updateLayout function) changes a ListView control with an ID of “list” to switch to a different layout if the view state is snapped, otherwise it reverts to the original grid layout.  Doing this along with some tweaks to CSS via media queries (such as adjusting margins) results in the improved UI when in snapped view:

image

The content can now be scrolled vertically!

Embrace a Different Point of View

No doubt you will enjoy being a user of applications running on Windows 8.  One of the features that is sure to be used by multi-tasking enthusiasts is running apps in snapped & filled modes.  Make sure you when you develop apps for the Windows Store, you create a compelling UI for each view.  Also make sure to take advantage of all the resources available at Generation App!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives

Team Blogs

Download OPML file OPML