×
Namespaces

Variants
Actions
Revision as of 03:26, 24 April 2012 by hamishwillee (Talk | contribs)

Accessing Twitter using Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to handle web service request using WebClient and NetworkInterface.


WP Metro Icon Web.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): WP7 Emulator
CompatibilityArticle
Keywords: Web Service/WebClient/NetworkInterface/Twitter
Created: somnathbanik (10 Oct 2014)
Last edited: hamishwillee (24 Apr 2012)

Contents

Introduction

WebClient class provides common methods for sending and receiving data from a resource identified by a URI where as NetworkInterface class provides a information about the network. Here we will use both the classes to see how we can get data from web service and use those data in our application.



Twitter User Data

Basic Idea

We aim to create a basic Twitter Client that can display information about a particular user. In this case we add a SearchBox where user can put the UserName and as he clicks on the SearchButton, we make a web request (http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=<username>) to fetch the XML data about the user. We use WebClient to make a web request and get the data but before that NetworkInterface is used to check whether the network is available or not. More information about Twitter’s API can be found here.


Implementation

First lets create a project with Windows Phone Application Template. Once the project is being created we add a TextBox, Button, Image, two TextBlock and a ListBox which has the text message in the MainPage.xaml file.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBox x:Name="UserSearchBox" Margin="0,0,37,0" />
<Button x:Name="SearchButton" Content="Search" Click="SearchButton_Click" HorizontalAlignment="Right" Width="131" Grid.ColumnSpan="2" />
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.ColumnSpan="2">
<Image x:Name="UserImage" Width="100" Height="100" Margin="0,0,12,0" />
<StackPanel Width="370">
<TextBlock x:Name="UserName" Foreground="Orange" FontSize="50" />
<TextBlock x:Name="UserLocation" Foreground="Orange" FontSize="25" />
</StackPanel>
</StackPanel>
<ListBox x:Name="TwitterItemList" Grid.Row="2" Grid.ColumnSpan="2">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Margin="0,0,40,0" Text="{Binding textMessage}" TextWrapping="Wrap" Width="450" />
<Rectangle Height="20" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
 
</Grid>

We create a class name TwitterData.cs which holds the text message of the status.

public class TwitterData
{
public string textMessage { get; set; }
}

When we click on the SearchButton NetworkInterface::GetIsNetworkAvailable() method is called to see whether any network connection is available or not. If we have a network connection then we create a new WebClient object, and make an asynchronous call with DownloadStringAsync() out to the Twitter API (http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=<username>). First, we create a new event handler DownloadStringCompleted() for when our data retrieval is complete, and second we make the asynchronous call. In this example, we will get the user name that user has entered in the serarch box. When the data returns, our event handler fires twitter_DownloadStringCompleted()

private void SearchButton_Click(object sender, RoutedEventArgs e)
{
if (NetworkInterface.GetIsNetworkAvailable())
{
WebClient twitter = new WebClient();
 
twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + UserSearchBox.Text));
}
}

Once we get the data from the web service we need to display the content in list view. I am not going to focus on this part here, rather we will see how to parse the XML using LINQ . To do this, we need to add the namespace, System.Xml.Linq. First lets create a new XElement object that holds our XML data.

XElement xmlTweets = XElement.Parse(e.Result);

For displaying content in list view we can refer ListBox in WP7. When we get the data in xmlTweets we need to bind the data in the listbox

 
TwitterItemList.ItemsSource = from tweet in xmlTweets.Descendants("status")
select new TwitterData
{
textMessage = tweet.Element("text").Value
};


Just above the list we display the profile image, user name and location of the user

string image = xmlTweets.Element("status").Element("user").Element("profile_image_url").Value;
ImageSource source = new BitmapImage(new Uri(image));
UserImage.Source = source;
 
string name = xmlTweets.Element("status").Element("user").Element("name").Value;
UserName.Text = name;
 
string location = xmlTweets.Element("status").Element("user").Element("location").Value;
UserLocation.Text = location;




Source Code

The full source code of the example is available here: File:TwitterWebService.zip

242 page views in the last 30 days.