La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello.

Présentations similaires


Présentation au sujet: "POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello."— Transcription de la présentation:

1 POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

2 Organiser le code (rangement) Simplifier (diviser régner) Organiser le travail Modifier (une partie) Ré-utiliser Notions : modularité, évolutivité, flexibilité Séparation possible –Code pour IHM –Code «Métier» Exemple –IHM différente pour une Gestion dun stock de chaussures ou de bibelots ? –Linux sous gnome ou kde, le système change-t-il ? Objectif : éviter de tout modifier si on change la partie fonctionnelle ou la partie IHM Architecture Logicielle et IHM : Pourquoi ?

3 Un problème classique

4 Des architectures logicielles Tous les modèles partent du principe : un système interactif comporte une partie interface et une partie application pure Cette dernière est souvent appelée noyau fonctionnel. Le noyau fonctionnel est considéré comme préexistant, et les modèles de systèmes interactifs décrivent essentiellement la partie interface, ainsi que ses relations avec les objets du domaine. La plupart des modèles identifient au moins trois types d'éléments : un ``coté utilisateur' (présentations), un ``côté noyau fonctionnel' (interfaces du noyau fonctionnel, abstractions, modèles), et des éléments articulatoires (contrôleurs, adaptateurs). Système interactif utilisateur

5 Des architectures logicielles : modèles à couches Seeheim Premier modèle (groupe de travail à Seeheim en 1985) - destiné au traitement lexical des entrées et sorties dans les interfaces textuelles – a servi de base à beaucoup d'autres modèles. utilisateur NF

6 Des architectures logicielles : modèles à couches Arch utilisateur Composant d'interaction - ensemble des widgets (objets interactifs) + communications avec les périphériques physiques – Composant de présentation - représentation logique des widgets indépendante de la plate-forme. Contrôleur de dialogue - responsable du séquencement des tâches et du maintien de la consistance entre les vues multiples. Adaptateur du domaine - responsable des tâches dépendantes du domaine qui ne font pas partie du noyau fonctionnel mais qui sont nécessaires à sa manipulation par l'utilisateur. Noyau fonctionnel représente la partie non interactive de l'application. Le modèle Arch [1992] composants et 3 types de données objets du domaine objets du domaine objets de présentation objets d'interaction

7 Des architectures logicielles : modèles à agents Le modèle MVC (Modèle, Vue, Contrôleur) Smalltalk [Goldberg and Robson, 1981].Goldberg and Robson, 1981 Chacun des trois composantes de la triade MVC est un objet à part entière. les systèmes interactifs = une hiérarchie d'agents mais la hiérarchie elle-même nest pas explicite Un agent MVC = un modèle, une ou plusieurs vues, et un ou plusieurs contrôleurs Le modèle = noyau fonctionnel de l'agent. (entier, chaîne de caractères ou objets) Le modèle notifie les vues à chaque fois que son état est modifié par le noyau ou par ses contrôleurs. La vue = maintient une représentation du modèle pour l'utilisateur, mise à jour à chaque notification d'état. Le contrôleur reçoit et interprète les événements utilisateur, les répercutant sur le modèle (modification de son état) ou sur la vue (retour instantané). utilisateur

8 Des architectures logicielles : modèles à agents PAC utilisteur Modèle à agents PAC [Coutaz, 1987]Coutaz, 1987 hiérarchie d'agents explicite Présentation = structure et comportement en entrée et en sortie de l'agent pour l'utilisateur (fusion des composants vue et contrôleur de MVC) Abstraction = la partie sémantique de l'agent (équivalent modèle de MVC) Contrôle = consistance entre la présentation et l'abstraction, navigation dans la hiérarchie Le composant contrôle n'a pas d'existence explicite dans le modèle MVC. le modèle PAC peut être appliqué à plusieurs niveaux d'un système interactif. Une application interactive peut ainsi être décrite comme une hiérarchie d'agents disposés sur plusieurs couches d'abstractions

9 Zoom : Architecture MVC Smalltalk[Goldberg et Robson ] –Model : modélisation (données et comportement) –View: représentation manipulable de l'objet –Control : interprétation des entrées V sabonne à M C sabonne à V C modifie M et V

10 Exemple code complet ici :

11 1 modèle – Plusieurs vues code complet ici :

12 Synchronisation entre la vue et le modèle Se fait par lutilisation du pattern Observer. Permet de générer des événements lors dune modification du modèle et dindiquer à la vue quil faut se mettre à jour Observable = le modèle Observers = les vues 12

13 Rappel sur Observer Observable

14 Motivation Un effet de bord fréquent de la partition dun système en une collection de classes coopérantes est la nécessité de maintenir la consistance entre les objets reliés entre eux. On ne veut pas obtenir la consistance en liant étroitement les classes, parce que cela aurait comme effet de réduire leur réutilisabilité.

