Mvvmdeaz 130411030707 Phpapp02

palais des
congrès
Paris
7, 8 et 9
février 2012
MVVM de A à Z
08/02/2012
Arnaux AUROUX Thomas LEBRUN

Consultant Consultant
Infinite Square Infinite Square
MVP Client App Dev
INFINITE SQUARE en quelques
mots…
Société de conseil, expertise, réalisation, et formation,
exclusivement sur les technologies Microsoft
de développement d’applications et de la plateforme applicative
25+ collaborateurs spécialisés sur les techno MS,

dont 10 MVP…
GOLD Certified Partner

sur 4 domaines de compétences
Agréé CIR
Centre de formation
agréé
Agenda
Les enjeux du développeur
Les modèles MVC et MVP
Le XAML
Pourquoi utiliser le pattern MVVM ?
Anatomie du pattern
Les différentes philosophies
Tests unitaires
Pour aller plus loin…

Les enjeux du développeurs
Couplage
Business
Class 1 Business
UI Class 1
Class 2
Data Class 1
Data Class 2 UI Class 2
UI Class 3 Business
Class 3 Data Class 3
Les conséquences
Applications monolithiques
Difficilement maintenable
Difficile à faire évoluer
Non réutilisable
Difficilement testable
Régressions
Comment régler les problèmes de couple ?

Devenez célibataire! 
Séparation des responsabilités (principe
SRP)
Maintenabilité
Evolutivité
Testabilité
Les modèles existant

MVC, MVP
Model : la donnée
View : l’écran
Controller, Presenter : l’intéraction entre
l’écran et la donnée
Utilisation sur des projets .Net, Java, etc.
Les modèles existant
Controller View View Presenter
Model Model
Model View Controller Model View Presenter

Le XAML
XAML
Windows 8
Le XAML
Présentation
Langage de description <Grid Margin="20">
d’interfaces graphiques <Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
Format XML </Grid.RowDefinitions>
<TextBlock Text="Liste de produits"
Grid.Row="0"/>
<ListBox Grid.Row="1>
Facile à maintenir et à <ListBoxItem Content="Produit 1"/>
<ListBoxItem Content="Produit 2"/>
réutiliser <ListBoxItem Content="Produit 3"/>
</ListBox>
<Button Content="Ajouter produit"
Interprétable par différents </Grid>

Grid.Row="2" />
outils
Visual studio
Expression Blend
Internet explorer
…
Le XAML
<Button Width="100“
Height="30"
Déclaratif
Click="OnClick"
Background="LightBlue">
OK
</Button>
Page.xaml
private void OnClick(object sender, RoutedEventArgs e)

Impératif
{
MessageBox.Show("Clic !");
}
Page.xaml.
cs
Le XAML
Paper
JPG / TIFF
PSD C++
XAML
PPT C#
VB.NET
MOV / WMV
Le XAML
DataBinding : Connexion entre l’UI et les données

Cible du binding Source du binding
TextBlock Objet de données
« Produit »
Propriété Binding Propriété

« Text » « Nom »
Définition de la source du Binding via la propriété

DataContext
Définit par la classe FrameworkElement
Héritage du DataContext
Pourquoi utiliser le pattern
MVVM ?
Pour les mêmes raisons que MVC et MVP
 Model : Les données
 View : L’UI
 ViewModel : Le pivot entre les données et l’UI
Pour tirer pleinement profit des nouveaux concepts

apportés par le XAML
MVVM ? Une version de MVC, MVP adaptée

au XAML
Pourquoi utiliser le pattern
MVVM ?
Démo: Ce qu’il ne faut pas faire

!
Anatomie du pattern
VIEW VIEWMODEL MODEL
Actions Objets métier

Contrôles UI
Etats Règles métier
Mise en page
Exposition des Accès aux données
Evènements
données Validation
Animations Binding
Transitions Logique fonctionnelle
Anatomie du pattern
Model
 Données
 Objets métier (Client, Produit, etc.)
 Transverse par rapport aux domaines fonctionnels
 Services
 Fournissent les requêtes de données
 Règles métier pour la mise à jour, suppression, etc.

Anatomie du pattern
Model
VIEWMODE SERVICE DAL

L
GetProduitsByPeriod(begin, LinqToXML
end) EntityFramewo
GetProduitByName(name) rk
… …
<<Produit>>
Anatomie du pattern
Model
Répercussion des modifications sur l’UI
interface INotifyPropertyChanged
Evènement PropertyChanged
Validation
Exception
interface IDataErrorInfo
Peut être décliné en 2 versions

Version globale
Version cliente
Démo: Implémentation du Model
Anatomie du pattern
ViewModel
Fait le lien entre les données à traiter et l’interface
utilisateur
Exposition de propriétés pour afficher/récupérer des
valeurs
Utilisation de commandes pour interagir avec
l’utilisateur
Définit l’intelligence applicative entre la donnée et sa
représentation
Implémente également INotifyPropertyChanged
Elément entièrement indépendant de l’UI
Testabilité
Réutilisabilité avec d’autres vues
Anatomie du pattern
ViewModel
Les commandes
Gestion découplée de l’interaction utilisateur
Interface ICommand
Méthodes Execute & CanExecute
Implémentée en standard par certains contrôles
Button
CheckBox
…
Démo: Implémentation du
ViewModel
Anatomie du pattern
View
Typiquement un écran de l’application
En charge de la mise en page des données pour les
présenter à l’utilisateur
Couple .xaml / .xaml.cs
Ne contient aucune logique/dépendance métier
On peut par contre y mettre du code relatif à l’UI
(n’hésitez pas !)
Anatomie du pattern
View
DataTemplate
Représentation visuelle d’un objet (arbre XAML)
Resource donc réutilisable
Contextualisation de la donnée
Produit
Nom : Produit 1
Prix : 20
Disponibilité :
08/02/2012
Anatomie du pattern
View
Design Time
Utilisation d’un ViewModel factice pour le design de
la View
Réaction de la vue aux données
Meilleure efficacité dans la collaboration
designer/developpeur
Outils de design time fournit par Expression Blend
Démo: Implémentation de la
View
Approche « View First »

La View est l’élément directeur, elle instancie le
ViewModel
Avantages
Simplicité d’implémentation
Design
Inconvénients
1 seul ViewModel possible par vue
Approche « ViewModel First »

Le ViewModel est l’élément directeur, il instancie la
View.
Utilisation des DataTemplates implicites.
Avantages
Souplesse pour le développement métier
Inconvénients
Support du DataTemplate implicite
« Blendabilité » réduite
Démo: ViewModel First
Approche « Model First »

Le Model est l’élément directeur, approche Data
centrique
Exemple : Microsoft LightSwitch
Avantages
Réalisations rapides: les écrans sont générés
depuis les données
Utilisation des assistants (drag&drop depuis Visual
Studio)
Inconvénients
Support du DataTemplate implicite
Possibilité d’un temps de chargement plus long
Vue complexe = potentielles lenteurs
Démo: Model First
Quelle philosophie adopter ?

Importance du design VS Complexité fonctionnelle
ViewFirst ViewModelFirst
Mais surtout… n’ayez pas peur de varier les plaisirs !

Les approches ViewFirst et ViewModelFirst
peuvent coexister.
Les tests unitaires
Assurer la qualité de l’application

Valider unitairement une fonctionnalité
Automatisation
Testabilité de la couche ViewModel
Etats
Opérations
Testabilité de la couche Model
Règles métier
Démo: Ecriture de tests
Frameworks MVVM
MVVM Light Toolkit
( Prism )
Cinch
…
Liste descriptive : http://www.japf.fr/silverlight/mvvm/
MVVM: De la découverte à la maîtrise

http://www.digitbooks.fr/catalogue/mvvm-antoine-
lebrun.html
Conclusion
Maintenabilité et pérennité de l’application
Simple à implémenter, MVVM est votre ami 
C’est un modèle de développement, une ligne

directrice :
Adaptez le à vos besoins !

Questions ?
Pour aller plus loin
Prochaines sessions des Dev Camps

