Interfaces Graphiques

Présentation au sujet: "Interfaces Graphiques"— Transcription de la présentation:

1 Interfaces Graphiques
MVC Alexis Clay

2 Introduction Importance des interfaces graphiques de nos jours (à part les informaticiens, qui utilise la console?) Importance bien construire le code pour une meilleure extensibilité, réusabilité, modifiabilité Ce cours s'appuie sur le cours d'IHM de Patrick Reuter (LaBRI), sur divers sites (dont site du zéro et doc java) et sur l'expérience personnelle :p Alexis Clay

3 Plan du cours Rappels POO Le patron Observer/Observable Le pattern MVC
Exemple 1 : Java Swing Exemple 2: C++/ Qt Le modèle d'architecture en agents PAC Conclusion… … Présentation Java Swing! Alexis Clay

4 Rappels Programmation Orientée Objet
Quelques rappels basiques… Alexis Clay

5 Rappels: POO Classe: "moule", structure, description d'un objet
Objet: élément concret, suivant la structure donnée par une classe Instanciation: créer un objet à partir d'une classe. Un objet est une instance de classe Une classe (et donc ses instances) contient: Des attributs Des méthodes Alexis Clay

6 Rappels: POO Ecapsulation
Le concept d'accessibilité (encapsulation) définit la possibilité qu'a le concepteur d'une classe de restreindre l'accès à certaines données, ou plus généralement à certains éléments (méthodes, classes, ...). public : un élément public est accessible de partout et sans aucune restriction. Certaines classes (comme la classe principale main) doivent obligatoirement être déclarées publiques (pour pouvoir exécuter l'application...) private : un élément private (privé) est accessible uniquement au sein de la classe dans laquelle il est déclaré. Ces éléments ne peuvent être manipulés qu'à l'aide de méthode spécifiques appelés accesseur et mutateur. protected : un élément protected (protégé) est accessible uniquement aux classes d'un package et à ses classes filles. Alexis Clay

7 Rappels POO Héritage L'héritage est un mécanisme permettant de créer une nouvelle classe à partir d'une classe existante en lui proférant ses propriétés et ses méthodes. Ainsi, pour définir une nouvelle classe, il suffit de la faire hériter d'une classe existante et de lui ajouter de nouvelles propriétés/méthodes. De cette façon, les classes héritées forment une hiérarchie descendante, au sommet de laquelle se situe la classe de base (superclasse). On appelle également la classe héritée la sous-classe et la classe parente la super- classe. Alexis Clay

8 Rappels POO Polymorphisme Polymorphisme par héritage
Polymorphisme paramétrique Alexis Clay

9 Le pattern Observable/Observateur
Alexis Clay

10 Découpler les rôles Partie Interface Partie Métier Alexis Clay

11 Le pattern Observable/Observeur
Premier pas vers le découplage Exemple: horloge en Java swing (merci site du zéro!) Jlabel monlabel =… monlabel.setText("…") Alexis Clay

12 Solution: utilisation d'interfaces (au sens programmation objet)
Alexis Clay

13 Ex: Horloge (observé) Alexis Clay

14 Ex: VueHorloge (Observateur)
Alexis Clay

15 Exemple: découplage Grâce à l'utilisation d'interfaces on a découplé la vue (la fenêtre) et le modèle (le code pour l'horloge)  Il est possible de changer la vue (d'implémenter une autre classe) sans toucher au modèle… Il suffit que la nouvelle vue implémente l'interface Observateur… Il est possible de mettre plusieurs vues! Alexis Clay

16 Exemple: ajout d'une vue en AWT
Alexis Clay

17 Exemple: Ajout de vues Modèle Horloge Mets toi à jour! Vue2 AWT
Swing Alexis Clay

18 Le pattern MVC Modèle Vue Contrôleur, pour découpler les rôles et mieux surveiller les actions de l'utilisateur Alexis Clay

19 Modèle Vue Contrôleur Motif de conception pour le développement d'applications logicielles qui sépare le modèle de données, l'interface utilisateur et la logique de contrôle. Ce motif a été mis au point en 1979 par Trygye Reenskang, qui travaillait alors sur Smalltalk dans les laboratoires de recherche Xerox PARC Alexis Clay

20 Principe Découper le code en 3 parties afin d’assurer le découplage et proposer une meilleure Réusabilité Extensibilité Modifiabilité La vue: l’interface Le modèle: la logique métier (ex: connexions à une base de données, calculs divers) Le contrôleur: lien entre les deux, routines de contrôle (pattern stratégie) Alexis Clay

21 MVC Alexis Clay

22 MVC: déroulement Contrôleur ?
Transmission de la valeur contrôlée (appel d'une méthode du modèle) Envoi de la valeur au contrôleur Vue Modèle Clic utilisateur Le modèle notifie la vue: MAJ. (cf pattern Observateur/Observable) Alexis Clay

23 Envoyer des signaux: programmation évènementielle
Programmation basée sur des évènements  Chaque élément du programme réagit à des évènements Programmation séquentielle: Le programmeur "décide" l'ordre des fonctions à appeler et structure son programme ainsi. Programmation évènementielle: le programmeur établit les évènements qui peuvent survenir et implémente les réactions Alexis Clay

24 La programmation évènementielle
Chaque élément capable de réagir doit donc être à l'écoute des évènements qui le concernent. Ex: clic croix ( )  invocation des instructions pour fermer l'application Développé entre autres pour les GUI: on ne peut prévoir les interactions, il faut réagir aux choix de l'utilisateur Faire le parallèle en Alexis Clay

25 Exemple 1 : Java Swing Utilisation des évènements et implémentation du MVC Alexis Clay

26 Exemples de mécanismes: Java Swing
Les Widgets graphiques (bouton, zone de texte, menu déroulant, etc) sont implémenté eux-même selon MVC. Tous les Widgets sont Observable Ils peuvent donc être Observés Le système d'évènement/Listener est une encapsulation d'Observable/Observateur Pour créer un récepteur d'évènement (un listener), il suffit d'implémenter une interface Alexis Clay

27 Exemple de mécanismes: Java Swing
Alexis Clay

28 Exemple de mécanismes: Java Swing
Ex: code pour un bouton VUE ECOUTEUR Alexis Clay

29 Exemple de mécanisme: Java Swing
CLASSE Contrôleur CLASSE Evènement Transmission de la valeur contrôlée (appel d'une méthode du modèle) Envoi de la valeur au contrôleur CLASSE Vue CLASSE Modèle Clic utilisateur Le modèle notifie la vue: MAJ. (cf pattern Observateur/Observable) Alexis Clay

30 Exemple 2 : C++ et Qt Les mécanismes de signaux et slots et implémentation du MVC Alexis Clay

31 C++/Qt: présentation Qt: Librairie de classes C++
Initialement pour les GUI S'est considérablement développé depuis! Alexis Clay

32 C++/Qt: présentation Avantages: librairie complète et unifiée
Ajoute un niveau d'abstraction au C++ et le rend complètement objet Un préprocesseur transforme le code propre à Qt en code C++. Principalement (dans ce qui nous intéresse): Toute classe dérive de Qobject QObject intègre un mécanisme de signaux et slots! Alexis Clay

33 C++ Qt – Signaux et slot Qt abstrait la notion d'évènement à une implémentation simple, en introduisant deux types supplémentaires de méthodes: Les signaux (envoient des évènements) Les slots (recoivent des évènements) Toutes les classes peuvent implémenter des signaux et slots  Plus besoin de Listener! Toute classe est un listener potentiel. Alexis Clay

34 C++ Qt – Signaux et slot N'importe qu'elle classe Qt (créée par vous) peut faire intervenir des signaux et slots Il est très simple de créer de nouveaux signaux et slots.  Nouveau paradigme: Une classe est un composant qui peut émettre des données sans savoir à qui, et recevoir des données sans savoir de qui. MaClasse MesSignaux Alexis Clay

35 C++ Qt – Signaux et slots
Créer des signaux/slots: GUIspeed.h Signaux: .h : définir la signature dans la catégorie "signals:" Les signaux sont publics par définition .cpp: mot-clé "emit" pour envoyer un signal Slots: .h : signature dans les catégories "public slots:" ou "private slots:" .cpp : implémentation comme n'importe qu'elle autre méthode! Alexis Clay

36 C++ Qt – Signaux et slot Connexions entre signaux et slots
Méthode connect de Qobject Méthode A crée une instance de B A crée une instance de C A peut maintenant connecter les signaux et slots entre B et C. Alexis Clay

37 Exemple d'implémentation de MVC
MVC en Qt: Les références aux objets sont nécessaires pour effectuer les connexions Par ex, une classe composite le fait CLASSE Contrôleur Signal: action Utilisateur Signal: valeur contrôlée CLASSE Modèle CLASSE Vue Signal: nouvel état du modèle Alexis Clay

38 Le modèle d'architecture en agents PAC
Pour un découplage complet des rôles de Vue, modèle et contrôle. Alexis Clay

39 Un autre modèle d'architecture: modèle en agents PAC
CLASSE Modèle CLASSE Vue CLASSE Contrôleur CLASSE Modèle Signal: valeur contrôlée Signal: action Utilisateur Signal: MAJ vue Signal: nouvel état du modèle CLASSE Vue CLASSE Modèle CLASSE Vue CLASSE Modèle CLASSE Vue Signal: nouvel état du modèle Alexis Clay

40 Le modèle PAC Présentation: Vue Abstraction: modèle Contrôle
Ici TOUTES les communications passent par la facette Contrôle Hiérarchisation possible des agents en arbre Alexis Clay

41 Modèle PAC: bénéfices Découplage total de l'abstraction (modèle) et de la présentation (vue) Découplage total des agents  architecture en composants indépendants Alexis Clay

42 Exemple: eMotion Alexis Clay

43 Conclusion Architecture: améliorer Du code.
L'extensibilité La modifiabilité La réutilisabilité Du code.  Découplage des différentes parties Plus complexe au départ à modéliser quand on ne maîtrise pas encore bien MAIS code bien mieux structuré, et répondant aux exigences ci-dessus Alexis Clay

44 Conclusion Le pattern MVC L'architecture en agents PAC Le plus courant
Vu ici sur client lourd mais applicable à d'autres contextes (exemple, M2VC pour le Web) L'architecture en agents PAC Grand découplage Architecture en agents Alexis Clay