Building a Windows Phone App

Saturday, 22 September 2012

An overview of developing a basic application on Windows Phone 7.5

Having recently acquired a Nokia Lumia 800, natively a Windows 7.5 Phone to use whilst in the United States, I decided it was time to see how easy (or hard) it would be to build a quick app, and break out of the world of the web browser.

Ingredients

Visual Studio 2010 Express for Windows Phone*
Windows Phone SDK 7.1
A pinch of Silverlight, XAML and VB.NET
A phone to test it on!

For some inexplicable reason, known only to folk in Redmond, the Windows Phone 8 SDK is not yet released, and is only supported in Visual Studio 2012. As such, for this project, I’ve had to use VS2010.

According to the Win Phone Dev Team, this will be updated with the Windows Phone 8 SDK later this year.

The Challenge

I quite enjoy the odd game of scrabble on my iPhone, although I can’t say I’m overly skillful. I regularly find myself stuck with a set of letters from which I can’t derive any intelligible words. No fear, my trusty English word list is here!

As Windows Phone development is based on a derivative of Silverlight and is expressed using XAML, neither of which I’ve used more than to tinker with a traditional ‘hello world’.

My challenge is to build an application with a number of basic features, to allow people to enter a set of letters from their tile rack, with the rack returning a set of possible words.

Functions needed for this application

Entry of letters or tiles
Remote call to web service (to retrieve the results)
Display of results

Step 1 – Build the App frame work

The first step is to create an empty Windows Phone Application project in VS. This will create a default page (MainPage.xaml) and a default set of application icons – the tile, background tile and splash screen.

I chose to use VB.NET as the base language, although the next app I’ll build will be in C#. I won’t describe every line of code and object in this application, but just enough to get you started in building the next Angry Birds. Hopefully.

Step 2 – Add functionality

An application bar is a great way to navigate throughout your application, and meets the guidelines provided by Microsoft for usability. Simply add an application bar using XAML to the bottom of your pages, and customize it with your own links and images.

A set of Application Bar icons that can be used as guides for creating your own icons is automatically installed as part of the Windows Phone SDK. You can find the sample icons at one of the following locations:

C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark
Or wherever you’ve installed the SDK

The following is an example of my Application Bar

I’ve chosen to store my images in a subfolder /images/, followed by further folders for specific purposes. If your images don’t appear, check out Step 3.5

In the above code, you can see that each menu item has an event handler called Click, with an undefined function. I’ve added these using the code-behind file, MainPage.xaml.vb

You can see in this code snipped how to navigate to other pages within your app.

As a handy aside, it is also really simple to return to the previous page, without needing to specify the actual filename. Simply use this homage to classic Javascript:

On the main page, I’ve added a textbox, a button and an image. I will assume you know how to utilize these controls – the functionality is the same in ASP.NET C# and VB.NET.

Adding a textbox or other interactive control automatically enables the popup keyboard feature to appear, so you don’t need to worry about that.

From the textbox on the main page, I need to pass the text that the user enters into my results page. There are a number of ways to pass values between pages, but I’ve chosen to use the State system, which is analogous to Sessions in ASP.NET

Now we have a functioning main page, and can now use the button to move to the results page.

Step 3 – Code behind to call the web service

To generate the results – in this application a set of words that contain the letters or tiles entered by the user – I am passing the letters to my hosted API, which returns a comma separated list of words.

There are two popular methods for calling remote web services, WebClient and HTTPWebRequest. Whilst HTTPWebRequest is by far more flexible and configurable, I’ve chosen to use WebClient as it is essentially a simplified wrapper around HTTPWebRequest.

You can learn more about both functions in the system.net namespace, or by reading the MSDN article Downloading Content on Demand.

To request the results, I’m using the OpenReadAsync method, which returns the content to the OpenReadCompleted event. In VB.NET, we need to add a handler to our WebClient instance to refer to our own function to handle the OpenReadCompleted event.

The code above assumes you are passing a fully qualified URL in the string url, and displays a popup box with the results. In my app, I use the returning string to display the results on the page.

Step 3.5 – Important Hint!

It may be obvious to everyone else on the planet (or at least those who take the time to read documentation), but images need to be explicitly configured as content before they will display in the emulator or an actual published app.

Why is this not set by default? No idea. Simple set the Build Action to “Content“, and ensure your preferred Copy option is set.

Step 4 – Display the Results

The hosted web service simply returns a comma separated list of words which contain the letters the user entered. For example, if the use entered A-P-P-L-E, the system would return a list containing:

pelican,leopard,palates,pedlars,exempla,outleap,paliest,scalped,lapse,etc..

(Note that I’m not forcing the existence of double-letters, such as the two P’s in this example)

To display the results, I am using the RichTextBlock control, which supports the addition of other controls dynamically – similar to the ASP.NET placeholder control.

To achieve this, I parsed the results, and then added each as a string to the RichTextBlock.

However this looks fairly boring, so I’ve enhanced the results by parsing each individual word, and adding an image for each letter. In the end, I’ve used scrabble generic image tiles to display the words, and it looks great!

To achieve this, I’ve simply added each image after the next, with a line break at the end of each word.

This results in a nice display of tiles with the words that were found.

It’s done!

Finally, the application is complete! It’s quite a simple application, being just two actual pages (apart from the about page and the settings page, which is not yet functional).

From the home page, you can simply enter or type the letters you have on your tile rack, and click ‘go’.

The app will communicate with the server, and return up to 6 English words randomly chosen from the database that contain all the selected letters. Remarkably simple and very fast.

Extra Steps – Personalizing the App

Currently the application uses a pool of around 115,000 common English words. My next task will be allow users to select from a variety of word lists, including complex and scientific words.

Tile design

It’s recommended that you create your own tile artwork for your application, especially if you plan to publish to the Marketplace.

There’s a great guide to the numerous options located on MSDN. For this application, I created a very simply title tile using paint.net.

Testing my App

Aside from testing using the standard Windows Phone Emulator, Visual Studio 2010 Express for Windows Phone also includes a tool called the Marketplace Test Kit. This fantastic tool automatically runs a number code check and unit tests, ensuring your application will pass the basic tests of the real Windows Marketplace.

This tool also allows you to run your app directly on your own Windows Phone, although it requires Zune to be active at the time.

What’s next?

There’s a bunch of improvements I would like to make, primarily sharing the application bar across pages to minimize code duplication, and adding a local data cache to avoid errors when internet connectivity is not available.

Useful Links

Windows Phone Dev Centre
Windows Phone Development on MSDN

Source Code

I’m happy to give the source code out for this app to anyone who wants it – just send me an email or post a comment and I’ll send you the zip file. It’s not elegant, but it works!

App Store

This app is now available via the Windows Phone Store – click here.

Tags

Code, IT, MadScientist, MobileApps

Share with:

$An overview of developing a basic application on Windows Phone 7.5Having recently acquired a Nokia Lumia 800, natively a Windows 7.5 Phone to use whilst in the United States, I decided it was time to see how easy (or hard) it would be to build a quick app, and break out of the world of the web browser.IngredientsVisual Studio 2010 Express for Windows Phone*Windows Phone SDK 7.1 A pinch of Silverlight, XAML and VB.NETA phone to test it on!For some inexplicable reason, known only to folk in Redmond, the Windows Phone 8 SDK is not yet released, and is only supported in Visual Studio 2012. As such, for this project, I’ve had to use VS2010.According to the Win Phone Dev Team, this will be updated with the Windows Phone 8 SDK later this year. The ChallengeI quite enjoy the odd game of scrabble on my iPhone, although I can’t say I’m overly skillful. I regularly find myself stuck with a set of letters from which I can’t derive any intelligible words. No fear, my trusty English word list is here!As Windows Phone development is based on a derivative of Silverlight and is expressed using XAML, neither of which I’ve used more than to tinker with a traditional ‘hello world’.My challenge is to build an application with a number of basic features, to allow people to enter a set of letters from their tile rack, with the rack returning a set of possible words.Functions needed for this applicationEntry of letters or tilesRemote call to web service (to retrieve the results)Display of resultsStep 1 – Build the App frame workThe first step is to create an empty Windows Phone Application project in VS. This will create a default page (MainPage.xaml) and a default set of application icons – the tile, background tile and splash screen.I chose to use VB.NET as the base language, although the next app I’ll build will be in C#. I won’t describe every line of code and object in this application, but just enough to get you started in building the next Angry Birds. Hopefully.Step 2 – Add functionalityAn application bar is a great way to navigate throughout your application, and meets the guidelines provided by Microsoft for usability. Simply add an application bar using XAML to the bottom of your pages, and customize it with your own links and images.A set of Application Bar icons that can be used as guides for creating your own icons is automatically installed as part of the Windows Phone SDK. You can find the sample icons at one of the following locations:C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\darkC:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\darkOr wherever you’ve installed the SDK The following is an example of my Application BarI’ve chosen to store my images in a subfolder /images/, followed by further folders for specific purposes. If your images don’t appear, check out Step 3.5In the above code, you can see that each menu item has an event handler called Click, with an undefined function. I’ve added these using the code-behind file, MainPage.xaml.vbYou can see in this code snipped how to navigate to other pages within your app.As a handy aside, it is also really simple to return to the previous page, without needing to specify the actual filename. Simply use this homage to classic Javascript:On the main page, I’ve added a textbox, a button and an image. I will assume you know how to utilize these controls – the functionality is the same in ASP.NET C# and VB.NET.Adding a textbox or other interactive control automatically enables the popup keyboard feature to appear, so you don’t need to worry about that.From the textbox on the main page, I need to pass the text that the user enters into my results page. There are a number of ways to pass values between pages, but I’ve chosen to use the State system, which is analogous to Sessions in ASP.NETNow we have a functioning main page, and can now use the button to move to the results page.Step 3 – Code behind to call the web serviceTo generate the results – in this application a set of words that contain the letters or tiles entered by the user – I am passing the letters to my hosted API, which returns a comma separated list of words.There are two popular methods for calling remote web services, WebClient and HTTPWebRequest. Whilst HTTPWebRequest is by far more flexible and configurable, I’ve chosen to use WebClient as it is essentially a simplified wrapper around HTTPWebRequest.You can learn more about both functions in the system.net namespace, or by reading the MSDN article Downloading Content on Demand.To request the results, I’m using the OpenReadAsync method, which returns the content to the OpenReadCompleted event. In VB.NET, we need to add a handler to our WebClient instance to refer to our own function to handle the OpenReadCompleted event.The code above assumes you are passing a fully qualified URL in the string url, and displays a popup box with the results. In my app, I use the returning string to display the results on the page.Step 3.5 – Important Hint!It may be obvious to everyone else on the planet (or at least those who take the time to read documentation), but images need to be explicitly configured as content before they will display in the emulator or an actual published app.Why is this not set by default? No idea. Simple set the Build Action to “Content“, and ensure your preferred Copy option is set.Step 4 – Display the ResultsThe hosted web service simply returns a comma separated list of words which contain the letters the user entered. For example, if the use entered A-P-P-L-E, the system would return a list containing:pelican,leopard,palates,pedlars,exempla,outleap,paliest,scalped,lapse,etc..(Note that I’m not forcing the existence of double-letters, such as the two P’s in this example)To display the results, I am using the RichTextBlock control, which supports the addition of other controls dynamically – similar to the ASP.NET placeholder control.To achieve this, I parsed the results, and then added each as a string to the RichTextBlock.However this looks fairly boring, so I’ve enhanced the results by parsing each individual word, and adding an image for each letter. In the end, I’ve used scrabble generic image tiles to display the words, and it looks great!To achieve this, I’ve simply added each image after the next, with a line break at the end of each word.This results in a nice display of tiles with the words that were found.It’s done!Finally, the application is complete! It’s quite a simple application, being just two actual pages (apart from the about page and the settings page, which is not yet functional).From the home page, you can simply enter or type the letters you have on your tile rack, and click ‘go’.The app will communicate with the server, and return up to 6 English words randomly chosen from the database that contain all the selected letters. Remarkably simple and very fast.Extra Steps – Personalizing the AppCurrently the application uses a pool of around 115,000 common English words. My next task will be allow users to select from a variety of word lists, including complex and scientific words.Tile designIt’s recommended that you create your own tile artwork for your application, especially if you plan to publish to the Marketplace.There’s a great guide to the numerous options located on MSDN. For this application, I created a very simply title tile using paint.net.Testing my AppAside from testing using the standard Windows Phone Emulator, Visual Studio 2010 Express for Windows Phone also includes a tool called the Marketplace Test Kit. This fantastic tool automatically runs a number code check and unit tests, ensuring your application will pass the basic tests of the real Windows Marketplace.This tool also allows you to run your app directly on your own Windows Phone, although it requires Zune to be active at the time.What’s next?There’s a bunch of improvements I would like to make, primarily sharing the application bar across pages to minimize code duplication, and adding a local data cache to avoid errors when internet connectivity is not available.Useful LinksWindows Phone Dev CentreWindows Phone Development on MSDNSource CodeI’m happy to give the source code out for this app to anyone who wants it – just send me an email or post a comment and I’ll send you the zip file. It’s not elegant, but it works!App StoreThis app is now available via the Windows Phone Store – click here.$