[WP7] [MVVM] Construire une application étape par étape : 1/ Introduction

11. January 2012 09:01 by Renaud in   //  Tags:   //   Comments (5)

Cet article fait partie d'une longue série dont le but est de montrer comment réaliser une application pour Windows Phone de A à Z en évitant de tomber dans les pièges les plus courants. Pour cela, je vais réaliser une application à partir de zéro et décrire les différentes étapes sur ce blog. L'application en question sera finalement publiée sur le marketplace une fois terminée. Cette application utilisera le pattern MVVM, qui va nous aider à solutionner les difficultés techniques que nous pourrions rencontrer. Elle fera appel à un webservice, mis à disposition au travers de l'API Last.FM.

Le plan:

Le développement sera constitué de trois grandes parties, parfois subdivisées en tâches pour raccourcir les articles:

  1. Introduction
  2. Modèle:
  3. ViewModel
    • Les vues théoriques
    • Assemblage de ViewModels
    • Actions et commandes
    • Communication entre les ViewModels (Messenger)
  4. View
    • Binding
    • Templates
    • Application localisée

 Quel est le but de l'app réalisée?

MyShows (ce sera le nom de cette application) va utiliser les services de Last.FM pour fournir une liste de concerts à proximité de l'endroit où se trouve l'utilisateur, ainsi que la possibilité de consulter les concerts des artistes qu'il souhaite. On pourra donc afficher une timeline des concerts des artistes suivis, et proposer des artists similaires que l'utilisateur pourrait vouloir suivre également.

Voilà donc très brièvement la description fonctionnelle de ce que l'on va réaliser dans les articles qui suivent.

Avants-propos

Depuis un an maintenant que je développe des applications pour Windows Phone 7, j'ai rencontré bon nombres de situations à s'arracher les cheveux. Des dépendances cycliques, des problèmes de binding, des difficultés aves les requêtes asynchrones, ...

Cela était dû en grande partie à ma mauvaise connaissance de Silverlight. En fait, j'ai vraiment découvert Silverlight au moment de commencer le développement pour Windows Phone.

Avant ça, ma seule expérience .NET consistait en un projet ASP.NET MVC2, et quelques webforms. Je n'avais donc jamais entendu parler du Binding, et j'ai découvert sa magie petit à petit au cours des différents projets qui suivirent.

La raison pour laquelle j'ai décidé de faire cette série d'articles est qu'il m'est souvent arrivé récemment d'être questionné par d'autres développeurs sur "comment je pourrais faire ceci ou cela?", comme par exemple "comment retrouver le libellé de mon produit lorsque je clique sur le bouton supprimer de ce produit?". Et là, je me demande toujours comment ont-ils fait pour arriver à avoir ce genre de besoins?

Alors il y a deux réponses possibles: Soit on passe du temps à expliquer qu'il y a manifestement un problème de design dans l'application. Il faut alors, en essayant de trouver les mots justes pour ne pas faire de peine au développeur, lui conseiller de refactorer son application vite fait avant que cela ne se complique davantage. Soit on trouve un workaround mais il faut à ce moment-là garder à l'esprit que ce n'est pas quelque chose à refaire. En effet, ce n'est pas parce qu'une solution semble simple qu'il faut en user jusqu'à la corde. Et inversement, la complexité n'est pas une preuve de qualité. Je sais bien qu'on est plutôt fainéants, nous, développeurs, mais il faut savoir trouver le juste milieu entre le trop et le trop peu.

Donc dans le cas d'un petit projet, ou d'un POC, ce ne sera pas nécessaire de déployer l'artillerie lourde.

Le problème est que si l'on souhaite continuer à faire évoluer l'application, on risque à un moment ou à un autre de se retrouver fasse à une impasse. Et il sera un peu tard pour se remettre en question... Alors pour ceux qui souhaitent un projet pérenne, il vaut sans doute mieux prendre le temps de s'arrêter et de se poser les bonnes questions maintenant, pour ne pas le regretter après!

C'est pour pouvoir toucher un maximum de personnes que j'ai commencé ce nouveau projet. J'espère ainsi qu'il permettra à quelques uns d'entre vous de trouver des solutions aux problèmes auxquels vous faites face, ou bien qu'ils vous éclaireront sur un sujet peut-être encore un peu flou!

Introduction

Un peu de théorie (très rapidement :) )...

