Currently Being Moderated

In this second blog we will create a Windows Phone 7 application to consume the Web Service we created in the first part of this series. The source code of the application is available here.

 

Building Your First Windows Phone 7 Application (1/2)

Building your First Windows Phone 7 Application (2/2)

 

Getting the Development Tools

Microsoft provides free development tools to build Windows Phone 7 applications. You can download the web installer here. We'll also need the Silverlight for Windows Phone Toolkit to use some controls that are not yet in the official release. You can get it here.

 

Building the Application

Start MS Visual Studio 2010 Express for Windows Phone and create a new project by clicking on New Project:

image

 

Choose the Windows Phone Application template and indicate the name of the project/solution (i.e MyFlights):

image

 

UI Design

We'll use the default main page to enter the selection criteria and display the list of flights that meet these criteria so let's add some controls to this page. You can either use the graphical editor in Visual Studio or directly modify the xaml code. You can also use Expression Blend for all the design work (right click on a page and select Open in Expression Blend...).

 

Use the Toolbox to add some TextBlocks and TextBoxes:

image

 

Then add a DatePicker to allow the user to easily enter the flight date. This control is not yet in the official release so we'll need to add it to the list of Windows Phone Controls first. Right click on Windows Phone Controls in the Toolbox and select Choose Items...:

image

 

Select the DatePicker component and click on OK. Then add a DatePicker control using the new entry in the list and a Buttonnext to it:

image

 

Finally add a ProgressBar and a Listbox to display the results. You can also rename the controls and change the default ApplicationTitleand ApplicationName using the Properties view:

image

 

Here's what your UI should look like:

image

 

The Code Behind

Now we need to add some code "behind" the page in the MainPage.xaml.csfile to call the Web Service. In a real application, you should probably not put all your code in the code-behind file. You should use the MVVM pattern to separate the view from the business logic but this topic is way beyond the scope of this article.

 

Double click on the Submit button we created earlier. This will generate a method and open the MainPage.xaml.cs file:

image

 

First of all we'll need to create the Flight class and create some variables to hold our connection properties:

image

image

 

When the user clicks on the Submit button, show the progress bar and create a new WebClient to call the Web Service:

image

 

Parse the XML response and assign the result to the listbox when the response is received:

image

 

Note: you'll have to add a reference to the System.Xml.Linqcomponent by right clicking on Referencesin the Solution Explorer.

Finally create a template and bind the data we want to display in the results list. Open the MainPage.xaml file and add the following lines between the tags:

image

 

You can now press F5 to launch the emulator and test the application:

image

 

Next

The application we've created is really simple and many things could be done to improve it. We could for instance use the MVVM pattern to separate the presentation from the business logic or use JSON to format the response instead of XML to optimize the communication between the client and the server.

Windows Phone 7 is a brand new mobile platform but it is really promising. I think Microsoft took the right decision by choosing Silverlight as the development platform for Windows Phone 7. Existing Silverlight developers will quickly create quality applications and beginners should be able to get up to speed in no time thanks to the great development tools.

Comments

Actions

Filter Blog

By author:
By date:
By tag: