In my last post I got the latest Windows Phone 7 unit – a HTC HD7. Since then I have been trying to get back my developer mojo to build an application. I have finally done this and submitted it to Marketplace about 14 hours ago…as part of the learning process. Just to show how bad my development skill shave become I can confide in you that I have since received a Failure notification from the Certification process. Though my 2 testers did find some initial errors (they are 4 and 6 years old) – I did not think to get my 2 year old to test it – as it turns out he took 2 seconds to make it crash. I also did not understand some of the other submission aspects…nuff sed fred. In the end it has now been in marketplace for around 4 months and has had around 500 downloads! This is the first of three posts to a) celebrate the reaching of 500 downloads and to b)
So, where do we start? I think the beginning is the best place to start.
The idea for the application came from my youngest daughter who was having some trouble with Math. The homework she was getting was to look at dots on a page and recite the number of dots out loud. Both my wife and I work with our children during their homework and I, of course, always look to see how I can use technology to make life easier. The first thing I did was look at what and how my daughter was being asked to learn and what she responded to the best. Number one on the list was that she liked the positive feedback my wife and I were providing. Being told “well done” and getting hugs, kisses and smiles made her work harder to try to understand the problems – plus we enjoyed giving them . She knew the number of dots (and could even understand concepts like “5 and 5 plus is 10” – REVERSE POLISH NOTATION!!! (which she worked out by herself after hearing her sister recite it during her homework) but had trouble associating them with actual numbers such as “5” and “10”. The other aspect was the speed; there seemed to be an optimum rate at which the dots could be presented and her comprehension peaked. Beyond that point her recognition dropped and below that threshold her interest waivered. The better the dots stood out also helped her concentrate on the problem at hand.
Looking at these human aspects I then took a look at the form factor of the HD7 I had to play with and mocked up a shape of the application as it would appear on the phone. To make it as simple as possible the screen background will be black – the base colour of the unit. To get the dots to stand out a combination of YELLOW circles with PURPLE lines seemed to probably be the best combination (this I know from work previously done in a – defunct – game I tried to develop for my Windows 6.5 phone). The values to select from would be presented below the dots. A quick scribble session on the train while returning home gave me the general shape of the application as shown below.
Another thing I wanted to mock up on paper was the gameplay. This is important as a game is in essence a state machine, as states change the game is progressed through it’s various stages. Each state has some trigger which allows it to move to the next state. For this application the gameplay was simple:
However, this simple interactive structure was part of a more complex game functional interaction which looked a bit like this:
Note that the interaction of the parent is contained within the game flow as they are integral to the success of the learning process for a child. The essential idea being that the positive feedback loop be driven continuously to improve confidence and interest of the child. Consistency in representation is also an important aspect. For this reason I chose to present the dots in rows of 5. The size of the dots was arbitrary – basically I played around with the size in xaml till I felt happy with how it looked on the screen.
That night I mocked it up in Visual Studio 2010 using the Windows Phone 7 SDK toolkit. The toolkit can be downloaded from http://www.microsoft.com/downloads/en/details.aspx?FamilyID=c17ba869-9671-4330-a63e-1fd44e0e2505&displaylang=en. I did cheat a little bit in that I already had Visual Studio 2010 Ultimate installed on my [dev] machine at home. There is actually a download which has VS 2010 express and blend and other material for installation for WP7 development. Being the partial geek that I am I used the full blown kahoona. To mock this up in xaml initially took about 5 minutes (with lots of copy and paste for the ellipses). To achieve a workable structure took the better part of 2 hours. I will explain why below.
Now, this mocking up is very simple to do – all you work with is XAML in the WP7 editor within Visual Studio 2010 – the trick I find is to make sure that you have a clear idea of what you want the application to look like before you start mucking about – hence the scribbling beforehand. It always pays to plan in anything you do (even hacking). I will not spend time in going on about what XAML is or how it works or how Silverlight works – for that have a look through the available material on the web (there are Gb’s of it all over the place by much better developers than me). The other thing is that even if you have a clear idea – as I did – it boils down to experience with the tools and my experience with Silverlight was just this side of molecular – good enough to be dangerous. Now, in my search for help I came across a free eBook (or bit of one) from Charles Petzold entitled “Programming Windows Phone 7 Series” – you can get it at: http://www.winphone7.net/2010/04/windows-phone-7-free-development-e-book.html. As you will see I also used references from Bing searches to gain understanding and also used good old fashioned hacking to get around the rest of the stuff (when in doubt, try it out).
So, back to the problem at hand; my initial idea was to have the dots and this seemed to be the easiest thing to do so as I always do I leave this till last and as always it is usually the thing that takes the most time to actually get done – as you will see . The first thing I tackled was the general shape of the application. To create the application I started Visual Studio 2010 and selected “New Project and then “Silverlight for Windows Phone” I gave it a name (in my case “countingKids_v1”) and hit Finished (I did warn you that this was going to be a “start to finish” posting!)
When the project wizard finishes you get hit with a developer screen (as seen below). The interesting thing here is the application form factor (on the left pane) is represented as xaml (on the right pane) so you can mess with it pretty much in total disregard for the proprietary nature of the WP7 device. All WP7 devices use the same tooling and descriptive protocol to represent visible structures of applications.
Once this shell is presented we can start to mess with it. The first thing I did was change the “MY APPLICATION” title to “Counting Kids” by changing the XAML from to - very very simple. The next exceedingly brain-lacking activity I performed was to change…wait for it…”page name” to “How Many?” …as you can see it was very taxing on the grey matter so far. Based on my earlier experiences with creating a sagital norm reference clinical noting system I figured that I would use distinct canvases for visible each activity I wanted to have represented in the application.Building from the Top Down I created 3 work spaces using the canvas control widget . I then thought that I could have some form of visual feedback as to how long the person was taking to answer the question so I put in a progress bar (the thin blue line in the image above) and created a canvas for this. I also thought that I would draw the numbers to select from in 3 individual canvases on a third canvas. I left the canvas references as “canvas<number>” as I saw no reason to change the names to anything more meaningful for such a small and simple application. With the canvases all in place I thought the numbers needed some highlighting and used the Properties Brush controls to give it a gradient and repeated this for each canvas in the lower section
Next I needed to get the number to be presented in the gradient space. For this I thought I would use a textbox and set the value to read only. The thought was that I would hook into the onClick event to execute the checking code and do the positive feedback response from there. This looked like it would be easy so the mock up had static numbers. I did not check for a “read only” attribute at this point (guess what happened later). I must admit that it looked ok with the text but nothing mind blowing.
So now to the dots – at this point they WERE the easiest of all things to do. Using XAML to represent ellipses (and help from the msdn site : http://msdn.microsoft.com/en-us/library/cc189073(VS.95).aspx) I snaffled the code for an ellipse which was exactly what I was looking for - I put together a sequence and messed around till I was happy. Just play around with XAML and you realise just how powerful a concept it is for developing solutions.
Having gotten the solution to this stage it is my wont to test as I go – a sort of mini-test-driven-development scenario. Being a hacker from way back I write a bit and test it then, when that bit works, write a bit more and test it; building up functionality incrementally. To do this I used the WP7 emulator that comes with the development kit. As with all such activities in modern tools it is a synch to use; just press the “play” button next to the deployment factor selected - in this case “Windows Phone 7 Emulator” in “Debug” mode. Once done the emulator speeds up and you get the base screen and then your application. When you want to unload your app or go back to the development environment just press the “Back key”. The screen sequence below walks you through the phases:
The first phase completed it was now time to get on with the real work. For the first bit I made sure the numbers looked ok – playing with font size and padding in the TextBox control. Next I wanted to be able to respond to number selections – i.e. responding to the selection of the appropriate button that represented the number of dots present. I thought it would be easy – just go to the onClick event….hmmm…no “onClick” event (I had forgotten that this was a textbox control and not a button.
Not to be deterred I thought it was a simple matter of it being a combination of “MouseLeftButtonDown”. There is such an event so I began to code in that. In order to generate positive feedback i wanted to drawing a smiley face over the top of the application. This seemed really simple – I actually found a web site with just the xaml needed at http://www.dieajax.com/downloads/tutorial/silverlight/app-framework/smiley.xaml The key to development these days, I think, is the ability to ask the right questions of your search engine and to have lots of code snippets that you accumulate over time. I have lots of code snippets and pseudo-code in many different languages but I am always finding new ones to add to the collection. One day I should build a code snippet application to manage them all…hmmm
It is now that I ran into a problem – I could draw the smiley face in any colour but I could not work out a way to get rid of it after the user had seen it (for instance with a waiting loop) or keep it there (for instance by the user holding down a key). Now this, I admit, was probably due to my inability to think in xaml completely and after a bit of hacking (about 30minutes) I stopped and rethought. What I realised was that the activity I had in mind was for a button, so why not just use a button? I had thought it better to use the canvas and TextBox for control – but in effect I was really just creating a button. The issue with using the button turned out that I couldn't work out how to provide feedback. Overcomming this ended up being pretty easy - I used ":)" and ":(". Up comes the next problem - the button would not refresh in time for the user to see the ":)" - but when I thought about it there is really no need to show a smiley face because the parent will be supplying that. This meant that all the application had to do was show a sad face. With this understanding the application was pretty much complete...except for the "random number" generator and dot drawing routine.
End of part 1 of 3 - in part 2 we will look at the generation of the dots and numbers to be represented - this was a bit more complex that I thought it would be and will require a post by itself.