Créer votre première application Windows Phone 7 en MVVM.

Article

écrit par rodrigue
il y a 0 commentaire

Le but de ce tutoriel est de créer un mini client Twitter avec le pattern MVVM, on va faire exactement le même client twitter que Scott Guthrie a fait pendant la présentation MIX 10 sauf qu’on va le faire en MVVM.
Pourquoi MVVM ?

MVVM est un pattern qui facilite les tests de code et les taches des développeurs et designers comme il n’y’a pas de « code behind » dans le vues.
Voici un schéma résumant le pattern :

MVVM

Pour développer sur Windows Phone 7, vous devez télécharger le SDK qui est gratuit [ici]. La version en ligne maintenant est la Beta.
Pour commencer on va utiliser le template que nous avons mis à disposition sur Visual Studio Gallery qui nous permet de gagner du temps.

new project

Vous remarquerez que :

Les répertoires «ViewModel » / « Views » / «Model » sont déjà crées et Les fichiers MainViewModel.cs / ViewModelBase.cs aussi déjà crées.

Attaquons le Model et ajoutons une classe « Tweet »

Ajouter la référence : System.Xml.Linq qui va nous faciliter le parçage XML

reference

Ajoutez aussi dans la classe «Tweet » les 2 namespaces :

System.Xml.Linq
System.Linq

Ajoutez les propriétés dont on a besoin : Username, Message, ImageSource (tous de type string) et la méthode statique qui va parser le résultat xml.

public static ObservableCollection<Tweet> GetTweetsFromResponse(String Response)
{
List<Tweet> lstTweets = new List<Tweet>();
XElement xmlTweets = XElement.Parse(Response);
lstTweets = (from tweet in xmlTweets.Descendants(« status« )
select new Tweet
{
ImageSource = tweet.Element(« user« ).Element(« profile_image_url« ).Value,
Message = tweet.Element(« text« ).Value,
Username = tweet.Element(« user« ).Element(« screen_name« ).Value
}).ToList();
ObservableCollection<Tweet> obsTweets = new ObservableCollection<Tweet>();
foreach (Tweet t in lstTweets)
obsTweets.Add(t); return obsTweets;

}

Maintenant on peut procéder au ViewModel:

Ajoutez la propriété de type ObservableCollection<Tweet> :

private ObservableCollection<Tweet> lstTweets;
public ObservableCollection<Tweet> LstTweets
{
get { return lstTweets; }
set
{
if (lstTweets != value)
{
lstTweets = value;
OnNotifyPropertyChanged(LstTweetsPropertyName);
}
}
}

public const string LstTweetsPropertyName = « LstTweets« ;

Ajoutez ces méthodes qui permettent l’appel plus la response de l’API Twitter:

private void GetTweetsCall(string screenName)
{
WebClient client = new WebClient();
client.DownloadStringCompleted +=
new DownloadStringCompletedEventHandler(twitter_Response);
client.DownloadStringAsync(
new Uri(« http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=«
+ screenName));
}

private void twitter_Response(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null)
{
LstTweets = Tweet.GetTweetsFromResponse(e.Result);
}
}

C’est avec un bouton qu’ on va exécuter commande, sauf que les commandes n’existaient pas en Silverlight 3 , et comme WP7 c’est du Silverlight 3 on va utiliser le toolkit MVVM Light pour faciliter notre tache.

Donc téléchargez les .dll d’ici et ajoutez « GalaSoft.MvvmLight.WP7 » comme référence.

Apres avoir fait ca retournons au MainViewModel pour ajouter notre RelayCommand :

public RelayCommand<string> MyCommand { get; set; }

Pour une explication détaillée du RelayCommand référez vous au post de Laurent Bugnon (le créateur du toolkit).

Dans le constructeur du MainViewModel : initialisez le RelayCommand :

MyCommand = new RelayCommand<string>( param =>
{
GetTweetsCall(param);
});

Vous avez donc remarqué j’utilise une expression lambda pour faire des appelles plus rapidement : «param» c’est le contenu du textbox qu’on va renvoyer.

Et on appellera la méthode GetTweetsCall à chaque fois que la commande est exécutée.

Donc votre MainViewModel doit ressembler à ca maintenant :

Les proprietés :

public const string LstTweetsPropertyName = « LstTweets« ;

public RelayCommand<string> MyCommand { get; set; }

Le constructeur:

public MainViewModel()
{
MyCommand = new RelayCommand<string>( param =>
{
GetTweetsCall(param);
});
}

Les méthodes:

private void twitter_Response(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null)
{
LstTweets = Tweet.GetTweetsFromResponse(e.Result);
}
}

Passons à la vue!

Dans le premier pivotitem ajoutons un textbox, un bouton et une listbox.

Ajoutez le namespace pour la commande a travers MVVM Light toolkit : xmlns:cmd= »clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.WP7″

Liez la commande au bouton et le paramètre de la commande avec en binding la propriété «Text » du TextBox ajouté:

«cmd :ButtonBaseExtensions » provient du toolkit donc et ca va nous permettre de faire ce qui est possible en Silverlight 4 : utiliser une commande avec un boutton.
Et enfin créer une listbox ou l’ItemTemplate contiendra une image et 2 textbox (une pour le username et l’autre pour le message).
Pour avoir quelque chose qui ressemble à ca dans votre PivotItem :