Create a Twitter app for Windows Phone 7

So, on Monday, I had the opportunity to open MIX 2010 Day 1 Keynote in Las Vegas ( video attached ). In keynot'e I made the announcement of Silverlight 4 RC version (the final version will be available next month) and VS 2010 RC tools for Silverlight 4. I also had the opportunity to discuss Silverlight and XNA application development for Windows Phone 7 applications for the first time.

In the process of speaking, I created two small Windows Phone 7 applications using Silverlight: a simple “Hello World” application and an application that receives data from Twitter. Both programs are easy to create, it only takes a couple of minutes. Below are the steps you can take to create applications on your machine.

Creating a “Hello World” Windows Phone 7 application.

First of all, make sure that you have installed Windows Phone Developer Tools CTP , it includes Visual Studio 2010 Express for development for Windows Phone (it will always be free, this is the only thing you need to develop Windows Phone 7 applications), as well as an add-in for VS2010 RC.

After downloading and installing Windows Phone Developer Tools CTP, launch Visual Studio 2010 Express for Windows Phone or launch VS 2010 RC (if you have it installed), and select File-> New Project. You will see a regular list of project template types, but with a new category - “Silverlight for Windows Phone”. The first CTP offers two types of projects. The first template is “Windows Phone Application”, we will use it for this example. The second is the “Windows Phone List Application”, which offers the standard template master-details of the application:



After creating a new project, you will see the device and layout. Please note that the device shows the UI of the phone, allowing you to see what your application looks like during development. Those familiar with Visual Studio can easily find the ToolBox, Solution Explorer, and the Properties panel.



For the HelloWorld application, we will start by adding the TextBox and Button from the Toolbox. Note that all actions are identical with Silverlight on the web or on the desktop. You can easily resize, move and align controls right in the designer. changing properties is also easy through the Properties panel. We will change the name of the TextBox that is added for username and change the page title to “Hello world”.



Next, we write the code by double-clicking the button and creating an event handler in the code-behind file (MainPage.xaml.cs).



We will start by changing the title of the application. The project template includes a title in the form of a TextBlock with the name textBlockListTitle (this name mistakenly contains the word “list”, in the final version we will fix it). As you write code, intellisense, showing available members. Below we set the TextBlock header property as “Hello“ + the Text property of the TextBox username:



Now we have all the code we need for the Hello World application. We have two options for deploying and running the application. We can do this on a real device or through the built-in emulator:



We get full functionality in the emulator, since this is a real operating system running on a virtual machine. For our example, we simply press F5 to launch the application in debug mode using the emulator. Once the operating system has booted, the emulator will launch a new “Hello world” application, just as if it were a real device:



Note that we can change several emulator settings through the emulator toolbar - it is a floating panel in the upper right corner. You have the ability to change the size / scale of the emulator and two buttons for rotation. The scale allows us to enlarge areas with the smallest details of the application:



These orientation settings allow us to see how the application will look in horizontal mode (orientation changes are supported directly in the standard template):



Please note that the emulator is reused in the next F5 debugging sessions - this means that you do not have to start the emulator for each application launch. We have added a window that helps you not accidentally turn off the emulator if you want to use it again. Launching the application on an already running emulator should take about 3 seconds to deploy and run.

In our Hello World application, we click on the “username” text box to focus. This action automatically opens the software input panel (SIP). We can print a message or, since we use an emulator, type text using the virtual keyboard. I want to note that the emulator works great with the multi-touch screen in Windows 7, if you have one, then you will enjoy full interaction with the device.



We will write “MIX 10” in the text box and click on the button, changing the title to “Hello MIX 10”:



We provide the same experience in developing Visual Studio for the phone as for other .NET applications. This means that we can put a breakpoint in the button's event handler, click the button again and get a stop in the debugger:

Create Twitter Windows Phone 7 Apps with Silverlight

Instead of focusing on “Hello World,” let's continue and develop the application into a simple Twitter client.

We will return to the application layout and add a ListBox using the guides in the designer to place an element on the screen and allowing optimal use of the space on the screen. Change the text of the buttons to “Lookup”:



Next, go back to the button event handler in Main.xaml.cs and delete the original “Hello World” code and take advantage of the class for working with the WebClient network for asynchronous loading of Twitter feeds. It takes only three lines of code: (1) declaring and creating a WebClient, (2) attaching an event handler, (3) calling the DownloadStringAsync asynchronous method.

In a call to DownloadStringAsync, we pass the Twitter address and request line, which pulls the text from the “username” TextBox. This feed will return the last user messages in XML format. After the call is completed, the DownloadStringCompleted events are raised, and accordingly our generated event handler twitter_DownloadStringCompleted.



The result is returned from Twitter in a specific XML format. For parsing, we will use LINQ to XML. LINQ to XML allows us to create a simple query to access data in an xml feed. To use this library, we first add the collection link (right-click on the References folder in the Solution Explorer and select Add Reference):



Add the namespace “using System.Xml.Linq” to the header code-behind Main.xaml.cs of the file:



Next, we add a simple helper class to our project and call it TwitterItem, which will have three members - UserName, Message and ImageSource:



Next, we implement the twitter_DownloadStringCompleted event handler and use LINQ to XML to parse the returned XML string from Twitter. What makes the request - it pulls out three key pieces of information for each Twitter message from the user that we sent in the request. ImageSource is used for image profile, Message for tweet, and UserName. For each tweet in XML, we create a new TwitterItem in IEnumerable returned by the Linq request.

We set the TwitterItem sequence to the ItemsSource property for the ListBox:



Let's take one more step to complete the application. In the Main.xaml file, add an ItemTemplate for the ListBox. To demonstrate, I used a simple template that uses data binding to display user profile images, their tweets and username.

  

    
      
       
         
         
          
          
         
       
      
    

  


Now press F5, we use the already running emulator and restart the application. Once the application has started, we can type in the username on Twitter and press the button to get the result. Try typing my user (scottgu):



Try using the mouse, and if you have a touch screen, then with your finger to scroll through the messages in the ListBox, notice how it quickly scrolls in the emulator? This is because the emulator uses hardware acceleration and provides the same performance that you get on a real device.

Total

Silverlight and VS 2010 Tools for Windows Phone (and accordingly Expression Blend Tools for Windows Phone ) allows you to create applications very quickly and fun.

On MIX, several great partners, including Netflix, FourSquare, Seesmic, Shazaam, Major League Soccer, Graphic.ly, Associated Press, Jackson Fish, etc., showed off some killer prototypes of applications they developed in a few weeks. You can view the full record of the first day of keynote to see for yourself. I think they have demonstrated the full potential of Silverlight on Windows Phone 7. In the coming months, expect articles on this subject from me.