DaveDev

Help! Visual Studio 11 Beta Dark Theme incorrectly using White Background

Dave Isbitski — Mon, 07 May 2012 13:37:16 GMT

I ran across an issue with Visual Studio 2011 Ultimate Beta this morning and figured I would share the solution here with everyone. It may exist in Visual Studio 2011 Express Beta as well I just haven’t seen it yet myself.

The issue began when I installed Visual Studio 2011 Ultimate Beta and selected a Web Developer layout. I later went in and reset my settings to be the C# default layout. When I selected the Dark Theme (which I’ve now become quite used to) the UI itself switched fine but the code window still had the Light theme colors! Here is a screenshot to illustrate what I mean:

Doing a quick search I came across this excellent MSDN forums post that had a solution. The good news is that it is a known bug in the current Beta release and will be fixed before launch.

If this happens to you do the following:

1. Go to Tools | Import and Export Settings…
2. Import selected environment settings
3. Click “Next”.
4. Save your current settings if you wish, then click “Next”.
5. Scroll to the bottom of the list and find: "Dark Fonts and Colors" (under Recent Files)

Here is what the option looks like:

6. Select that settings file and then "Next" and "Finish."

This brought the dark theme back for me but upon selecting a bigger font size the IDE reset itself and went back to the Light Theme. I then closed Visual Studio, switched to Dark Theme (Tools –> Options – > Environment –> General –> Visual Experience –> Color Theme), changed the font size and everything was back to normal!

That should hopefully fix it for you!

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

Connecting to WCF RIA Services in a Windows 8 Metro Style App using Upshot.js and Knockout.js

Dave Isbitski — Wed, 02 May 2012 19:44:00 GMT

Overview

After messing around with KnockoutJS inside of Metro Style Apps I decided to dive a little deeper and see what Single Page Applications (particularly Upshot.js) could offer. I’ve gotten asked by more than a few developers how best to connect to their existing WCF RIA Services inside of Metro Style Apps. The approach I took here is one possible solution to help get your started.

For those not familiar with Upshot it is a JavaScript Library that allows you to connect to WCF RIA Services. It is by the same great wizards who wrote ASP.NET MVC4 Single Page Applications. and included already in Single Page App templates!

I also came across two really great posts you should check out that helped me get my head around things:

Upshot.js & Knockout.js: The HTML5 Client for WCF RIA Services

Building Single Page Apps with ASP.NET MVC4 - Part 1 - Basic Desktop Application

If you just want to grab the MVC4 and Windows 8 Metro Style App source code you can download them here:

Setting up the MVC 4 Environment

In order to get the MVC4 Single Page Application Templates I downloaded and installed Visual Studio 2011 Beta Ultimate (currently freely available here). I am running everything local: MVC4 Website is using IIS Express and the data is stored in SQL Server 2008 R2 Express( the one that comes with the Web Platform Installer). The code that I used was based of a great sample Bart Jolling wrote on his blog here.

The example is a simple Deliverytracker SIngle Page Application that looks like this:

To keep things simple I am running everything local with integrated security on IIS Express and SQL Server Express.

Also take note of our DomainModel as we will need to manually set up MetaData for this later.

public class Customer

{

    public int CustomerId { get; set; }

    public string Name { get; set; }

    public string Address { get; set; }

}

public class Delivery

{

    public int DeliveryId { get; set; }

    public virtual int CustomerId { get; set; }

    public virtual Customer Customer { get; set; }

    public string Description { get; set; }

    public bool IsDelivered { get; set; }

}

Setting up the Metro Style App to use Upshot.js

I then created a new JavaScript based Metro Style App like usual and selected the Tools – > Library Package Manager – > Manage NuGet Packages for Solution menu and searched for UpShot.

This will bring down all the required scripts you need for using Upshot.js in your application.

Because the package installer assumes we are inside of an MVC application it will write everything into a new /scripts folder. For simplicity sake I removed the /scripts folder and copied all of the JavaScript files into our existing /js folder.

Declaration and Initialization

We now reference these new JavaScript Libraries like usual inside of our default.html.

<script type="text/javascript" src="js/jquery-1.6.4.js"></script>

<script type="text/javascript" src="js/knockout.debug.js"></script>

<script type="text/javascript" src="js/knockout.js"></script>

<script type="text/javascript" src="js/DeliveriesViewModel.js"></script>

<script type="text/javascript" src="js/upshot.js"></script>

<script type="text/javascript" src="js/upshot.compat.knockout.js"></script>

<script type="text/javascript" src="js/upshot.knockout.extensions.js"></script>

<script type="text/javascript" src="js/arrayUtils.js"></script>

There are two additional scripts here arrayUtils.js and DeliveriesViewModel.js that I copied over from the MVC4 Single Page Application DeliveryTracker example mentioned previously. arrayUtils is a helper function we can leave as is and DeliveriesViewModel will be how we wire up to our service.

The next step was to take the code from our MVC4 app’s Home View located in /Views/Home/Index.cshtml and move it into our Metro Style App.

<section>

<div>

    <h3>Deliveries</h3>

    <button data-bind="click: saveAll">Save All</button>

    <button data-bind="click: revertAll">Revert All</button>

    <label>

        <input data-bind="checked: excludeDelivered" type="checkbox" />

         Exclude delivered items</label>

    <ol data-bind="foreach: deliveries">

        <li data-bind="css: { delivered: IsDelivered, 

                                        updated: IsUpdated}">

            <strong data-bind="text: Description"></strong>

            is for <em data-bind="text: Customer().Name"></em>

            <label><input data-bind="checked: IsDelivered"

                  type="checkbox"/>Delivered</label>

        </li>

    </ol>

    <h3>Customers</h3>

    <ul data-bind="foreach: deliveriesForCustomer">

        <li>

            <div>Name: <strong data-bind="text: key.Name"></strong>

            </div>

            <ul data-bind="foreach: values">

                <li data-bind="text: Description, 

                    css: { delivered: IsDelivered,

                             updated: IsUpdated}">                

                </li>

            </ul>

        </li>    

    </ul>

</div>

</section>

All of this gets done inside our default.html:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>UpshotWin8</title>

    <!-- WinJS references -->

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

    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
 1:  
 2:     <script src="//Microsoft.WinJS.0.6/js/ui.js">
 1: </script>
 2:  
 3:     <script type="text/javascript" src="js/jquery-1.6.4.js">
 1: </script>
 2:     <script type="text/javascript" src="js/knockout.debug.js">
 1: </script>
 2:     <script type="text/javascript" src="js/knockout.js">
 1: </script>
 2:     <script type="text/javascript" src="js/DeliveriesViewModel.js">
 1: </script>
 2:     <script type="text/javascript" src="js/upshot.js">
 1: </script>
 2:     <script type="text/javascript" src="js/upshot.compat.knockout.js">
 1: </script>
 2:     <script type="text/javascript" src="js/upshot.knockout.extensions.js">
 1: </script>
 2:     <script type="text/javascript" src="js/arrayUtils.js">
 1: </script>
 2:  
 3:  
 4:     <!-- UpshotWin8 references -->
 5:     <link href="/css/default.css" rel="stylesheet">
 6:     <script src="/js/default.js">
</script>

</head>

<body>

<div >

    <h3>Deliveries</h3>

    <button data-bind="click: saveAll">Save All</button>

    <button data-bind="click: revertAll">Revert All</button>

    <label>

        <input data-bind="checked: excludeDelivered" type="checkbox" />

         Exclude delivered items</label>

    <ol data-bind="foreach: deliveries">

        <li data-bind="css: { delivered: IsDelivered, 

                                        updated: IsUpdated}">

            <strong data-bind="text: Description"></strong>

            is for <em data-bind="text: Customer().Name"></em>

            <label><input data-bind="checked: IsDelivered"

                  type="checkbox"/>Delivered</label>

        </li>

    </ol>

    <h3>Customers</h3>

    <ul data-bind="foreach: deliveriesForCustomer">

        <li>

            <div>Name: <strong data-bind="text: key.Name"></strong>

            </div>

            <ul data-bind="foreach: values">

                <li data-bind="text: Description, 

                    css: { delivered: IsDelivered,

                             updated: IsUpdated}">                

                </li>

            </ul>

        </li>    

    </ul>

</div>

</body>

</html>

Once we have our view code wired up we now need to call out to the service and databind everything. Just like my previous KnockoutJS examples I wire up everything after the DomContentLoaded Event has fired using a custom function called initialize.

document.addEventListener("DOMContentLoaded", initialize);

Initialize will then tell our app about the fields returned by our Domain Service. In order to do this we need to call the upshot.metadata function and map values manually based on their original DomainModel source types. The basic formatting used here is Classname#Namespace. Once you get your head around that it’s pretty easy to map everything (although laborious). I also set the key to be based of DeliveryID.

After our mapping are set we’ll tell KnockoutJS to bind everything using the provided DeliveriesViewModel function.

function initialize() {

    upshot.metadata({

        "Delivery:#DeliveryTracker.Models": {

            "key": ["DeliveryId"],

            "fields": {

                "DeliveryId": { "type": "Int32:#System" },

                "CustomerId": { "type": "Int32:#System" },

                "Customer": { "type": "Customer#DeliveryTrack.Models" },

                "Description": { "type": "String:#System" },

                "isDelivered": { "type": "Int32:#System" }

            }

        }

    });

    ko.applyBindings( new DeliveriesViewModel( ));

}

The last step now is to edit our DeliveriesViewModel.js file with the location of our Domain Service. This will be different for everyone but on my local machine the service runs at http://localhost:61907//api/DataService.

function DeliveriesViewModel() {

    // Private

    var dataSourceOptions = {

        providerParameters: {

            url: "http://localhost:61907//api/DataService",

            operationName: "GetDeliveriesForToday"

        },

        entityType: "Delivery:#DeliveryTracker.Models",

        bufferChanges: true,

        mapping: Delivery

    };

    // Public Properties

    this.dataSource = new upshot.RemoteDataSource(dataSourceOptions).refresh();

    this.localDataSource = upshot.LocalDataSource({ source: this.dataSource,

        autoRefresh: true

    });

    this.deliveries = this.localDataSource.getEntities();

    this.deliveriesForCustomer = this.deliveries.groupBy("Customer");

    this.excludeDelivered = ko.observable(false);

    // Operations

    this.saveAll = function () { this.dataSource.commitChanges() }

    this.revertAll = function () { this.dataSource.revertChanges() }

    // Delegates

    this.excludeDelivered.subscribe(function (shouldExcludeDelivered) {

        var filterRule = shouldExcludeDelivered

            ? { property: "IsDelivered", operation: "==", value: false }

            : null;

        this.localDataSource.setFilter(filterRule);

        this.localDataSource.refresh();

    });

}

function Customer (data) {

    this.CustomerId = ko.observable(data.CustomerId);

    this.Name = ko.observable(data.Name);

    this.Address = ko.observable(data.Address);

    upshot.addEntityProperties(this, "Customer:#DeliveryTracker.Models");

}

function Delivery (data) {

    this.DeliveryId = ko.observable(data.DeliveryId);

    this.CustomerId = ko.observable(data.CustomerId);

    this.Customer = ko.observable(data.Customer);

    this.Description = ko.observable(data.Description);

    this.IsDelivered = ko.observable(data.IsDelivered);

    upshot.addEntityProperties(this, "Delivery:#DeliveryTracker.Models");

}

Other than the service location I did not need to modify the function in any way from the original MVC4 DeliveryTracker example.

