May 28, 2013

expense tracker app - part 2

Just to give an idea of what I've been working on.




These images show a problem I've been trying to fix, which isn't terribly obvious.  But think about trying to use this app, and clicking on the Expense field to enter in new input.  Clicking on the textbox only moves the blinking cursor to the right of the word, which means you have to manually delete the string, which sucks.  It might take only a few seconds but it's annoying if you use it a lot.

In contrast, here are the same set of images, with the same set of actions, done for my bing app:



And notice that clicking on the textbox automatically clears the field for you, which really helps the usability  (I also like how they've dimmed the rest of the app).

Well, I tried all sorts of things, experimented with eventhandlers and delegates, and finally settled on this:

private void txtInput_Click(object sender, MouseButtonEventArgs e) {
   txtInput.Text = "";
}

private void txtInput_LostFocus(object arg1, RoutedEventArgs arg2) {
   txtInput.Text = DEFAULT_TXT;
}

private void numInput_Click(object sender, MouseButtonEventArgs e) {
   numInput.Text = "";
}

private void numInput_LostFocus(object arg1, RoutedEventArgs arg2) {
   numInput.Text = DEFAULT_INT.ToString();
}

With the above in the code-behind, and the below in the XAML (with many things left out):

<TextBox Name="txtInput"
                 InputScope="Text"
                 MouseLeftButtonDown="txtInput_Click"
                 LostFocus="txtInput_LostFocus" />

<TextBox Name="numInput"
                 InputScope="Digits"
                 MouseLeftButtonDown="numInput_Click"
                 LostFocus="numInput_LostFocus" />

I'd like to point out the InputScope field, which specifies the appropriate keyboard to be used.  The "Text" input scope provides a keyboard supplied with characters, and an automatic spellchecker (sometimes I feel guilty about all the functionality that is provided - I thought adding a custom keyboard and a spellchecker would be really complicated).  The "Digits" input scope just provides the digits, obviously, which is all that is needed to add the monetary amount.

And now this is what I have: