Mini tutorial Windows Phone 7: recréez en Silverlight le mini-client twitter de Scott Guthrie du MIX2010

Voyons ensemble les étapes à suivre pour refaire sur votre machine le petit “client” twitter réalisé en Live par Scott Guthrie lors de la keynote du jour 1 du MIX2010 que vous pouvez revoir en vidéo ici : https://live.visitmix.com/MIX10/Sessions/KEY01 . Ce billet fait suite à celui-là où vous pouvez retrouver tous les détails du téléchargement des outils nécessaires à la réalisation de ce tutorial.

Une fois les outils installés, lancez Visual Studio 2010 Express for Windows Phone.

1 – Créez un projet de type “Windows Phone Application” et nommez le “MiniTwitter”

2 – Cliquez sur “page title” et dans les propriétés du contrôle, changez la valeur de la propriété “Text” à “twitter”. Ajoutez ensuite via drag’n’drop 1 bouton et une TextBox. Mettez à vide la propriété Text de votre TextBox et changez la propriété Content du bouton de “Button” à “Lookup”. Pour terminer, drag’n’droppez une ListBox en dessous et débrouillez vous pour lui faire prendre le maximum de place. Vous devriez alors obtenir un visuel équivalent à celui-là :

3 – Le but du jeu est désormais de récupérer le flux Twitter de l’utilisateur dont le nom se trouve dans la TextBox. Nous allons effectuer une requête HTTP vers l’URL qui va bien. Pour cela, la documentation de Twitter nous aide: https://apiwiki.twitter.com/Twitter-REST-API-Method%3A-statuses-user_timeline. L’URL que nous allons utiliser comme base est la suivante du coup: https://api.twitter.com/1/statuses/user_timeline.xml?screen_name= . Regardez par exemple le flux XML retournée par cette requête : https://api.twitter.com/1/statuses/user_timeline.xml?screen_name=scottgu

Double-cliquez sur le bouton “Lookup” dans le designer pour vous retrouver dans le gestionnaire d’évènement du clic. Insérez y ce code :

 WebClient twitter = new WebClient();

twitter.DownloadStringCompleted += 
   new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
twitter.DownloadStringAsync(
   new Uri("https://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + textBox1.Text));

Ce dernier est extrêmement simple. On créé une instance du WebClient qui va s’occuper de faire un GET HTTP en asynchrone sur l’URL de Twitter qui nous intéresse. Une fois la requête effectuée, on devrait alors recevoir un flux XML comme décrit dans la documentation précédente. Pour récupérer et filtrer ce flux, nous allons faire appel au puissant LINQ to XML. Pour cela, ajoutez une référence à votre projet et ajoutez y la librairie System.XML.Linq :

Une fois cette librairie ajoutée, n’oubliez pas d’insérer ce using :

 using System.Xml.Linq;

Nous allons également faire un mapping avec l’une de nos classes objet entre une partie du XML retourné et ses propriétés. Les propriétés de cette classe seront ensuite utilisées par le Binding dans la vue XAML. Voici notre classe pour le mapping :

 public class TwitterItem
{
    public string UserName { get; set; }
    public string Message { get; set; }
    public string ImageSource { get; set; }
}

il nous faut désormais implémenter la méthode qui sera rappelée par le WebClient en asynchrone. La voici :

 void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    if (e.Error != null)
        return;

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

    listBox1.ItemsSource = from tweet in xmlTweets.Descendants("status")
                           select new TwitterItem
                           {
                            ImageSource = 
                              tweet.Element("user").Element("profile_image_url").Value.ToString(),
                            Message = 
                              tweet.Element("text").Value.ToString(),
                            UserName = 
                              tweet.Element("user").Element("screen_name").Value.ToString()
                           };
}

On voit ici que l’on parcours l’arbre XML qui est retourné par le HTTP GET avec Linq de manière à faire un mapping propre directement exploitable par la future vue. Le parcours de l’arbre construit alors une collection d’éléments de type TwitterItem qui est affectée ensuite à la propriété ItemsSource de notre ListBox.

4 - Il ne nous reste plus qu’à définir le comportement visuel de notre ListBox pour afficher ses éléments retourné par le service Twitter en utilisant le templating de ses enfants. Pour cela, insérez ce morceau de XAML au sein de votre balise de type ListBox :

 <ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal" Height="150">
            <Image Source="{Binding ImageSource}" Height="75" 
                   VerticalAlignment="Top" Margin="0,0,5,0"/>
            <StackPanel Width="370">
                <TextBlock Text="{Binding UserName}" Foreground="Yellow" FontSize="26" />
                <TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="22" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

On indique ici simplement que l’on souhaite afficher de manière horizontale l’avatar twitter de l’utilisateur en 1ère place suivi d’un bloc à sa droite contenant son “screen name” (en jaune) avec le texte du tweet juste en dessous (en blanc par défaut).

5 – Compilez l’ensemble. Faîtes ensuite F5. Visual Studio lance alors l’émulateur Windows Phone 7 et déploie en mode debug notre mini client Twitter dans l’émulateur. Testez par exemple d’entrer “scottgu” dans la TextBox et après avoir cliqué sur “Lookup”, vous devriez avoir un résultat similaire à cela :

Si vous avez un écran muli-touch, vous pouvez même faire défiler la liste des Tweets avec vos petits doigts à travers le simulateur. Cool non ? :-)

David