We now have the Metro Style App binding to the same Domain Service and being fully interactive.

Conclusion

Obviously we would need to style the application to make it feel like a native Metro Style App but the hard plumbing work has been done. We were able to keep a majority of the MVC4 code, from both the views and the model, to get us started with our Windows 8 Metro Style App!

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

Playing Music and Sound Effects in a Windows 8 Metro Style App using HTML and JavaScript

Dave Isbitski — Thu, 26 Apr 2012 12:57:36 GMT

Overview

What game would rock without Music and Sound Effects! So how do we add that functionality to a Metro Style App? For my game I decided to take two routes.

This is how I broke everything down:

HTML5 Audio is being used for the background music and is in a wav file format. I have two royalty free music tracks that play one during my game’s menu screen and one during actual gameplay.
All Sound Effects are played using the free SoundJS Library. This JavaScript Library works straight off gitHub and no additional work was needed to use it inside our Windows Metro Style App!
The Lasers are three separate sound effects and each time a ship is destroyed a random one will play. They are royalty free sounds I pulled from some of the XNA samples via AppHub’s Game Development Library.
The announcer voices were custom recorded by me and saved as mp3 files via the free Audacity Sound Editing Tool. I got the retro voice sound (anyone remember AdLib and SoundBlaster back in the day?) by tweaking the stream.

Declaration and Initialization

I store all of my sound and music files in a /sounds folder off the root of the project and include the sound.js file in my normal /js folder.

Inside of my default.html file I then make a reference to the SoundJS library.

     <link href="/css/default.css" rel="stylesheet">

    <link href="/css/space.css" rel="stylesheet"/>

    <script src="/js/default.js"></script>

    <script src="/js/sound.js"></script>

Our App is now ready to play music and sound streams.

Music

Inside of my default.js file I set up a couple of local variables to handle the streams and the sound effects we will pass to SoundJS. I also set up a variable to detect if I have any music already playing.

    //Menu Music

    var musicPlaying = false;

    var musicMenu = new Audio("/sounds/hydrogen.mp3");

    var musicGame = new Audio("/sounds/crazy_comets.wav");

    musicMenu.loop = true;

    musicGame.loop = true;

    //soundeffects

    var lasers = new Array();

    lasers[0] = "laser1";

    lasers[1] = "laser2";

    lasers[2] = "laser3";

During my initialize function I set up all of my game parameters and load the sound effects I will use into SoundJS. SoundJS lets you optionally load multiple instances of the same stream but I’m choosing just to use the one right now.

    //Init Sounds

          SoundJS.addBatch([

           { name: "redalert", src: "../sounds/redalert.mp3", instances: 1 },

           { name: "newlevel", src: "../sounds/newlevel.mp3", instances: 1 },

           { name: "pulse", src: "../sounds/pulse.mp3", instances: 1 },

           { name: "laser1", src: "../sounds/laser1.mp3", instances: 1 },

           { name: "laser2", src: "../sounds/laser2.mp3", instances: 1 },

           { name: "laser3", src: "../sounds/laser3.mp3", instances: 1 }]);

I then load up the UI elements for my Game Menu and begin playing my Menu music. This is done by simply calling the pause() and play() methods of both the musicGame and musicMenu HTML5 Audio tag variables we declared previously.

Here is the code that initializes the Menu UI and begins playing the Menu Music:

    //Set Up Menu Screen UI Elements

      function showMenu(event) {

          menuEnabled = true;

          txtPlayerName.style.visibility = "hidden";

          txtScore.style.visibility = "hidden";

          imgPlayer.style.visibility = "hidden";

          imgMenu.style.visibility = "visible";

          btnStart.style.visibility = "visible";

          txtVersion.innerHTML = GAME_VERSION;

          txtVersion.style.visibility = "visible";

          txtLevel.style.visibility = "hidden";

          var menuX, btnX, btnY;

          menuX = (SCREEN_WIDTH - imgMenu.width) / 2;

          btnX = (SCREEN_WIDTH - btnStart.clientWidth) / 2;

          btnY = (SCREEN_HEIGHT - btnStart.clientHeight) / 2;

          imgMenu.style.posLeft = menuX;

          btnStart.style.posLeft = btnX;

          btnStart.style.posTop = btnY;

          musicGame.pause();

          musicMenu.play();

      }

Here is the code that initializes the Game UI and begins playing the Game Music:

    /Set up Game Screen UI Elements

        function startGame(event) {

            txtPlayerName.style.visibility="visible";

            txtScore.style.visibility="visible";

            imgPlayer.style.visibility = "visible";

            imgMenu.style.visibility = "hidden";

            btnStart.style.visibility = "hidden";

            txtVersion.style.visibility = "hidden";

            txtLevel.style.visibility = "visible";

            var lvlX = (SCREEN_WIDTH - txtLevel.clientWidth) / 2;

            txtLevel.style.posLeft = lvlX;

            musicMenu.pause();

            musicGame.play();

            menuEnabled = false;

        }

Sound Effects

Now that we have the music all set up let’s move onto the Sound Effects.

New Level and Gravity Pulse

The first sound bite is when our user achieves a new level (currently set to every 2,000 points). The second scenario is if they achieve a gravity pulse (previously covered here). Both of these scenarios are handled in our updateScore function which gets called during our main game loop (more on game loops to come).

    //update player score

        function updateScore(points) {

            score += points;

            scoreGravity += points;

            txtScore.innerHTML = "  Score: " + score;

            if (scoreGravity === GRAVITY_WAVE_PTS_REQ) {

                accelerometer.addEventListener("shaken", onShakenAccel);

                txtScore.innerHTML = " > SHAKE THAT SCREEN <";

                scoreGravity = 0;

                SoundJS.play("pulse", SoundJS.INTERRUPT_ANY);

            }

            //new level

            lvlNextPts = (lvlCurrent + 1) * LEVEL_PTS_REQ;

            if (score >= lvlNextPts) {

                lvlCurrent++;

                txtLevel.innerHTML = "Level: " + lvlCurrent;

                lvlDifficulty = LEVEL_SPEED_INCREASE * lvlCurrent;

                SoundJS.play("newlevel",SoundJS.INTERUPT_ANY);

            }

        }

Lasers Beams!

All of the logic for the laser effects happens when I handle destroyed ships that have been correctly “tapped on” (more on handling Touch events to come). I run through the laser sound array we previously created and pick a random sound. This gives us the ability to have three different laser sounds when we are blowing up ships on the screen!

    function destroyShip(ship) {

        var r = randomAccel(0, 2);

        var laserSound = lasers[r];

        SoundJS.play(laserSound, SoundJS.INTERRUPT_ANY);

        //TODO: Animation Explosion and better sound

        var explosion = new Image();

        explosion.onload = function () {

            ctx.drawImage(explosion, ship.x, ship.y);

        }

        explosion.src = "/images/explosion.png";

        ship.img = explosion;

        ship.destroyed = true;

        updateScore(POINTS_SHIPHIT);

        return ship;

    }

For those curious here is the randomizer function I used to pick a random number as well:

    //Random acceleration speed

        function randomAccel(a, b) {

            return (Math.floor(Math.random() * (1 + b - a))) + a;

        }

One of the things I noticed when having many sound effects on screen was that they sometimes would cut off each other. Remember that users can use all 10 fingers on a touch device so we could have 10 explosions at once! This is where SoundJS handles things very well. You may have noticed the INTERRUPT_ANY param being passed in. This is where you can tell SoundJS how to handle currently playing sounds of the same exact stream. You can also created multiple instances of the same sound effect. If you are still having issues with choppy sounds the SoundJS Documentation has some suggestions on using setTimeout to buffer your sounds.

I wrote a little function that implements this which I’m not currently using but may need at some point in the future. I’ve included it here in case you run into any sound clipping issues and want to give it a try.

    //Play Sound Effect

     function playSound(sound) {

         setTimeout(function () {

             SoundJS.play(sound, SoundJS.INTERUPT_NONE, 1, false);

         }, 100);

     }

Conclusion

I hope this post has given you an idea of how easy it is to include Music and Sound Effects in your Metro Style Apps using the built in HTML5 Audio tags and existing JavaScript Libraries. As Always - if you are currently working on a Windows 8 app I would love to hear about it!

You may also want to check out my previous Windows 8 Metro Style Development Tips:

Illegal characters in path when deploying a Metro Style App

Dave Isbitski — Wed, 25 Apr 2012 19:50:00 GMT

If you are getting an error similar to the one below when deploying your Metro Style App in Visual Studio 11 Beta it’s not you.

     Error    1    Error : DEP0600 : The following unexpected error occurred during deployment: 

    Illegal characters in path.

       at System.IO.Path.CheckInvalidPathChars(String path, Boolean checkAdditional)

       at System.IO.Path.Combine(String path1, String path2)

       at Microsoft.VisualStudio.ImmersiveProjectServices.Shared.AppxLayoutManager.CheckPackageLayoutState(DeployPackageName deployPackageName, String location)

       at Microsoft.VisualStudio.ImmersiveProjectServices.Shared.LocalDeployJob.GetLayoutState(DeployPackageName deployName, Boolean hasFrameworkDependencies)

       at Microsoft.VisualStudio.ImmersiveProjectServices.Shared.RegisterAppxLayout.Start(Boolean forceNewLayout, Boolean forceRegistration, NetworkLoopbackState desiredNetworkLoopbackState, Boolean refreshLayoutOnly, String& packageMoniker, String& firstUserAppID, Exception& deployException)    MetroInclinometerSteeringWheel

This is a known issue when moving source files around to different folders without uninstalling the Metro Style App. The good news is the fix is simple!

Uninstall the application via it’s Start Screen Live Tile and then re-deploy it in Visual Studio 11.

I have this happen to me frequently due to having different machines I present on and moving source code around between them. I figured I would share the solution in case you come across the same issue.

Using KnockoutJS in Windows 8 Metro Style Apps

Dave Isbitski — Tue, 24 Apr 2012 20:46:45 GMT

What is it?

If you have been messing around with JavaScript lately and come from a .Net Background you might have already heard of KnockoutJS.

If you haven’t, KnockoutJS is a lightweight, free, JavaScript Library from Steve Sanderson that brings the MVVM pattern to the web world. It’s also filled with #awesome sauce.

Cats and Dogs Living Together – Mass Hysteria!

It wasn’t too long ago that Windows app development and Web app development were two entirely different views of the world. Thanks to the magic of WinRT language projection with Metro Style App development we no longer have to give up all the great libraries we are used from the web when moving onto the desktop. Most JavaScript libraries will run by just including it in your Metro Style App project. Well at least local copies of those JavaScript Libraries. If you want to call out to external libraries however you will need to start looking into the security model of how Windows Web Apps run (WWA).

The exception to this is jQuery if you are pulling from the public CDN’s it has already been whitelisted for you. I wont dive into details here but you can check out the great Build Session from Chris Tavares to learn about the security model for third party JavaScript libraries.

Hang tight! If you just want the Windows 8 Metro Style App soure code grab it now.

Setting up KnockoutJS

The first thing you will need to do is grab the latest version of KnockoutJS off GitHub. I’ve included and tested with both the stable 2.0.0 release as well the 2.1.0rc update.

Create a new project in Visual Studio 11 Express as usual and then add the Knockout.js file to your JS folder.

As with all JavaScript files if you want Visual Studio to give you Intellisense you will need to add the following to the current JavaScript source file you are working on:

     /// <reference path="knockout-2.0.0.js" />

