palais des congrès Paris
7, 8 et 9 février 2012
Arnaux AUROUXConsultantInfinite Square
MVVM de A à Z
Thomas LEBRUNConsultantInfinite SquareMVP Client App Dev
08/02/2012
Société de conseil, expertise, réalisation, et formation,exclusivement sur les technologies Microsoftde développement d’applications et de la plateforme applicative
25+ collaborateurs spécialisés sur les techno MS,dont 10 MVP…
GOLD Certified Partnersur 4 domaines de compétences
Agréé CIR
Centre de formationagréé
INFINITE SQUARE en quelques mots…
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…
Agenda
Couplage
Les enjeux du développeurs
UI Class 1
UI Class 3
Business Class 1 Business
Class 2
Business Class 3
Data Class 2
Data Class 3
Data Class 1UI Class 2
Les enjeux du développeur
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 enjeux du développeur
Les modèles existant
MVC, MVPModel : la donnéeView : l’écranController, Presenter : l’intéraction entre l’écran et la donnée
Utilisation sur des projets .Net, Java, etc.
Les modèles MVC et MVP
Les modèles existant
Les modèles MVC et MVP
ViewPresente
r
Model
Controller
View
Model
Model View Presenter
Model View Controller
Le XAML
XAML
Windows 8
<Grid Margin="20"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Text="Liste de produits" Grid.Row="0"/> <ListBox Grid.Row="1> <ListBoxItem Content="Produit 1"/> <ListBoxItem Content="Produit 2"/> <ListBoxItem Content="Produit 3"/> </ListBox> <Button Content="Ajouter produit" Grid.Row="2" /></Grid>
PrésentationLangage de description d’interfaces graphiques
Format XML
Facile à maintenir et à réutiliser
Interprétable par différents outils
Visual studioExpression BlendInternet explorer…
Le XAML
Le XAML
<Button Width="100“ Height="30" Click="OnClick" Background="LightBlue"> OK</Button>
private void OnClick(object sender, RoutedEventArgs e){ MessageBox.Show("Clic !");}
Page.xaml
Page.xaml.cs
Décl
ara
tif
Imp
éra
tif
Le XAML
C++C#
VB.NET
PaperJPG / TIFF
PSDPPT
MOV / WMV XAML
Le XAML
DataBinding : Connexion entre l’UI et les données
Définition de la source du Binding via la propriété DataContext
Définit par la classe FrameworkElementHéritage du DataContext
Propriété « Text »
Propriété « Nom »
Cible du binding
Source du bindingTextBlock Objet de données
« Produit »
Binding
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 !
Pourquoi utiliser le pattern MVVM ?
Anatomie du pattern
VIEW
Contrôles UI
Mise en page
Evènements
Animations
Transitions
VIEWMODEL
Actions
Etats
Exposition des
données
Logique
fonctionnelle
MODEL
Objets métier
Règles métier
Accès aux données
ValidationBinding
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
Anatomie du pattern
SERVICE
GetProduitsByPeriod(be
gin, end)
GetProduitByName(nam
e)
…
DAL
LinqToXML
EntityFrame
work
…
<<Produit
>>
VIEWMODEL
ModelRépercussion des modifications sur l’UI
interface INotifyPropertyChangedEvènement PropertyChanged
ValidationExceptioninterface IDataErrorInfo
Peut être décliné en 2 versionsVersion globaleVersion cliente
Anatomie du pattern
Démo: Implémentation du Model
ViewModelFait le lien entre les données à traiter et l’interface utilisateur
Exposition de propriétés pour afficher/récupérer des valeursUtilisation 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’UITestabilitéRéutilisabilité avec d’autres vues
Anatomie du pattern
ViewModelLes commandes
Gestion découplée de l’interaction utilisateurInterface ICommandMéthodes Execute & CanExecuteImplémentée en standard par certains contrôles
ButtonCheckBox…
Anatomie du pattern
Démo: Implémentation du ViewModel
ViewTypiquement un écran de l’applicationEn charge de la mise en page des données pour les présenter à l’utilisateurCouple .xaml / .xaml.csNe contient aucune logique/dépendance métierOn peut par contre y mettre du code relatif à l’UI (n’hésitez pas !)
Anatomie du pattern
ViewDataTemplate
Représentation visuelle d’un objet (arbre XAML)Resource donc réutilisableContextualisation de la donnée
Anatomie du pattern
ProduitNom : Produit 1Prix : 20Disponibilité : 08/02/2012
ViewDesign Time
Utilisation d’un ViewModel factice pour le design de la ViewRéaction de la vue aux donnéesMeilleure efficacité dans la collaboration designer/developpeurOutils de design time fournit par Expression Blend
Anatomie du pattern
Démo: Implémentation de la View
Approche « View First »La View est l’élément directeur, elle instancie le ViewModelAvantages
Simplicité d’implémentationDesign
Inconvénients1 seul ViewModel possible par vue
Les différentes philosophies
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étierInconvénients
Support du DataTemplate implicite« Blendabilité » réduite
Les différentes philosophies
Démo: ViewModel First
Approche « Model First »Le Model est l’élément directeur, approche Data centriqueExemple : Microsoft LightSwitchAvantages
Réalisations rapides: les écrans sont générés depuis les donnéesUtilisation des assistants (drag&drop depuis Visual Studio)
InconvénientsSupport du DataTemplate implicitePossibilité d’un temps de chargement plus long
Vue complexe = potentielles lenteurs
Les différentes philosophies
Démo: Model First
Quelle philosophie adopter ?
Importance du design VS Complexité fonctionnelle
Mais surtout… n’ayez pas peur de varier les plaisirs !
Les approches ViewFirst et ViewModelFirst peuvent coexister.
Les différentes philosophies
ViewFirst
ViewModelFirst
Assurer la qualité de l’applicationValider unitairement une fonctionnalitéAutomatisation
Testabilité de la couche ViewModelEtatsOpérations
Testabilité de la couche ModelRègles métier
Les tests unitaires
Démo: Ecriture de tests
Frameworks MVVMMVVM Light Toolkit( Prism )Cinch…Liste descriptive : http://www.japf.fr/silverlight/mvvm/
Pour aller plus loin…
MVVM: De la découverte à la maîtrise
http://www.digitbooks.fr/catalogue/mvvm-antoine-lebrun.html
Pour aller plus loin…
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 !
Conclusion
Questions ?
Chaque semaine, les DevCampsALM, Azure, Windows Phone, HTML5, OpenDatahttp://msdn.microsoft.com/fr-fr/devcamp
Téléchargement, ressources et toolkits : RdV sur MSDNhttp://msdn.microsoft.com/fr-fr/
Les offres à connaître90 jours d’essai gratuit de Windows Azure www.windowsazure.fr
Jusqu’à 35% de réduction sur Visual Studio Pro, avec l’abonnement MSDN www.visualstudio.fr
Pour aller plus loin
10 février 2012
Live Meeting
Open Data - Développer des applications riches avec le protocole Open Data
16 février 2012
Live Meeting
Azure series - Développer des applications sociales sur la plateforme Windows Azure
17 février 2012
Live Meeting
Comprendre le canvas avec Galactic et la librairie three.js
21 février 2012
Live Meeting
La production automatisée de code avec CodeFluent Entities
2 mars 2012
Live Meeting
Comprendre et mettre en oeuvre le toolkit Azure pour Windows Phone 7, iOS et Android
6 mars 2012
Live Meeting
Nuget et ALM
9 mars 2012
Live Meeting
Kinect - Bien gérer la vie de son capteur
13 mars 2012
Live Meeting
Sharepoint series - Automatisation des tests
14 mars 2012
Live Meeting
TFS Health Check - vérifier la bonne santé de votre plateforme de développement
15 mars 2012
Live Meeting
Azure series - Développer pour les téléphones, les tablettes et le cloud avec Visual Studio 2010
16 mars 2012
Live Meeting
Applications METRO design - Désossage en règle d'un template METRO javascript
20 mars 2012
Live Meeting
Retour d'expérience LightSwitch, Optimisation de l'accès aux données, Intégration Silverlight
23 mars 2012
Live Meeting
OAuth - la clé de l'utilisation des réseaux sociaux dans votre application
Prochaines sessions des Dev Camps
Top Related