Devlicio.us - Just the Tasty Bits

.NetRocks - Making the Transition from XAML to Html

Derik Whittaker — Tue, 21 May 2013 11:45:00 GMT

Recently I sat down as a guest with Richard and Carl on .Net Rocks and recorded a show on my experiences on migrating from XAML to HTML. Chatting w/ Richard and Carl is always great.

In this episode we tried to focus on my experiences on moving from XAML to Html but when you have 3 guys w/ A.D.D. staying on course is always a challenge :) We were able to talk about:

We talked about TypeScript and how it can make the conversion from .Net to JavaScript easier
We talked about MVVM and how developers LOVE this pattern
We talked about how Winforms is still prevalent in the corporate world… DEAL WITH IT
We talked about many of the things in XAML that can translate to HTML
- MVVM
- Knockout
- XAML layout concepts loosely translate to HTML layout concepts
We talked about my Pluralsight course on Html from the XAML Developer.
- Even plugged my next Pluralsight course – MVVM w/ Knockout for the XAML developer

Again, thanks Richard and Carl, I had a BLAST.

Till next time,

TypeScript references not being created correctly during drag-n-drop

Derik Whittaker — Mon, 13 May 2013 11:49:58 GMT

One of the viewers of my Html for the XAML developer course over on Pluralsight sent me a question regarding the ability to drag and drop a d.ts file onto a TypeScript file and have the reference added correctly.

He said that when he dropped the d.ts file he was expecting to get something like:

/// <reference path="../something.d.ts" />

However, what he got was:

c:\user\[usernamehere]\file\…

To be honest I was not sure what the issue was but did ask 2 questions:

Do you have the TypeScript IDE plugin installed?
Do you have Web Essentials installed?

Turns out he did not have Web Essentials installed, which it appears is what gives you the nice ability to drag-drop a Typescript file into your editor and have it provide the correct reference syntax. I honestly was not aware that it was Web Essentials which did this, just assumed it was part of the TypeScript plugin.

Moral of the story, if you have not already installed Web Essentials DO SO NOW…!

Till next time,

P.S. If you are looking to make the jump from XAML based development to HTML development check out my HTML for the XAML Developer Pluralsight course

Typescript Bundler Issue - Not transforming to JavaScript

Derik Whittaker — Sat, 11 May 2013 18:42:00 GMT

Today one of the viewers of my Pluralsight course was having issues and I was trying to help him via email, but to no avail. I asked him to send me his project so I could take a look myself. I ran the project and sure enough things were odd. I looked at his Typescript syntax and everything looked right, as you see below.

I next took a look to ensure the JavaScript was being loaded correctly and at first glance everything looked right, but then I noticed that the loaded file was NOT JavaScript but rather the raw, untransformed TypeScript. At this second I knew the issue. The Bundler was not bundling the Typescript and turning it into JavaScript.

I checked the bundle configuration and everything looked ok, but clearly there was an issue. After some continued looking I noticed that the TypeScript Bundlertransformer had not been installed.

Once I added the BundleTransformer.Typescript nuget package and recompile the application the world was a happy place.

Till next time,

P.S. If you are looking to make the jump from XAML based development to HTML development check out my HTML for the XAML Developer Pluralsight course

Putting the Dynamic back into TypeScript

Derik Whittaker — Wed, 08 May 2013 10:56:00 GMT

One of the really powerful features that TypeScript brings to the JavaScript world is some Static Typing, even if it is only at code/compile time. With TypeScript I can say that an object is of a certain type which implies there are only a limited set of properties/methods available to me. This is great, but it does limit the core power of JavaScript and dynamic languages in general.

Given the static nature of TypeScript, (yes I can choose to ignore this feature, but why?) which I want in most cases, the following will cause me compile time issues.

The reason this is causing me issues is because MemberInitContext does NOT contain a LoadChoachingStaffStats property, but I know that the caller may provide an object which does contain this object. Below is my definition for MemberInitContext.

Given I know this property MAY be provided at runtime I have a decision to make. I can do any of the following to resolve my build errors.

Add the property to the MemberInitContext
Create a inherited type which contains this property
Change my constructor to take an ‘any’ rather than a type
Add the dynamic back into TypeScript

I am going to choose the last option here, but how? Simple, by redefining the variable to an any INSIDE my constructor as below.

By declaring my type as an ‘any’ TypeScript is happy and lets me hack away and complete my tasks.

Long story shot is that even though TypeScript tries to impose Static typing, which is AWESOME in most cases, you can still force it back to dynamic if you want.

Till Next Time,

P.S. Check out my HTML for the XAML developer course on Pluralsight

My first Pluralsight course (HTML for the XAML Developer) as gone live

Derik Whittaker — Mon, 06 May 2013 11:08:47 GMT

For the past 2 months I have been working on my first Pluralsight course, and it has finally gone LIVE. I had a great time building this course and I hope it shows. In fact I enjoyed it so much I am currently working on my 2nd course.

This course, HTML for the XAML Developer is intended to help XAML based developers (WPF or Silverlight) make the transition to HTML development. I take you, the viewer, through the exercise of porting an existing XAML based application over to be an HTML based one. In this course I used many frameworks but I tried to keep it as vanilla as possible. I know there are 100 different ways to to build HTML sites and even more tools and libraries but I really wanted to focus on many of the basics.

I hope everyone who watches will enjoy the course.

Module Listings

Getting Started – Overview of what we are going to be working on along w/ a quick start of some of the tools
Porting our ToDo Listing Screen – Part 1 - Introduce many of the basics and build a simple listing screen of items
Porting our ToDo Listing Screen – Part 2 – Add some styling and enhanced features
Porting our ToDo Maintenance Screen – Part 1 – Introduce many data entry techniques and basis persistence.
Porting our ToDo Maintenance Screen – Part 2 – Data Validation

Till next time,

Inheritance issue w/ Typescript (JavaScript) and MVC Bundling Ordering

Derik Whittaker — Tue, 30 Apr 2013 13:08:00 GMT

Today I extended one of our classes to use inheritance via Typescript (love that). When I refreshed the page I received an error here

When I dropped to the Chrome debugger and outputted both the values for both ‘d’ and ‘b’ I was a bit shocked. ‘d’ was valid, but ‘b’ was undefined. I tried a whole slew of things but nothing came to mind. Of course I thought maybe I was using inheritance wrong, but my syntax was right.

After some digging online I found this link which talks about how a parent class has to be loaded prior to it child for everything to work. This makes perfect sense given the way JavaScript parses code. I had this brilliant idea that I would simply add a _ prefix to my base class name and that would have the file loaded first. WRONG…

If you look at the image below you can see that _BaseViewModel.js is way at the bottom of the list and my error was being thrown in the AthleteListingViewModel…

Somehow I needed to force the bundler to load the files in the order I wanted. In our case I am NOT including each file into the bundle manually, rather I am using the ‘IncludeDirectory’ feature.

After a bit more searching I found this link which solved the same basic problem but in a much more complex way than I needed. However it showed me how I could solve the problem in a few lines of code. What I needed to do was create a new instance of IBundleOrderer and use it.

This code is my AlphaSortedBundleOrderer which solved my issues.

public class AlphaSortedBundleOrderer : IBundleOrderer
{
    public IEnumerable OrderFiles(BundleContext context, IEnumerable files)
    {
        var sortedFiles = files.OrderBy(x => x.Name).ToList();

        return sortedFiles;
    }
}

After I created my new AlphaSortedBundleOrdered I just needed to use it in my bundler. I did this as you see below.

Once I had my bundler setup correctly I re-ran the page and my .js files were ordered as expected.

Now I am sure there is a 100 ways to solve this problem, but this worked for me.

Till next time,

Knockout Click binding and the ‘this’ context

Derik Whittaker — Mon, 29 Apr 2013 13:05:57 GMT

When using Knockout JS wiring to the click binding is cake and simply just works. Or does it?

Per the documentation there are multiple ways to wire the click binding within your html. Assume you have a method such as (the code below is TypeScript)

        public AddMember(member: MemberViewModel) {
            var self = this;

            // method body here 
        }

You can do any of the following:

data-bind=”click: myFunction()” – this will pass in the current $data instance in by default

data-bind=”click: function(data, event){ myFunction($data, data, event)}” – this will manually pass in the current $data instance

data-bind=”click: myfunction.bind($data)”

All of the above will accomplish the same goal, passing in the current $data object into the underlying method. However, what appears to be the same is actually quite different. The difference comes in when you are going to use the ‘this’ context. Lets take a deeper look.

‘this’ context for option 1:

‘this’ context for option 2:

‘this’ context for option 3:

Did you notice the difference? 2 of the options (1 & 3) set the ‘this’ context equal to the passed in $data object. Option 2 has the context set to the $parent object (in our case the view model).

Now I am NOT saying which one is right and which one is wrong because they are all right. However, I just want to make sure everyone is aware of the differences. In many cases i use option 2 because I want direct access to the underlying view model and this provides this.

I am sure there are many different ways in JavaScript/Knockout to get the parent View Model but honestly I like low friction and option 2 provides this for me.

Till next time.

Validating all observables w/ Knockout validation and Typescript

Derik Whittaker — Sun, 21 Apr 2013 10:52:11 GMT

Knockout js is an awesome MVVM framework for HTML/Javascript development and there is an extension library which performs data validation called Knockout.Validation which is an equally awesome library. Today when doing some coding I needed to validate that all properties on a VM were valid. A quick search showed me this was very easy and should just work. However, I am using Typescript and for all of its awesomeness it sometimes makes life a bit more challenging than expected.

To validate an entire observable all you should need to do is first tell the validation library that your vm is under validation by doing

and then you can simply call a .isValid() on your VM as such.

However, when doing this in Typescript I was getting the red squiggly as you see here.

At first I was not sure why, so I decided to take a peek at the source for the validation and I came across the code you see below.

As you can see, the highlighted yellow is where the .isValid() method is being added to object (obj == your passed in viiew model) so I KNOW that my view model has a .isValid. Sure enough at runtime if I hit a breakpoint and did this.isValid() i would get the response I was expecting. However, because .isValid() was being added to my VM dynamically (this is the amazing power of JavaScript) Typescript did not know about the method and it was causing compile time errors.

How to fix this?

The simple solution that I found was to ‘fake’ Typescript into thinking that the .isValid computed is on my VM from the start. I did this by adding the following to my VM

Now you will notice that I am simply declaring the computed I am NO assigning it and that is ok. In fact if you look at the generated output from the Typescript compiler you will NOT see a computed created for .isValid(). But this does not matter. The Typescript compiler thinks it is there so you are free to use it off of your VM as you see here.

After adding my declaration for isValid() I was good to go and my code worked as expected both at code time and run time.

Till next time,

Typescript, jQuery and the ‘this’ context causing issues

Derik Whittaker — Fri, 12 Apr 2013 15:36:26 GMT

Today I was in the middle of porting some raw javascript over to TypeScript as well as moving inline javascript into separate classes. In the middle of doing this I started to run into some really odd stuff. Namely, the ‘this’ context in one of my methods was set to window, not to the parent object. This was really weird and at first I thought maybe it had to do w/ Inheritance and Typescript (this class implemented a base class). Sadly even when I removed the base class I was still getting the results.

After a bunch of digging I was able to find the root cause, Derik was doing something stupid and jQuery was making it worse :)

In order to get some feedback and to help illustrate my issue.

Here is what my Typescript class which was having the issue looked like. The box in red is what was throwing the error.

From Chrome’s debugger when I would output ‘this’ it would be the browsers window object, not my parents object. This told me something was screwed up but I could not find the cause. That was until I started walking the call stack to see WHERE PerformSearch was being called. Turns out PerformSearch was being called by jQuery… that was odd. In fact below is the code making the call.

Again, why was jQuery calling my method I had not told it to. Well I kept walking the stack and I realized that this was being called during a .ajax call as seen below.

It turns out that the ‘data’ object I was passing across the wire was not just a property bag, but it had methods. These methods referenced ‘this’ and when jQuery tried to searlize the object it is executing the functions, and when it does the ‘this’ context is wrong and BOOM.

To solve this issue I simply refactored my code to NOT have a method and then it just worked.

My question is this. Is what I was doing just dumb and I was an idiot, or is there a way to tell jQuery to NOT try and call my methods during serialization?

Till Next time,

P.S. I know I could have guarded against this in my method by checking that ‘this != window’ but that felt dirty and I had a better solution.

Moving a TFS Git Repository to Github

Derik Whittaker — Tue, 09 Apr 2013 11:16:00 GMT

We gave using the git support in TFS the old college try but the friction and issues were just too much so we decided to move our repository over to github. I am not going to go over our issues w/ TFS git here, but I am thinking of creating a separate post for it.

Because we already had our repository w/ change history setup all we really wanted to do was ‘change remote origin’ for our repository and here are the steps WE took to accomplish this.

Our Steps (it is assume you already have a github account setup)