Note that Visual Studio will do this automatically for you if you simply drag the .js file over to your code window.

Next, you will need to add a reference to the KnockoutJS file in the html source. While we are at it let’s go ahead and grab the latest jQuery Library as well. Some of the KnockouJS Learning samples assume jQuery is included. Your references should look like below:

    <script src="/js/knockout-2.0.0.js"></script>

    <script src="/js/jquery-1.7.2.min.js"></script>

Now we should have working jQuery and Knockout JavaScript functionality but don’t forget that both of these libraries assume you have a DOM. On the web we would normally start executing code after the onLoad event. Fortunately for us this is super easy to do in Metro Style Apps by adding an event handler for DOMContentLoaded. This should be the last line in your main function like so:

    app.start();

    //If Document fully loaded than begin processing

    document.addEventListener("DOMContentLoaded", initialize, false);

    })();

This will ensure your DOM is loaded and now accessible inside of your app.

The last step now is to ensure that all of our KnockoutJS bindings occur once our initialize function has been called. Here is an example of what I mean:

    //Main Execution

    function initialize() {

        // Activates knockout.js

        ko.applyBindings(new AppViewModel());

    }

Converting Learn.KnockoutJS samples to a Metro Style Apps

There are some really great tutorials on Learn.KnockoutJS.com to help get you started. I decided to go through each of those and bring them over into a Metro Style App.

All five tutorials came over with minor tweaks except for Single Page applications. I’ve named the tutorials using the following convention:

Introduction – default.html/default.js
Working with Lists and Collections – seats.html/seats.js
~~Single page applications – spa.html/spa.js~~

Didn’t work. I’ve included the source so if anyone wants to hack on it some more and see what’s up please let me know.

Creating custom bindings – custom.html/custom.js
Loading and saving data – data.html/data.js

To change which sample you want to run just edit the startup page inside the project properties.

Introduction Example

No tweaks needed this came over perfectly. Here is what my html looks like:

    <body>

    <p>First name: <strong data-bind="text: firstName"></strong></p>

    <p>Last name: <strong data-bind="text: lastName"></strong></p>

    </body>

Here is the JavaScript:

    (function () {

        "use strict";

        var app = WinJS.Application;

        app.onactivated = function (eventObject) {

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

                if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.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.

                }

                WinJS.UI.processAll();

            }

        };

        function AppViewModel() {

            this.firstName = "David";

            this.lastName = "Isbitski";

        }

        //Main Execution

        function initialize() {

            // Activates knockout.js

            ko.applyBindings(new AppViewModel());

        }

        app.oncheckpoint = function (eventObject) {

            // TODO: This application is about to be suspended. Save any state

            // that needs to persist across suspensions here. You might use the 

            // WinJS.Application.sessionState object, which is automatically

            // saved and restored across suspension. If you need to complete an

            // asynchronous operation before your application is suspended, call

            // eventObject.setPromise(). 

        };

        app.start();

        //If Document fully loaded than begin processing

        document.addEventListener("DOMContentLoaded", initialize, false);

    })();

Working with Lists and Collections Example

Worked right out of the box. Here is the HTML:

    <body>

    <h2>Your seat reservations</h2>

    <table>

        <thead><tr>

            <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>

        </tr></thead>

        <tbody data-bind="foreach: seats">

            <tr>

                <td data-bind="text: name"></td>

                <td data-bind="text: meal().mealName"></td>

                <td data-bind="text: meal().price"></td>

            </tr>    

        </tbody>

    </table>

    </body>

Here is the JavaScript:

     
    (function () {

        "use strict";

        var app = WinJS.Application;

        app.onactivated = function (eventObject) {

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

                if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.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.

                }

                WinJS.UI.processAll();

            }

        };

        // Class to represent a row in the seat reservations grid

        function SeatReservation(name, initialMeal) {

            var self = this;

            self.name = name;

            self.meal = ko.observable(initialMeal);

        }

        // Overall viewmodel for this screen, along with initial state

        function ReservationsViewModel() {

            var self = this;

            // Non-editable catalog data - would come from the server

            self.availableMeals = [

            { mealName: "Standard (sandwich)", price: 0 },

            { mealName: "Premium (lobster)", price: 34.95 },

            { mealName: "Ultimate (whole zebra)", price: 290 }

            ];

            // Editable data

            self.seats = ko.observableArray([

            new SeatReservation("Steve", self.availableMeals[0]),

            new SeatReservation("Bert", self.availableMeals[0])

            ]);

        }

        //Main Execution

        function initialize() {

            // Activates knockout.js

             ko.applyBindings(new ReservationsViewModel());

        }

        app.oncheckpoint = function (eventObject) {

            // TODO: This application is about to be suspended. Save any state

            // that needs to persist across suspensions here. You might use the 

            // WinJS.Application.sessionState object, which is automatically

            // saved and restored across suspension. If you need to complete an

            // asynchronous operation before your application is suspended, call

            // eventObject.setPromise(). 

        };

        app.start();

        //If Document fully loaded than begin processing

        document.addEventListener("DOMContentLoaded", initialize, false);

    })();

Creating Custom Bindings Example

I needed to do two things to get this example to work. The first one was to include jQuery it assumes it would be present. The second was to replace the alert() function call (this doesn’t exist in WinRT) with a native WinRT MessageDialog. Here is what the HTML looks like:

    <body>

    <h3 data-bind="text: question"></h3>

    <p>Please distribute <b data-bind="text: pointsBudget"></b> points between the following options.</p>

    <table>

        <thead><tr><th>Option</th><th>Importance</th></tr></thead>

        <tbody data-bind="foreach: answers">

            <tr>

                <td data-bind="text: answerText"></td>

                <td><select data-bind="options: [1,2,3,4,5], value: points"></select></td>

            </tr>    

        </tbody>

    </table>

    <h3 data-bind="fadeVisible: pointsUsed() > pointsBudget">You've used too many points! Please remove some.</h3>

    <p>You've got <b data-bind="text: pointsBudget - pointsUsed()"></b> points left to use.</p>

    <button data-bind="enable: pointsUsed() <= pointsBudget, click: save">Finished</button>

    </body>

Here is the JavaScript:

     
    (function () {

        "use strict";

        var app = WinJS.Application;

        app.onactivated = function (eventObject) {

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

                if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.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.

                }

                WinJS.UI.processAll();

            }

        };

        // ----------------------------------------------------------------------------

        // Page viewmodel

        function Answer(text) { this.answerText = text; this.points = ko.observable(1); }

        function SurveyViewModel(question, pointsBudget, answers) {

            this.question = question;

            this.pointsBudget = pointsBudget;

            this.answers = $.map(answers, function (text) { return new Answer(text) });

            //Dave Isbitski - 4/24/12 - Changed alert to native WinRT dialog

            this.save = function () {

                var dlg = new Windows.UI.Popups.MessageDialog("To do");

                 dlg.showAsync().done();

            };

            this.pointsUsed = ko.computed(function () {

                var total = 0;

                for (var i = 0; i < this.answers.length; i++)

                    total += this.answers[i].points();

                return total;

            }, this);

        }

        //Main Execution

        function initialize() {

            ko.bindingHandlers.fadeVisible = {

                init: function (element, valueAccessor) {

                    // Start visible/invisible according to initial value

                    var shouldDisplay = valueAccessor();

                    $(element).toggle(shouldDisplay);

                },

                update: function (element, valueAccessor) {

                    // On update, fade in/out

                    var shouldDisplay = valueAccessor();

                    shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();

                }

            };

            // Activates knockout.js

            ko.applyBindings(new SurveyViewModel("Which factors affect your technology choices?", 10, [

       "Functionality, compatibility, pricing - all that boring stuff",

       "How often it is mentioned on Hacker News",

       "Number of gradients/dropshadows on project homepage",

       "Totally believable testimonials on project homepage"

            ]));

        }

        app.oncheckpoint = function (eventObject) {

            // TODO: This application is about to be suspended. Save any state

            // that needs to persist across suspensions here. You might use the 

            // WinJS.Application.sessionState object, which is automatically

            // saved and restored across suspension. If you need to complete an

            // asynchronous operation before your application is suspended, call

            // eventObject.setPromise(). 

        };

        app.start();

        //If Document fully loaded than begin processing

        document.addEventListener("DOMContentLoaded", initialize, false);

    })();

Loading and Saving Data Example

Only thing I had to add here was jQuery due to the dependency on it. Here is the HTML:

    <body>

    <h3>Tasks</h3>

    <form data-bind="submit: addTask">

        Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" />

        <button type="submit">Add</button>

    </form>

    <ul data-bind="foreach: tasks, visible: tasks().length > 0">

        <li>

            <input type="checkbox" data-bind="checked: isDone" />

            <input data-bind="value: title, disable: isDone" />

            <a href="#" data-bind="click: $parent.removeTask">Delete</a>

        </li> 

    </ul>

    You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)

    <span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>

    </body>

Here is the JavaScript:

     
    (function () {

        "use strict";

        var app = WinJS.Application;

        app.onactivated = function (eventObject) {

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

                if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.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.

                }

                WinJS.UI.processAll();

            }

        };

        function Task(data) {

            this.title = ko.observable(data.title);

            this.isDone = ko.observable(data.isDone);

        }

        function TaskListViewModel() {

            // Data

            var self = this;

            self.tasks = ko.observableArray([]);

            self.newTaskText = ko.observable();

            self.incompleteTasks = ko.computed(function () {

                return ko.utils.arrayFilter(self.tasks(), function (task) { return !task.isDone() });

            });

            // Operations

            self.addTask = function () {

                self.tasks.push(new Task({ title: this.newTaskText() }));

                self.newTaskText("");

            };

            self.removeTask = function (task) { self.tasks.remove(task) };

            // Load initial state from server, convert it to Task instances, then populate self.tasks

            $.getJSON("/tasks", function (allData) {

                var mappedTasks = $.map(allData, function (item) { return new Task(item) });

                self.tasks(mappedTasks);

            });

        }

        //Main Execution

        function initialize() {

            // Activates knockout.js

            ko.applyBindings(new TaskListViewModel());

        }

        app.oncheckpoint = function (eventObject) {

            // TODO: This application is about to be suspended. Save any state

            // that needs to persist across suspensions here. You might use the 

            // WinJS.Application.sessionState object, which is automatically

            // saved and restored across suspension. If you need to complete an

            // asynchronous operation before your application is suspended, call

            // eventObject.setPromise(). 

        };

        app.start();

        //If Document fully loaded than begin processing

        document.addEventListener("DOMContentLoaded", initialize, false);

    })();

Conclusion

I hope this post has given you an idea of how easy it is to include existing JavaScript Libraries from the Web inside your own Metro Style Apps. As Always - if you are currently working on a Windows 8 app I would love to hear about it!

You may also want to check out my previous Windows 8 Metro Style Development Tips:

Accessing the Camera in a Windows 8 Metro Style App using HTML and JavaScript

Dave Isbitski — Tue, 24 Apr 2012 14:40:03 GMT

Overview

One of the things I wanted to do in the game was to keep Player Profiles. These profiles track player high scores, player names and a player avatar. Eventually these high scores could be used in a leaderboard running in the cloud.

I thought it would be neat to let players take a picture of themselves for their Avatar by accessing the webcam. Fortunately for us WinRT makes this super easy to use. We can even pull up prebuilt camera capture UI by using the built-in Windows.Media.Capture API’s. If you are an existing Windows Phone Developer this may remind you a lot of Windows Phone Development Tasks – something I absolutely loved.

