faking data in WP7 and other .Net platforms

I needed to fake some data for a WP7 app yesterday and I was about to write a couple of classes when I thought why not check out what's available out there already...

There were already a couple of NuGet packages out there but I wanted to try out my forking skills on GitHub :) I had a quick conversation with Ben Smith about faker-cs and producing a NuGet package. 

Introducing Faker.Net on NuGet, with support for .Net 3.5 SP1, .Net 4.0, Silverlight & WP7.

Faker.Net support loads of different ways to fake data - addresses, names, phones numbers and more:

It's very simple to use, shown below is the code for the following WP7 apps:

It could be used anywhere you need fake data - proof of concept, testing, demo apps...

Read More

Coupling and cohesion

I was reading ploeh's blog this morning and it made me think about coupling and cohesion in general. These are import concepts in software development, Wikipedia has great definitions for both here & here. These are often contrasted together but they are different concepts and just because you have low coupling doesn't mean you'll have high cohesion.

Using a car analogy the headlight unit for my Audi has tight (high) coupling because it's designed only to be fitted to a particular version. You could say it has high cohesion because it is part of a greater system to show light when a button is turned\clicked....

Taking another part of the car the tyre, the actual type of tyre will have low coupling to my Audi because it would suitable for several different models and makes, it would also have low coupling to the wheel, it has to fit a particular size but it could fit many wheels of this size. The tyre would still have high cohesion for the same reason, part of a greater system to make a car move...

The box in the boot (trunk) of the car has low cohesion because it contains all the stuff I drive round with, not just stuff such as oil, glass cleaner, foot pump etc. but stuff I have just left in the car overtime. There only relation is they are all in the same box.

What I find interesting about measures of coupling, is there related cost: the higher the coupling the more likely there will be few options available to replace\maintain which means higher costs, where as low coupling allows for multiple solutions and therefore more likely reduced costs. 

Read More

Integrating jasmine into Visual Studio 2010/2011 beta

Following on from my previous post about testing javascript with jasmine. I was interested to explore integration into visual studio 2010 so I could run them along side test written in another language like C#.

I found the VS 2010 extension Chutpah (pronounced  'hutz-pah'). This got me up and running with the ability to run test manually and to my surprised it worked by only have the SpecRunner.html file open. I didn't a csproj or sln file containing the javascript, it's clever enough to resolve all dependencies:

Test results are render in the output window of VS 2010:

This is good and I appreciate the work someone has done to get this far but I want more...

I want integration into Resharper...

A quick squizz on the inter'webs and I end posting a request on jetBrains forum, it looks like support is coming in R# 7. Then I thought lets check out the current beta and see, so off I go and boot Win8 and install R#7 beta and see if it's there yet...

Openning the undoSpec.js file only in VS 2011 beta and attempting to run using R#7 I got the following:

Next I tried creating a web project in VS 2011 beta, I had update the reference paths in SpecRunner.html page:

Opening up the undoSpec.js file - this contains the undoable.js specifications. I start to see the familiar R# UI on the left hand side:

This seems like the last step, I'm finally there...

It didn't work, and yes I had built the project :)

I hope I'm doing something wrong, but there again this is a beta, I'll be keeping my eye on the nightly builds for R#7.

Read More

Playing around with jasmine

I believe like a lot of devs that javascript is going to become more prevalent in a lot if not all areas of application development, whether that be with a server side framework like node.js or client side with frameworks like backbone.js & knockout.js. I've built a couple of sites with backbone and I'm very interested in what Derik Bailey is doing with marionette, but with all my investigations into backbone I haven't as yet put any of the javascript I've written under as serious testing strategy.

A quick search for a BDD style testing framework lead me to jasmine, I've heard good things and I thought I'd give it ago.

What to put under test with jasmine?

Previously I implemented a simple undo-redo framework for .Net called undoable.net, this was pushed out to GitHub and I thought I'd port this to javascript. The important issue here is not the ported-code but how easy I found it to get jasmine up and running.

First off downloaded & unpacked Jamine from here. I then created a new folder and copied in the Jasmine lib contents:

Next I had to create an entry point for the testing, this probably as you expect is a html page. I lifted the code from the jasmine examples. I also created a folder for the specifications that will be written in javascript:

As said this SpecRunner.html is a generic file which will load all the required spec & source javascript files.

