Chris Sainty

Getting deeper into Open Source

noreply@blogger.com (Chris Sainty) — Wed, 25 Jan 2012 23:07:00 +0000

It’s about 8 months since my first contribution to an open source project. It was followed up minutes later by one to reverse all the accidental formatting changes I made. Damn you Visual Studio!

I am happy to say that it was not an isolated contribution though.

Now I am by no means a prolific contributor and my spare time is more often spent tinkering with my own ideas and projects rather than working hard on open source. However, there has been a steady enough flow of pull requests and projects to keep me satisfied that I am at least involved.

RavenDb and Nancy are where most of my focus has been. Two great examples of modern C# open source development.

In my own right there have been RavenDb plugins for Glimpse and MvcMiniProfiler.

Straying from C# there is even a start being made on a Node.js client for RavenDb. Getting started with Node has been an absolute blast, and my first serious attempt at adding a new language to my skill set since C#. Sure I’ve dabbled with jQuery heavy javascript in the past to add a little life to a web page, but truly learning the object model and scoping rules of javascript is a different beast entirely.

Most recently, as in last week, I have been pitching in at Code52, a new idea for this year which tackles a new project every week. It has been very .NET focussed so far, but that is simply a product of the founding core of developers having .NET backgrounds. At the end of the day, the people who are in the chat room at the start of each project are the ones who decide the technology stack. I hope to get them doing a Node project at some point this year.

The project from last week was IdeaStrike a UserVoice inspired (clone?) site that you can simply deploy to AppHarbor and manage yourself to track ideas and gather feedback about your product. You can see it in action at http://ideastrike.apphb.com/.

It uses Nancy and Entity Framework. I wouldn’t call it a best practice example of either at the moment, it is tough to refactor a project that goes from start to finish in a week. It is however a good example of a non-trivial application, with (some) tests, in Nancy.

Even though the week is up, the project does not stop there. People are always welcome to fork, change, commit and send through a pull request.

A full list of previous projects, that will update over the year, can be found at http://code52.org/projects.html.

This week the focus is a cross-platform multiplayer game. Much further out of my comfort zone, but a great chance to learn some XNA, and eventually Android and iOS when those clients are added.

Now this is a fairly reflective post, not my usual style, but the point is really just to spread the word. There are lots of interesting projects around, big and small, in almost any language you care to use. Just pick one and jump in.

Running a NodeJS server alongside your NodeJS desktop app

noreply@blogger.com (Chris Sainty) — Mon, 16 Jan 2012 07:50:00 +0000

The node-webkit project added a new feature yesterday, one which I requested. So I feel I should put up a quick post about it and why I think it could be useful.

The change was simple enough, giving you the ability to pass a callback to node-webkit that is called when the application is closing.

The primary reason I wanted this was to allow you to create, and then clean up, a local web server within the lifetime of your application.

It was previously possible to create the server, but when you closed the app, the process would stay open with the webserver waiting for requests.

The callback looks something like this.

So why exactly is this useful? Well I have a couple of uses in mind.

Some libraries and UI controls have only been coded to fetch their data with an HTTP request. This gives you a simple way of using such a library or control. You just point it at the local server and handle the request.
If you did all data access across the HTTP layer, then you remove one more piece of uncommon code between a web and desktop application, now the difference between the two is just the URL it is pointing at.
It allows you to pre-process previously static files. This means you could compile your LESS or CoffeeScript files as they are being served. It also means you could serve HTML from a ViewEngine such as Jade instead of from static files on disk.

Further thoughts on NodeJS desktop applications

noreply@blogger.com (Chris Sainty) — Fri, 13 Jan 2012 00:47:00 +0000

I have been working on a more complete demo of creating a desktop app with NodeJS.

This one will use a full UI (KendoUI) and a Sqlite database to create a basic CRUD style app based on the Northwind dataset. Someone really needs to put together another (and actually well designed) standard database that people can use for apps like this.

While putting this together I have been considering reasons why you might actually write an application like this.

Something that dawned on me is that I am only really using Node in a very thin data layer. My Views and View Models are all standard HTML/JS. Which means the only thing I would need to do to switch this application I am writing to being on the web would be to replace the data layer which is currently using Node to access Sqlite with one that goes across the network to a REST service.

This means I am effectively writing an identical web and desktop app at the same time. Which opens up some interesting offline capabilities.

Add a build time dependency injector to switch between the Node and REST data layers, and a synchronisation mechanism (assuming you want the user to be able to use either) and you have the web and desktop versions of your app running the exact same codebase.

Now that is pretty darn interesting.

Creating desktop apps with NodeJS

noreply@blogger.com (Chris Sainty) — Tue, 10 Jan 2012 05:40:00 +0000

Last week an interesting thread was started on the NodeJS mailing list.

https://groups.google.com/d/msg/nodejs/iy7Re33dwyU/yxwLlx1aUNMJ

Roger Wang from the Intel Open Source Technology Center posted about a new project from their team called node-webkit.

https://github.com/rogerwang/node-webkit

node-webkit brings WebKit to NodeJS. With it, client side applications
can be written with a HTML/CSS UI on NodeJS platform. We believe the
async I/O framework and Javascript language is a perfect combination for
client (mobile) side applications.

Basically it allows you to write HTML/JS/Node client side applications using webkit as the renderer.

This is very interesting, and in some respects like the path Microsoft are taking with the HTML/JS WinRT in Windows 8.

Currently this is Linux only. But with Node and WebKit both being cross-platform, it is only a matter of time until it gets onto other platforms.

Getting started with a fresh Ubuntu 11.10 install in a VM I had to do the following to get it all installed.

Open up a text editor and edit the file /etc/apt/sources.list
Add a new line at the end “deb http://libwebkitnode.s3.amazonaws.com/ oneiric/”
sudo apt-get update
sudo apt-get install git-core nodejs-dev libwebkitnode-dev libev-dev
git clone https://github.com/rogerwang/node-webkit.git
cd node-webkit
node-waf configure build

You can then test it is running with “node tests/helloworld.js tests/testfs.html”

If everything goes to plan you, up should pop a window that lists the files in the current directory.

Take a look at the tests/testfs.html to see how they have done that.

Now on to my first test project. I am once again making a twitter search, it really is one of the easiest APIs around to quickly run up a test against.

All the below code is on github at https://github.com/csainty/node-webkit-twitter

One note, I put a copy of the node-webkit into the node_modules folder. I am sure it will come to npm eventually, but for now this was the easiest method.
When I tried to reference it from it’s own folder, it could be found, but then my other dependencies couldn’t. I must be misunderstanding something there.

Our app.js is very simple, this is the entry point to the app, configures the webkit browser surface and loads an initial page.

index.html is also pretty straight forward, it is just basic HTML with Knockout bindings. It includes script references for jQuery, Knockout and our own index.js

Now for index.js, this is where the really interesting code is.

You can freely mix your traditional browser based HTML with your node.

So we call in our dependency on the request module.
We then use jQuery to delay our execution until the page is loaded.
We use Knockout to create our ViewModel which binds itself to the HTML.
Then in the search function on the ViewModel we call out to request to fetch the data from twitter.

Now of cource everything in this little demo can be done client side already. But I wanted to keep it simple, we can get to the filesystem (as the intel demo shows) and we can use existing libraries to get to a database or other persistence layer.

To fire it up just run “node app.js”

I hope to put together a more in-depth demo soon, one that involves local storage, and one of the HTML5 UI frameworks to pretty it up a bit. I’ll keep you posted on how that goes.

Remember I am on twitter these days as well @csainty. So follow me there if you want to know what I am up to.

Tutorial: Nancy + MongoDb + AppHarbor

noreply@blogger.com (Chris Sainty) — Tue, 29 Nov 2011 22:32:00 +0000

Time for a quick tutorial on how to get a site up and running on AppHarbor using Nancy and MongoDb.

First up you are going to need Git installed. On windows my preference for Git is this kit http://code.google.com/p/gitextensions/. It installs everything you need and gives you a nice GUI to work with plus some basic integrations with Visual Studio.

(Just in case you have missed the craze that is Git, it is a version control system. A very good one. Go learn about it)

Next you will need NuGet.

(In case you missed nuget, it is a package manager for .NET development. Use it to maintain third party libraries you are using in your applications)

Finally, you are also going to need an account at AppHarbor.

(In case you have missed AppHarbor, it is a new form of hosting for asp.net web applications. You push your code to their server, they build it, run your unit tests and then deploy it. From there you can scale the application and install add-ons etc.)

The end result of this tutorial is the app hosted on AppHarbor here http://nancymongo.apphb.com/ which is a basic message posting app that I have used before when playing around with Nancy. It super simple and boils down to two api methods with a page to interact with them.

All the code is on GitHub here https://github.com/csainty/NancyMongo

Setting up AppHarbor

We are going to start with AppHarbor, once you have an account set up, go to the Applications page and create a new application.

This will give you the URL for your git repository where we will later be pushing the code. So keep this page open or the URL handy.

Down the bottom of this page is an Add-ons section. Hit “View Available Add-ons”

As you can see there are quite a few, since we are using Mongo here, Click through to MongoHQ.

MongoHQ are a hosted MongoDb provider, they are partnered up with AppHarbor so that it is a single click install to create an instance on their servers for your AppHarbor site. Even better, the build process on AppHarbor will perform a replacement on your web.config file to insert the correct URL to the instance. So you can have a development/testing server configured locally and when you push to the server it will switch to the production server for you!

Add the free sandbox MongoDb instance to your site.

You should be sent back to the application page with a message saying your instance is configured. Now if you click through to the “Variables” tab you can see a MONGOHQ_URL variable. Any values set up in this tab will be added/replaced in the AppSettings section of your web.config file at build time.

We are going to break with convention here a little. Normally you do not need to know the value of that key since it is the production server. But to save us setting up test/dev MongoDb instance on our own machines, we are going to point at it for development as well. There is some CSS on the page that truncates the value, but if you view source and search for mongodb:// you can get the full value.

It includes your username, password and database name. So don’t go sharing this value, and if you are pushing your code to the public, make sure you remove it first, like I have.

Keep that value at hand, it’s time to jump into Visual Studio.

Building our App

Create a new ASP.NET Empty Web Application.

Fire up NuGet (either the GUI from right clicking the references folder in your project and choosing Manage NuGet Packages, or from the command line)

Install the following packages by searching for them and hitting the install button

Nancy
Nancy.Hosting.AspNet
KnockoutJS
Official MongoDb C# driver
NuGetPowerTools

One more thing with NuGet, we are going to need to jump into the NuGet “Package Manager Console” from the Tools menu | Library Package Manager sub-menu

Once the console loads type “enable-packagerestore” and hit enter.

This command was added by the nugetpowertools and adds a build step into your project file that ensures all the nuget dependencies have been downloaded. This is very useful since you are not going to be uploading a compiled application to AppHarbor, you are sending up your source which is built on their servers. So you have to give them the dependencies some way, and the alternative is to commit them all to your git repository. Doing this bloats your repository for no good reason. Trust me, this step is worth doing on every project you use NuGet for.

Once that completes you can close the package manager console.

Now open you your web.config file and add an AppSetting of MONGOHQ_URL with the value you grabbed from AppHarbor.

Just to stress this point one more time, normally you are going to have a dev/test server. You would be putting it’s URL in here and letting AppHarbor override it with the production URL when you publish.

Now on to some code, to start with add a Models folder with a single Message.cs class.

Note the Attribute on the Id field, this tells the MongoDb driver which field is the Id and how to generate an Id for that field. There are many different options for Id generation, we are using one of the string methods.

Now we are going to need a bootstrapper (CustomBootstrapper.cs) to configure Nancy and our Dependency Injection.

Bootstrappers are the starting point for all Nancy sites that do a bit more than Hello World.

First we are adding the Scripts folder as a static content folder. This tells Nancy to automatically handle requests to the Scripts folder as static file requests. The Content folder is added by default, though we don’t use it in this project. There are a number of overrides on the builder we are using here to customise how the mapping works.

Next we hook up Dependency injection on the various MongoDb driver classes we might want to get a handle on. This localises all our creation and init code so that our Modules can just request what they need and let the injection container provide it.

Basically we are creating our Server instance using the connection string from web.config then pulling the database name off this connection string to grab out Database instance, we then create a Collection for our Messages to be stored in. The C# MongoDb driver actually manages it’s own object life time, so even if we called MongoServer.Create() multiple times we would always get back the same instance, but I still like to use Dependency Injection rather than have to create these time and time again in my module code.

So let’s look at the two Modules (PageModule.cs and ApiModule.cs)

A Module in Nancy is where we wire up how the web server is going to response to requests. I cover it off in this blog post as well. We inject the Messages collection straight into our Api module without having to worry about how it is being created, or what it’s lifetime is.

Then finally we have the View (Views/Homepage.html), which is essentially a static HTML page and is processed by the built in view engine.

So now we have all the code files in place, run it up and make sure it all works, when it does, it is time to deploy.

Creating our Git Repo

Now we have a working project, lets put it into Git and send it up to AppHarbor.

Fir up the GitExtensions GUI and select “Create new repository”

Choose the folder your solution is in and Initialize as a personal repo. (Pro tip: Init a bare repository in your dropbox/mesh folder and push to it for easy offsite backup)

Now you need to edit your .gitignore folder to tell it what files to include and exclude from your folders.

Start by hitting the “Add default” button, remove the *.exe line as we want to include the nuget.exe which was added by NuGetPowerTools. Then add a line “[P]ackages\” at the bottom to filter out the packages folder. This folder contains all the NuGet packages which will be downloaded on the AppHarbor build server by NuGetPowerTools.

Now you should be able to Commit the changes from the Commands menu.

Deploying to AppHarbor

Still in GitExtensions, from the Remotes menu choose “manage remote repositories”, click the new button, give it a name and paste in the Git url you were provided when creating your AppHarbor application. Remotes are simply other copies of a repository that you can push code to and pull code from.

