So, its been a long time.  My work at Meijer has certainly become all consuming, but recently I have made a pledge to myself to get back into programming on the side.  I really had forgotten just how much fun coding on the side was.  Even better, current opportunities in my life allowed me a chance to really create something.

My friend moonlights as a Trivia Game host.  Essentially, various restaurants in the area hold games where questions are asked and teams compete for prizes.  Its very fun and lively atmosphere that is beneficial to all.  However, I noticed that much of the score keeping during these games was done differently depending on the host.  Sometimes it was pen and paper other times Excel.  Bottom line, very manual and error prone.  Wanting to help I offered to write an application to make this process easier for the hosts.

Designing the Application

I initially planned for the application to be a WPF application.  Since Internet connectivity was not always guaranteed, I decided for the first version to rely totally on an SDF file. I also decided to model the application off of Microsoft Office, since this is what most people most closely identified with.  Thus I downloaded and started using the Microsoft Ribbon Control for WPF.  This design came a good deal of the way and I showed my prototype to my friend and several other hosts.  Only then did I realize I missed the fact that the majority of the hosts use Macs, so WPF was immediately out.

I contemplated other platforms I could use since I wanted to make the application highly available and didn’t want to write multiple versions.  Eventually, through the advice of my friend Ryan, I decided to go with Silverlight Out of Browser since it is capable of running on a Mac.  At the same time I decided I wanted to change the design thanks to feedback I realized that some of the more complex features I was planning were not necessary.

Version 2

This time I decided to design the application using much of what I know from mobile apps.  I wanted to interface to be clean and to the point.  The people using this application are not exactly tech savy and I didn’t want to confuse them with lots of clicks and buttons.  The results was the interface shown below:

Note: The Large Empty middle section will be used as kind of a dashboard to see games played, winning teams, things like that.

The main goal of the interface was to be very simple and straightforward.  The level of visual control you get in XAML is really remarkable and can really lend itself to developing very clean and responsive interfaces.  In this application, the main action is tracking a game, hence a shortcut was broken out.

Lesson Learned: Visual Design vs Technical Design

One of the things I feel developers are famous for is attempting to design and implement the architecture of an application way too early, I know I have done it many times.  One of the things I am trying with this application, and it does seem to be working very well, is to not write any code, other then for navigation.  I want to establish the visual aspect of the application and let that guide the rest of my design.

So far, this is working very well, as I have moved very quickly through design without getting distracted by technical elements yet.  I know that I want a DI layer so I can easily change the business layer in and out as needed, since I do plan for a web service to be involved down the road.

Navigation

Oddly enough, it seems within Out of Browser applications, no NavigationContext is available.  Coming from Windows Phone 7 I am very familiar with the notion of navigating from XAML Page to XAML Page.  My first attempt at this was thwarted because, by default, UserControls are used heavility within OOB.  I decided to change the inheritance structure of this so I was using Silverlight Pages.  Sure enough, doing this gave me access to the NavigationService property.  However, this property was null.

Perplexed, I Googled for a reasons and/or workaround but found nothing.  I decided to take matter into my own hands and simply relegate my content screens to UserControl objects, inheriting from my custom base class UserControlBase.  Doing this allowed me to set an event which I could use to change the visual display based on the page requested.

Now, when I want to change to page I simply raise this event with the appropriate enum which inidcates the PageType I want.  Its not very sophisticated, but it does work.  I would like to know what Microsoft recommends to fulfill this scenario.

Initial Thoughts

My initial thoughts is that Silverlight OOB does seem to present a very interesting avenue for cross platform application development.  Other friends of mine did recommend HTML5 and I did deeply consider it.  However, I had a desire to use Sterling and thus felt that using OOB seemed to be a better approach.