Chaque semaine, les 10
Live Open Data - Développer des applications riches avec le
février
DevCamps 2012
16
Meeting protocole Open Data
ALM, Azure, Windows Phone, HTML5, OpenData février

Live
Meeting
Azure series - Développer des applications sociales sur
la plateforme Windows Azure
2012
http://msdn.microsoft.com/fr-fr/devcamp
17
Live Comprendre le canvas avec Galactic et la librairie
février
Meeting three.js
2012
Téléchargement, ressources 21
février
Live La production automatisée de code avec CodeFluent
Meeting Entities
et toolkits : RdV sur MSDN 2012
2 mars Live Comprendre et mettre en oeuvre le toolkit Azure pour

http://msdn.microsoft.com/fr-fr/ 2012 Meeting Windows Phone 7, iOS et Android
6 mars Live
Nuget et ALM
2012 Meeting
Les offres à connaître 9 mars

2012
Live
Meeting
Kinect - Bien gérer la vie de son capteur
90 jours d’essai gratuit de Windows 13 mars

2012
Live
Meeting
Sharepoint series - Automatisation des tests
Azure 14 mars Live TFS Health Check - vérifier la bonne santé de votre
www.windowsazure.fr 2012 Meeting plateforme de développement
15 mars Live Azure series - Développer pour les téléphones, les

2012 Meeting tablettes et le cloud avec Visual Studio 2010
Jusqu’à 35% de réduction sur Visual 16 mars Live Applications METRO design - Désossage en règle d'un
Studio Pro, avec l’abonnement MSDN 2012 Meeting template METRO javascript
20 mars Live Retour d'expérience LightSwitch, Optimisation de

www.visualstudio.fr 2012 Meeting l'accès aux données, Intégration Silverlight
23 mars Live OAuth - la clé de l'utilisation des réseaux sociaux dans

2012 Meeting votre application

Mvvmdeaz 130411030707 Phpapp02

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Mvvmdeaz 130411030707 Phpapp02

Transféré par

Droits d'auteur :

Formats disponibles

palais des

Arnaux AUROUX Thomas LEBRUN

25+ collaborateurs spécialisés sur les techno MS,

GOLD Certified Partner

Les enjeux du développeur

Les modèles MVC et MVP

Pourquoi utiliser le pattern MVVM ?

Les différentes philosophies

Pour aller plus loin…

Comment régler les problèmes de couple ?

Les modèles existant

Les modèles existant

Controller View View Presenter

Model View Controller Model View Presenter

Interprétable par différents </Grid>

private void OnClick(object sender, RoutedEventArgs e)

DataBinding : Connexion entre l’UI et les données

Propriété Binding Propriété

Définition de la source du Binding via la propriété

 ViewModel : Le pivot entre les données et l’UI

Pour tirer pleinement profit des nouveaux concepts

MVVM ? Une version de MVC, MVP adaptée

Démo: Ce qu’il ne faut pas faire

VIEW VIEWMODEL MODEL

Actions Objets métier

 Transverse par rapport aux domaines fonctionnels

 Règles métier pour la mise à jour, suppression, etc.

VIEWMODE SERVICE DAL

Peut être décliné en 2 versions

Approche « View First »

Approche « ViewModel First »

Approche « Model First »

Quelle philosophie adopter ?

Mais surtout… n’ayez pas peur de varier les plaisirs !

Assurer la qualité de l’application

MVVM: De la découverte à la maîtrise

Maintenabilité et pérennité de l’application

Simple à implémenter, MVVM est votre ami 

C’est un modèle de développement, une ligne

Adaptez le à vos besoins !

Prochaines sessions des Dev Camps

ALM, Azure, Windows Phone, HTML5, OpenData février

2 mars Live Comprendre et mettre en oeuvre le toolkit Azure pour

Les offres à connaître 9 mars

90 jours d’essai gratuit de Windows 13 mars

15 mars Live Azure series - Développer pour les téléphones, les

20 mars Live Retour d'expérience LightSwitch, Optimisation de

23 mars Live OAuth - la clé de l'utilisation des réseaux sociaux dans

Vous aimerez peut-être aussi