You can then “Push” to this remote (again from the commands menu), which will being the build and deployment process on AppHarbor.

One thing to watch out for, with OpenSSH selected as your SSH client (chosen when installing Git Extensions) you will have a black window pop up during the push, this is actually asking you for your AppHarbor password, type it in, or right-click and paste (Dont Ctrl-V) and press enter. Not sure what happens if you are using PuTTY.

If I get a chance I hope to look into the GitExtensions code and improve this if at all possible.

It Lives!

Now if you go back to your application page in AppHarbor and refresh you should be presented with something like this.

You will have the status of your build, which you can dig into to get the full console output from the build process. Assuming the build worked, you will also have a link to your app. Click it and be amazed.

Learn Something New: Node

noreply@blogger.com (Chris Sainty) — Thu, 27 Oct 2011 05:52:00 +0000

Node seems to be everywhere at the moment. Long on my list of things to take a look at, I finally took the time to sit down with it yesterday and get it up and running and get a feel for what it does.

In the process I also took my first look at Heroku, which is the cloud hosting platform for Ruby, Node, Java etc. that AppHarbor borrows heavily from in the .NET world.

As always, my code is on GitHub, and the site is live on Heroku. This sample is literally a Hello World, with so many moving parts, I really wanted to just focus on the raw details of getting Node running first in a Linux VM, then on Windows, then on Heroku.

Both Node and Heroku provide great instructions to get everything up and running, so they should be your first port of call.

https://github.com/joyent/node/wiki/Installation

http://devcenter.heroku.com/articles/node-js

With how easy Node is to get running on Windows now, there really is no excuse not to give it a go.

Simply download the stand-alone node.exe from here.

Put it in a folder, and create a HelloWorld.js file with the following content.

Then run node HelloWorld.js and hit http://localhost:8080/ in your browser.

At it’s heart, Node is about IO and sockets. It is not specifically about the web, people have just seen how useful it can be for web development.

Before you get too far into it, you are likely to want to start plugging in some other packages, such as a routing framework to manage your requests and a view engine to render your HTML>

This is where the Node Package Manager (npm) comes in. The node install instructions linked above explain how to install this on windows, which has been seamless for me so far.

You probably want to look at express for the general framework roles and jade for a view engine.

Another recent blog post I will call out to take a look at is Jon Galloway’s effort today which includes a lot of detail and goes into hosting the node.exe process inside IIS on windows servers.

I had a real sense of joy when I fired up Node and started fiddling around. I am fairly comfortable in javascript, and going back into a straight text editor to write my code was a bit like stepping back in time to my teenage years hacking away in qbasic. While my initial investigations were only skin deep, I definitely see myself taking a much deeper look very soon.

My Windows Phone 7 thinks it is developer locked?

noreply@blogger.com (Chris Sainty) — Mon, 24 Oct 2011 23:44:00 +0000

I ran into an interesting problem today that warrants a blog post to hopefully help someone searching when they hit it themselves.

Last night, I turned on my phone only to be greeted with a helpful message informing me that my application gReadie had been revoked by Microsoft and that I should uninstall it.

After a moment of panic, I realised that I didn’t actually have a retail copy of gReadie installed on my phone, just the developer build I had been working on. So I didn’t think a lot more about it intending just to copy a new version on when I arrived at the office this morning.

That plan failed though when Visual Studio informed me my device was developer locked, and I could not deploy my application.

Strange.

So I ran the developer unlock tool, it connected to App Hub, then to my device and said my phone was unlocked again. Great, back into Visual Studio, and up pops the same error.

After a quick tweet to vent my frustration, I gave everything a reboot, unlocked again, and still no luck.

At this point I logged into App Hub, to check my registration was still valid and see what was up with my device.

To do this, click you name in the top right corner, then choose the devices tab.

Bingo!

Chris’ Phone, Registered 24th Oct 2010, Expiration Date 24th Oct 2011.

My unlock registration had expired, and the phone unlock tool shipped with the phone tools does not renew it.

So I simply hit the remove button inside App Hub, went through the unlock tool once more, and everything was working again.

So keep this in mind as you approach your one year anniversary of owning an unlocked WP7 device. You will need to pop into App Hub and renew the unlock registration yourself.

I’m now on Twitter

noreply@blogger.com (Chris Sainty) — Wed, 12 Oct 2011 00:47:00 +0000

Just a quick FYI to let people know I am now on Twitter with my own account @csainty.

Up until now I have been using the @quidsmobile account for a mix of personal comments and supporting gReadie. It will go full-time WP7 app support now.

All my blog posts will be announced on my new personal account, along with other little comments on programming and tech.

Learn Something New: Nancy

noreply@blogger.com (Chris Sainty) — Mon, 10 Oct 2011 10:27:00 +0000

Today my toolset of choice for a quick learning session is Nancy.

Reading straight from the box “Nancy is a lightweight, low-ceremony, framework for building HTTP based services on .Net and Mono. The goal of the framework is to stay out of the way as much as possible and provide a super-duper-happy-path to all interactions”.

Got that? Think of it as a replacement for WebForms or ASP.NET MVC.

Nancy is available in NuGet or on GitHub if you want the source and docs. The docs are well worth a look over, and you are bound to need the aid of a sample project as you find your feet. Having said that, it is really quite simple so you should be up to speed in no time.

These posts are not supposed to be walkthroughs, so I won’t go into detail getting you started other than to say that you start with an “ASP.NET Empty Web Application”, add the Nancy bits from NuGet (grab the AspNet hosting package and Razor view engine as well for simplicity), create a subclass of NancyModule and away you go.

You can see my demo live at http://nancydemo-1.apphb.com/ and grab the source from https://github.com/csainty/NancyDemo.

Where I think Nancy really shines is writing an API / REST service. As the box says, there is so little ceremony that you never feel like you are fighting the framework to perform simple tasks. Even in ASP.NET MVC I find this sort of thing a little clunky feeling. As for WebForms, I did my best to avoid them altogether.

My sample site performs the simple task of allowing the user to type in a message, saving it away and displaying it to other users on the site. All this is handled with a single page and some javascript. Using Knockout JS again.

The interesting code in this project mainly lies in the Modules.
First we have a PageModule, which is serving requests for regular pages.

It really is as simple as that to catch requests to “/” and serve up a View in response.

Second we have the ApiModule, which is handling the API requests being made by AJAX.

Again, you can see that is very simple.

To demonstrate Dependency Injection using Ninject, there is a simple data store interface and an in memory implementation.

Here we are subclassing the Ninject bootstrapper, there are other implementations, and adding in the bindings we need.

Of course I have barely scratched the surface here on a very intriguing project. I am hoping to put it to real use in something very soon.

Tools and Services Used

Learn Something New: Knockout JS

noreply@blogger.com (Chris Sainty) — Fri, 07 Oct 2011 14:07:00 +0000

First in my “Learn Something New” series is Knockout, a javascript MVVM framework.

