If I can build a phone app anyone can: Changing the keyboard and IsNumeric

In todays blog I start coding my app, the first task is having users enter a time for my timer and making sure they enter a number. So I explore adding code to make sure they enter a number, and changing the on screen keyboard to show just numbers.

Wow I’ve been spending a lot of time learning about the projects, tools, and controls, it’s great that I am finally starting to code! If you missed any earlier posts you can find them here. My application will be a presentation timer that I can use to make sure I don’t talk too long.

I’ve created a New project of type Windows Phone Application in Visual C# (by the way as I start to code if you can make any of my code more elegant, feel free to leave comments, I am open to suggestions and improvements).

When I created my project I chose target Windows Phone OS 7.1 (which is the same as 7.5 which is the same as Mango) because at this point most Windows Phone users have Mango and I want to be able to use the latest features.

Adding validation code

I need a text box where a user can enter the number of hours, minutes, or seconds for the timer. So I’ll just drag a TextBox control to my page. I change the name of the TextBox to txtHours and set the Text to a value of 1, this will be the default value. When I run the app and click in the TextBox it looks like this.

I don’t want users entering letters, so I had better add some validation to make sure the users enters numbers in the TextBox and i will add a TextBlock for displaying an error message to the user.

I create a TextBlock control and name it blkMessage and set the Foreground property to Red and the Text property to an empty string.

Now I double click on the my TextBox control which takes me to the code page and creates a TextChanged event handler for me. The TextChanged event handler fires whenever a user changes the content of my TextBox, so it literally fires every time you type in a letter or number (that means I don’t want too much code in there because it wouldn’t be great for performance). In my event handler I test to see if the value in the text box is numeric, if it isn’t, I display an error message. If it is a valid value, I clear out the error message. My code looks like this. BUT IsNumeric is a function I had to add myself it is not built in! I got the code for the IsNumeric function from this blog post (thank you Keith Murray)

         private void txtHours_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (!IsNumeric(txtHours.Text))
            {
                blkMessage.Text = "You must enter numbers only";
            }
            else
            {
                blkMessage.Text = "";
            }
        }

Now if a user enters letters or other non numeric values in the field they see an error message like this:

Changing the on screen keyboard

That works, but I don’t like the way the keypad comes us as letters as default which could be a bit annoying. With mobile apps you really want the user to have to use the keyboard as little as possible, so every keyboard tap I can save the user is a good thing. In addition, it’s good design to stop someone from entering an invalid value in the first place wherever possible, if I display a numeric keypad I don’t need to worry about someone entering letters and symbols! A quick bing search turns up a blog post that talks about setting the InputScope to get the numeric keyboard. Sounds worth a try. Unfortunately I can’t find a way to set that value in the property page so I am going to have to edit the XAML, and of course the XAML example in the blog post doesn’t work, but a quick search on MSDN for InputScope gives me the correct syntax.

So I have to open up the XAML pane by clicking on the little arrow button in the corner

Then find the <TextBox …/> called txtHours and add the InputScope attribute and set it to Number (wow I didn’t think I’d be messing in the XAML code this soon! but this really wasn’t that scary)

         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBox InputScope="Number" 
                     Height="69" 
                     HorizontalAlignment="Left" 
                     Margin="76,106,0,0" 
                     Name="txtHours" 
                     Text="1" 
                     VerticalAlignment="Top" 
                     Width="77" 
                     IsEnabled="True"/>
        </Grid>

And now when I run the application in the emulator, check it out: just numbers! Much better for my user!

So now I just need to replicate that logic for my hours, minutes and seconds textboxes. It’s fun to be starting my application. We’ll see what I learn next. Hope you are making progress with your apps as well. Remember if you publish an application by May 20th, 2012 you can get cool stuff thanks to the developer movement so get coding!