Blog

Windows Phone 7 Series: Developing an Application

To become familiar with the development of an application for the Windows Phone 7 we will create a simple Silverlight application: a form of tweets that are related to a particular topic.

Environment and Tools
To start, we must download and install the  Windows Phone Developer Tools Beta, which allows us to develop applications using Visual Studio 2010 for  Windows Phone 7. After doing this with VS 2010 we create a project using the template for Windows Phone Application. The solution generated by using the Windows Phone Application template contains a single draft Silverlight for Windows Phone, which has a similar structure to that of a Silverlight application for web or desktop.


As we begin our project we will find a split view of visual design and code such as that shown in Figure 1.

 

pre1

Figure 1. View of the design and code

 

The controls and the code
In the same way as with Silverlight applications for Windows, you can add controls to your application by selecting them from the toolbox and dragging them into the layout view. This procedure generates the markup needed in the file. xaml homepage.

 

We need a TextBox, we'll call it QueryStringTextBox a Button with a name of btnSearchTwitter, and a ListBox that will be named lstSearchResults.

 

The XAML generated by adding these controls is shown in Listing 1.

1

Listing 1. XAML generated by controls.

 

Our design view will look like Figure 2. This shows the first two tests as seen in the phone. For now the space for displaying results is shown empty.

 

2

Figure 2. Design view with controls.

Events and behavior
As you can imagine, our btnSearchTwitter button will launch the action order for the search, and this requires indicating the EventHandler to manipulate the click. To do this we double-click the button shown in design view and this generates the EventHandler btnSearchTwitter_Click. Referring to the Twitter API, we need to add the code that calls the web service to get the tweets. This code is shown in Listing 2.

 

3

Listing 2. Obtaining tweets with the Twitter’s API

 

Since the invocation is asynchronous, it is necessary to define the method that is responsible for receiving results. This method is supported by the LINQ to XML library to extract the information we want to show the user and map to Tweet class objects, which will be our data model and will have two public properties of type String: Title and Avatar.

4

Listing 3. Assigning values of Tweet object.

 

The last line of SearchClient_DownloadStringCompleted method creates a relationship between lstSearchResults and the tweet collection. To display the results only remains to complete the definition of lstSearchResults. Using ItemTemplate we define the structure to be used to display each tweet: an image-mapped property Avatar-and-text for Part-organized in a grid of two columns.

 

5

Listing 4. Defining the deployment of results.

 

Compiling and Running
We can now compile as in any other Visual Studio project, with the Build Solution command. We verified that Windows Phone 7 Emulator is selected as the target for implementation and proceed to run the application with the command Start Debugging or F5 key.

 

The emulator shows, as previewed on the design view a text box and a button. After doing a search we can see the results displayed in a list showing the image and the text of each tweet related to the keyword we use (see Figure 3).

6

Figure 3. Running Application.

 

The example shown is very simple and aims to explore the tools that Microsoft provides to the community interested in developing mobile applications. Undoubtedly, the approach taken is aimed at facilitating the process of building software for all platforms, and now with the Windows Phone 7 Series are not far behind.

The source code used in this article is available:  http://www.denissezavala.com/blog/2010/07/wp7-examples

References
[1] UI and Interaction Design Guide for Windows Phone 7.
[2] Phone for Windows Developers

 

Denise Zavala has a degree on Engineering in Computer Technologies of Tecnológico de Monterrey, Campus Morelia. She currently works as a software engineer in Sieena.com, which focuses on the development of Web applications based primarily on Microsoft technologies.

 

 

Comments

Leave a comment

 
 
 
 
CAPTCHA Image Validation