As you can see from the comments in the above screen-shot we aren't currently including any specs or source files. Before running any tests I wanted to make sure everything was working, so spinning up SpecRunner.html in a browser and I got the following:

It works and in less than 5 minutes, time to start testing...

Converting undoable.net to javascript gives the following javascript object declaration, I've collapsed down the function implementations just so we can see the function signatures:

This was placed in the root folder and an include statement was put in the SpecRunner.html:

Where are the tests specs?

They are defined in the spec folder, in this case I've created one called UndoSpec.js. The first test is shown below along with the include statement for the SpecRunner.html file, hopefully you can understand this but if not, it tests for an expected exception when the undo action is undefined:

The spec is highlighted, above it is the beforeEach function and if the name doesn't give it away this is run before each spec - just like in C# being annotated with the Setup attribute for an nUnit test.

Now when I run SpecRunner.html I get the following output:

The describe function definitions don't have to be a 1 to 1 relationship with the behaviour, you can have multiple behaviours. The following extract also demonstrates another feature of jasmine, custom matchers. They basically allow you to hide non important implementation detail so your specs remain readable:

The custom matcher is part of the SpecHelpers.cs which is also an include statement in the SpecRunner.html file. The customer matchers are also added before each spec as part of the initialisation:

After adding all the required specs as describe functions I get the following output from SpecRunner.html - clean, clear and to the point.

 And the spec folder ends up looking like this:

To me this pretty much demostrates low friction BDD :)

All that was left for me to do was upload this to GitHub, I even managed to create a NuGet package and I'm going to create a Ruby gem if I can workout what to do :)

Read More

Building a multilingual MVVM app

Last week I built a sample multilingual app in WPF using MVVM for a proof of concept. This was the first time I've built a desktop app which supported different languages at runtime. Previously I've worked on multilingual websites and desktop apps but not ones that support changing the language of the UI dynamically via a UI control like a menu item.

The app was pretty simple, a single input field representing a number where the value has to be within a fixed range (-100 to 100). If the input failed the validation an error message would be displayed.

What I came up with is shown below, it supports three cultures - English, French & German. The culture (language) is selected by either the menu or the F1 - F3 keys. How I achieved this is what follows.

What I wanted to achieve was the model & view model being agnostic to any concern about the currently selected culture (language). The view model used for the English version should be the same for the French or German versions.

The model we'll be binding via the view model is shown below, as you can see no knowledge of the currently selected UI language.

The view model is shown below, this will be bound to the view via an implementation of the view model Locator pattern.

The view model like the model also has no knowledge of the currently selected UI language. What should also be noted is the lack of validation in the view model. Normally if one was developing an app for a single culture you could use the IDataErrorInfo interface in the System.ComponentModel to return the required validation message. This could have been done in this example, but I ddidn't want the view model to know anything about the current culture, if I had used it I would then have to worked out the current culture and then selected the correctly translated message. I see the concern of translating the validation message a responsibility of the view not the view model.

I did the validation via a custom validation rule - by implementing my own validation rule this allowed me to code up the required field input rules - a number where the value has to be within a fixed range (-100 to 100).

This is where the concerns of the UI culture start to come into play, the last two lines of the above validation rule take care of loading the correct culture invalid input message. How exactly this is done is described later. This is then used declarative in the view XAML, thus pushing the input validation to the correct area of concern, the view:

The  colours used for displaying the validation message are controlled by the style applied to the TextBox control, it defines when and how the validation tool-tip fades in & out.

What you can see from the XAML is a converter applied to the binding, this will only be called if the input validation executes successfully. The converter is also affected by the current UI culture, as you can see it is passed to each method. This means the double.Parse will correctly handle what ever number separators are defined for the culture:

That covers all the other parts required for multiple culture support, but the question still remains:

How exactly are the different cultural string being render by the view?

This is where it started to get complex for the simple reason the documentation on how to do this is confusing, I couldn't find a coherent strategy on MSDN. Googling for 'multilingual support WPF' does list MSDN as the first result, after reading through this I just started to get a headache...

I was looking for a way to declaratively define which strings need to support multiple cultures, it also need to separate the cultures into different files. I knew I was going to need to work with resource files (*.resx). The Google search above provided a lot of links pointing to solutions available on codeproject.com, I counted at least 5 different ways on the first page.

I decided to go with first in the list - 'WPF Localization Using RESX Files'. This solution provided both a declarative (XAML) and imperative (code-behind) methods, in fact it turned out to be so simple I can't believe you can't get this package on NuGet.

