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:
Choose the Windows Phone Application template and indicate the name of the project/solution (i.e MyFlights😞
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:
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...:
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:
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:
Here's what your UI should look like:
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:
First of all we'll need to create the Flight class and create some variables to hold our connection properties:
When the user clicks on the Submit button, show the progress bar and create a new WebClient to call the Web Service:
Parse the XML response and assign the result to the listbox when the response is received:
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:
You can now press F5 to launch the emulator and test the application:
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.
2 Comments
