SlideShare une entreprise Scribd logo
Le 14/11/2011




   ATELIERS
WPF - MVVM
Plan de la présentation
 • I- Partie Théorique
    • Introduction de WPF
    • WPF vs WinForms
    • Avantages / Inconvénients WPF
    • Problèmes de développement
    • Pattern de conception MVVM

 • II-   Partie Pratique
    •    WPF et MVVM
    •    Introduction du MVVM Light Toolkit
    •    MVVM Light Toolkit in WPF

 • Conclusion
PARTIE THEORIQUE
Introduction

• Arrivée Windows VISTA
    Au niveau de la communication (WCF)
    Au niveau de l’affichage (WPF)
    Le systéme de fichiers




                                           4
Carte d’identité




                   5
WPF VS Winforms
Exemple d’applications




                         7
Avantages WPF


• Utilisation du GPU
• Séparation code / design
Avantages WPF

•   Graphismes vectoriels
•   Transparence par pixel
•   Animations
•   Adaptation à la résolution




                            • Support du data binding
Inconvénients WPF


• Not Freeware
• Manque d’interopérabilité
• Tout est à refaire

                 ?
Structure du projet

                Projet WPF


       N                     `


                       …
                                 11
Outils & Matériel nécessaires

                             •    Outils Microsoft pour les
                                  développeurs et les designers
                               Avec XAML, les développeurs
                             • Programmation déclarative avec
                                 et les designers peuvent
                               XAML
                                 affiner leur collaboration
Les designers conçoivent les UI                              les développeurs ajoutent la logique métier
PROBLÈMES DÉVELOPPEMENT
Problèmes typiques de développement

• Code étroitement couplé qui est difficile à
  maintenir et à étendre.
• Il peut être difficile de séparer l‘état, la
  logique et la présentation UI.
• Il est difficile de tester l'état et la logique UI.
• Le concepteur est lié aux composants UI
  écrits par le développeur.
PATTERNS DE CONCEPTION
Solution …??

• Code étroitement couplé qui est difficile à
  maintenir et à étendre.
• Il peut être difficile de séparer l‘état et la
  logique UI de la présentation UI.
• Il est difficile de tester l'état et la logique UI.
• Le concepteur est lié aux composants UI
  écrits par le développeur.
MVvM
MVC


      MVP
MVC
Model – View – Controller
   • Considéré comme le premier motif
     pour séparer l‘UI, les données et la
     logique métier
   • Controller gère toute logique, y
     compris les événements souris et
     clavier
MVP
Model – View – Presenter
   • Variation du MVC
   • Adapté pour l’UI qui gère mieux les
     événements souris et clavier
   • Presenter dépend de la View
MVvM

Model – Vos données
   • Entities
   • Service Proxy
   • POCO
   • Données XML
MVvM


View – UI
   XAML (WPF)
MVvM

ViewModel – Le modèle de la vue
    •Etats
    •Opérations
    •Ne dépends pas de la View
Data Binding
QUAND UTILISER QUOI?
• MVC
  – Lien View- Reste Programme pas toujours
    disponible (Microsoft ASP.NET MVC).


• MVP
  – Liaison via un DataContext pas possible(WinForms)


• MVvM
  – Liaison via un DataContext est possible (WPF)
MVvM
 Pas de code-behind dans XAML

 ViewModel passé comme DataContext pour UI

 ViewModel et Model ne doivent pas accéder à
 n'importe quel composant ou objet UI

 ViewModel hérite de INotifyPropertyChanged.
  – source de liaison

 ViewModel encapsule Model
PARTIE PRATIQUE
WPF ET MVVM
MVVM LIGHT TOOLKIT
Pourquoi ?

 • Accélérer le développement d'applications MVVM
    – WPF
    – Silverlight
    – Windows Phone.


 • Séparer la View du Model
 • Créer des applications testables
Composition

  Une dll « GalaSoft.MvvmLight.dll »

    RelayCommand – RelayCommand<T>
    Messenger
    ViewModelBase
MVVM LIGHT IN WPF
Conclusion
      Faciliter la réalisation d'une application WPF

 •   Abstraction de la vue
 •   Réduction du code dans le code-behind
 •   Classes Vue-Modèle testables
 •   Amélioration du workflow dev/ designer




                                                       32
WPF MVVM

Contenu connexe

PPTX
MVVM de A à Z
PDF
MVVM par Karim PIerre Maalej
PPTX
Pattern MVVM avec MVVM Light Toolkit
PPTX
Introducthion mvvm avec wpf
PPTX
Modele mvc
PDF
Java Server Faces - Beyond
PPTX
Les framework mvc
PPT
Présentation WPF
MVVM de A à Z
MVVM par Karim PIerre Maalej
Pattern MVVM avec MVVM Light Toolkit
Introducthion mvvm avec wpf
Modele mvc
Java Server Faces - Beyond
Les framework mvc
Présentation WPF

Tendances (20)

PPTX
Wpf et Silverlight
PPTX
Architecture mvc
PPTX
Tech days 2012 mvvm de a à z
PPTX
Cours wpf avancé
PPTX
les style d'architecture
PDF
M20486 formation-developper-des-applications-web-asp-net-mvc-4
PDF
PPTX
Model view-view model (mvvm)
PPTX
Retour d'experience projet AngularJS
PPTX
jQuery vs AngularJS
PDF
Asp.net Tutorials de L'application "Organizer"
PPTX
Présentation de WCF
PPTX
De A à Z : Choisir une architecture pour sa solution applicative
PPTX
EcmaScript
PPTX
AngularJS - Présentation (french)
PDF
Design applicatif avec symfony2
PPTX
Hello AngularJS - Back to the future
PDF
comprendre angularJS en 10 minutes
PDF
Angluars js
PDF
J2eeintro
Wpf et Silverlight
Architecture mvc
Tech days 2012 mvvm de a à z
Cours wpf avancé
les style d'architecture
M20486 formation-developper-des-applications-web-asp-net-mvc-4
Model view-view model (mvvm)
Retour d'experience projet AngularJS
jQuery vs AngularJS
Asp.net Tutorials de L'application "Organizer"
Présentation de WCF
De A à Z : Choisir une architecture pour sa solution applicative
EcmaScript
AngularJS - Présentation (french)
Design applicatif avec symfony2
Hello AngularJS - Back to the future
comprendre angularJS en 10 minutes
Angluars js
J2eeintro
Publicité

En vedette (20)

PPTX
MVVM ( Model View ViewModel )
PDF
Therapie par l’urine urinotherapie - amaroli - medecine ayurvedique - histo...
PDF
C# Fundamentals for Absolute Beginners
PPTX
MVVM - Model View ViewModel
PPTX
Accéder au développement Dot.Net et Asp.Net
PDF
Présentation PFE
PPTX
Presentation pfe 2012
PPTX
Initiation au code : Ateliers en C# (applications desktop et mobile native)
PPTX
Diapo PFE
PDF
Pratiques avancées de yoga & de Tantra - Yogani
PDF
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...
PPTX
pictures
PPTX
El email
PDF
Tratamiento térmico
PPT
Objectifs journée technique vie du sol
PPTX
Energía eléctric ardyh (1)
PPTX
Situación, de archipielago juan fernandez
PPTX
Psicologia
DOCX
Bitacora maestros simona duue
MVVM ( Model View ViewModel )
Therapie par l’urine urinotherapie - amaroli - medecine ayurvedique - histo...
C# Fundamentals for Absolute Beginners
MVVM - Model View ViewModel
Accéder au développement Dot.Net et Asp.Net
Présentation PFE
Presentation pfe 2012
Initiation au code : Ateliers en C# (applications desktop et mobile native)
Diapo PFE
Pratiques avancées de yoga & de Tantra - Yogani
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...
pictures
El email
Tratamiento térmico
Objectifs journée technique vie du sol
Energía eléctric ardyh (1)
Situación, de archipielago juan fernandez
Psicologia
Bitacora maestros simona duue
Publicité

Similaire à WPF MVVM (20)

PPTX
Chapitre 3--------------------------.pptx
PPTX
Améliorer votre productivité XAML en entreprise !
PPTX
Améliorer votre productivité XAML en entreprise !
PDF
Chp3 - Architecture Logicielle des Applications Mobiles
PDF
M10553 formation-les-fondamentaux-du-developpement-en-xaml-avec-expression-bl...
PPTX
Sybase Connect Atelier Power Builderv2
PPTX
La plateforme de développement Microsoft pour les nuls
PPTX
WPF.pptx
PPTX
Réutilisation de code entre Windows 8 et Windows Phone 8.
PDF
[XamarinDay] Développez de manière 100% native avec Xamarin
PPTX
Journées NEPTUNE - Keynote Modélisation chez Microsoft
PDF
Microsoft mdday2010
PPTX
Silverlight
PPTX
Silverlight 4
PDF
Manuel uml-poweramc
PDF
Soft fluent@md day2011
PPT
CLaueR - AFUP PHP et Silverlight
PDF
Softfluent speig mdday2010
PPTX
10 tips pour améliorer les performances de vos applications Windows 8
KEY
Trouver le chemin des bonnes pratiques
Chapitre 3--------------------------.pptx
Améliorer votre productivité XAML en entreprise !
Améliorer votre productivité XAML en entreprise !
Chp3 - Architecture Logicielle des Applications Mobiles
M10553 formation-les-fondamentaux-du-developpement-en-xaml-avec-expression-bl...
Sybase Connect Atelier Power Builderv2
La plateforme de développement Microsoft pour les nuls
WPF.pptx
Réutilisation de code entre Windows 8 et Windows Phone 8.
[XamarinDay] Développez de manière 100% native avec Xamarin
Journées NEPTUNE - Keynote Modélisation chez Microsoft
Microsoft mdday2010
Silverlight
Silverlight 4
Manuel uml-poweramc
Soft fluent@md day2011
CLaueR - AFUP PHP et Silverlight
Softfluent speig mdday2010
10 tips pour améliorer les performances de vos applications Windows 8
Trouver le chemin des bonnes pratiques

Plus de Slimen Belhaj Ali (19)

PDF
Solution générique pour la résolution des problèmes statiques de tournées de ...
PPT
BPMN,jBPM,BPEL
PPTX
PPTX
Sécurisation des services WCF avec WS-Security
PPTX
JasperReport
PDF
ERP Universitaire
PPT
PPTX
PPTX
Spring security
PPTX
Spring mvc 3.0 web flow
PPTX
Share point 2010
PPTX
objective C
PPTX
PPTX
Hibernate 3
PPTX
Jboss Seam
PPTX
Google appengine&guice
PPTX
Sonar-Hodson-Maven
PPTX
Administration glassfish 3
Solution générique pour la résolution des problèmes statiques de tournées de ...
BPMN,jBPM,BPEL
Sécurisation des services WCF avec WS-Security
JasperReport
ERP Universitaire
Spring security
Spring mvc 3.0 web flow
Share point 2010
objective C
Hibernate 3
Jboss Seam
Google appengine&guice
Sonar-Hodson-Maven
Administration glassfish 3

WPF MVVM

  • 1. Le 14/11/2011 ATELIERS WPF - MVVM
  • 2. Plan de la présentation • I- Partie Théorique • Introduction de WPF • WPF vs WinForms • Avantages / Inconvénients WPF • Problèmes de développement • Pattern de conception MVVM • II- Partie Pratique • WPF et MVVM • Introduction du MVVM Light Toolkit • MVVM Light Toolkit in WPF • Conclusion
  • 4. Introduction • Arrivée Windows VISTA Au niveau de la communication (WCF) Au niveau de l’affichage (WPF) Le systéme de fichiers 4
  • 8. Avantages WPF • Utilisation du GPU • Séparation code / design
  • 9. Avantages WPF • Graphismes vectoriels • Transparence par pixel • Animations • Adaptation à la résolution • Support du data binding
  • 10. Inconvénients WPF • Not Freeware • Manque d’interopérabilité • Tout est à refaire ?
  • 11. Structure du projet Projet WPF N `     … 11
  • 12. Outils & Matériel nécessaires • Outils Microsoft pour les développeurs et les designers Avec XAML, les développeurs • Programmation déclarative avec et les designers peuvent XAML affiner leur collaboration Les designers conçoivent les UI les développeurs ajoutent la logique métier
  • 14. Problèmes typiques de développement • Code étroitement couplé qui est difficile à maintenir et à étendre. • Il peut être difficile de séparer l‘état, la logique et la présentation UI. • Il est difficile de tester l'état et la logique UI. • Le concepteur est lié aux composants UI écrits par le développeur.
  • 16. Solution …?? • Code étroitement couplé qui est difficile à maintenir et à étendre. • Il peut être difficile de séparer l‘état et la logique UI de la présentation UI. • Il est difficile de tester l'état et la logique UI. • Le concepteur est lié aux composants UI écrits par le développeur.
  • 17. MVvM MVC MVP
  • 18. MVC Model – View – Controller • Considéré comme le premier motif pour séparer l‘UI, les données et la logique métier • Controller gère toute logique, y compris les événements souris et clavier
  • 19. MVP Model – View – Presenter • Variation du MVC • Adapté pour l’UI qui gère mieux les événements souris et clavier • Presenter dépend de la View
  • 20. MVvM Model – Vos données • Entities • Service Proxy • POCO • Données XML
  • 21. MVvM View – UI XAML (WPF)
  • 22. MVvM ViewModel – Le modèle de la vue •Etats •Opérations •Ne dépends pas de la View
  • 24. QUAND UTILISER QUOI? • MVC – Lien View- Reste Programme pas toujours disponible (Microsoft ASP.NET MVC). • MVP – Liaison via un DataContext pas possible(WinForms) • MVvM – Liaison via un DataContext est possible (WPF)
  • 25. MVvM Pas de code-behind dans XAML ViewModel passé comme DataContext pour UI ViewModel et Model ne doivent pas accéder à n'importe quel composant ou objet UI ViewModel hérite de INotifyPropertyChanged. – source de liaison ViewModel encapsule Model
  • 29. Pourquoi ? • Accélérer le développement d'applications MVVM – WPF – Silverlight – Windows Phone. • Séparer la View du Model • Créer des applications testables
  • 30. Composition Une dll « GalaSoft.MvvmLight.dll » RelayCommand – RelayCommand<T> Messenger ViewModelBase
  • 32. Conclusion Faciliter la réalisation d'une application WPF • Abstraction de la vue • Réduction du code dans le code-behind • Classes Vue-Modèle testables • Amélioration du workflow dev/ designer 32

