次の方法で共有

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à :

TutoTwitterWP7_001

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 :

TutoTwitterWP7_002

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 :

TutoTwitterWP7_003

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

Comments

  • Anonymous
    March 24, 2010
    Hello, Chose amusante, il se trouve que Mister Scottgu himself a finalement bloggué également le même genre de tutorial sur son blog ici : http://weblogs.asp.net/scottgu/archive/2010/03/18/building-a-windows-phone-7-twitter-application-using-silverlight.aspx quelques temps après cette version française ! :-D N'hésitez pas à y jeter un coup d'oeil (même si c'est en Anglais) car son tutorial est bien plus complet et détaillé que le mien. Bye, David, fier quand même d'avoir fait le tutorial avant lui! :-P

  • Anonymous
    July 29, 2010
    Merci pour ce tuto ! Ca marche ! En revanche, j'ai voulu le refaire pour l'afficher dans un navigateur web, et les tweets ne s'affichent pas

  • Anonymous
    October 01, 2010
    Première approche intéressante. Pour info, il existera à voir un autre client Twitter pour windows Phone 7 nommé Beezz. La vidéo de preview est visibile sur Youtube ou à la page suivante : www.yoozio.com/client-twitter-windows-phone-7,244

  • Anonymous
    January 16, 2011
    Bonjour, je suis novice concernant le développement windows phone. A vrai dire, je n'en ai jamais fait. J'aimerai me lancer dans l'aventure mais je ne sais pas par où commencer (Quel langage apprendre? quel livre à acheter par exemple ?). Est -ce que vous pouvez m'aider? Merci d'avance.

  • Anonymous
    February 27, 2011
    Bonjour je veux savoir comment faire pour les autres réseaux sociaux comme Facebook, LinkedIn... Est -ce que vous pouvez m'aider? Merci d'avance. Bien Crdlt, KETATA Ramy