Features like camera timer, settings, and even picture cropping are all done for us via the Windows.Media.Capture.CameraCaptureUI. For those looking for more control you also have the ability to call into Windows.Media.Capture.MediaCapture. You won’t get a default UI with MediaCapture but you do get full control of the streams. MediaCapture is also a way to record Audio streams in your app.

Here is what the default Capture Capture UI looks like when using the cropping tool:

After cropping the photo to my liking and tapping the OK button my new Avatar is automatically set. The new Avatar Image is automatically scaled correctly thanks to the predefined CSS styling we have created.

Sweet!

Declaration and Initialization

One of the joys of doing Windows 8 Metro Style development with HTML and JavaScript is that it feels like Web Programming. In fact my entire game header is done using normal <div> tags and CSS Styles. Inside of my default.html file I defined the following header to display the player score, level, name and avatar picture:

     <div id="divGame">

            <div id="txtScore">Score: 0</div>    

            <div id="txtLevel">Level: 0</div>

            <div id="divPlayer">

                 <div id="txtPlayerName">Player1</div>

                 <img id="imgPlayer" src="/images/helmet.png" />

             </div>

    <div>

I then defined a CSS Style for the Avatar Picture using it’s imgPlayer id.

    #imgPlayer {

        max-width: 100px; 

        max-height: 50px;

        float:left;

        margin-right:10px;

    }

The Windows Library for JavaScript (WinJS) gives us a way to create a Windows 8 AppBar easily by just a few lines of HTML (more on WinJS Controls later). By opening the AppBar and tapping the cmdCamera button our players will get the option to take a new Avatar picture.

    <div id="AppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">

           <button id="cmdHome" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdHome',label:'Menu',icon:'home',section:'selection',tooltip:'Menu'}">

           </button>

          <button id="cmdCamera" data-win-control ="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Cadet Photo',icon:'camera',section:'global',tooltip:'Change Cadet Photo'}">

           </button>

         <button id="cmdName" data-win-control ="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdName',label:'Cadet Name',icon:'url(images/accept.png)',section:'global',tooltip:'Change Cadet Name',type:'flyout',flyout:'nameFlyout'}">

           </button>

    </div>

All of the AppBar buttons tap events are handled using standard JavaScript EventListeners:

    //AppBar Commands

            document.getElementById("cmdCamera").addEventListener("click", capturePhoto, false);

            document.getElementById("cmdName").addEventListener("click", showCadetNameUpdate, false);

            document.getElementById("cmdHome").addEventListener("click", showMenu, false);

            document.getElementById("submitButton").addEventListener("click", updateCadetName, false);

That’s it! We now have a working Game Header and AppBar for our game. When a player clicks on the Camera Button we will invoke a call to the capturePhoto function.

Opening the Camera Capture UI

capturePhoto is where the magic happens. The first thing we do is make a call to WinRT using the Windows.Media.Capture namespace. This gives us a reference to CameraCaptureUI where we can set default properties. For my game I am telling the camera to use a 16x9 aspect ratio and lock to the photo mode. If I wanted the user to capture video I could easily do this as well by using Windows.Media.Capture.CameraCaptureUIMode.video.

    //WinRT Camera API

        function capturePhoto() {

            try {

                var dialog = new Windows.Media.Capture.CameraCaptureUI();

                var aspectRatio = { width: 16, height: 9 };

                dialog.photoSettings.croppedAspectRatio = aspectRatio;

                dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (file) {

                    if (file) {

                        imgPlayer.src = URL.createObjectURL(file);

                    } else {

                        //No Photo captured

                    }

                }, function (err) {

                    displayError(err);

                });

            } catch (err) {

                displayError(err);

            }

        }

This is where you will start to see all of the Async goodness inside of WinRT. The Camera Capture UI will run asynchronously while it awaits the user to take a picture. I handle the callback by invoking a JavaScript Promise using the then keyword. The promise will call a function when the user takes a photo and if there is an object it will set the source of my imgPlayer tag to be that file. Those of you familiar with Web programming will recognize the URL.createObjectURL call so that my <img> tag knows where to reference the new source file.

Conclusion

Hopefully you have seen how easy it is to access the WebCam on Windows 8 now thanks to WinRT and the Windows.Media.Capture API’s. As Always - if you are currently working on a Windows 8 app I would love to hear about it!

You may also want to check out my previous Windows 8 Metro Style Development Tips:

Accessing the Accelerometer in a Windows 8 Metro Style App using HTML and JavaScript

Accessing the Accelerometer in a Windows 8 Metro Style App using HTML and JavaScript

Dave Isbitski — Mon, 23 Apr 2012 21:30:07 GMT

Overview

I have recently been coding a Windows 8 Metro Style App using the new Windows 8 Consumer Preview bits and Visual Studio 11 Express. The app is going to be a retro shooter that takes advantage of HTML5 Canvas for the main game engine and then several Windows 8 Metro Style App Features. Rather then wait for the game to be completely finished I figured I would start sharing some of my development experiences here on my blog.

One of the first ideas I had was for a “Gravity Pulse” power that would be granted upon earning a predefined a amount of points (1,500 pts being the default). Every time the user gains these amount of points a custom sound file will be played and then the screen will display a message to shake the device. If the user shakes the device within a predefined amount of time all ships on the screen will blow up.

The language I chose to use was HTML and JavaScript but this example could just have easily been done in C++/XAML or C#/XAML. The code needed to access the accelerometer was very small and I was impressed just how easy it was to add to my game.

Declaration and Initialization

I start out by defining three local class variables I will use to access the sensor itself and default values for the polling interval.

     //accelerometer

       var accelerometer;

       var intervalId = 0;

       var getReadingInterval = 0;

Once the DOM of the default.js page has been loaded I call a custom function (named initialize).

    //If Document fully loaded than begin processing

       document.addEventListener("DOMContentLoaded", initialize, false);

Inside of initialize I set up all of my ships, the coordinate system for the gameboard and other important details. There is a function I have created that will handle the accelerometer instance called initAccel.

    //Set up accelerometer for shake events

          initAccel();

    //Init Accelerometer

    function initAccel() {

        accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();

        if (accelerometer) {

            // Choose a report interval supported by the sensor

            var minimumReportInterval = accelerometer.minimumReportInterval;

            var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;

            accelerometer.reportInterval = reportInterval;

            getReadingInterval = reportInterval * 2; // double the interval for display (to reduce CPU usage)

        } else {

           displayError("No accelerometer found");

        }

    }

The initAccel function assigns the default accelerometer (through the magic of WinRT) to the class variable accelerometer and if it finds a device it sets up the reporting interval properties. Reporting interval is how often we will receive new sensor readings from the accelerometer so it is important to pick a value that won’t kill our cpu.

Handling the Accelerometer Readings

Always remember accessing the sensor (as in any other devices) will cause cpu load and drain your battery. I am careful to only turn the sensor on when the user hits the predefined amount of points and then I shut it off until the next gravity pulse becomes available. Fortunately this is easy to do in JavaScript by controlling the eventListener. If the accelerometer object has an eventListener assigned to it it will be actively polling for new data.

The function I use to check for an in progress Gravity Pulse is called updateScore. This is where I start listening to accelerometer readings by assigning an eventListener for “shake events” as well as updating the screen and playing a wav file (more on playing sounds and external libraries to come)

    //update player score

        function updateScore(points) {

            score += points;

            scoreGravity += points;

            txtScore.innerHTML = "  Score: " + score;

            if (scoreGravity === GRAVITY_WAVE_PTS_REQ) {

                accelerometer.addEventListener("shaken", onShakenAccel);

                txtScore.innerHTML = " > SHAKE THAT SCREEN <";

                scoreGravity = 0;

                SoundJS.play("pulse", SoundJS.INTERRUPT_ANY);

            }

            //new level

            lvlNextPts = (lvlCurrent + 1) * LEVEL_PTS_REQ;

            if (score >= lvlNextPts) {

                lvlCurrent++;

                txtLevel.innerHTML = "Level: " + lvlCurrent;

                lvlDifficulty = LEVEL_SPEED_INCREASE * lvlCurrent;

                SoundJS.play("newlevel",SoundJS.INTERUPT_ANY);

            }

        }

When a user shakes the Windows 8 tablet enough to register a “shake” event the onShakenAccel eventHandler is called and the following code invoked:

    //Accelerometer has been shaken and now we need to grant the bonus power

     function onShakenAccel(event) {

          //Stop Listening to Accelerometer

         accelerometer.removeEventListener("shaken", onShakenAccel);

         //Gravity Wave Power - Destroy all ships

         gravityWave();

     }

You will notice the first thing I do is remove the eventListener which will effectively turn off the Accelerometer Sensor and then I call a custom function to blow up the on screen ships.

Conclusion

That’s it! By adding a few eventListeners and a call into the WinRT Windows.Device.Sensors namespace my game has full accelerometer support! Hopefully this post will help you get started in adding sensor support in your own Metro Style Apps. As Always - if you are currently working on a Windows 8 app I would love to hear about it!

Want to win $20,000 with Windows Phone? Check out Dream.Build.Play!

Dave Isbitski — Mon, 09 Apr 2012 21:18:01 GMT

Via Devfish..

Here's the short version. Over 14? Write a cool Windows Phone Game and submit it to the Dream,Build,Play site. You could win up to $20,000. Yep, that's it. In a nutshell. So on to the long-winded stuff.

Windows Phone the prizes are $20k, $10k, $5k, and $2500 respectively.

The top 20 finalists will also get Phones. Want some inspiration, check out last year's XBOX winners at https://www.dreambuildplay.com/main/winners.aspx .

Obviously the competition is going to be tough. Make something good. And if you publish it, let me know. I'm always looking for brag on our phone devs!

RULES - SHORT LIST

Registration until May 15, Submission until June 12
Judging on fun/innovative/quality
Must be greater than 14 years old
All submissions are in English
You cannot submit if you live in Cuba, Iran, North Korean, Sudan or Syria

Official Rules - https://www.dreambuildplay.com/main/officialrules.aspx

Learn The Cloud. Make A Difference. @home with Windows Azure

Dave Isbitski — Thu, 05 Apr 2012 17:19:45 GMT

Via my teammate Peter Laudati…

How does learning about cloud computing while contributing to scientific research sound to you? Join us for @home with Windows Azure to get a solid understanding of the Windows Azure platform while giving back to a very deserving cause.

What is @home with Windows Azure?

Microsoft provides a 90-day free trial of Windows Azure where you can kick the tires and run an application in the cloud 24x7, cost-free. Why not use that free compute time to give back to a deserving cause? The @home with Windows Azure project is an online activity where you use those 90-days of free compute time (or your MSDN Subscriber benefits) to contribute to Stanford University’s Folding@home distributed computing project.

The Folding@home project helps scientists provide insight into the causes of diseases such as Alzheimer’s, Mad Cow disease, ALS, and some cancer-related syndromes, by running protein folding simulations on thousands of machines world wide.

You will deploy Stanford’s Folding@home application to Windows Azure, where it will execute protein folding simulations in the cloud, thus contributing to the research effort. In essence, your participation is a donation of your free compute time to the Folding@home project!

Get Started

It’s easy to get started in 4 quick steps. The @home with Windows Azure site has a series of short, easy to follow along to, screencasts that walk you through deploying Folding@home to the cloud!

Learn The Cloud

