Migrating a Windows 8 Metro Style App from Consumer Preview to Release Preview

I’ve been working on a Windows 8 Metro Style App written, using JavaScript, I call Space Cadet.

SpaceCadet

All of the code samples I have previously posted were built on the Consumer Preview (CP) bits so I thought I would attempt at converting the app to the just announced Release Preview (RP).

I had to do a couple of things to get my app up and running on RP from the CP bits. I will break it down into the following five categories.

1 - Project Templates

I found the easiest way to save time was to start a new project and then copy/paste over my old files in. This ensured I didn’t miss any of the new project/solution settings..

2 – WinJS References

The WinJS library file has been updated from version 0.6 to 1.0.RC. I went into my default.html file and referenced the updated libraries.

CP:

     <!-- WinJS references -->

       <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">

       <script src="//Microsoft.WinJS.0.6/js/base.js"></script>

       <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

RP:

    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

3 – New Variable References

After the creation of the app reference to WinJS.Application there is a new activation variable referencing Windows.ApplicationModel.Activation as well as a call to WinJS strictProcessing. I made sure to include these in my default.js as well. The strictProcessing call will opt your app in to improved error handling.

CP:

    var app = WinJS.Application;

RP:

    var app = WinJS.Application;

    var activation = Windows.ApplicationModel.Activation;

    WinJS.strictProcessing();

4 – Application Activation

The way that the app.onactivated event is called has been changed. The checks for termination and resuming have now been created for you. I made sure to include the update checks.

CP:

    app.onactivated = function (eventObject) {

         if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

             //TODO: Load State

             WinJS.UI.processAll();

         }

     };

RP:

    app.onactivated = function (args) {

        if (args.detail.kind === activation.ActivationKind.launch) {

            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

                // TODO: This application has been newly launched. Initialize

                // your application here.

            } else {

                // TODO: This application has been reactivated from suspension.

                // Restore application state here.

            }

            args.setPromise(WinJS.UI.processAll());

        }

    };

5 – Handling ViewState (Snapped, Filled, Fullscreen)

The Event Handler for ViewState has been greatly simplified. Instead of worrying about viewstatechanged on the current ApplicationView we simply add a resize Event Handler to the window object.

Getting the current ViewState inside our Event Handler has been updated too. Instead of looking at the eventArgs we now grab the value of Windows.UI.ViewManagement.ApplicationView.

CP:

    Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("viewstatechanged", onViewStateChanged);

        function onViewStateChanged(eventArgs) {

            var viewStates = Windows.UI.ViewManagement.ApplicationViewState, msg;

            var newViewState = eventArgs.viewState;

            if (newViewState === viewStates.snapped) {

                showMenu('snapped');

            } else if (newViewState === viewStates.filled) {

                showMenu('filled');

            } else if (newViewState === viewStates.fullScreenLandscape) {

                showMenu('landscape');

            } else if (newViewState === viewStates.fullScreenPortrait) {

                //Currently not supported

            }

        }

RP:

    window.addEventListener("resize", onViewStateChanged);

     function onViewStateChanged(eventArgs) {

            var viewStates = Windows.UI.ViewManagement.ApplicationViewState, msg;

            var newViewState = Windows.UI.ViewManagement.ApplicationView.value;

            if (newViewState === viewStates.snapped) {

                showMenu('snapped');

            } else if (newViewState === viewStates.filled) {

                showMenu('filled');

            } else if (newViewState === viewStates.fullScreenLandscape) {

                showMenu('landscape');

            } else if (newViewState === viewStates.fullScreenPortrait) {

                //Currently not supported

            }

        }

Conclusion

Pretty easy update with only five things to think about. Hopefully this post will help aid you in converting over your own CP apps to RP! I’ll be doing additional testing over the next few days and will post anything I find here as well as any official update guidance that gets released.

If you are currently working on a Windows 8 app and want to get into the Windows Store I would love to hear about it! You may also want to check out my previous Windows 8 Metro Style Development Tips: