Sunday, November 14, 2010

Second sprint experiences of the Coding Dojo Helper

The motto of the second sprint was "Visual Studio Integration". On Microsofts website about VS-extensions, there are a lot of resources about extending the IDE. Unfortunately, after navigating around a bit, you quickly land on the boring msdn library pages. As I haven't found any nice tutorials on the web either, I had to find it out by myself: after downloading the SDK, there are new templates in the new project window under the Extensibility-folder. One of them is named "WPF Toolbox Control" and that sounded nice to me and so I took it ;)

Visual Studio Integration
Outline of a WPF Toolbox Control project
When you compile the project, you get a simple, empty dockable toolbox window inside of Visual Studio, like the properties-window but without the properties :)
The main classes of the project are the CodingDojoHelperVSExtension*.*-files, which specify the embedding of the extension into Visual Studio and MyToolWindow.cs, which is your entry-point in modifying the toolbox.
As I'm using Prism, my constructor (which is the complete code for MyToolWindow btw) looks like this:
[Guid(AGloballyUniqueIdentifier)]
public class MyToolWindow : ToolWindowPane
{
    public MyToolWindow() :
        base(null)
    {
        this.Caption = Resources.ToolWindowTitle;
        this.BitmapResourceID = 301;
        this.BitmapIndex = 1;
 
        var bootstrapper = new CodingDojoHelper.Bootstrapper();
        bootstrapper.Run();
 
        var shell = bootstrapper.Shell;
        shell.Background = new SolidColorBrush(Colors.Black);
 
        base.Content = shell;
    }
}
In my solution, I now have three projects:
  • CodingDojoHelper, which has all the logic and UI in it.
  • CodingDojoHelperDesktop, which references CodingDojoHelper and just provides the main window.
  • CodingDojoHelperVsExtension, which references CodingDojoHelper and just provides the IDE-integration.

I just need minor tweaks to adapt it to the 2 scenarios (like shell.Background = new SolidColorBrush(Colors.Black); instead of an transparent background for the desktop-version). This is really nice and I haven't thought that the integration would be so easy. However, I had two problems to solve:

Digest view with the new amCharts

  1. Every VS-extension must be compiled with a strong key. This means, every depending library also must have a strong key. It leads to the point, that I even need the strong key of Rhino Mocks, because I'm using the [assemblyInternalsVisibleTo]-attribute to be able to mock internal classes for unit-testing. Fortunately, Rhino Mocks provides a key callable via Rhino.Mocks.RhinoMocks.StrongName.
  2. I had to switch from WPF Toolkit to amCharts for this reason: the WPF Toolkit is not a published product and therefore, it hasn't got a strong name :( However, I like amCharts more by now :) I don't need to do much designing so that it looks good ^^
New features
Start-screen
What else is new in this sprint?
  • Start-screen: I've made a start-screen where you can select the target-duration of the TDD-cycles. When the time is up, you'll hear a nasty sound bite like "You weak pathetic fool" from the original Mortal Kombat game! So beware and keep your tests small and do make baby-steps to receive a saying like "Well done" from Shao Khan himself!
  • Beautified: You also have the possibility to set the total duration of the dojo and the number of combatants, that is developers. But these two items are just to show off yet, because they will gain meaning in the next sprint. I downloaded gif-animations of the fighters from an internet-resource and used a special class to make them move inside WPF - looks cool 8-) The other cool thing is a storyboard using an ElasticEase that makes the two buttons for modifying the times (which is indeed a styled scrollbar) swing into their new place. At first, I looked in Blend for the easing functions for WPF in vain. But then, I opened a Silverlight-project, build the storyboard there and copied the XAML into my WPF-project. Feels awkward, but works.
  • Config-screen
  • Config-Screen: This screen is also new to the Coding Dojo Helper and it was easily integrated with the help of Prism. Unfortunately, I haven't looked into Prism V4 and the new navigation possibilities - but this is another user story for me in the coming sprint(s).
  • Styling: I've done the same (styling with a Silverlight-project and copying the result into a WPF-project) with a Checkbox. That was needed, because the WPF-Checkbox is precompiled and therefore not decomposable into atomic WPF elements like Ellipse etc.
  • Gif-Editing: I edited my first gif-image inside of Gimp. The finish him-writing wasn't part of the image. So I opened the gif in Gimp, added 6 frames to it with the text and saved it back. It's as simple as that!
  • Adorner: It is now possible to select the keys used to switch a developer and to end the session. I grab the AdornmentLayer, make it 25% transparent and prompt the user to push the new key for it. Luckily, I had to make the same Adorner-job at work last month. So this was a no-brainer ^^
The Coding Dojo Helper is now fully functional and we use it at work in our weekly coding dojo sessions. When I finished my third sprint, it should be ready for release :D

No comments:

Post a Comment