Knockout is beautifully simplistic. You define a ViewModel, bind it to your UI, and away it goes keeping the two in sync. It really is beautiful stuff for a javascript heavy UI.

To learn my way with Knockout, I decided to create a basic twitter search client in javascript. The twitter search API is a great resource for quickly adding data to a “hello world”-esque application. I am bound to revisit it later.

Now let’s get a few more details out of the way, you can see the site up and running at http://twitches.apphb.com/ and you can get the source code at https://github.com/csainty/Twitches

The interesting code lives in the only View and the Javascript.
The page basically consists of a textbox to enter a search term, a button to run the search and a UL that is bound to the results. There is some other fluff in there, but this is the core functionality.

Here is a trimmed down version of the javascript to highlight the main features.

So we define our viewModel, give it an observable value for the search string, an observable array for the results and a function to perform the search.
We apply these bindings and that is it for the javascript. The actual binding to the UI happens in the UI, using HTML5 data attributes.

Here are the key elements from the HTML, as you can see we bind the UI with a jQuery.tmpl template, and wire up the value for the textbox and the click event for the button.
It really is as simple as that.

I highly recommend the tutorials at the Knockout website, they have created a wonderful live tutorial that takes you through each step of the process.

Tools and Services Used

Knockout JS
ASP.NET MVC / C#
Combres (Javascript / CSS minifier and combiner)
AppHarbor
jQuery
Twitter API

Introducing the “Learn Something New” series

noreply@blogger.com (Chris Sainty) — Fri, 07 Oct 2011 13:14:00 +0000

Today I am introducing what I hope will be a long term project for this blog, my “Learn Something New” series.

The series will be mainly focussed on web development and learning the basics of a tool or framework I did not previously know. Where possible I will be providing all the source on GitHub and links to the project up and running on a free cloud service like AppHarbor or Heroku.

To set a few ground rules

These projects will not be “best practice”. Where possible I am trying to focus on a single new piece of kit and anything else will be kept at a minimum to make it work.
Unless the post is about a UI tool, then there is likely to be no design work put into the project. See point 1, I am aiming for a quick turn around on each project.
These will be frameworks and tools I am new to, so I may make mistakes and I may do things the wrong way. If you see me doing that, I would be more than happy to hear from you and pointed in the right direction.

In the end this is some motivation and structure to my own learning. The blog gets to come along for the ride. So set your expectations appropriately and everything should be cool.

Using ServiceStack.Text for JSON processing on Windows Phone 7

noreply@blogger.com (Chris Sainty) — Wed, 05 Oct 2011 23:57:00 +0000

I recently decided to switch gReadie away from JSON.Net to ServiceStack.Text for it’s heavy JSON processing of the Google Reader API.

While there was no WP7 dll available in the NuGet package the source was all on GitHub, so using my recently learned Git skills, I forked the project and added my own project file targeted at WP7.

It was then just a matter of visiting the various #if XBOX and #if SILVERLIGHT directives in the source and adding WINDOWS_PHONE as appropriate to enable and disable code for the platform.

There are some differences between the SILVERLIGHT and WINDOWS_PHONE versions, as the project looks to target an older Silverlight implementation at the moment, which was turning off some of the performance gains that came from caching LINQ expression trees. So with those all enabled again the code compiles, is faster than JSON.Net for my use case and is now live in the latest version of gReadie.

All my code changes have been pushed back up to my fork and are available at https://github.com/csainty/ServiceStack.Text/tree/wp7

I am yet to send a pull request back to the primary project, so for now you will need to grab my source and compile it yourself if you want to use it.

WP7.5 Mango–Isolated Storage Explorer

noreply@blogger.com (Chris Sainty) — Mon, 29 Aug 2011 01:24:00 +0000

One of the most useful new tools with the latest Windows Phone SDK is the Isolated Storage Explorer.

It is a command line tool used for downloading and uploading the contents of an application’s Isolated Storage folders to either the Emulator or a Device.

There are two times when this is invaluable.

The first is when you are deploying a new version and you do not want to lose the data. Since day one I have been annoyed with the frequency that that deployment mechanism decides to delete the application and reinstall it. By using this tool I never need to worry about that again as I can just save a snapshot, deploy, load the snapshot back in.

The second is when I find a bug with while using a retail copy of my app which I can not hook the debugger into. I can take a snapshot, load it into the emulator and debug.

To speed the process along I have created four windows .bat files that to perform each of the tasks I need.

To use these yourself you will need to adjust the path if you are not on a 64bit system, and you will need to replace the GUID with the value from your WMAppManifest file.

Two lessons from a frustrating Mango submission

noreply@blogger.com (Chris Sainty) — Wed, 24 Aug 2011 03:08:00 +0000

I thought I would share two quick lessons today. Learnt while submitting the latest gReadie update to the marketplace.

Lesson 1

When updating an application in the marketplace, you can not remove supported languages.

gReadie v1 has been translated into French and German (and unofficially Chinese) by enthusiastic users. gReadie v2 however has not yet had the same treatment.

Even though gReadie v2 is a whole new application (File | New Project) it is being submitted as an update to gReadie v1 so that all current licenses are maintained.

Therefore it must adhere to the rules for updates. One of which, I learnt today, is that you can not remove a language.

With apologies to my French and German users, I had to rush together a mix of human translated (where I had the same text in v1) and Google translated values to get the app into the marketplace. I will do my best to reach out to the original translators and see if they are willing to provide an update for me.

So keep this in mind if you are considering localising you application, you will need to do the same for all future versions.

Lesson 2

Be very careful what code is referenced by your Background Agent.

There are a whole range of APIs that Background Agents can not access, and the code detection for this is fairly blunt. If you reference a class in a class library which has another class that calls the prohibited APIs, your application will fail during submission.

To provide a more concrete example. gReadie is comprised of many separate class libraries. The two that caused me trouble were Quids.Infrastructure and gReadie.Library.

Quids.Infrastructure is a bunch of helpers classes (for example code to string HTML tags from text) and some basic ViewModel and ViewPage classes that form the basis of the MVVM implementation used in gReadie.

Even though my Background Agent just called into the string Extension Method that strips the HTML tags, the code that creates a PhoneApplicationPage was visible both in the ViewPage class and in the Silverlight Toolkit.

gReadie.Library servers a similar role but more specific to gReadie, it has all the Google API interactions, User Settings and a bunch of other similar code. Included is the code that creates Live Tiles and the code that handles the ProgressIndicator and SystemTray. All of which is prohibited in Background Agents. So even though my agent was just getting at the API and Settings classes, all classes were interrogated and submission failed.

So if you are building a Background Agent, and you want to share code between it and your main application be very careful about what else is in the shared libraries and be prepared to make UI and Non-UI shared libraries to deal with it.

Wp7.5 Mango–Background Agents

noreply@blogger.com (Chris Sainty) — Fri, 19 Aug 2011 06:09:00 +0000

Late last year when I implemented the unread count Live Tile in gReadie I found myself stunned at just how complicated it was. It seemed to me that it would make a lot more sense if I could just whack a [LiveTileUpdater] attribute on a static method in a class and the phone would run that method occasionally.

I was therefore delighted when details about Mango were released as this is basically what Microsoft implemented.

Background Agents in Mango take the form of a separate assembly, which gets linked in your WMAppManifest.xml

You should also place a reference to this library in your main app just to make sure the compiler includes it in your .xap file.

You Background Agent library should contain a class based on ScheduledTaskAgent which performs the actual tasks.

There are two types of Background Agents, PeriodicTask and ResourceIntensiveTask. Your app is allowed one of each.

Full details are available here, but the important parts are that PeriodicTasks run around every 30minutes and can only run for 15 seconds before being killed. ResourceIntensiveTasks run when the phone is plugged in, on wi-fi and charged to over 90% battery, they can run for 10 minutes.

Finally your task should call either NotifyComplete() or Abort() when it is finished. Abort() will unschedule the task until your app runs again, so you only call it if something is wrong that needs user attention, such as login credentials changing.

Now that is the good part of the story, there is one more restriction on Background Agents. They are only allowed 5MB of memory, regardless of whether they are Periodic or ResourceIntensive. If you go over this limit the task will be killed.

Making a useful Background Agent that stays under these limits is incredibly difficult. Especially when so many of the basic framework components (HttPWebRequest, LINQ-to-SQL, IsolatedStorageSettings) appear to have memory leaks.

From my testing you will lose about half your memory by the time you reach line 1. Your first HttpWebRequest will eat up another roughly 20%, which it never gives back, though multiple requests will stay inside that initial chunk. IsolatedStorageSettings will do a similar thing.

LINQ-to-SQL is a little more complex, recycling your DataContext and Compiled Queries will give some back, but recycling them too often will leak as well. So you need to find a nice balance.

I suggest writing some code to monitor the memory usage between each job (assuming you have multiple to perform, say downloading multiple RSS feeds like gReadie does) and if you stray too high, then perform a garbage collection and recycle your LINQ-to-SQL and see how much you can get back. If it is not enough, then NotifyComplete() and try exit gracefully. It is not bullet-proof but in my testing it allows me to get more work done before running out of memory.

WP7.5 Mango–Compiled Queries

noreply@blogger.com (Chris Sainty) — Wed, 17 Aug 2011 06:01:00 +0000

Over the last few weeks I have been doing a complete rewrite of gReadie, my Google Reader client for Windows Phone 7.

The original codebase for gReadie was really quite cluttered, and I wasn’t going to be able to take advantage of the new features Mango enables without pulling it all out and starting again.

With most of the rewrite behind me now, It is time to start putting together a few blog posts discussing the new features I am using and lessons learnt along the way.

One of the features I was most looking forward to in the 7.5 release of the phone is developer access to the underling SQL CE database. Access is provided through LINQ-to-SQL, which I have covered in detail previously. What I want to focus on today is improving the performance of your queries by compiling them and caching that result.

This post assumes you already have your DataContext created and working queries, if you do not, then please start by reading some of the Microsoft tutorials.

When you make a query with LINQ-to-SQL, the LINQ provider has to examine your LINQ expression and turn it into SQL, this process is done on every query. However, if you have a query you know you are going to call multiple times then you can run this process once, saving a parameterized result and avoid having to do this step on subsequent calls.

You define and call a Compiled Query like so

The first step is to define a delegate that at the very least takes an instance of your DataContext as a parameter (though you can define more) and also defines the result type.

You then use the CompiledQuery.Compile() method to provide the body for this delegate. The compilation does not happen until your first call, so don’t worry about setting up a lot of these.

One thing to note is that you can only re-run a compiled query against the same DataContext instance it was compiled against. So you need to ensure they have the same lifespan, and that you are not needlessly recreating your DataContext if you want to run multiple queries.

From my experience with Background Agents this method also uses less memory than rerunning the compilation each call.

One final code snippet to show an example with a parameter

ASP.NET MVC3 + Ninject + Moq + Unit Testing

noreply@blogger.com (Chris Sainty) — Tue, 12 Jul 2011 05:24:00 +0000

I answered a question on StackOverflow yesterday which I am pretty happy with, so I thought I would share the link on here.

http://stackoverflow.com/questions/6646244/mvc-3-how-to-learn-how-to-test-with-nunit-ninject-and-moq/6646591#6646591

The question asks for general advice on how to write and test an ASP.NET MVC 3 website that correctly uses Inversion-of-Control, Unit Testing and Mocking.

A RavenDb profiling plugin for Glimpse

noreply@blogger.com (Chris Sainty) — Fri, 08 Jul 2011 11:58:00 +0000

Today my post is to announce the release of a small plugin I have been working on over the last few days. It is a plugin for the Glimpse client side debug tool that integrates profiling information from RavenDb.

The plugin is available on NuGet - http://nuget.org/List/Packages/Glimpse.RavenDb

The source is hosted on GitHub - https://github.com/csainty/Glimpse.RavenDb

Finally there are installation instructions - https://github.com/csainty/Glimpse.RavenDb/wiki/How-to-use

Links out of the way, how about a screenshot or two?

As you can see, the plugin adds a new tab to the Glimpse UI called RavenDb. On this tab you get information about the servers and sessions involved in the current request. You also get a list of the queries made against your RavenDb instances including the actual documents sent across the wire that you can drill into. It is really quite cool, and the Glimpse team have done a fantastic job creating a framework that is very simple to extend.

The profiling tools in RavenDb are still young, and as ayende adds functionality (the current unstable builds include timing information currently missing in the stable release) I will update the plugin to bring all that goodness to the UI.

RavenDB Profiling with ASP.NET MVC

noreply@blogger.com (Chris Sainty) — Wed, 22 Jun 2011 13:26:00 +0000

I have recently been using (and occasionally contributing to) RavenDB, a NoSQL (or Document) database for .NET written by Oren Eini, aka ayende.

My biggest contribution yet has been to help with the basic "glue" to drive the new UI for profiling RavenDB requests in an ASP.NET MVC web application.

There is a live demo up on Oren's blog right now, simply look for and click on the RavenDB Profiler box in the top left hand corner.

If you are working with RavenDB and want to add this to your own project, it is really simple. As of right now you are going to need to grab an unstable build, at least 391. But these changes will make it into the stable builds soon enough.

You then need to explicitly add a reference to Raven.Client.MvcIntegration to your project. There are security risks with showing the profiling data to just anyone, so you need to explicitly add the support.

Next go to the code where you create your DocumentStore and pass a reference off to the profiler.

Raven.Client.MvcIntegration.RavenProfiler.InitializeFor(myDocumentStore);

Finally in your master page <head> section add (assuming the Razor view engine)

@Raven.Client.MvcIntegration.RavenProfiler.CurrentRequestSessions()

The only other dependency is jQuery, if you are not already using jQuery you can add it off the Google CDN, or from Nuget.

It is as simple as that, all the sessions and requests involved in producing your page will be visible for you to drill into. Also if your page makes any AJAX requests (using jQuery) these will be picked up and their sessions added to the results window! That was one of my contributions :)

The profiler is still very much in it's early stages, there is a lot more to come yet, but the base is now firmly in place I believe and ready to be built on top of.

WP7 - Authenticated Push Notifications

noreply@blogger.com (Chris Sainty) — Mon, 10 Jan 2011 23:03:00 +0000

This post is going to offer a few tips about changing your Windows Phone 7 push notification service from unauthenticated to authenticated.

Specifically it will focus on the challenges I ran into hosting a WCF service, in IIS7 on a cheap shared hosting account.

It will not be a full step by step tutorial, there are a lot of those out there, though I found many missed a few steps. If you are starting out, see the MSDN documentation.

The reason you will want an authenticated service is that it allows you to send an unlimited amount of updates to the phone. If the service is not authenticated it will be limited to 500 per device per day. Which might be plenty for some services, but was not going to be enough for me. Users do not like their Live Tiles pausing for half a day simply because they are a heavy user.

To authenticate your service, you need to add an SSL certificate to your web server and then upload a copy to your Windows Phone developer account. When it comes time to submit your application to the marketplace, you choose this certificate in the submission process and it becomes live in the Microsoft systems.

Your hosting provider should have a standard process to do this, you just need to make sure they send you a copy of the certificate.

The certificate I used came from RapidSSL and was just the default option for my hosting provider. Microsoft does have a list of valid providers, so be sure to check.

Problem #1 - Adding an SSL endpoint to an IIS7 WCF Service

The first problem you will come up against is that when WCF generates a WSDL for your secure service, it will pick up the machine name of the box it is on, and not your domain name.

This is a very widely talked about problem, and the usually offered solution is to run some vbs script that adds an SSL host header to your website because the IIS interface itself can not add host headers to SSL bindings.

What is not very well talked about is how to manage this on shared hosting. As helpful as my support guy was, he was not keen on running some random piece of vbs script for me.

So the real solution is actually to use a new (4.0) setting in the web.config file called "useRequestHeadersForMetadataAddress", if you are not on a host that supports 4.0, find one that does.

   1:  <behaviors>

   2:      <serviceBehaviors>

   3:          <behavior>

   4:              <useRequestHeadersForMetadataAddress>

   5:                  <defaultPorts>

   6:                      <add port="443" scheme="https" />

   7:                  </defaultPorts>

   8:              </useRequestHeadersForMetadataAddress>

   9:              <serviceMetadata httpGetEnabled="false" httpsGetEnabled="false" />

  10:              <serviceDebug includeExceptionDetailInFaults="false" />

  11:          </behavior>

  12:      </serviceBehaviors>

  13:  </behaviors>

You also need to turn on Transport security for your binding. Though this is standard WCF, nothing special here.

   1:  <bindings>

   2:      <basicHttpBinding>

   3:          <binding>

   4:              <security mode="Transport" />

   5:          </binding>

   6:      </basicHttpBinding>

   7:  </bindings>

On the phone, if you grab the metadata from your secure service, then it should point everything correctly, but if you need to do it by hand, the service configuration file will be along these lines.

   1:  <system.serviceModel>

   2:      <bindings>

   3:          <basicHttpBinding>

   4:              <binding

   5:                      name="BasicHttpBinding_Service"

   6:                      maxBufferSize="2147483647"

   7:                      maxReceivedMessageSize="2147483647">

   8:                  <security mode="Transport" />

   9:              </binding>

  10:          </basicHttpBinding>

  11:      </bindings>

  12:      <client>

  13:          <endpoint address="https://[yourservicedomain]/[yourservicename].svc"

  14:                              binding="basicHttpBinding"

  15:                              bindingConfiguration="BasicHttpBinding_Service"

  16:                              contract="[ContractName]"

  17:                              name="BasicHttpBinding_Service" />

  18:      </client>

  19:  </system.serviceModel>

Note the Transport security on line 8 and the https address on line 13.

Problem #2 - (403) Forbidden

The next problem you will encounter, is that when you actually POST your notification to the Microsoft servers you will get a (403) Forbidden response back.

I could not find a single piece of Microsoft documentation on this, and a single obscure reference on a forum finally pointed me in the right direction.

When you make your POST, you actually need to attach the certificate to it. Microsoft will then match this against the one you uploaded to them to ensure you are who you say you are.

You do this using the ClientCertificates collection on your HTTP Request.

   1:  // Standard header code

2:

   3:  request.ClientCertificates.Add(new X509Certificate2("[Path To Certificate]", "[Password]"));

4:

   5:  using (Stream requestStream = request.GetRequestStream()) {

   6:      requestStream.Write(payload, 0, payload.Length);

   7:  }

8:

   9:  WebResponse response = request.GetResponse();

Once this is added in you should be finally able to send authenticated push notifications.

Hopefully this saves a few people some time as I pulled my hair out over the course of a weekend solving both of these.

Windows Phone 7–Images

noreply@blogger.com (Chris Sainty) — Fri, 22 Oct 2010 00:33:00 +0000

Now about that Image Control. I mentioned in my last post that it seems to download on the UI thread, or at least block the UI thread while downloading.

Personally I think this is going to be a major issue with v1 apps in the marketplace when used on 3G connections.

It is actually a difficult thing to test, so here is the methodology I have been using and the code I am using to get around the issue.

First you are going to want a local IIS server, put an image on the server, and then we are ready to go with the phone tools. We are later going to throttle the bandwidth on the server, if you do not have a local server you will need to find a way to throttle your network connection on the PC you are using. I am sure it is possible but have not looked at it.

For this post I am just creating a basic Windows Phone Application, add the following XAML to the Grid in the MainPage.xaml and pop in your image URL.

   1:  <!--ContentPanel - place additional content here-->

   2:  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   3:      <ScrollViewer>

   4:          <StackPanel>

   5:              <TextBlock Text="Above" />

   6:              <Image Source="[Your Image URL]" />

   7:              <TextBlock Text="Below" />

   8:          </StackPanel>

   9:      </ScrollViewer>

  10:  </Grid>

Now if you run this app, up will pop your image and you will be able to pan up and down since we are in a ScrollViewer.

Now let’s see what happens on a slow connection, for this you will want to set a bandwidth throttle on your web server. In IIS 6 you do this from the Performance tab of the site properties. In IIS 7 go into Advanced Settings | Connection Limits | Maximum Bandwidth. I have been setting it to between 1 and 5 kBps. This should make the image take a few seconds to download.

If we now run our application again (you will need to close the emulator and let it restart as it caches), before the image loads, try scroll the page. You should find that you can not, but then once the image loads you will be able to again. Now consider how that would appear to a user on a slow 3G connection if they had a page of images to load.

So on to our fix.

Add the following two classes to the project (changing the namespace as appropriate)

   1:  using System;

   2:  using System.ComponentModel;

   3:  using System.IO;

   4:  using System.Net;

   5:  using System.Windows;

   6:  using System.Windows.Controls;

   7:  using System.Windows.Media.Imaging;

8:

   9:  namespace BlogImageApp

  10:  {

  11:      public static class ImageExtension

  12:      {

  13:          public static string GetSource(DependencyObject obj) {

  14:              return (string)obj.GetValue(SourceProperty);

  15:          }

16:

  17:          public static void SetSource(DependencyObject obj, string value) {

  18:              obj.SetValue(SourceProperty, value);

  19:          }

20:

  21:          // Using a DependencyProperty as the backing store for Source.  This enables animation, styling, binding, etc...

  22:          public static readonly DependencyProperty SourceProperty =

  23:              DependencyProperty.RegisterAttached("Source", typeof(string), typeof(ImageExtension), new PropertyMetadata(SourceChange));

24:

  25:          private static void SourceChange(DependencyObject sender, DependencyPropertyChangedEventArgs e) {

  26:              Image imageControl = sender as Image;

  27:              if (imageControl == null)

  28:                  return;

  29:              string url = (string)e.NewValue as string;

30:

  31:              if (DesignerProperties.IsInDesignTool) {

  32:                  imageControl.Source = new BitmapImage(new Uri(url, UriKind.Absolute));

  33:              } else {

  34:                  HttpWebRequest request = HttpWebRequest.CreateHttp(url);

  35:                  request.AllowReadStreamBuffering = true;

  36:                  request.BeginGetResponse(RequestComplete, new CallbackData { Request = request, ImageControl = imageControl });

  37:              }

  38:          }

39:

  40:          private static void RequestComplete(IAsyncResult result) {

  41:              CallbackData data = (CallbackData)result.AsyncState;

  42:              HttpWebResponse response = (HttpWebResponse)data.Request.EndGetResponse(result);

  43:              data.ResponseStream = response.GetResponseStream();

  44:              ((App)App.Current).RootFrame.Dispatcher.BeginInvoke(new Action<CallbackData>(x => {

  45:                  BitmapImage imagesource = new BitmapImage();

  46:                  imagesource.SetSource(x.ResponseStream);

  47:                  x.ImageControl.Source = imagesource;

  48:              }), data);

  49:          }

  50:      }

51:

  52:      public class CallbackData

  53:      {

  54:          public HttpWebRequest Request { get; set; }

  55:          public Image ImageControl { get; set; }

  56:          public Stream ResponseStream { get; set; }

  57:      }

  58:  }

What this code does is create a new attached property we can use on the Image control. When set it will download the image in the background and then set the source once it has downloaded. It would be fairly easy to hook this up to use a loading image in the meantime, but I have not done that here.

A few interesting lines

Line 31 – We check if we are in the designer and bypass all this if we are.
Line 35 – This is needed for when we set the image source. You will get an exception without it.
Line 36– I have, uncharacteristically for me, not used a lambda here. I decided in this case it was very difficult to read since I am passing a few bits of information around.
Line 44 – You need to create the BitmapImage on the UI thread, otherwise you get an exception.

With this in place and the project recompiled we need to add a reference to the namespace in our MainPage.xaml. Add the following line to the <phone:PhoneApplicationPage> tag (again replacing the namespace as appropriate)

xmlns:local="clr-namespace:BlogImageApp"

Then we can change our Image control and set the new attached property instead of the default Source property.

Now run up the app, again after closing the emulator to clear the cache, and this time you should be able to scroll around to your heart’s content while waiting for the image to load.

I have only used this code to download a couple of images at a time, if you had a page with dozens of images I would suggest working with only a couple of downloaders and queue work items for them, otherwise you might tie up too many resources and block the whole phone, not just the UI.

Windows Phone 7–Asynchronous Programming

noreply@blogger.com (Chris Sainty) — Wed, 20 Oct 2010 00:09:00 +0000

I am going to start putting together some posts on my experience writing our first Windows Phone 7 application, gReadie.

One thing that will strike you quickly if you go to make an app that communicates over the internet is that everything has to be done asynchronously. While this is bound to annoy at first, it is actually a good design decision by the development team because it forces the developer to keep the UI responsive. Sadly there is at least one instance where they broke their own rules but we will get to that another time, I will just say watch out for the Image control.

My preferred way of handling asynchronous programing is with a callback structure that uses delegates/lambdas. You could also use events but I find most of the memory leaks I create in applications are to do with events and not releasing subscriptions. Luckily for us we now have lambdas that make callbacks a piece of cake to write, you just need to watch out for a few gotchas. If you prefer delegates to lambdas, then the second point here will not apply to you, but the first will still catch the very novice.

I am going to put together an application that simply lists the top 10 trending topics on twitter. It is a simple easy to access api that will serve our purposes well.

You can call up the api right now in your browser http://api.twitter.com/1/trends.json

So we start with a new Windows Phone Pivot application, It comes prepopulated with a list control and a nice ViewModel structure that is a good base to work from.

The first thing you will want to do is add a reference to System.Servicemodel.Web and another to System.Runtime.Serialization. These dlls contain the classes we need for parsing the JSON we get back from twitter. Next you will want to go into the LoadData method on the ViewModels\MainViewModel.cs class and comment out (or remove) all the sample data.

Now we have an app that will load up and display nothing. Perfect.

To parse the JSON we are going to need some classes to parse it into, and here they are.

   1:  [System.Runtime.Serialization.DataContract]

   2:  public class TrendsResult

   3:  {

   4:      [System.Runtime.Serialization.DataMember(Name = "as_of")]

   5:      public string AsOf { get; set; }

6:

   7:      [System.Runtime.Serialization.DataMember(Name = "trends")]

   8:      public Trend[] Trends { get; set; }

   9:  }

   1:  [System.Runtime.Serialization.DataContract]

   2:  public class Trend

   3:  {

   4:      [System.Runtime.Serialization.DataMember(Name = "url")]

   5:      public string Url { get; set; }

6:

   7:      [System.Runtime.Serialization.DataMember(Name = "name")]

   8:      public string Name { get; set; }

   9:  }

Put these where you like in the project (I use a JSON subfolder) and add using statements etc to your preferences. I am not going into details about JSON in this post so that is all you get for now sorry.

With these in place we can now fill out our LoadData method and actually perform the request and parse the results. Filling out the Items collection already provided in the project template.

   1:  public void LoadData() {

   2:      HttpWebRequest request = HttpWebRequest.CreateHttp("http://api.twitter.com/1/trends.json");

   3:      request.BeginGetResponse(result => {

   4:          HttpWebResponse response = (HttpWebResponse)((HttpWebRequest)result.AsyncState).EndGetResponse(result);

   5:          DataContractJsonSerializer s = new DataContractJsonSerializer(typeof(TrendsResult));

   6:          TrendsResult trends = (TrendsResult)s.ReadObject(response.GetResponseStream());

   7:          foreach (Trend trend in trends.Trends) {

   8:              this.Items.Add(new ItemViewModel { LineOne = trend.Name, LineTwo = trend.Url });

   9:          }

  10:      }, request);

11:

  12:      this.IsDataLoaded = true;

  13:  }

Now this code seems quite reasonable, assuming of course that you have learnt lambdas and can read it. We make a request, when it is done we pass the result text into the deserializer to create the objects we built above and then process these into the ViewModel.

If you run it though, it will crash with the error “Invalid cross thread access” and this is the first lesson about callbacks. They do not fire on the UI thread and therefore they can not change the UI. But you may notice the callback doesn’t actually change the UI. It just adds an item to a collection. But because this collection it bound to the UI, when it changes it triggers events that change the UI.

So the first thing we need to do is move the call that adds the item to the collection onto the UI thread. Luckily this is easy enough and involves another lambda!
We simply change the content of the foreach loop to be

   1:  ((App)App.Current).RootFrame.Dispatcher.BeginInvoke(() => {

   2:      this.Items.Add(new ItemViewModel { LineOne = trend.Name, LineTwo = trend.Url });

   3:  });

The key here is getting a handle on the Dispatcher. This is the class that controls the UI thread, there are a few ways you can get it, every page has a Dispatcher property, or if have Microsoft.Phone.Reactive.dll referenced then you can use the Scheduler class (my preferred way), or you can get at the App.RootFrame that is the parent UI object in the application which is what I have done above.

From the Dispatcher you can pass in an Action (callback/delegate/lambda.. choose your own terminology) for the UI thread to execute.

Now if you run this version up, you will notice that it works. Except hang on, all the trends are the same. Don’t worry you didn’t mess up the Json parsing, though this would be the first thought of many and they could waste a lot of time looking in the wrong direction.

This brings us to the second lesson about callbacks and it goes to the way lambdas are actually compiled. Notice in line 2 above I reference trend.Name and trend.Url, but the trend object is not actually created inside the lambda, so think for a second about how it is in scope. If you took the content of the Lambda and turned it into a method/delegate (which is what the compiler does) that was called then it becomes clear that we have some trickery going on behind the scenes.

   1:  ((App)App.Current).RootFrame.Dispatcher.BeginInvoke(DoItemAdd);

2:

   3:  private void DoItemAdd() {

   4:      this.Items.Add(new ItemViewModel { LineOne = trend.Name, LineTwo = trend.Url });

   5:  }

What the compiler does is add a field to the class, which it sets before the call and uses inside the method. So it would look something like this, you can see it in reflector if you like

   1:  private Trend _Compiler_Trend;

2:

   3:  public void LoadData() {

   4:      ...

   5:      _Compiler_Trend = trend;

   6:      ((App)App.Current).RootFrame.Dispatcher.BeginInvoke(DoItemAdd);

   7:      ...

   8:  }

9:

  10:  private void DoItemAdd() {

  11:      this.Items.Add(new ItemViewModel { LineOne = _Compiler_Trend.Name, LineTwo = _Compiler_Trend.Url });

  12:  }

Now it should be clearer what is happening here. BeginInvoke is asynchronous so our foreach loop keeps updating the _Compiler_Trend without waiting for the last call to DoItemAdd to be finished with it. Therefore when it does get around to running the DoItemAdd calls the field is in an unknown state.

Luckily we also have a solution to this problem. The BeginInvoke call can also take an Action<T> and a parameter of generic type T to pass in when calling the code.

So we can rewrite the method like this

   1:  public void LoadData() {

   2:      HttpWebRequest request = HttpWebRequest.CreateHttp("http://api.twitter.com/1/trends.json");

   3:      request.BeginGetResponse(result => {

   4:          HttpWebResponse response = (HttpWebResponse)((HttpWebRequest)result.AsyncState).EndGetResponse(result);

   5:          DataContractJsonSerializer s = new DataContractJsonSerializer(typeof(TrendsResult));

   6:          TrendsResult trends = (TrendsResult)s.ReadObject(response.GetResponseStream());

   7:          foreach (Trend trend in trends.Trends) {

   8:              ((App)App.Current).RootFrame.Dispatcher.BeginInvoke(new Action<ItemViewModel>(item => {

   9:                  this.Items.Add(item);

  10:              }), new ItemViewModel { LineOne = trend.Name, LineTwo = trend.Url });

  11:          }

  12:      }, request);

13:

  14:      this.IsDataLoaded = true;

  15:  }

Only lines 8,9 and 10 are different. Now we are creating a lambda that takes a parameter of type ItemViewModel, adds that passed item into the collection and we give the dispatcher the item to pass in. If we run this code it works!

If we pulled apart this code to see it like the compiler does it would look more like this, and I should note you can write your code this way if lambdas bend your mind that bit too much, but I personally find them much easier to read and manage.

   1:  public void LoadData() {

   2:      HttpWebRequest request = HttpWebRequest.CreateHttp("http://api.twitter.com/1/trends.json");

   3:      request.BeginGetResponse(result => {

   4:          HttpWebResponse response = (HttpWebResponse)((HttpWebRequest)result.AsyncState).EndGetResponse(result);

   5:          DataContractJsonSerializer s = new DataContractJsonSerializer(typeof(TrendsResult));

   6:          TrendsResult trends = (TrendsResult)s.ReadObject(response.GetResponseStream());

   7:          foreach (Trend trend in trends.Trends) {

   8:              ((App)App.Current).RootFrame.Dispatcher.BeginInvoke(DoItemAdd, new ItemViewModel { LineOne = trend.Name, LineTwo = trend.Url });

   9:          }

  10:      }, request);

11:

  12:      this.IsDataLoaded = true;

  13:  }

14:

  15:  private void DoItemAdd(ItemViewModel item) {

  16:   this.Items.Add(item);

  17:  }

It should be clear now that there are no scope issues with this code.

So there you have it, a twitter trend downloader that has hopefully pointed out a few things you should look out for when starting down the asynchronous path required by Windows Phone 7.

Quids Mobile

noreply@blogger.com (Chris Sainty) — Mon, 11 Oct 2010 11:43:00 +0000

I have set up a quick WordPress site today to host information about our mobile development separately to our main software site. I will also use it to post future updates rather than polluting my otherwise coding focussed blog.

So for anyone interested in following the apps we create head over to www.quidsmobile.com

I promise I will make my next post about something I have learnt on the new platform and get back onto a technology focus.

Windows Phone 7 Marketplace–Early Access

noreply@blogger.com (Chris Sainty) — Sat, 09 Oct 2010 05:06:00 +0000

I received notification this morning that gReadie will be accepted into the early access program for the Windows Phone 7 Marketplace. So sometime Monday I will be logging in and submitting. Hopefully it also means the app will be in the marketplace from day 1.

I recorded one last video that takes a run right through the app. I already have a huge list of features to go into future releases but the last few days have involved making sure the app is well tested and running as nicely as I can manage on the emulator. I am very keen to get a real device and see how it goes on there.

Another gReadie Video

noreply@blogger.com (Chris Sainty) — Wed, 06 Oct 2010 00:52:00 +0000

I have posted another gReadie video to YouTube.

gReadie–Sharing Preview

This video quickly shows off the services the app is now connected to.