Want to go deeper? Join the @home team for a live webcast or catch one of their recordings on demand to learn more about Windows Azure, including: compute & storage services, debugging in the cloud, and patterns for achieving scale.

Make A Difference

In addition to directly contributing CPU cycles to the Folding@home project, from the start of March 2012, Microsoft is donating $10 (up to a maximum of $5000) to Stanford’s Pande Lab for everyone that participates!

See Your Impact

You can see your impact by visiting the detailed World Stats page on the @home with Windows Azure site. For example, to date, over 6,300 VMs have contributed over 3.5 million compute hours!!!

Learn more about the project and join in at the project’s website: http://distributedcomputing.cloudapp.net

Looking to write a Windows Phone App? Check out the HackReady.Phone WebCast Series!

Dave Isbitski — Fri, 30 Mar 2012 16:30:26 GMT

If you have been thinking about writing a Windows Phone App but didn’t know where to start my fellow teammate, Dani Diaz, has got something for you!

Via Dani…

Join us for HackReady, the new online learning series designed for developers to bring you the vital bits you need, without the fluff you won’t miss. Full of key information and demonstrations, this series gives you a solid understanding of the tools, techniques, and resources you need to become HackReady.

The HackReady.Phone series brings you seven episodes, from start to marketplace. Whether you are a new Windows Phone developer thinking about your first app or well on your way to publishing, these sessions help you get there. Join us for one or the whole series—pick and choose as you like.

(Tue 4/3 10AM PST)
MSDN Webcast: HackReady.Phone, Episode 1: Introduction to the Windows Phone Platform (Level 100) - http://aka.ms/HackReadyPhone1

(Thur 4/5 10AM PST)
MSDN Webcast: HackReady.Phone, Episode 2: Working with Internal and External Data in Windows Phone (Level 200) - http://aka.ms/HackReadyPhone2

(Tue 4/10 10AM PST)
MSDN Webcast: HackReady.Phone, Episode 3: Understanding Windows Phone’s Application Lifecycle and State Management (Level 200) - http://aka.ms/HackReadyPhone3

(Thur 4/12 10AM PST)
MSDN Webcast: HackReady.Phone, Episode 4: Working with Windows Phone Sensors and Other APIs (Level 200) -http://aka.ms/HackReadyPhone4

(Tue 4/17 10AM PST)
MSDN Webcast: HackReady.Phone, Episode 5: Enhancing the User Experience and App Usability with Live Tiles, Push Notifications, and Background Agents (Level 200) - http://aka.ms/HackReadyPhone5

(Thur 4/19 10AM PST)
MSDN Webcast: HackReady.Phone, Episode 6: Enhancing Performance and Application Testing (Level 200) - http://aka.ms/HackReadyPhone6

(Tue 4/24 10AM PST)
MSDN Webcast: HackReady.Phone, Episode 7: Ready, Set, Publish: Everything You Need to Know About Releasing Your Apps (Level 200) - http://aka.ms/HackReadyPhone7

Windows 8 Developer Event coming to New York City on April 19th

Dave Isbitski — Mon, 26 Mar 2012 13:47:58 GMT

Windows reimagined.

Learn everything you need to start building Metro-style apps for Windows today at our free, full-day Windows Developer Event.

We'll show you how to use Visual Studio to code fast, fluid, immersive and beautiful Metro-style applications in HTML5/JavaScript, XAML/C# and C/C++. Your investments in these languages carry forward, making Windows a no-compromise platform for developers.

Whatever language you choose, your app gets deep integration with the Windows shell, including notifications, live tiles, deep links, and contracts with other apps. And now you can build once and support all Windows customers, no matter what type of PC they have—from tablets to laptops to convertibles to desktops.

Seating is limited and registration is not guaranteed. Secure your spot today!

Prerequisites

Please bring a notebook computer and your personal identification.

Be sure to download the Windows 8 Consumer Preview.

And, don't forget to download Visual Studio 11 Express for Windows 8 and seize the future of development.

Notes

This free event is brought to you by Microsoft. However, you are responsible for booking and funding your own travel and accommodations. Please note that there is limited space available for this event, so be sure to register early.

Windows 8 Developer Camps – Coming Soon!

Dave Isbitski — Wed, 07 Mar 2012 21:07:28 GMT

Ready to dive in and learn more about Windows 8 and the developer opportunity it represents? Then get ready for the series of Windows Developer Camps! These are free, full-day, developer-focused events featuring a combination of sessions and hands-on labs, and we’ll have 10 of them right here in the east:

Windows 8 changes everything.

Combining the broad reach of Windows, best-in-class developer tools, a reimagined user experience, support for new chipsets, and a built-in Store with industry-leading business terms — Windows 8 is the largest developer opportunity, ever.

Join us for this free, full-day event designed to share all the knowledge you need to start building Metro-style applications for Windows 8 – today. We’ll begin by showing you how to use Visual Studio to code fast, fluid, immersive and beautiful Metro-style applications in HTML5/JavaScript, XAML/C# and C/C++. Your existing investments in these languages carry forward, making Windows a no-compromise platform for developers.

Whatever language you choose, your app gets deep integration with the Windows shell, including notifications, live tiles, deep links, and contracts with other apps. And now you can build once and support all Windows customers, no matter what type of PC they have – from tablets to laptops to convertibles to desktops.

We’ll cap the day off with an open, hands-on lab session. It’s the perfect opportunity to get your dream application underway, or finish that app you’ve already started – with Windows 8 experts available to guide you through every step. Bring your laptop to join in the fun and show off your killer app.

Get started now!

The Schedule

Join us in one of these cities:

Windows Developer Camps
Date	City	More
March 27, 2012	Reston, VA	Details & Registration
March 29, 2012	Chevy Chase, MD	Details & Registration
April 11, 2012	Orlando, FL	Details & Registration
April 17, 2012	Tampa, FL	Details & Registration
April 19, 2012	Ft. Lauderdale, FL	Details & Registration
May 1, 2012	Charlotte, NC	Details & Registration
May 22, 2012	Waltham, MA	Details & Registration
May 23, 2012	Atlanta, GA	Details & Registration
May 23, 2012	Farmington, CT	Details & Registration
May 24, 2012	Malvern, PA	Details & Registration

Windows 8 Consumer Preview is out! Ready to write an app?

Dave Isbitski — Wed, 07 Mar 2012 20:55:12 GMT

February 29th marked the release of the Windows 8 Consumer Preview and it was downloaded over a million times in the first 24 hours alone. If you’re a developer you have probably been playing around with the Developer Preview we gave out during Build. The Consumer Preview (CP for short) represents an impressive body of work with over 100,000 code changes since the Developer Preview! Now is the time to start getting serious about writing your apps.

Where do I start?

First, check out the below Youtube video from Jensen Harris that goes over many of the new features in this release.

If you have the time (about 90 mins worth) you can also watch the full Windows 8 Consumer Preview event here.

Where do I get the Bits?

Everything you need to get started is over at Preview.Windows.Com. You can download 32 or 64 Bit versions, exe installable or as well as ISO formats.

Note: If you miss the ISO Product Key on the Download Page here it is: DNJXJ-7XBW8-2378T-X22TX-BKG7J

Where do I get the Developer Tools?

Both Visual Studio 11 and the Windows SDK Samples have been updated for the Consumer Preview release. You can grab all of the goodies off MSDN here.

So what has changed since the Developer Preview?

For a high level overview head over to the Windows 8 Official Blog…

Welcome to Windows 8 – The Consumer Preview Steven Sinofsky

Today is a big day for the Windows team. At Mobile World Congress in Barcelona, Spain a few moments ago, we unveiled the Windows 8 Consumer Preview to our partners and press. Based on a broad range of feedback, we have made over 100,000 code changesand the Consumer Preview represents a refined product ready for broad and daily usage by those of you willing to test a pre-release OS. You can download the Consumer Preview starting now at http://preview.windows.com. If you tried the Windows 8 Developer Preview, then you are going to be delighted to see a broad range of product changes and improvements based on a feedback from many sources.

Windows 8 reimagines Windows, from the chipset to the experience. With the Developer Preview we focused on presenting the new APIs and amazing new tools for developers. Today’s Consumer Preview is focused on a broader audience, and along with improvements to the WinRT APIs based on developer feedback, we are introducing the full user experience, the Windows Store for apps, and early previews of some first- and third-party apps.

With so much to dive into, let’s talk about what is different in the Consumer Preview at a high level:

Broad range of product changes and improvements: Since the Developer Preview in September, designed to preview the programming platform, Windows 8 has progressed across every dimension. From completing the user experience for touch, keyboard, and mouse, to refining the development platform, to improving performance, quality, and reliability across all subsystems as well as new features, the Consumer Preview represents a complete view of the capabilities of Windows 8.

Windows Store with an “App Preview” of new apps: The Windows 8 Consumer Preview marks the opening of the Windows Store for testing. You’ll see a variety of new Metro style apps from both third-party developers and Microsoft. During the Consumer Preview, these apps are available to try and experience at no cost to users. Please note, these apps and the set of preinstalled apps are at an early stage of development and are available as an early App Preview, and will be updated via the Windows Store. In addition, the Store will offer personalized recommendations, and Windows 8 gives users the ability to take their apps and settings with them across multiple PCs, making it easy to discover and try new apps while offering developers the greatest opportunity of any platform

Connecting to the cloud across Windows PCs and Windows Phones: You’ll experience seamless integration with the content across your web services. Optionally signing in with a Microsoft account provides access to features including the ability to roam all settings, use cloud storage, communicate with email, calendar, and contacts, and connect to a broad range of services. Your connection to the cloud works across your Windows PCs and your Windows Phones. You’ll also experience early previews of the Metro style apps for Mail, Calendar, People, Messaging, Photos, and SkyDrive.

Internet Explorer 10 Platform Preview 5: With IE10, we reimagined the browser to create a new experience designed specifically for Windows 8 devices. It provides an edge to edge interface that is all about less browser, and more web. Fast and fluid, IE is hardware-accelerated to enable web performance. The same rendering engine and high-performance script engine is available on the Windows desktop as well.

We’ve detailed many features in this blog across all the subsystems of Windows 8. From the kernel, networking, file system, graphics, and the user interface across all of those. There’s no easy way to enumerate the depth and breadth of Windows 8 in a post. The best thing to do is experience it yourself. We encourage everyone to check out our demo video, and all the videos and information on http://preview.windows.com. From there you can also download the Consumer Preview for x86/64. For developers, there is also a beta of Visual Studio 11.

We’ll publish a quick look at system requirements for this release, but the short version is that your Windows 7 logo PC is the perfect place to start as the system requirements have not changed. You can upgrade from the Developer Preview or from Windows 7, or install cleanly (we strongly recommend a hardware installation and not a VM install if you are looking to experience the release as the vast majority will experience it, and please keep in mind the minimum screen resolution required is 1024x768). We will be updating the release with various quality updates and drivers over the coming weeks/months just to exercise our overall update and telemetry mechanisms. Please keep in mind that this is a test release of a product still under development.

We’ve got a lot more blogging to do. So stay tuned for details of the changes we made and the features we haven’t had a chance to talk about yet. This blog continues to be a big part of the development process. Now that we have this shared experience, we expect folks commenting on posts to be running the Consumer Preview so we’re all sharing the same context. We know there will be a lot of feedback—that comes from reimagining a product used by a billion people!

Happy downloading and testing!

--Steven on behalf of the Windows 8 team

Then check out the new Windows 8 App Developer Blog! There are already a couple posts up covering the changes.

What’s changed for app developers since //build/ (part 1)