15 Moyen Définir une dépendance de 1 à n entre des objets telle que lorsque létat dun objet change, tous ses dépendants sont informés et mis à jour automatiquement

16 Quand lappliquer Lorsquune abstraction possède deux aspects dont lun dépend de lautre. – Lencapsulation de ces aspects dans des objets séparés permet de les varier et de les réutiliser indépendamment. – Exemple : Modèle-Vue-Contrôleur Lorsquune modification à un objet exige la modification des autres, et que lon ne sait pas a priori combien dobjets devront être modifiés. – Exemple : Support pour la communication broadcast Lorsquun objet devrait être capable dinformer les autres objets sans faire dhypothèses sur ce que sont ces objets,

17 Besoin dévénements Le pattern Observer décrit – comment établir les relations entre les objets dépendants. Les objets-clés sont – la source Peut avoir nimporte quel nombre dobservateurs dépendants Tous les observateurs sont informés lorsque létat de la source change – lobservateur. Chaque observateur demande à la source son état afin de se synchroniser

18 Structure

19 Mise en œuvre MVC en Java

20 Implémentations Java du pattern METHODE 1 Des listeners : ajouter des listeners, notifier les listeners avec des événements, réagir aux événements METHODE 2 Une classe et une interface : class Observable {... } et interface Observer dans le package java.util Un objet Observable doit être une instance de la classe qui dérive de la classe Observable Un objet observer doit être instance dune classe qui implémente linterface Observer void update(Observable o, Object arg);

21 Exemple dapplication de MVC Exemple assez simple dune application qui permet de modifier un volume. Plusieurs vues pour représenter le volume et après toutes modifications, toutes les vues devront être synchronisées. Conseils : il est important de faire différents packages pour les différentes préoccupations 21