Le pattern MVVM signifie Model - View - ViewModel. Il est principalement utilisé dans les applications de type WPF, Silverlight. Si vous vous êtes déjà un peu plongé dans le développement Windows Phone, il est pratiquement impossible que vous n'en ayez jamais entendu parler ! :)

L'idée de ce pattern, est de fournir un ensemble de principes pour architecturer votre application avantageusement. Les principaux bénéfices que vous en tirerez sont:

  • Réutilisation du code
  • Dépendances faibles
  • Possibilité de travailler sur le Modèle, les Views, ou les ViewModels de manière séparée ou simultanée (facilite le travail en équipe)
  • Séparation claire des rôles. Ainsi, une personne travaillant sur les Views n'aura pas à écrire de code proprement dit. Vous pourrez donc confier ce travail à un designer.
  • Utilisation des bienfaits du Binding et des DataTemplates
  • et probablement d'autres que j'ai oublié pour le moment...

Les rôles

Voici une définition rapide des composantes du MVVM:

Model: le modèle ne correspond pas uniquement au modèle au sens propre, c'est-à-dire la représentation des données. Il sera aussi constitué des services permettant d'accéder à ces données ou de les stocker, par exemple une couche utilisant le pattern Repository (on y reviendra par la suite).

View: la vue est un point essentiel du projet, puisque c'est elle qui sera exposée à l'utilisateur. Ici, ce sont les pages XAML, qui seront chargées d'afficher les données du modèle, des informations sur l'état de ces données et de mettre à la disposition de l'utilisateur des moyen d'interagir avec ces données.  Malheureusement pour moi je n'ai aucun talent dans ce domaine, mais je ferai de mon mieux pour vous épater!

ViewModel: last but not least, le viewmodel va jouer un rôle important puisqu'il va permettre non seulement de faire appel aux services du modèle pour charger les données, mais également de décider de la manière dont les données seront exposées. Le ViewModel va ainsi lister les données qui seront affichées à l'écran, mais pas la façon de les afficher (ceci étant du domaine de la View). D'autre part, il va également se charger d'effectuer des actions et de manipuler le modèle, parfois en faisant appel à la couche service de celui-ci.

Dépendances faibles

On peut dès à présent constater la notion de dépendance faible:

Le modèle ne connait pas le ViewModel, ni les Views. Les couches de services du modèles, peuvent être exposées sous forme d'interfaces.

Le ViewModel, ne connait pas les views. Il connaîtra le modèle client proprement dit (les classes représentant les données), mais ne fera appels aux services que sur base des interfaces. Ceci laisse donc libre choix dans l'implémentation de ces services, et permettra également d'utiliser de faux services retournant des données valides pour faire des tests.

La View se servira du Binding pour utiliser les propriétés exposées par le viewmodel. Encore une fois, vous verrez ici qu'il n'y a pas de dépendance forte, car la vue ne connaît pas le type du ViewModel. La résolution ne se fera qu'au moment de l'exécution de l'application.

Let's get started

Rien ne vaut un peu de pratique pour que toutes les pièces s'assemblent alors commençons tout de suite.

Pour bien commencer, je vous suggère de créer un nouveau projet et d'y ajouter les références au MVVM Light Toolkit en utilisant NuGet. Ce framework (il en existe d'autres mais c'est celui que j'utilise régulièrement et que j'utiliserai dans les articles qui suivront) contient un ensemble d'outils qui nous permettront de mettre en place facilement une architecture MVVM!

[caption id="attachment_1082" align="aligncenter" width="765" caption="Nouveau projet Panorama avec MVVM Light Toolkit"][/caption]

Les articles suivant seront publiés régulièrement, donc n'hésitez pas à revenir de temps en temps pour voir s'il y a du nouveau. Ou suivez-moi sur Twitter pour être tenus au courant! @DumontRenaud

TextBox

About the author

I'm a developer, blog writer, and author, mainly focused on Microsoft technologies (but not only Smile). I'm Microsoft MVP Client Development since July 2013.

Microsoft Certified Professional

I'm currently working as an IT Evangelist with an awesome team at the Microsoft Innovation Center Belgique, where I spend time and energy helping people to develop their projects. I also give training to enthusiastic developers and organize afterworks with the help of the Belgian community.

MIC Belgique

Take a look at my first book (french only): Développez en HTML 5 pour Windows 8

Développez en HTML5 pour Windows 8

Membre de l'association Fier d'être développeur

TextBox

Month List