What’s changed for app developers since //build/ (part 2)

Then check out the IE Team Blog for what’s new in for the Web Platform in this release

Web Platform Features in Windows Consumer Preview

Windows Consumer Preview: The Fifth IE10 Platform Preview

There is also a neat little insider interview from the Windows 8 Team on what it was like working on this release. You can check that out over here.

Will my Visual Studio 2010 Windows Azure Developer Tools work on the Consumer Preview with Visual Studio 11?

Yes. But there are a few gotchas you should be aware of. Head over to Azureland here for details.

Can I install the Windows Azure SDK on Windows 8?

Yes but you need to configure a few things manually. Head over here for details.

Will the Windows Phone Developer Tools work on the Consumer Preview?

Yes. But you will need to debug locally on a device for now as the way OS Emulation works in Windows 8 has changed. So the Windows Phone Emulator will not be able to run right now. An update is in the works and you can get more details over on the Windows Phone Dev Blog here.

What is new in Visual Studio 2011?

Check out the new Channel 9 video - Visual Studio Toolbox: Visual Studio 11 Beta with Jason Zander. Jason gives us the inside scoop on a lot of the new changes.

New IDE ([04:15])

Blend support for HTML ([10:15])

Improved XAML Designer ([13:45])

Unit Test Explorer and automatic running of unit tests ([18:45])

Hosted TFS ([24:00])

Metro app development ([29:00])

Any additional Goodies?

Ed Bott has an overview of some of the preview apps you can check out here.

He also has found some “Shortcuts and Surprises” in the new Consumer Release. You can check it out here.

Adam Kinney has also create a great info graphic of the new AppBar Icons available to Metro Style Apps. Check it out here.

The Bing Maps Team announced support for Metro Style you can get all the details here.

Finally, for all of you keyboard and mouse hotshots The Verge has a video comparison of both controls you can watch here.

Free HTML5 Gaming Workshop at Microsoft NYC Office

Dave Isbitski — Tue, 14 Feb 2012 17:44:44 GMT

Looking for some place to get started with HTML5 Gaming? How about porting it to different platforms like iOS and Windows 8? If so you will not want to miss the upcoming free, HTML5 Gaming Workshop from local Jesse Freeman.

What is it?

HTML5 Game Development with Impact

When is it?

DATE: Monday, March 5, 2012
REGISTRATION: 8:00am - 8:30am
TIME: 8:30am - 4:30 pm

Where is it?

Microsoft New York Office

What will I learn?

HTML 5 Gaming is rapidly evolving and there has never been a better time to give it a try. This workshop focuses on using Impact JS to create amazing retro style games in the browsers without a plugin. Impact takes advantage of Canvas, JavaScript and modern browsers (Chrome, Safari, FireFox, IE 9+) to deliver fast fluid games directly in the browser. Even better is that Impact JS works on mobile browsers too.

During this workshop we will cover:
• How to install tools for HTML 5 game building.
• Introduction to Game Design, Game Theory and Web Gaming.
• Intro to ImpactJS.
• Making your first ImpactJS game.
• Game Asset generation with PhotoShop Scripting.
• Working with inheritance, animation and sound in ImpactJS.
• Deployment strategies and distribution (Web, Desktop, Mobile).
• Deploying your game to Windows 8 as a Metro Style App.

Workshop attendees will also get a free non-commercial license of Impact JS along with documentation and lesson source code.

So, what should you do?
• Register now – these will fill up quickly
• Bring a laptop (we may not have room for your awesome liquid-cooled gaming desktop)
• Start thinking of game ideas! Keep them simple to start – you can always make them more awesome later.

It’s a free event, so register today and we’ll see you at HTML5 Game Development with Impact!

New contest announced: “30 to Launch” Your Path to a Windows Phone App in 30 days

Dave Isbitski — Wed, 01 Feb 2012 21:10:05 GMT

With all the buzz around Windows Phone lately there has never been a better time to write an app. Microsoft is offering a new contest to help you get started. This includes training and some great prizes.

Details via the website here..

With great devices hitting the market and the broadly acclaimed user interface based on Metro design principles, Windows Phone is setting the new cool for mobile computing. Take advantage of the excitement and create a cutting edge application - fast. Really fast. 30 days fast.

· Starting Jan 31, you will have access to a weekly schedule with useful videos and guidance from experts to keep you on track.

· In Week 2, you have a chance to request a token* to register for App Hub if you do not already have an account.

· In Week 3, you could get a Nokia Lumia 800* to test your app (And the phone will be yours to keep!)

And, there’s a pretty sweet prize for 4 winners* - a state-of-the-art entertainment package complete with a 3D TV and the ultimate gaming experience with Xbox Kinect.

Are you in? Sign up today at www.30tolaunch.com to join the challenge.

*Challenge and associated offer is open only to legal residents of the 50 United States or District of Columbia who are hobbyists, professionals, or developers in the field of software technology 18+. Additional Terms and Conditions apply. For more information see official rules

Are you a student? Check out the Big App On Campus Contest!

Dave Isbitski — Mon, 16 Jan 2012 14:43:11 GMT

via Ed Donahue…

We see new, amazing experiences created every day by student developers and we wanted to come up with a way to return the favor: we are partnering with the band The Gracious Few (featuring members of the bands LIVE and Candlebox) to create an amazing experience for ten (10) US college students (and their guest) in Austin, TX at SXSW: attend a private concert, receive backstage passes, go to a private dinner with the band, and be interviewed on national radio about their apps.

We’re topping all this off with two $15,000 cash awards (one for the top free app and another for the top paid app) for the two apps that will be named “Big App on Campus.”

Big App on Campus (BAOC) is open to US College and University students who build apps for Windows Phone. Each app created from August 1^st, 2011 until February 14^th, 2012 can be entered and students can submit multiple entries.

Overview of Prizes

Top free app + top paid app get $15,000 each!!
10 students (and their guests) will join us in Austin, TX for SXSW Music festival in March 2012
Transportation, hotel, $500 spending money
Private concert with The Gracious Few
Backstage passes and private dinner with the band

Timeline & Judging Criteria

There are a few dates of note:

February 14, 2012 -> deadline for all entries to be submitted
February 15, 2012 -> Round 1: Judging
February 23, 2012 -> Round 2: Public voting
March 1, 2012 -> Round 3: Public voting to select Big App on Campus
March 13-18, 2012 -> SXSW Music festival in Austin, TX

Every app submitted will be judged on three criteria:

Innovation (40%): How innovative is the app? Does it do something new or does it accomplish something in a new way?
Experience (40%): Does it feel seamless and like a native experience on Windows Phone? Does the app have a polished feel?
Potential (20%): Does the app have potential in the market (lots of users, making money, both) or not?

Public voting will include a combo of number of downloads of the app + “Likes” on Facebook. Semi-finalists will definitely want to think about how they can get their friends, family, fellow-students, and even complete strangers to download and “Like” their apps.

How to Enter

Obviously entering requires building & publishing an app. Each student must also complete the Official entry form (takes 49.7 seconds on average). Here’s what to do:

Register for DreamSpark at http://www.dreamspark.com and for an App Hub membership (both are free of charge for students) at https://users.create.msdn.com/Register/. Also check out our great Getting Started Guide for more info and resources. https://www.dreamspark.com/Products/Product.aspx?ProductId=28
Create & publish a Windows Phone application to the Windows Phone Marketplace. Make the apps free, charge money, put ads in them…it’s up to you.
Visit http://wpdev.ms/BAOCApplication and complete an Official entry form. Do this after you’ve published your apps because you’ll need the App ID.

The full details are in the Official Rules so make sure you check them out.

Eligibility & Rules

Open to all US college/university students (18+)
Rules: http://www.microsoft.com/student/bigapponcampus /
Entry Form: http://wpdev.ms/BA OCApplic ation

My Adventures in HTML5 Gaming

Dave Isbitski — Mon, 16 Jan 2012 13:55:58 GMT

If you will be in the Philly area this Wednesday night stop on by the Microsoft Malvern Office. I will be hanging out with the great Philly.NET folks discussing my recent experiences in HTML5 Game Programming. The evening will kick off at 5:30pm with Brian Minisi giving an overview of TFS11. We’ll do some networking and then Rich Ross will give a quick tip on using LINQ in SharePoint. We'll end the night with some fun HTML5 Gaming goodness.

There will be plenty of food, prizes and jokes (although I can’t promise they’ll be new ones). Hope to see you there!

Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It

Dave Isbitski — Tue, 10 Jan 2012 21:25:37 GMT

I recently presented a Visual Studio Live Orlando session entitled Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It. It was an introductory course for all developers on how to get started with Windows Phone Game development. This included coding our own little game, lots of free sample projects, and tips and tricks I’ve learned a long the way.

I have posted all of the slides and demo projects in the usual My Stuff section on this blog.

Here is a rundown of what you will find inside the zip folder once you download it.

1-XNA-Dave-TrekGame

This was the first piece of code we wrote together and shows the basics of the XNA game loop as well as some simple touch and sound effects. The Content Project consisted of two images: space.png, a large starfield and ship.png. Both of these freely redistributable pieces of artwork were grabbed using Bing Image Search. We also edited ship.png a bit to make it more lifelike using the free tool Paint.Net.

The project was a good first exposure and I took us through each of the common sections in Game1.cs.

Class Variables

Here is where we created the Textures to hold our ship and space field, the vector to track its position and the SoundEffect and its related Instance to add some effects later on. .

            Texture2D shipTexture;
            Texture2D backgroundTexture;

            Vector2 shipPosition;

            SoundEffect redAlert;
            SoundEffectInstance redAlertInstance;

Game1

We used the hardware scalar available in XNA to correctly scale our spaceship for the smaller screen and set the game to run in FullScreen mode. This is one of the common mistakes made by developers first out since running in a dark background will make you think you have a black border when in fact you have the system tray across the top of your game. Testing in both light and dark themes, always a great idea in any phone app, will show the system tray sitting on top.

            //Backbuffer - Dave
            graphics.PreferredBackBufferWidth = 480;
            graphics.PreferredBackBufferHeight = 800;
            graphics.IsFullScreen = true;

LoadContent

This method is where we load all of the content we will be manipulating in our game. In this case we are setting both the space and ship texture and then putting the ship directly in the middle of the phone screen. We are also loading our first sound effect – redAlert into memory and getting an instance of it to detect the state of the sound (playing, stopped, etc).

            // load the sprite's texture
            shipTexture = Content.Load<Texture2D>("ship");

            // load the background texture
            backgroundTexture = Content.Load<Texture2D>("space");

            // center the sprite on screen
            Viewport viewport = graphics.GraphicsDevice.Viewport;
            shipPosition = new Vector2(
                (viewport.Width - shipTexture.Width) / 2,
                (viewport.Height - shipTexture.Height) / 2);

            redAlert = Content.Load<SoundEffect>("RedAlert");
            redAlertInstance = redAlert.CreateInstance();

Update

Now we are in our main Game Loop. From here on out we are going to Update/Draw, Update/Draw, 30 times a second (although Windows Phone is capable of going up to 60 fps we used the default framerate of 30fps that is included in the project template). Each update we check to see if there have been any touches from the user and if there have we take the first one. Once we get the location of this first touch we do some math to move the space ship to the center of the touch point. We then call PlayRedAlert.

            TouchCollection touchCollection = TouchPanel.GetState();
            if (touchCollection.Count > 0)
            {
                TouchLocation t1 = touchCollection[0];

                double x = t1.Position.X - (shipPosition.X + (shipTexture.Width / 2));
                double y = t1.Position.Y - (shipPosition.Y + (shipTexture.Height / 2));
                double speed = Math.Sqrt(x * x + y * y) / 20;

                double angle = (float)Math.Atan2(y, x);

                shipPosition.X += (float)(speed * Math.Cos(angle));
                shipPosition.Y += (float)(speed * Math.Sin(angle));

                PlayRedAlert();

            }

