Interfaces Graphiques MVC Alexis Clay

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

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

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

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

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

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

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

Le pattern Observable/Observateur Alexis Clay

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

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

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

Ex: Horloge (observé) Alexis Clay

Ex: VueHorloge (Observateur) Alexis Clay

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

Exemple: ajout d'une vue en AWT Alexis Clay

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

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

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

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

MVC Alexis Clay

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

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

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

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

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

Exemple de mécanismes: Java Swing Alexis Clay

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Exemple: eMotion Alexis Clay

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

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