Go to github.com and create your repository.
Create a copy of your existing tfs/git source and move it to a new directly. I do this simply to ensure I don’t screw anything up and have to do a new pull (i am lazy and xcopy is faster).
1. from c:\TFSRepo –> c:\GithubRepo
Open a git command prompt and CD into the destination directory from step 1
From the command prompt run ‘git remote –v’ this command is a sanity check to double check the current origin of your repository
From the command prompt run ‘git remote rm origin’ this command will remove/clear the origin settings for your reporsitory
From the command prompt run ‘git remote add origin https://github.com/[AccountUserNameHere]/[RepoNameHere].git’ this command will set the origin information to your new repository path in github. Pay attention to the url’s casing as github is case sensitive and you may experience issues if the casing is off.
1. PS. You can get the url above from the github repository page
From the command prompt run ‘git push origin master’ this command will push your current files up to github and publish them. Please note that this will ONLY push the master branch. If you want to push other branches you will need to do a ‘git push origin [branchnamehere]’ for each branch.
Refresh the github.com project page and rejoice in the fact that you are out of TFS and your pain should be greatly reduced :)

These are the steps that worked for us, of course they may be different or better ways, but again these worked for us.

Till next time,

Using Entity Framework Profiler to find Undisposed Object Context’s

Derik Whittaker — Fri, 29 Mar 2013 13:17:11 GMT

If you are using Entity Framework, or any other ORM for that matter you need to head over to Hibernating Rhinos and buy a copy of Entity Framework Profiler, the license will pay for itself in no time flat.

When using any ORM, but in our case EF it is recommended, ok I would say required that you dispose or close your Data Context once you are done with your database transitions. Not closing the context will not immediately bring your system to its knees, but over time as your grow and scale you are going to start noticing memory and performance issues. Sure, you can let the .Net Garbage collector dispose of your context, but you really should be a responsible developer and clean up after yourself, trust me it is worth the effort.

When using EFProfiler you can very easily determine when you left a context dangling open, all you need to do is look at the timings on the executed statements as seen below.

Here is the code which produced the above

var ve = new Entities(DataUtilities.GetConnectionString());

Now I am only showing you the creation of this because as you can assume it was NEVER closed.

To close this I could manually call the .Dispose method or I could use a using statement as seen here

using ( var ve = new Entities(DataUtilities.GetConnectionString()) )
{
}

By using the Using statement above I am explicitly telling the runtime to close the connection, thus freeing my resources and reducing my over head. The image below shows the statement now

As you can see you can find open connections w/ little ease using Entity Framework profiler.

Till next time,

Windows 8 Development w/ C# and XAML – Video Shoot

Derik Whittaker — Fri, 22 Mar 2013 12:06:00 GMT

A while back I was commissioned to do a video series for Pearson Education. This series will be available on their site as well as on Safari online in the near future. One of the unique things Pearson does for their videos is video headshots of you introducing your lessons, which by the way is way harder than I ever thought.

Yesterday the videographer stopped by to do the shoot and I took a few photos so I thought I would share them.

When I have the link to the live content I will share it here as well.

Till next time,

Deploying Database Projects with psake

Derik Whittaker — Tue, 19 Mar 2013 10:32:16 GMT

Recently I joined a project that was using a Sql Server Database Project to manage their DB scheme and so far it is pretty cool. This project type like others has a deploy/publish option which will allow you to publish your changes to a target database. And like other project types this is very easy to do via Visual Studio, but if you know me you will know that I like to automate tasks like these rather than have to use the IDE so I did. Here is what I did in order to use pSake, a build automation tool written in powershell, to handle my clean, build and deployment of my database projects.

Step 1: Learn

Understand the automation options available for this project type and MSBuild

Step 2: Create your psake task file (database.upgrade.ps1)

Framework "4.0x64"

properties {
    $buildSolution = "Database.sqlproj"
    $targetServer = $parmTargetServer
    $targetDatabase = $parmTargetdatabase
    $databaseUsername = $parmDatabaseUsername
    $databasePassword = $parmDatabasePassword
}


task default -depends upgrade