PlayRedAlert

This method will check the current state of the Redalert sound and if it is not playing it will go ahead and fire the Play event. If the sound is still playing (from a recent touch event) it will not override and simply ignore the new touch. If we did not do this sounds would continue to play with every touch and overlap into a loud mess of incoherent noise. We also have the ability to mess around with Pitch and Pan (move the sound between different ears on the headphones). In this case we raised the pitch by 50% and had a Red Alert sound that sounded very much like a Chipmunk.

            if (redAlertInstance.State != SoundState.Playing)
            {
                redAlertInstance.Play();
                redAlertInstance.Pan = 0f;
                redAlertInstance.Volume = 1f;
                //redAlertInstance.Pitch=0.5f;

            }

Draw

The final method took all of our textures and drew them to the screen. Remember that order in the batch is important. If we wanted to background to be draw on top of the spaceship we would only need to move it before the ship in the spriteBatch order.

            GraphicsDevice.Clear(Color.White);

            spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend);

            spriteBatch.Draw(backgroundTexture, Vector2.Zero, Color.White);

            spriteBatch.Draw(shipTexture, shipPosition, Color.White);

            spriteBatch.End();

2-XNA-Gestures

The

The second project, NinaAcademy , is a freely available starter kit on AppHub. NinjaAcademy is a great example of how to use the built in Gestures Windows Phone supports. All of this is done through the TouchPanel and we simply tell it which gestures we want to listen for. For example if we wanted to watch for Flicks we would use something like this:

TouchPanel.EnabledGestures = GestureType.Flick;

We can also listen for multiple gestures such as Flick and Tap we would use the following:

TouchPanel.EnabledGestures = GestureType.Flick|GestureType.Tap;

3-XNA-Accel

I then took us through the feely available Codeplex project, Mango Teapot. Mango Teapot, besides being a great example of using 3d Models and the new Silverlight on XNA capabilities, utilizes the Accelerometer to manipulate the phone. By clicking on the gravity button below the teapot we start to read data from the accelerometer inside the phone.

OnUpdate