Notes de l'éditeur

  • #8: C&apos;est beau, ça tourne, c’est tres attirant aussi ... La FNAC vous propose un guide d&apos;achat interactif en WPF.
  • #12: Un projet« wpf », contient l’ensemble des ressources de l’application : des fichiers XAML décrivant l’interface utilisateur, Le XAML (eXtensible Application MarkupLanguage) est un langage déclaratif basé sur la syntaxe du XML. Il permet de définir des objets dynamiquement grâce aux balises (équivalent des classes) et aux attributs (équivalents aux propriétés) XAML.Un projet« wpf », contient l’ensemble des ressources de l’application : des fichiers XAML décrivant l’interface utilisateur, Le XAML est un langage déclaratif basé sur la syntaxe du XML. Il permet de définir dynamiquement des objets grâce aux balises (équivalent des classes) et aux attributs (équivalents aux propriétés). des fichiers C# contenant le code behind encapsulant la logique métier de l’applicationet des différentes ressources telles que composants additionnels, fichiers de données, images ou vidéos, etc…
  • #14: Tout d&apos;abord, jetons le regard à certains problèmes typiques de développement qui nous rencontrent souvent.
  • #15:  Premièrement, il ya une tendance pour les logiciels de devenir étroitement couplés, ce qui rend difficile l&apos;entretien et l&apos;extension.Il est également très facile de combiner l&apos;état, la logique et la présentation dans les UICes deux problèmes se combinent, avec d&apos;autres, pour rendre le code très difficile à tester.Il rend également difficile pour les concepteurs de travailler comme ils sont liés à des contrôles d&apos;interface utilisateur écrit par le développeur.
  • #17:  Nous devons avoir une solution qui encourage la séparation des préoccupationsfournit un modèle très naturel pour le développement en XAML.Tout cela augmente la testabilité et aide également le workflow développeur concepteur.
  • #28: Maintenant comme nous avons pris un bref regard sur le type des problèmes MVVM, nous allons avoir un aperçu du modèle lui-même.
  • #29: .
  • #32: .