22 Le modèle : la base 22 public class VolumeModel { private int volume; public VolumeModel(){ super(); volume = 0; } public int getVolume() { return volume; } public void setVolume(int volume) { this.volume = volume; }

23 Pour la notification Pour permettre la notification de changement de volume, on utilise des listeners On crée donc un nouveau listener (VolumeListener) et un nouvel événement (VolumeChangeEvent) 23

24 Le listener et levent 24 import java.util.EventListener; public interface VolumeListener extends EventListener { public void volumeChanged(VolumeChangedEvent event); } import java.util.EventObject; public class VolumeChangedEvent extends EventObject{ private int newVolume; public VolumeChangedEvent(Object source, int newVolume){ super(source); this.newVolume = newVolume; } public int getNewVolume(){ return newVolume; }

25 Implémentation du système découteurs dans le modèle (1/2) 25 import javax.swing.event.EventListenerList; public class VolumeModel { private int volume; private EventListenerList listeners; public VolumeModel(){ this(0); } public VolumeModel(int volume){ super(); this.volume = volume; listeners = new EventListenerList(); } public int getVolume() { return volume; } public void setVolume(int volume) { this.volume = volume; fireVolumeChanged(); }

26 Implémentation du système découteurs dans le modèle (2/2) 26 public void addVolumeListener(VolumeListener listener){ listeners.add(VolumeListener.class, listener); } public void removeVolumeListener(VolumeListener l){ listeners.remove(VolumeListener.class, l); } public void fireVolumeChanged(){ VolumeChangedEvent evt = new VolumeChangedEvent(this, getVolume()); VolumeListener[] listenerList = (VolumeListener[]) listeners.getListeners(VolumeListener.class); for(VolumeListener listener : listenerList){ listener.volumeChanged(evt); }

27 Ce que lon a maintenant Le modèle est maintenant capable davertir tous ses écouteurs à chaque changement de volume En fonction de lapplication, il est possible dimaginer plusieurs listeners par modèles et dautres événements dans les listeners (par exemple quand le volume dépasse certains seuils) Remarque : le modèle peut devenir très vite conséquent 27

28 Les vues Nous supposons 3 vues (dans le cadre du cours, nous nen montrerons qu une) : –Une vue permettant de modifier le volume avec un champ de texte et valider par un bouton –Une vue permettant de modifier le volume à laide dune jauge et valider par un bouton –Une vue listant les différents volumes Toutes ces vues sont représentées par une JFrame 28

29 Vue abstraite Pour éviter dêtre dépendant dune vue, on va créer une classe abstraite représentant une vue de volume 29 public abstract class VolumeView implements VolumeListener{ private VolumeController controller = null; public final VolumeController getController(){ return controller; } public void setController(VolumeController c){ return controller=c; } public abstract void display(); public abstract void close(); }

30 JFrameField (1/3) 30 import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.text.NumberFormat; import javax.swing.*; import javax.swing.text.DefaultFormatter; public class JFrameFieldVolume extends VolumeView implements ActionListener{ private JFrame frame = null; private JPanel contentPane = null; private JFormattedTextField field = null; private JButton button = null; private NumberFormat format = null; public JFrameFieldVolume() { this(0); } public JFrameFieldVolume(int volume){ buildFrame(volume); }

31 JFrameField (3/3) 31 public void close() { frame.dispose(); public void display() { frame.setVisible(true); } public void volumeChanged(VolumeChangedEvent event) { field.setValue(event.getNewVolume()); } public void actionPerformed(ActionEvent arg0) { getController().notifyVolumeChanged(Integer.parseInt(field.getValue().toString())); }

32 Le Contrôleur Manipulera des objets de type View et non directement une vue spécifique Swing Un seul contrôleur sera créé dans un soucis de simplicité puisque les 3 vues ont le même type dinteraction avec lutilisateur. Dans le cas de vues interagissant différemment, il est fortement conseillé dutiliser plusieurs contrôleurs 32

33 Contrôleur (1/2) 33 public class VolumeController { public VolumeView fieldView = null; public VolumeView spinnerView = null; public VolumeView listView = null; private VolumeModel model = null; public VolumeController (VolumeModel model, VolumeView fieldView, VolumeView spinnerView, VolumeView listView){ this.model = model; fieldView = fieldView; spinnerView = spinnerView; listView = listView; addListenersToModel(); } private void addListenersToModel() { model.addVolumeListener(fieldView); model.addVolumeListener(spinnerView); model.addVolumeListener(listView); }

34 Contrôleur (2/2) 34 public void displayViews(){ fieldView.display(); spinnerView.display(); listView.display(); } public void closeViews(){ fieldView.close(); spinnerView.close(); listView.close(); } public void notifyVolumeChanged(int volume){ model.setVolume(volume); }

35 Client 35 public class Main { public static void main(String[] args) { VolumeModel model = new VolumeModel(); VolumeView fieldView = new JFrameFieldVolume(model.getVolume()); VolumeView spinnerView = new JFrameSpinnerVolume(model.getVolume()); VolumeView listView = new JFrameListVolume(model.getVolume()); VolumeController controller = new VolumeController(model, fieldView, spinnerView, listView); fieldView.setController(controller); spinnerView.setController(controller); listView.setController(controller); controller.displayViews(); }

36 Conclusion MVC permet de : –Changer une couche sans altérer les autres. Par exemple remplacer Swing par une autre bibliothèque graphique java sans porter atteinte aux autres couches. Idem pour le modèle –Synchroniser les vues. Toutes les vues qui montrent la même chose sont synchronisées 36

37 Mise en garde La mise en œuvre de MVC dans une application nest pas une tâche aisée : –Introduit un niveau de complexité assez élevée –Implique une bonne conception dès le départ Peut prendre du temps au développement En faire gagner lors de lévolution de lapplication Conseillée pour les moyennes et grandes applications amenées à être maintenues, étendues et pérennes 37

38 Vous avez compris MVC ? Un exemple simple

39 Lexemple du login 2 vues parmi dautres IHM en Anglais IHM en français

40 Un modèle 3 variables dinstances – log, password, check Des méthodes – logCheck – passwordCheck – connect

41 Cas dinteraction Cas no 1 le bouton Log in implique la vérification login et password à partir des données saisies. Les données peuvent être modifiées jusquau moment de lutilisation du bouton Action : connexion ou un message derreur

42 Cas dinteraction Cas no 2 le bouton Log in implique la vérification login password à partir des données saisies. Les données peuvent être modifiées jusquau moment de leur validation par un retour charriot Actions : connexion ou un message derreur Les champs de saisie sont bloqués après retour charriot

43 Cas dinteraction Cas no 3 : La saisie des données est validée au premier retour chariot Actions : vérification des données faite au fur et à mesure pour le login puis pour le password ce qui peut entrainer un message derreur connexion au moment par click sur le bouton

44 Questions Avez-vous dautres exemples dinteractions ? Un autre modèle pourrait-il être implémenté ? Avez-vous dautres exemples dIHM (Vues) ? Quelle est la différence entre vue et interaction ? Quid de IHM ?

45 Questions Plusieurs IHM (Vues) peuvent elles interagir de la même façon ? Plusieurs IHM (Vues) peuvent elles interagir différemment ? Peut on changer la façon dinteragir sans modifier une vue (ou le modèle) ? Peut on changer de modèle sans modifier la vue (ou le modèle) ?


Télécharger ppt "POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello."

Présentations similaires


Annonces Google