if (useGravity)
            {
                if (useMotion)
                {
                    teapot.World = Matrix.CreateFromYawPitchRoll(0, MathHelper.PiOver2, 0) * motion.CurrentValue.Attitude.RotationMatrix;
                }
                else if (useAccelerometer)
                {
                    Vector3 original = new Vector3(0f, 0f, 1f);
                    Vector3 current = new Vector3(accelSensor.CurrentValue.Acceleration.X, accelSensor.CurrentValue.Acceleration.Z, -accelSensor.CurrentValue.Acceleration.Y);

If you recall using the accelerometer in Windows Phone is like any other sensor (Microsoft.Devices.Sensors) we simply add a reference to the namespace, declare the object and then call the start method when we want to begin collecting data. We then tell it which eventhandler we want to use every time a new the sensor detects a new reading (the user moved the phone in some way). You will get data in all three dimensions: X, Y and Z in the –1 to + 1 range. If the user moves the device too hard you may see numbers returned as high as –3 to +3. This is a trick you can use if you want a “shake to reset level” type of functionality just look for consistent readings in the 2s to 3s and you know the user is shaking the device.

Since the release of the Windows Phone 7.5 Developer Tools developers have been treated to accelerometer simulation right through the emulator. Simply click the advanced tools button on the top right of the main emulator window and you will see a screen like the above. Then drag the orange dot around and you will move the simulated phone in three dimensions. You can also jump to specific orientations as well as use recorded data.

4-XNA-SL-Paddle

The final project we walked through was Paddle Battle. Paddle Battle is another free sample publically available on the App Hub. We covered the new Silverlight and XNA Application template, what differed from normal XNA, and how to create a menu system using all Silverlight UIElements in your XNA game. Paddle Battle is a simple example that includes a main menu for enabling sounds and starting the game.

Making Money

I ended the session with a tour of App Hub and Microsoft PubCenter. Most of the strategies I covered around making money can be found in my Real World Windows Phone Development Series here. These included how to get your app featured in the marketplace, free vs. paid, trial download ratios and what Microsoft is doing to help you be successful (contests, content, and free training, etc.).

I hope if you’ve been on the fence about writing a game for Windows Phone these sample projects will be a good starting place. Don’t forget if you live in the United States and are local to NY, NJ, or PA I would love to hear from you!

Are you a Developer or Designer in the NY/NJ/PA area using Microsoft Software?

Dave Isbitski — Thu, 05 Jan 2012 21:14:12 GMT

Why not make 2012 the year you put those skills to use and publish your own app to the marketplace!

A Growing Marketplace

In only a year the Windows Phone Marketplace has grown at a phenomenal rate with over 40,000 apps now available for download. Sites like WP7Applist track published apps on a daily basis:

These numbers continue to climb as more partners like Nokia begin selling their Windows Phones worldwide.

The Windows Phone Marketplace continues to expand into new markets that you can sell your apps in.

All of these new markets and new devices means more potential customers for your app.

Update 1/5 – Todd Brix just announced the ability today for Windows Phone Developers to distribute their apps in 6 new markets; Argentina, China, Indonesia, Malaysia, Peru and the Philippines. This brings the total number of markets you can sell your app in to 41. You can read the full post here.

Growing Your Own Revenue

One of the harder parts of my job is not telling all of the financial success stories I see people, many of them students, reaching today with Windows Phone. It is not my story to tell however and so if you are looking for some real world revenue numbers you will have to hunt around a bit more. A recent public story is from independent Windows Phone Developer, Elbert Perez, who just posted his revenue numbers from last year and he made over $61,000. Who wouldn’t mind that type of income?

One of the other stories I can freely talk about is my own. While not as impressive as Elbert’s numbers my single DoodlePad Free Windows Phone app, which uses the Microsoft Advertising control, has made over $1,100+ last year with close to 19,000 downloads.

Not bad for an app that only took a few days to write and was mostly intended to keep my own two daughters occupied. Keep in mind too this app has never been featured in the marketplace nor any tech blogs so I feel it is a good representation of what an average app might achieve. The advertising has generated enough money for me to upgrade my pc gaming rig to a Solid State Drive and outfit it with a new Nvidia card. While I did not become financially independent it has given me plenty of “Dad Pocket Money” each month that goes a long way. Upgrading my home pc would have never been something I had budget for and now Skyrim never looked so good!.

Easy to get started

With a library of free developer resources, code samples, and videos available in the Windows Phone Developer portal it is easy to get started. Best of all the developer tools are free. It costs absolutely nothing to get started with your app the only time you have to pay Microsoft is when you want to sell your app on the Marketplace. Then it is the standard $99 annual subscription fee and a 70/30 revenue split. This subscription also gives you the ability to publish Xbox games as well.

Developer Devices

I am a Windows Phone Champ who covers the New York, New Jersey and Pennsylvania geographies. I am available to assist you in getting your apps up and running and I have Windows Phones! Are you at the point of wanting to test your app on a device but don’t have a Windows Phone yet? I can ship you a loaner to use for a couple of weeks! Have you written some apps but are under contract still unable to get a Windows Phone? I may be able to get you a device to keep!

If I don’t know who you are though I can’t help you. So please, if we haven’t met yet and you are in these geographies please contact me asap and let me know what you are working on. Specifically I need to know the following:

Company or Individual Info
- Name
- Physical Address
- Website (blog or twitter is fine too)
Primary Contact
- Name
- Phone
- Email
- LiveID (used for Marketplace)
Application(s) Details
- Description (videos are great too)
- When you started development
- If it is a new app or port of existing application (iPhone, Android, RIM, etc.)
- How far along you are
- When you think it will be completed
- If you have published the app already what is the marketplace url

* If you don’t fall in these geographies but are looking for assistance I can connect you with your local champ

Windows 8 – First Apps Contest

Dave Isbitski — Thu, 05 Jan 2012 19:54:13 GMT

Just a gentle reminder for those of you working on your first Windows 8 App. Submissions for the First Apps contest must be submitted this coming Sunday night by 11:59 PST.

via the Windows 8 First Apps Contest website

Windows 8 is powered by apps, and we're excited to see all the great apps our developers will build.

The First Apps contest will select eight winning apps to be the very first apps in the Windows Store when it opens. This is your chance to show off your great app and to be part of an exclusive group of developers invited to participate in the Store when it first opens. The winning developers will also get some goodies to help them build even better apps:

A Samsung Windows Developer Preview PC from the BUILD conference, so you can test your apps with touch and sensors
One year of Windows Azure, so you can build apps that feel connected and alive
A two-year subscription to the Store, so you can continue to update and improve your app

What to know before you participate

Submissions are due by Sunday, January 8 at 11:59pm PST. This gives you just over 30 days to design and develop your app. Finalists will be notified on Sunday, January 15. Finalists must update their app to run on a new, confidential Windows 8 build provided by us and resubmit their app before February 3 to be eligible to win.

You'll need a Windows Live ID to sign in to the contest site and submit your app. You'll also need the Windows 8 Developer Preview with developer tools in order to start building your app.

Our panel of judges is very excited to review the innovative apps you submit. The judges are:

Jensen Harris, Director of Program Management, Windows User Experience
Antoine Leblond, Senior Vice President, Windows Web Services
Jason Zander, Corporate Vice President, Visual Studio

What to consider as you build your app

The judges will be evaluating apps based on how well they embrace the Metro style principles, as outlined at BUILD. Great Metro style apps adapt to a variety of form factors and screen resolutions, so our judges will be evaluating each app on both a Samsung Windows Developer Preview PC (1376x768 resolution) and a laptop (1920x1080 resolution).

Visit the Dev Center to learn more about designing Metro style apps and building Metro style apps.

All apps must comply with the App Certification Requirements, and all apps must be submitted in the English language.

Ready to participate?

Enter the contest ›

Read the Official Rules ›

Win a Samsung Slate or Free Marketing for you Windows Phone Mango Apps

Dave Isbitski — Mon, 14 Nov 2011 17:07:44 GMT

Are you a Windows Phone developer? Do you have an app you are upgrading to Mango? Just getting started and will have an app ready soon? This contest is for you! Simply by submitting apps to the marketplace that are targetting the latest version of Windows Phone you could win a bunch of prizes.

It couldn’t be any easier and you have two ways to win.

Every new Mango app you publish will be entered to win 1 of 5 Samsung Series 7 slates

When you publish 5 new apps, you will earn 1 entry to win free advertising for one app of your choice. The free advertising will run on the Windows Phone Application Network for about 60 days and include 25K impressions.

The contest is running through December 31, 2011 so you still have plenty of time to submit your apps.

Full contest details and signup can be found here.

The new Mango Windows Phones are here!

Dave Isbitski — Tue, 08 Nov 2011 23:30:27 GMT

The Windows Phone Team held a party yesterday in NYC to celebrate the launch of new Mango and the new Windows Phones.

The event included a six story tall Windows Phone complete with live tiles! One of my teammates, Peter Laudati, was on the scene and took plenty of pictures you can check out here. The Windows Phone Team also has a post detailing the event here.

Watch a time lapse video of the giant phone being built here:

If you didn’t make it to NYC yesterday for the event, no worries there are more coming across the US!

9-Nov Miami
9-Nov San Diego
9-Nov DC
9-Nov Denver
10-Nov Baltimore
10-Nov St. Louis
11-Nov Chicago
14-Nov Boston
14-Nov Atlanta
14-Nov Houston
16-Nov Philadelphia
16-Nov Charlotte
17-Nov Dallas
17-Nov Nashville
17-Nov Phoenix
21-Nov Seattle

Ready to party? Then register here!

The Devices

Here is a run down of some of the devices that were being shown off yesterday from both T-Mobile and AT&T:

HTC Radar 4G: Crafted from a single piece of polished aluminum, the HTC Radar is the only white handset in the Windows Phone lineup. $99 after $50 mail-in rebate. Learn more.
Samsung Focus S: Successor to the award-winning Samsung Focus, the Focus S features a brilliant 4.3” Super AMOLED Plus display—the brightest screen in the lineup—a thin 8.55-millimeter profile, and an 8-megapixel camera. $199. Learn more
Samsung Focus Flash: The fast and lightweight Samsung Focus Flash features a 3.7” Super AMOLED screen and 5-megapixel camera. $49. Learn more
HTC Titan: Coming soon from AT&T, the HTC Titan sports a 4.7” screen—the largest in the Windows Phone lineup—an ultra-thin 9.9-millimeter design, and an 8-megapixel camera with dual LED flash.

And let’s not forget all of the great phone announcements from Nokia:

Update 11/9 – Nokia just released an 8 minute video documentary on the making of the Lumia 8. Check it out below:

Spotify

Lastly, if you are a Spotify fan yesterday brought some good news. The Spotify app for Windows Phone is now here.

Check it out!

Get in the game! Announcing a round of free, HTML5 game camps from Microsoft

Dave Isbitski — Fri, 28 Oct 2011 13:02:15 GMT

Have you been wondering about HTML5? Have an interest in creating games? Microsoft is happy to announce a round of free, full day developer training for HTML5 with a specific focus on gaming!

If you haven’t had the chance to get started yet now is the time. These HTML5 Game Camps will get you up to speed and

More details via Chris Bowen here…

Ready to learn HTML5? Enjoy games, too?

Join in the HTML5 Game Camps, free events offering a chance to learn about the next wave of web standards including HTML5, CSS3, Canvas, SVG, and more. And while you gain practical knowledge about HTML5 and JavaScript techniques, it’s all joined together by the fun of creating games!

These are part of the Microsoft Web Camps series and feature a half day of sessions followed by hands-on game creation time. Get up to speed with HTML5 and game dev concepts in the sessions, then turn your ideas into reality as we leave the slides behind. Design and develop creations of your own, with plenty of guidance and help for your questions.

The Schedule

Here’s where the HTML5 Game Camps are heading, with links to details and registration:

Atlanta, GA – November 10 – Georgia Tech – Registration
Cambridge, MA – November 17 – Microsoft NERD – Registration
New York, NY – December 9 – Columbia University – Registration
University Park, PA – December 14 – Penn State – Registration

(Note some of these events are morning through afternoon, and others are afternoon to evening.)

Don’t forget to read the prep steps at the bottom of the event pages. To get ready for coding, consider installing WebMatrix (it’s free) and other tools via the Web Platform Installer. Also, consider attending with a friend and tackling the game creation as a team!

Bonus Points for Rochester, NY

For those of you in the Rochester, NY area, there’s a special RIT Game Camp the weekend of December 2nd-4th. It’s all about game development, and features multiple ways to learn about and create games:

HTML5 Camp (Saturday, 12/3)
Game Jam (all weekend)
XNA in a Day (Saturday)
Windows Phone Camp (Saturday)

It’s free, hosted on the campus of RIT, and open to everyone. So, choose what you’d like to participate in, and enjoy!

October 2011 Philly.Net Code Camp and Alex's Lemonade Stand

Dave Isbitski — Tue, 18 Oct 2011 20:17:00 GMT

The second 2011 Philly.Net Code Camp was held at DeVry University campus in Fort Washington, PA this past Saturday, October 15. As usual the day included:

Lots of code!

8 hours of learning and networking

70 sessions by 60+ speakers

13 tracks + Open Spaces Forum

600 seats with tables

Breakfast, lunch (two groups), and afternoon snack

Raffles and prizes after second lunch and closing

Booster registration option for charity donations, parties, and prizes

Full Day

The content at Philly Code Camp has always been top knotch and you can watch some of the prior years sessions here. This year was no exception! With over 70 sessions from top local speakers the day was packed with content. Here is a breakdown of the tracks:

alt.NET - Brian Donahue - 113
Mitch Ruebush - Designing a REST API for your ______
Stephen Bohlen - Behavior-Driven Development: Turning User Stories into Executable Specifications
Dane Morgridge - The Demystification Of The Allure Of Ruby
John Zablocki - NoSQL and .NET: Relaxing with CouchDB
Vladimir Gizspenc - Using Mono and Open Source to reach MacOS, iOS, Android and Linux

Architecture - Mitch Ruebush - 106
Abraham Sultan - PaaS or Fail: Preparing for Your Changing Role in Software Development and Delivery
Bryan Deitrich - What's a DBA To Do? Continuous Integration and Automated Deployments of Miguel A. Castro - Advanced MVVM: Engineering the UI, Without the UI
Michael Montgomery - Modern Software Architecture: The Business of Building Better
Mike Diiorio - Build Hybrid Applications with the Azure AppFabric Service Bus

Data - Dane Morgridge - 109
Alan M. Silverblatt - Data Encryption 101
David Hoerster - OData and jQuery - Perfect Together
David Hoerster - Expression Trees - The Missing LINQ
Ken Lovely - Using Repository and Unit of Work patterns in EF 4.1 with a WCF Domain Model
Jim Priestley - Real World SQL Azure: Tuning for 27,000 visitors per day searching against a 10,000 row catalog

Framework - Todd Snyder - 132
Daniel R. Clark - The Fundamentals of Object Oriented Programming
Doug White - Getting started with R
Chris Gomez - XNA Levels Up: Publish Your Games Now
Will Robertson - Window Phone MVC
Anthony Mastrean - Event Sourcing Simplified

Mobile Apps - Rob Keiser - 108
Samidip Basu - Let's peel Mangos!
Rob Keiser - Live Tiles in Mango
Greg Shackles - Cross Platform Mobile Development with .NET
Kevin Griffin - jQuery on the Go
Sachin Deshpande - Mobile Web Apps development using MVC3 and JQuery Mobile

SharePoint - Michael Mukalian - 111
David E. Patrick - SharePoint Developer Intro - Building Visual Web Parts
Chris Keyser - Integrating complex web services with a BCS Assembly Connector
Michael Mukalian - "Oh sir, it's only wafer thin!" - Managing Large Lists in SharePoint 2010
David Mann - Instrumentation and Debugging, on-premises and in the Cloud
Jennifer Kenderdine - InfoPath Forms and Web Parts

Silverlight - John Baird - 125
Jason L. van Brackel - Introduction to WPF
John Baird - Silverlight Data Templating and Styling
Joel Cochran - An Introduction to Expression Blend
Andy Schwam - Silverlight - Lessons from the real world
Matt Van Horn - Advanced XAML Tricks

SQL & BI - Said Salomon - 110
Alex Grinberg - Make the system tables work for you.
Said Salomon - SQL Bouncer Logon Security Without Triggers
Joshua Lynn - Learn RegEx in T-SQL & kick \
Mark Kromer - Silverlight in SQL Server BI Reporting Solutions
Dan Hartshorn - How to get started with BI using SharePoint and Office

Tools - John Zablocki - The Orchard Project: From Installation to Customization
Travis Laborde - 134
Travis Laborde - NoSQL? No Way? Yes way!
Jeffrey McArthur - Dependency Injection with MVC3 and Unity (Session, we don't need no stinking Session)
Chris Meadows - Need Some Cache? Redis in Depth.
Doug Finke - PowerShell for .NET Developers

v.Next - Ken Lovely - 105
Tony Verguldi Jr - Building Metro Apps
Roger Doherty - Introduction to Microsoft SQL Server Code Name "Denali"
Bill Wolff - A Lap Around Windows 8
Chris Love - Going Metro Today, Tales from the Trenches
Dani Diaz - Cool New Things Your Windows Phone Apps Can Do

Web Dev I - Nick Berardi - 120
Prasad Bapatla - HTML 5 for ASP.NET Developers
Adam Tuliper - Hack Proofing your ASP.Net MVC and Web Forms Applications
JP Toto - Building a Proper REST API with the new WCF WebAPI
Roberto Hernandez - KnockoutJS and ASP.NET MVC
Dane Morgridge - Intro to Rails 3 with MongoDB

Web Dev II - John V. Petersen - 121
Kevin Griffin - ASP.NET MVC From The Ground Up
Stephen J . Bodnar - Using jQuery UI and Plugins to Make your Sites Look and Work Better
John V. Petersen - Building your first jQuery Plugin
Don Demsak - Not Miguel Castro's WCF - Intro To WCF Made Easy- WCF HTTP Programming Model
Soe Tun - MVC, T4, Scaffolding, & Architecture

Web Dev III - Marc Ziss - 122
Kendall Miller - Massive Scalability for ASP.NET you can Afford
Kevin Buckley - Build your own JQuery widget
Joy Chakraborty - WCF Performance Optimization
Jess Chadwick - Razor: From MVC Views to Maintainable Templating Solutions
Chuck Sailer - Asynchronous Programming in ASP.NET

Open Spaces - Jess Chadwick - 102
An open discussion forum lasting the entire day. The format is deliberately fluid, with the general flow consisting of: participants shout out topics to discuss, vote on a topic, discuss it for 10 minutes (or more... or less), and then pick a new topic. Rinse and repeat for an entire day of lively and intriguing group conversation!

Giving Back

The Philly .NET community also donated over $1,000 during the day to Alex’s Lemonade Stand. If you haven’t heard of this non profit before please click on the link and watch the below video that goes over the story behind who Alex was and her idea for a Lemonade stand. There is also a heartwarming story from a mom who beat her child’s cancer and takes us through a journey of what Alex’s did for them. A great reminder for how blessed we truly are in our industry and what we can do to give some of that back.

Sold out Windows Phone camps help students and professional developers publish their own apps

Dave Isbitski — Tue, 18 Oct 2011 11:20:00 GMT

We are now a month into the latest round of Windows Phone Camps on the East Coast, US and the apps keep pouring in!

Over 80 new apps got created during the Philly, Reston and Cambridge events I attended. You all rock!

If you’ve been thinking of writing an app for Windows Phone now is the time. With over 30,000+ apps already the opportunities to strike it big continue to grow! I have seen steady growth in my own apps on the marketplace as we continue to bring new countries and new advertisers online.

During Cambridge this past week we also had several app developers show up who told their own story and the type of money they were making.

I had the chance to invite one of those people onto stage with me during my “How to make money with Windows Phone” talk. Chevon Christie, is a college student who first attended one of our Windows Phone Firestarters in NYC last year. Since then he has gone on to create several successful apps including NYC Transit that was featured on Gizmodo.

Tara Walker, one of my teammates, did an interview with Chevon you can also check out:

There are more Windows Phone Camps planned so if you haven’t signed up yet you may be able to score a seat and a chance at winning some great prizes!

-Dave