I recommend reading the article for the full details on how to add support to your app. First off I modified  the XAML by adding the a declaration at the top of the page:

Then I updated all string values that need to support multiple cultures:

The ResxExtension.DefaultResxName property in the window declaration defines where to find the required resx file. As you can see from the screen shot below there are also separate RESX files for the French & German resources:

The English & German resource properties window from visual studio are shown below:

Each RESX file needs to define the Custom Tool & Custom Tool Namespace via the properties window in visual studio. This is so the RESX file is compiled and available in C# code - that's how we access the resource in the last 2 lines in the custom validator earlier:

RESX file properties in visual studio:

The only thing left now is how to change the culture at runtime. I did this via a menu, but in theory this could be done any suitable UI control. All I did was declare a menu items in the XAML and then wire in the click events to the code-behind of the view:

Declared in the XAML:

As you can see the Header properties are bound to the resource manager and the click events are handled in the code behind. The code behind is initialised as follows;

We add an event handler for when the culture changes so we can update the menu items:

We also added the key bindings F1 - F3 to allow a keyboard drive approach. As you can see the English is represented by F1 and the command is routed through to the HandleEnglish method, this is an overload of the method wired in via the XAML for the English menu click. This is where the real magic happens the resource manager is updated with the new culture and instantaneously everything declared with a Resx binding in the XAML automatically updates:

Bring this all together gives me the ability to do any multilingual support in the view of my MVVM implementation.

I've put the implementation up on skydrive:

Read More

Getting NLog working with Azure is as easy as 1, 2, 3...

After getting past my confusion with how to set-up diagnostics for a web sited deployed in Azure, it was actually very easy to get NLog to route all messages to the Azure diagnostics table - WADLogsTable.

Firstly you need to configure the Azure role for diagnostics, there seems to be 2 ways to do this either in-code via the OnStart() method or using a config file. Obviously the use of a config file is the preferred way when dealing with large scale deployments (by a separate IT department).

Code:

Configuration (diagnostics.wadcfg):

Secondly, you need to configure NLog, all this involves is including the trace target and defining the rule to write to the trace target:

And finally browse the contents of the WADLogsTable once you've deployed to the cloud and waited the required time for the logs to be shipped. I'm using the Windows Azure Platform Management Tool (MMC) available here:

I still stand by my assertion that getting diagnostics working in Azure is less than satisfactory.

Read More

Showing a message box from a ViewModel in MVVM

I was doing a code review with a client last week for a WPF app using MVVM and they asked 'How can I show a message from the ViewModel?'. What follows is how I would (and have) solved the problem in the past.

When I hear the words 'show a message...' I instantly think you mean show a transient modal message box that requires the user input before continuing 'with something else' - once the user has interacted with the message box it will disappear. The following solution only applies to this scenario.

The first solution is the easiest but is very wrong from a separation perspective. It violates the ideas behind the Model-View-Controller pattern because it places View concerns inside the ViewModel - the ViewModel now knows about the type of the View and specifically it knows how to show a message box window:

The second approach addresses this concern by introducing the idea of messaging\events between the ViewModel and the View. In the example below I'm using the implementation MVVMLight framework Messenger instance to pass the message body from the ViewModel to the View. There is more of a ceremony to the code but we do get the separation between the View and the ViewModel.

The View for the second approach is shown below, as you can see we are accessing the ViewModel directly from the View via the DataContext property. I don't have any trouble with the View knowing about the ViewModel just the ViewModel knowing about the View. I could improve this separation by adding a dependency property to the View for the Messenger - then there wouldn't be an explicit use of the ViewModel in the code-behind of the View:

The ViewModel now looks like this:

Why is this still wrong?


We've managed to de-couple the ViewModel from the technology used to show a message box in the View, but we are still defining WHAT is going to be displayed by the View from the ViewModel - 'Need Help' & 'Do you want to do the work?'

This problem would become very apparent if this was a multilingual app, this method would require the ViewModel to manage the display resources (text) via a cultural specific resource (*.resx) class - this is not the correct place to do this, it should be done by the View.

The third solution is my preferred way, send a message with context to allow the View to show a message to the user, where the View decides upon what & how will be shown'

This give the following View, you can see now the View is deciding what is going to be shown:

And the ViewModel now looks like this:

There is more of a ceremony to the code but I do believe this gives the separation required of the View & ViewModel.

Read More