task upgrade{

    Write-Host "Upgrading the $target_database database from $build_solution" 
        
    msbuild /target:clean`;build`;deploy 
                /p:UseSandboxSettings=false 
                /p:TargetDatabase=$targetDatabase 
                /p:TargetConnectionString=`"Data Source=$targetServer`;user id=$databaseUsername`;password=$databasePassword`;Pooling=False`" $buildSolution
    
}

**** Please not that the formatting of the MSBuild above will NOT RUN and is done to allow the sample code to be clean. You the entire MSBuild task needs to be on ONE LINE ****

**** I am setting my properties to ‘parm’ variables because I am passing these into the script by using the –parameters feature of psake ****

There is one part of the MSBuild task above that you MUST PAY ATTENTION TO, that is the way items are escaped. They are being escaped with the back tick (`). If you omit this you are going to get some odd errors depending on what you do. These errors could range from ‘Multiple projects were provided’ to issues with the connection string not being formatted. The root cause for these errors and the need to use the back tick (`) has to do with white space in the connection string… ugg

One you have this psake task setup you can call it like any other task and it should just work.

Till next time,

Durandal 1.2.0 and Caliburn.Micro 1.5.0 Released!

Rob Eisenberg — Tue, 19 Mar 2013 00:10:59 GMT

Two awesome releases in the last week! Much thanks to the great community surrounding both projects! Here’s what’s new:

Durandal 1.2.0

Tons of bug fixes.
Lots of improvements to the router.
Better support for integrating with Q, KendoUI and Dojo.
More docs.

Check out the full set of changes.

Caliburn.Micro. 1.5.0

Nigel Sampson and Thomas Ibel are going to town these days! Some really cool stuff happening in this release. Here’s a few things:

Task and Async support (on all platforms except SL4 and WP71)
Task/Coroutine integration.
Actions can return tasks.
More async stuff in general.
Support for the WinRT Share Charm
Support for the WinRT Settings Charm
Various bug fixes and minor improvements throughout.

You can get the latest versions of both of these frameworks on Nuget.

Where to put custom Knockout Binding Implementations

Derik Whittaker — Sun, 17 Mar 2013 11:10:16 GMT

The other day I was creating my first Knockout Custom Binding which was pretty straight forward. But I was a bit stumped as to what was the ‘best’ practice for where to put this custom binding. Of course I did not want to put it in my view model as that would defeat the purpose/idea behind creating a custom binding, which is to provide a global, reusable way to perform an action. My gut told me to put the binding in its own file but I thought I would ask twitter for its advice and below are some of the responses I received, this told me I was on the right path.

Since the conclusion was to put all custom Knockout bindings in their own file the only thing left to do was to implement this. Here is what I did.

Create CustomKnockoutBindings.ts file

In my case I am using Typescript (in case .ts extension threw you off) So I needed to implement the code below:

If you look at the implemented code you should understand 2 things

We are going to create our bindings within the jQuery Document Ready method. This will allow for our bindings to be created when the page loads. This also prevents us from having to ‘call an init’ method from any of our view models
We are extending the KnockoutBindingHandlers interface (this is found in knockout.d.ts). We need to extend this interface otherwise you will get a compile error from Typescript saying that bindingHandlers.strikeThroughCompleted does not exist on KnockoutBindingHandlers

Once you have the above implemented you should be good to go, only thing left to do now is to implement this in side your HTML.

Implement my custom binding in HTML

In the code above you can see that I am using our strikeThroughCompleted binding in the same manor as the ‘text’ binding immediately to its left.

Till next time,

0 to 60 with Web API Slide Deck from Columbia Enterprise Guild

Derik Whittaker — Fri, 15 Mar 2013 09:34:00 GMT

The other night I had the opportunity to head down to Columiba SC to speak at their Enterprise Guild about Web API. First I would like to thank everyone who showed up, I had a great time and I hope everyone found the information useful.

Below is the content from the session:

Have fun w/ the content and hope to see the group in the future.

Till next time,

Building a Game With JavaScript: Making Things Move

Christopher Bennage — Wed, 13 Mar 2013 16:36:00 GMT

This is a continuation from the previous post.

Setting The Stage

The game we’re building will have waves of enemy ships fly in to attack the player’s units. Let’s begin by making a simple enemy as well as some dummy targets for them to attack. I’m going to keep the graphics very simple for the moment. Likewise we are going to focus on the enemy behavior and not worry about any player interaction just yet.

Here’s a demo of what we’ll make. Click on the start screen to transition into the game. The little yellow rectangles are our enemy ships. Each one projects its own target as a little red circle. Once it touches its target, it projects a new one and then flies toward it.

Let’s start from the top down. Our enemy units will “live” in our main screen for the game. (At least for the time being.) This screen needs to expose the same interface that we had for the start screen we made in the last post. We’ll also add a start method that we’ll call just once in order to initialize things.

Implementation

Here’s the implementation:

  var mainGameScreen = (function () {
    
        // the set of entities we're updating and rendering
    var entities = [];
    // how many enemy ships do we want to start with
    var numOfEnemyShips = 12;
    
    // intitalize the screen, expected to be called
    // once when transitioning to the screen
    function start() {
        for (var i = 0; i <= numOfEnemyShips; i++) {
            // the numbers passed into `makeEnemyShip` could be anything 
            // they don't need to be derived from `i`
            entities.push(makeEnemyShip(i * 10, i));
        }
    }

    // drawing the screen means drawing each of its constituents
    function draw(ctx) {
        // first, clean the canvas
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        
        // delegate the drawing of each entity to itself
        // note the difference in the way the for loop is set up
        var entityIndex = entities.length - 1;
        for (; entityIndex != 0; entityIndex--) {
            entities[entityIndex].draw(ctx);
        }
    }

    // much like draw, we update each of the screen's constituents
    function update(elapsed) {
        var entityIndex = entities.length - 1;
        for (; entityIndex != 0; entityIndex--) {
            entities[entityIndex].update(elapsed);
        }
    }

    // this is the object that will be the main screen
    return {
        draw: draw,
        update: update,
        start: start
    };
}());

Explanation

The entities array will contain a list of the enemies we’re tracking. I used the name “entity” because this is a common term in game development. In general, it means something that has behavior and is drawn to the screen. Thus, you can expect entities to have update and draw methods. This is not a hard and fast definition though. You’ll find that the specifics of the definition can vary among engines, frameworks, and developers.

In our start function we populate entities by invoking our (as yet undefined) makeEnemyShip function. I’m passing in two numbers that makeEnemyShip will use to set the x and y position of the ship. I could have used random numbers or even hard coded values, however deriving from the loop’s controls makes it easy to cluster all the ships in the upper left corner of the screen.

The draw and update functions for the screen are very similar. They both iterate over entities and invoke the corresponding function on each entity. They also pass along the necessary context. For draw, this is the 2D drawing context of the canvas and for update it’s the elapsed time since the last frame.

Notice how the loop is structured differently from the loop in start. This is a performance optimization; though it has little consequence with so small an array. On some browsers, the call to length is a bit expensive. (Especially in cases when the array isn’t an array, but something that is array-like.) This adds up when you make the call once per iteration of the loop. We move it out of the loop so that we only call it once. Check out this test. Performance optimizations are tricky and change every time new browsers are released. It’s easy to get confused, and I recommend profiling your code frequently to look for hot spots rather than just guessing about optimizations. I hope to talk more about them later, but if you want more now check out the book High Performance JavaScript by Nicholas C. Zakas.

I had originally written my loops using the newer Array.forEach to iterate over entities. However, this proved to be significantly slower than a for loop.

The screen’s draw method also resets the canvas at the beginning of each iteration. If we did not do this, then every thing we drew on previous frames would still be present. For the start screen, I used clearRect however here I used fillRect with a solid color.

Here’s a function that will produce a simple enemy. It follows the same structure we’ve been using, update to handle the behavior and draw to actually draw it on the screen.

Some Bad Guys

Our enemy ships are a little more complicated than the screen they live on. Visually, they appear to have two components. The little yellow rectangle that moves about the screen and the phantom target that they project as a little red circle. In the final game, they will target one of the player’s units. However, the logic is very similar. In fact, it may become useful in debugging to how each enemy ship render something over it’s actual target.

Implementation

// alias (and pre-compute) the angle of 
// a full circle (360°, but in radians)
var fullCircle = Math.PI * 2;

// invoke this function to create an emeny ship entity
// to add to the main game screen
function makeEnemyShip(x, y) {
    
    // position is set based upon the values
    // provided to the function
    var position = {
        x: x,
        y: y
    };
    // the diretion the ship is facing
    var orientation = 0;

    // how quickly can the ship turn?
    var turnSpeed = fullCircle / 50;
    // how quickly can the ship move?
    var speed = 2;
    
    // the phantom target the ship
    // is pursing
    var target = findNewTarget();    

    // the function invoked from the screen's update
    function update(elapsed) {
        // determine how close we are to our target
        var y = target.y - position.y;
        var x = target.x - position.x;
        var d2 = Math.pow(x, 2) + Math.pow(y, 2);
        if (d2 < 16) {
            // we've essentially "touched" it,
            // so create a new target
            target = findNewTarget();
        } else {

            // what's the different between our orientation
            // and the angle we want to face in order to 
            // move directly at our target
            var angle = Math.atan2(y, x);
            var delta = angle - orientation;
            var delta_abs = Math.abs(delta);

            // if the different is more than 180°, convert
            // the angle a corresponding negative value
            if (delta_abs > Math.PI) {
                delta = delta_abs - fullCircle;
            }

            // if the angle is already correct,
            // don't bother adjusting
            if (delta !== 0) {
                // do we turn left or right?
                var direction = delta / delta_abs;
                // update our orientation
                orientation += (direction * Math.min(turnSpeed, delta_abs));
            }
            // constrain orientation to reasonable bounds
            orientation %= fullCircle;

            // use orientation and speed to update our position
            position.x += Math.cos(orientation) * speed;
            position.y += Math.sin(orientation) * speed;
        }

    }
    
    // the function invoked from the screen's draw
    function draw(ctx) {
        
        // save the context's state before we translate
        // and rotate
        ctx.save();

        // translate to the entity's position
        ctx.translate(position.x, position.y);
        // rotate the canvas according to the 
        // entity's orientation
        ctx.rotate(orientation);
        
        // now we begin the actual drawing
        ctx.fillStyle = 'yellow';
        // using negative number to center 
        // around the translated origin
        ctx.fillRect(-3, -1, 6, 2);
        // restore the canvas since we're 
        // done drawing the entity 
        ctx.restore();

        // now we draw the phantom target
        // though we'll do so without translating
        // since it's so simle to draw
        ctx.beginPath();
        ctx.fillStyle = 'rgba(255,0,0,0.5)';
        ctx.arc(target.x, target.y, 2, 0, Math.PI * 2, true);
        ctx.fill();
    }

    // create a random x,y within the bounds of the canvas
    // note, we've hard coded the bounds
    function findNewTarget() {
        var target = {
            x: Math.round(Math.random() * 600),
            y: Math.round(Math.random() * 300)
        };

        return target;
    }

    // return an instance of the enemy,
    // it's state is captured in the closure
    // of the functions
    return {
        draw: draw,
        update: update
    }
}

Explanation

Each enemy ship will be responsible for tracking its own state. In this code, the state is captured in a closure. In later code, we’ll track the track in a more traditional way. (I haven’t ran tests yet but I think that using a closure may have a performance impact.)

All of these variables represent the enemy ship’s state.

var position = { x: 0, y: 0 };
var orientation = 0;
var turnSpeed = fullCircle / 50;
var speed = 2;
var target = findNewTarget();

position is the location on the screen where we will render our ship.

Technically, the is the position in “world space”. World space is the logical space that entities in your game “live in”. This is distinct from “screen space”, which corresponds to the actual pixels on the screens. You can think of it this way: in your game you might have a circle with a radius of 10 and located at (100,100). However, where you draw it on the screen will depend upon where the player is viewing it from. If the player zooms in, the circle will grow larger but this doesn’t change the logical position or radius of the circle. We use the term “projection” to describe this. We project from world space into screen space based upon how the player is viewing the game world. The simplest project of course is just 1:1. Which means that there is no difference between world space and screen space. That’s what will stick with for the moment.

orientation is the direction the ship is currently facing. Our ship will always travel in the direction of its orientation. This constraints causes the ship travel in smooth arcs as opposed to abruptly changing its course.

turnSpeed and speed represent how quickly the ship can turn and how fast it can travel respectively. We won’t be modifying these values after setting them, which means the ship will turn and travel at constant rates. These values represent the rates of change for orientation and position. Note also, we defined turnSpeed in terms of fullCircle. This is an alias for Math.PI * 2; we are dealing in radians and not degrees.

target is a value with the shape { x: Number, y: Number }. The ship will always attempt to move towards this value by adjusting its orientation.

Update

The update function is the real meat of the enemy ship. First, we check to see if we are close to our target. If we are close enough, we consider our goal accomplished and we set a new target. Otherwise, we change our orientation so that we are flying toward our current target.

var y = target.y - position.y;
var x = target.x - position.x;
var d2 = Math.pow(x, 2) + Math.pow(y, 2);

Here, x and y are really the distance between target and position along the respective axises. We want to know these values in order to calculate the distance between them. In general, you use the Pythagorean theorum to calculate distance. For deeper dive into the math, watch Distance Formula on Khan Academy. Finding the actual real distance uses a square root and calculating a square root is an expensive operation that’s best to avoid whenever you can.

We can bypass the need by working with the distance² (hence the variable name d2). We compare this against the hard-coded value of 16 (that’s 4²). In other words, if the distance between the ship and its target is less than 4 units we find a new target.

if (d2 < 16) {
    target = findNewTarget();
}

Once we’ve established what the ship’s target should be, we want the ship to move toward the target. As I’ve just mentioned, I’ve chosen to have the ship move at a constant speed. This means that it does not slow down or speed up. The only thing it can do is to change the direction it’s facing (orientation). These sort of constraints determine the personality and character of your game. Bear in mind, you don’t need to simulate the physics to have a fun game. Instead, you need to establish behaviors for your game entities that are merely fun. Fortunately, fun behaviors can often be easier to implement that the actual physics. I recommend taking a look at the demo and tweaking the turnSpeed and speed values to get a small taste for how the behavior can affect the game’s character.

In order to change the ship’s orientation we need to first determine where the ship ought to be facing. The values of x and y we just calculated can be interpreted as a vector. Meaning, it represents the direction and distance (magnitude) from the ship to the current target. To extract the actual angle (in radian) we use Math.atan2(x,y).

var angle = Math.atan2(y, x);
var delta = angle - orientation;

So now we have the direction the ship wants to face, angle, and the direction that it is facing, orientation. We calculate the difference between them and store it as delta.

The basic idea is that add the value of turnSpeed to orientation once each invocation of udpate until delta is 0 (meaning that the ship is flying directly at the target). However, some values of delta will cause the ship to “turn the wrong way”. For example, imagine that the ship is facing the top of the screen and that we’ve defined that as orientation === 0. Now, imagine that the target is directly to its right. The value of angle would be π/2 (or 90°). Adding turnSpeed to orientation each frame increments the value from 0 to π/2. However, if the target is directly to the left, then the value of angle would be 3π/2 (or 270°). Simply incrementing orientation would cause the ship to turn right and keep turning right. This is unintuitive behavior; we expect the ship to turn the shorted distance. In order to accomplish this, we translate any value of delta higher than π (180°) by subtracting fullCircle. This normalizes the value of delta between -π and π (or between -180° and 180°).

var delta_abs = Math.abs(delta);
if (delta_abs > Math.PI) {
    delta = delta_abs - fullCircle;
}

We take the absolute value of delta because otherwise we’d have to check for delta < -Math.PI as well. Also, we’ll use delta_abs again.

If delta is 0, we don’t need to change orientation. When it is different we need to modify the value of orientation.

if (delta !== 0) {
    var direction = delta / delta_abs;
    orientation += (direction * Math.min(turnSpeed, delta_abs));
    orientation %= fullCircle;
}

First, we decide how much to change it using Math.min(turnSpeed, delta_abs). We could just use turnSpeed. However if we did it’s likely that delta would never quite be 0 and (depending on the size of turnSpeed) it could result is jittery motion. Secondly, we want to decided which direction to turn: positive values to the right and negative values to the left. We multiply the amount direction to change the sign, because direction will only ever be 1 or -1. Finally, we modulo orientation to ensure that it stays within a range of -2π to 2π. Otherwise, the calculation of delta would be off.

Our last step in update is to modifiy the actual position using the latest orientation and speed.

position.x += Math.cos(orientation) * speed;
position.y += Math.sin(orientation) * speed;

Some basic trigonometry is fairly fundamental for most game development. If you’re mathematically lost at this point, I recommend reviewing over at Khan Academey.

Here’s the geometric interpretation of the code. We want the ship to move a distance of speed in the direction of orientation. To do this, we need to project this vector (distance and direction) on the x and y axises. Since the distance is the length of the hypothenuse of right triangle, cosine gives us the x part and sine gives us the y part. We can then add these values to the current position.

Draw

Drawing the ship to the screen is a bit easier to follow. Here’s the flow of the logic:

Save the state of the drawing context.
Transform the context to make it easier to draw our ship.
Draw the ship.
Restore the context back to its original state.

Draw the target

  function draw(ctx) {

      ctx.save();

      ctx.translate(position.x, position.y);
      ctx.rotate(orientation);

      ctx.fillStyle = 'yellow';
      ctx.fillRect(-3, -1, 6, 2);

      ctx.restore();

      ctx.beginPath();
      ctx.fillStyle = 'rgba(255,0,0,0.5)';
      ctx.arc(target.x, target.y, 2, 0, Math.PI * 2, true);
      ctx.fill();
  }

Recall that ctx is the drawing context for the canvas. The context provide a useful API that allows us to move it around before we draw on it. This is analgous to having a sheet of paper that you might shift and rotate in order to make it easier to draw something complicated. This is the purpose of the translate and rotate methods.

First, we use ‘save’ to establishing a checkpoint for the drawing context that we can easily revert back to using ‘restore.’ The calls to translate and rotate modify the state of the drawing context. This modified state is very specific to the drawing of our enemy ship. If we didn’t translate and rotate the canvas, we’d have to do a lot more work to figure out where to draw the four corners of the rectangle.

I decided that I want my ship to be 6px long and 2px wide. Since I want the middle of the middle of my ship to be the point where it rotates, I shift by half the length and half the width. Hence, the values passed to ctx.fillRect(-3, -1, 6, 2). This point the new origin (0,0) at the middle of the rectangle, and it makes our call to rotate behave intuitively. If we used ctx.fillRect(0, 0, 6, 2) instead, then the ship would appear to rotate around its upper left corner. We’ll use these same techniques once we switch to using sprites.

After we restore the context’s state, we draw the target. We don’t bother using rotate because it’s meaningless to rotate a simple circle. Likewise, we don’t bother translate since the drawing logic is so simple.

The canvas is a broad topic in itself. I recommend taking a look at the tutorials over at MDN. A handy reference for the APIs themselves can be found on MSDN.

Comment on this post at dev.bennage.com

Working on my first Pluralsight course – Html for the XAML Developer

Derik Whittaker — Fri, 08 Mar 2013 11:27:00 GMT

It’s official, I have been commissioned to author my first Pluralsight course and I am pretty excited. My first course is going to be ‘Html for the XAML Developer’. The objective for this course is to walk a XAML developer (Sliverlight, WPF, WP7, etc) through the process of porting a Silverlight application over to HTML. I will accomplish this by breaking our reference application down into bit size chunks and rebuilding it in HTML. In each step along the way I am going to compare our XAML code to our new HTML code in order to allow the view to understand how their existing knowledge can be applied to HTML.

In the course I am going to use the following tools:

jQuery
Knockout
Typescript
ASP.Net MVC
ASP.Net Web Api
Many, many others

Here is a screenshot of part of our reference XAML application

Here is what we expect to build via HTML

I am planning to have this course go live sometime in May so if your a pluralight subscriber please be sure to check it out when it does.

Till next time,

Knockout JS and mapping from Json to a custom object type

Derik Whittaker — Wed, 06 Mar 2013 11:28:03 GMT

One of the really cool features of Knockout js is the ability to take a raw json object, say from a web endpoint, and map it to an observable. This is done via the mapping plug-in.

Take a look at the code below for an example

$.get(url)
    .done((data) => {
        var temp = self.ToDos();

        _.each(data, (item) => {
            var toDoVM = ko.mapping.fromJS(item);

            temp.push(toDoVM);
        });

        self.ToDos.valueHasMutated();
    });

The magic above is the line ko.mapping.fromJS(item), this is what will take my json object and convert it to an observable. Proof is below.

Below is the output via the Chrome Dev tools of our ‘item’ prior to mapping. Notice we have raw properties.

Here is the output after the mapping, notice how now we have functions rather than properties. This tells me I have a knockout observable.

There is one little issue here in the mapping above. The issue is that the resulting type from the mapping is ‘object’. Now this could be 100% ok but what if you want to custom object type for your binding. Maybe you have computed properties you want to use as well. Fortunately you can accomplish this via Knockout as well.

Assume I have this custom type as seen below (this is using TypeScript

export class ToDoListItemViewModel {
    public Id: KnockoutObservableNumber = ko.observable(0);
    public Task: KnockoutObservableString = ko.observable("");
    public DueDate: KnockoutObservableString = ko.observable("");
    public ReminderDate: KnockoutObservableString = ko.observable("");
    public Priority: KnockoutObservableString = ko.observable("");
    public Category: KnockoutObservableString = ko.observable("");

    public DisplayDueDate: KnockoutComputed = ko.computed(() => { return "aaa" });

    constructor() {
        this.DisplayDueDate = ko.computed(() => {
            var displayDate = "";
            if (this.DueDate && this.DueDate() != "") {
                displayDate = moment(this.DueDate()).format('L');
            }
            return displayDate;
        });
    }
}

How could I use Knockout mapping to returned a typed observable?

Turns out it is really simple. The code below shows how

$.get(url)
    .done((data) => {
        var temp = self.ToDos();

        _.each(data, (item) => {
            var toDoVM = ko.mapping.fromJS(item, {}, new ToDoListItemViewModel());

            temp.push(toDoVM);
        });

        self.ToDos.valueHasMutated();
    });

The ONLY difference in this code is in the ko.mapping.fromJs line. Notice how I am passing in 2 extra arguments. The 2nd argument is the one I want and this is the ‘target’ output type.

Now when I look at the output in the debugging tools I get what I want, a typed object being returned

So the trick to returned a typed observable is to use the overload of the .fromJS method.

Till next time,

Nuget Packages for Typescript Definition Files

Derik Whittaker — Sun, 24 Feb 2013 12:09:10 GMT

If you have been using TypeScript you should be aware the definition file repository maintained by Boris Yankov called DefinitelyTyped. This repository is awesome because it saves so much time and effort when working with 3rd party libraries with Typescript.

However, as great as this repository is it has always been painful getting the actual d.ts files for each library. You would have to go to the site, navigate to the file, save the file and add it to your solution…. this sucked.

If only there was a tool to help automate this? Oh wait there is, it is called Nuget.

I got the bright idea to start creating some Nuget packages around the d.ts files I am using so I posted them here. The only problem with this is I was only creating the packages I cared about but more importantly I was creating these by hand and that is time consuming and I am lazy.

But yesterday I received some awesome news from Jason Jarret (aka @staxmanade) on twitter as seen below

This is awesome news. Now all the d.ts files hosted in the DefinitelyTyped repository now have Nuget pacakges… w00t!

To see the list of Nuget packages follow this link.

Awesome work Jason,

Till Next Time,

P.S. I will be taking my nuget packages offline very shortly as they should not be used anymore.

Introducing Durandal

Rob Eisenberg — Mon, 18 Feb 2013 18:32:00 GMT

Today I'm very excited to officially bring to you Durandal!

Durandal is a new open source JavaScript library for rich client application development. It focuses on providing an enjoyable and productive developer experience centered around simple conventions and standard patterns like MVC, MVP and MVVM. Durandal is built on libs you know and love like jQuery, Knockout and RequireJS, so there's little to learn and building apps feels comfortable and familiar.

Here's a short list of it's features:

Clean MV* Architecture
JS & HTML Modularity
Simple App Lifecycle
Eventing, Modals, Message Boxes, etc.
Navigation & Screen State Management
Consistent Async Programming w/ Promises
App Bundling and Optimization
Use any Backend Technology
Built on top of jQuery, Knockout & RequireJS
Integrates with other libraries such as SammyJS & Bootstrap
Make jQuery & Bootstrap widgets templatable and bindable (or build your own widgets).

I'm also pleased to announce that I've been working with the ASP.NET team to bring Durandal to you as an ASP.NET MVC Template, released today and compatible with the new Web Tools 2012.2 release. You can grab the VSIX, install it and get started very quickly building rich web apps now. If using the VSIX isn’t your style, we’ve got several nuget packages available too. Finally, if you just love NodeJS, you might be interested in using our Mimosa skeleton.

To learn more, please visit the official site, where you will find the getting started guide, documentation, videos, training and commercial support options.

Stay tuned. There's lots to say about Durandal and I look forward to sharing it with you in the coming weeks and months.

Entity Frame Performance Gotcha

Derik Whittaker — Tue, 12 Feb 2013 19:44:19 GMT

I was doing some profiling of our Entity Framework stuff via EFProfiler the other day and noticed something really odd. When I was watching the profiler I noticed that I had a query returning back over 1300 results and that was NOT right, I had expected only 1 result. I looked the resulting sql and immediately I ‘thought’ I knew the issue. I thought the issue was that I had not setup my where clause correctly in my EF… Turns out I was both right and wrong at the same time.

Below is a sample of my EF code

** note that I replaced the dynamic variables w/ static for testing inside of LinqPad **

When I run these statements above and look at the resulting sql in LinqPad I would expect to see 2 queries. Sure enough I did have 2 of them. What shocked me was that the 2nd query ONLY did a where clause filter on ClientID (see below)

This had a resulting output of below, which is the expected result

But if you run the sql generated above (2nd statement) you actually get 1327 results. This tells me that indeed the ENTIRE result for a client was being pull out of the DB, pulled over the wire and filtered down on the client…This is not good.

Now I tried a few different things to see if I could get different results such as doing a .FirstOrDefault rather than a .Where… No dice

Finally one of my coworkers found this Stack Overflow link which talks directly to this issue.

Turns out this behavior is by design and I had never noticed it before. I (and 3 of my coworkers mind you) had just assumed that when EF did a lazy load off of a previously fetched IQueryable it would include any filter statements and pass those to the SERVER. But because the .Images is NOT a IQuerable but rather an EntitySet<T> it did not work as expected.

To solve this issue I simply just changed my statement to go directly at my EF context for the ONE row I wanted w/ both keys (client and type). This solved my issue as well as give me a pretty significant performance enhancement.

Long story short is that if you are going to lazy gather data in EF make sure you are doing your filtering on the server rather than the client and make sure you understand that an EntitySet does NOT do this only an IQuerable does this.

Till next time,

Help I am getting an XMLHttpRequest exception of Access-Control-Allow-Orig

Derik Whittaker — Sun, 10 Feb 2013 12:34:06 GMT

When working on a demo application recently I was trying to get an ajax call to hit one of my Web API routes and I was immediately hit with the following exception.

XMLHttpRequest cannot load http://localhost:33884/api/ToDo/. Origin http://localhost:3462 is not allowed by Access-Control-Allow-Orig

Of course this sucked because I KNEW what the issue was but not exactly how to solve it. Well solve it the way I wanted. Of course i could have just put both my sites (MVC project and WebAPI project) under the same web application in IIS to remove this but that was not an acceptable answer for my needs.

After a bit of searching online I thought I came across an solution that would work. I thought that I could just set the crossDomain switch in my ajax call as below to get it to work, but no dice.

$.ajax({
    url: url,
    type: 'Get',
    crossDomain: true,
    success: (data) = & gt; {
        // do something here
    },
    error: (data) = & gt; { }
});

I found another suggestion telling me to change the dataType of request form json to jsonp as below, but as you may have guessed that did not work.

$.ajax({
    url: url,
    type: 'Get',
    dataType: jsonp,
    success: (data) = & gt; {
        // do something here
    },
    error: (data) = & gt; { }
});

Finally at a bit more searching I found more information which suggested I needed to add a response header on the server side to allow ‘Access-Control-Allow-Origin’ and this Stack Overflow answer gave me all the details needed to make this happen in Web API. Once I implemented the solution inside my WebApi endpoints and REMOVED the 2 un-needed attributes in my .ajax call the world was a happy place and I was able to make cross domain calls to my other services.

Till next time,

How to use the Accelerometer in Windows 8 C#/XAML Applications

Derik Whittaker — Sun, 27 Jan 2013 20:15:24 GMT

This post is part of a mulit-part posting series on how to use some of the onboard device sensors in Windows 8 applications. Other posts are:

Light Sensor
Gyrometer Sensor
Inclinometer Sensor
Accelerometer Sensor (this post)

Most tablets and laptops these days have an array of sensors onboard the device that developers can use and take advantage of. One of the sensors which is on most tables and laptops is the Accelerometer Sensor. The Accelerometer sensor can be used to get a acceleration force of the device on the x y and z axis, or basically measure how fast it is moving in any given direction. With the Accelerometer you could build interesting augmented reality applications which react to the forces of the device. In this post we are going to take a look at how to use the Accelerometer Sensor from within your C#/XAML Windows 8 application.

How to get access to the Inclinometer

private Sensor.Accelerometer _accelerometer;
private void SetupSensor()
{
    _accelerometer = Sensor.Accelerometer.GetDefault();

    if (_accelerometer == null)
    {
        // tell user they don't have an Accelerometer
    }
}

In the above code what we are doing is making the call to get the Default sensor, this is the sensor on the device. If there is NO sensor on the users device it will return a NULL instance which is why we are checking for null. Make sure you do the same in your code

Register to receive event updates when the Accelerometer values change

private void SetupEventing(bool enableEventing)
{
    if( enableEventing)
    {
        _accelerometer.ReadingChanged += AccelerometerOnReadingChanged;
        CurrentReadingStyle = 'Eventing';
    }
    else
    {
        _accelerometer.ReadingChanged -= AccelerometerOnReadingChanged;
        CurrentReadingStyle = 'Stopped';
    }
}

In the above I am either registering for an event or unregistering. The event is what will give us the updated values as they change based on the movement of the users device.

Doing something useful with the sensor readings

private CoreDispatcher _dispatcher;

private async void AccelerometerOnReadingChanged(Sensor.Accelerometer sender, Sensor.AccelerometerReadingChangedEventArgs args)
{
    await _dispatcher.RunAsync(CoreDispatcherPriority.Normal, 
        () =>
            {
                XAcceleration = args.Reading.AccelerationX;
                YAcceleration = args.Reading.AccelerationY;
                ZAcceleration = args.Reading.AccelerationZ;

                SetupNewLocation();
            });
}

In the above I am doing 2 things of note:

I am using a CoreDispatcher (you can get this from Window.Current.Dispatcher) in order to message the results back onto the UI thread. If you do not need to message back to the UI thread you will NOT need this
I am getting the current reading for each axis via the .Reading property of the event argument. It is here you could do something useful with the reading.

Apart from being able to get the changed events for the Accelerometer you can also detect if the device has been shaking by listing to those events as well.

Register to receive event updates when the Accelerometer shaek change

private void SetupShaken(bool enableShaking)
{
    if ( enableShaking )
    {
        _accelerometer.Shaken += AccelerometerOnShaken;
        ShakeCount = 0;
        CurrentReadingStyle = "Shaking";
    }
    else
    {
        _accelerometer.Shaken -= AccelerometerOnShaken;
        CurrentReadingStyle = "Stopped";
    }
}

In the above code I am wiring an event to tell me each time the Accelerometer notices the device has been shaken.

Handle the Shaken Event and do something.

private async void AccelerometerOnShaken(Sensor.Accelerometer sender, Sensor.AccelerometerShakenEventArgs args)
{
    await _dispatcher.RunAsync(CoreDispatcherPriority.Normal,
                                () =>
                                    {
                                        ShakeCount = ShakeCount + 1;
                                    });
}

In the above code I have received the Shaken Event and I am simply updating a counter. Of course in a real world app you would want to do something a bit more exciting, but this gets the point across.

As you can see working with the Accelerometer sensor is not too hard and can lead to some pretty useful features in your application.

Till next time,

Handling Resuming in your Windows 8 Applications

Derik Whittaker — Sat, 26 Jan 2013 12:43:31 GMT

Windows 8 applications (aka Windows Store applications) have 3 different life cycle states they can go through:

Launching
Suspending
Resuming

Handling both Launching and Suspending is pretty much covered out of the box but what if you need to resume from a suspended state? In most normal scenarios you should not have to do too much here because the built in SuspensionManager (this is generated code, not framework code) will handle putting your application back together in terms of what page your user was on and how the page/screen was populated when it was suspended.

However, if you are using data which is gathered from a remote source such as a web service you may want to refresh your application when it is resuming from suspension. But how exactly can we accomplish this?

Hooking up the Resuming Event

public App()
{
    this.InitializeComponent();
    this.Suspending += OnSuspending;
    this.Resuming += OnResuming;
}

You need to wire up the .Resuming event inside your App.cs class. By default the template only wires the Suspending event as it is used in almost every application.

Handling the Resuming Event

private void OnResuming(object sender, object o)
{
    var asFrame = Window.Current.Content as Frame;

    var layoutAwarePageContent = ((LayoutAwarePage) asFrame.Content);

    if (layoutAwarePageContent != null)
    {
        if (layoutAwarePageContent.DataContext is IResumable)
        {
            var asIResumable = ((IResumable) layoutAwarePageContent.DataContext);
            asIResumable.Resume();
        }
    }
}

As you can see above it does take some effort to get to your underlying viewmodel in order to make the Resume() call but it is well worth it.

We first need to get the current frame. Once we have the frame we want to check to ensure it is of the correct type in order to further check its underlying data context. Finally we want to check out data context to ensure it is of the correct type. Doing this final check will safe guard us and allow us to only make the resume calls on pages which require it.

Doing something useful in our Resume() call

public class DashboardViewModel : BaseViewModel, IResumable
{
    public void Resume()
    {
        // do something useful here like fetching data via a web service
    }
}

In the Resume() is where you would need to handle any remote data fetching or updating of existing data.

Defining our IResumable interface

public interface IResumable
{
    void Resume();
}

Our above interface is small, but it does the trick. It allows us to identify which pages need to be resumed and enables a way to make the call

As you can see handling the Resuming event in a Windows 8 application is not hard, however getting to your underlying data context does take a bit of work, but this work is well worth it in my opinion.

Till next time,