poo / ihm architecture logicielle am dery-pinna et audrey occello

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

Upload: jeunesse-blin

Post on 03-Apr-2015

108 views

Category:

Documents


2 download

TRANSCRIPT

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

POO / IHM Architecture Logicielle

AM Dery-Pinna et Audrey Occello

Page 2: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

•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 d’un 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 ?

Page 3: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Un problème classique

Page 4: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Des architectures logicielles

http://tel.archives-ouvertes.fr/docs/00/04/82/79/HTML/2_2modelesinterface_referen.html

Tous les modèles partent du principe :un système interactif comporte une partie interface et une partie application pureCette 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

Page 5: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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

Page 6: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Des architectures logicielles : modèles à couches

Arch

utilisateurComposant 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] 5 composants et 3 types de donnéesobjets du

domaine

objets dudomaine

objets de présentation

objets d'interaction

Page 7: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Des architectures logicielles : modèles à agents

Le modèle MVC (Modèle, Vue, Contrôleur) Smalltalk [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 n’est pas expliciteUn 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

utilisateur

Page 8: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Des architectures logicielles : modèles à agents

PAC

PAC

utilisteur

Modèle à agents PAC [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érarchieLe 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

Page 9: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Zoom : Architecture MVC•Smalltalk[Goldberg et Robson1979-1983] –Model : modélisation (données et comportement)–View: représentation manipulable de l'objet–Control : interprétation des entrées

V s’abonne à MC s’abonne à VC modifie M et V

Page 10: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Exemple

code complet ici : http://www.oracle.com/technetwork/articles/javase/index-142890.html

Page 11: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

1 modèle – Plusieurs vues

code complet ici : http://www.oracle.com/technetwork/articles/javase/index-142890.html

Page 12: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Synchronisation entre la vue et le modèle

• Se fait par l’utilisation du pattern Observer.

• Permet de générer des événements lors d’une modification du modèle et d’indiquer à la vue qu’il faut se mettre à jour

• Observable = le modèle

• Observers = les vues

12

Page 13: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Rappel sur Observer Observable

Page 14: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Motivation

• Un effet de bord fréquent de la partition d’un 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é.

Page 15: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Moyen

Définir une dépendance de “1” à “n” entre des objets telle que

lorsque l’état d’un objet change,

tous ses dépendants sont informés et mis à jour automatiquement

Page 16: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Quand l’appliquer

• Lorsqu’une abstraction possède deux aspects dont l’un dépend de l’autre.– L’encapsulation 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

• Lorsqu’une modification à un objet exige la modification des autres, et que l’on ne sait pas a priori combien d’objets devront être modifiés. – Exemple : Support pour la communication “broadcast”

• Lorsqu’un objet devrait être capable d’informer les autres objets sans faire d’hypothèses sur ce que sont ces objets,

Page 17: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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 n’importe quel nombre d’observateurs dépendants

• Tous les observateurs sont informés lorsque l’état de la source change

– l’observateur.• Chaque observateur demande à la source son état afin de se

synchroniser

Page 18: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Structure

Page 19: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Mise en œuvre MVC en Java

Page 20: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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 2Une 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 d’une classe qui implémente l’interface Observervoid update(Observable o, Object arg);

Page 21: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Exemple d’application de MVC• Exemple assez simple d’une 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

Page 22: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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; }}

Page 23: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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

Page 24: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Le listener et l’event

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; }}

Page 25: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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(); }

Page 26: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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); } }}

Page 27: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Ce que l’on a maintenant• Le modèle est maintenant capable d’avertir

tous ses écouteurs à chaque changement de volume

• En fonction de l’application, il est possible d’imaginer plusieurs listeners par modèles et d’autres é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

Page 28: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Les vues• Nous supposons 3 vues (dans le cadre du cours, nous

n’en 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 à l’aide

d’une jauge et valider par un bouton– Une vue listant les différents volumes

• Toutes ces vues sont représentées par une JFrame

28

Page 29: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Vue abstraite• Pour éviter d’être dépendant d’une 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();}

Page 30: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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); }

Page 31: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

JFrameField (3/3)

31

… @Override public void close() { frame.dispose(); } @Override 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())); }}

Page 32: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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 d’interaction avec l’utilisateur.

• Dans le cas de vues interagissant différemment, il est fortement conseillé d’utiliser plusieurs contrôleurs

32

Page 33: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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); }

Page 34: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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); }}

Page 35: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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();

}}

Page 36: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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

Page 37: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Mise en garde

• La mise en œuvre de MVC dans une application n’est 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

l’application

• Conseillée pour les moyennes et grandes applications amenées à être maintenues, étendues et pérennes

37

Page 38: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Vous avez compris MVC ?

Un exemple simple

Page 39: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

L’exemple du login

2 vues parmi d’autres

IHM en Anglais

IHM en français

Page 40: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Un modèle

• 3 variables d’instances– log, password, check

• Des méthodes– logCheck– passwordCheck– connect

Page 41: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Cas d’interaction

Cas no 1le bouton Log in implique la vérification login et

password à partir des données saisies.Les données peuvent être modifiées jusqu’au

moment de l’utilisation du boutonAction : connexion ou un message d’erreur

Page 42: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Cas d’interaction

Cas no 2le bouton Log in implique la vérification login

password à partir des données saisies.Les données peuvent être modifiées jusqu’au

moment de leur validation par un retour charriotActions : connexion ou un message d’erreurLes champs de saisie sont bloqués après retour

charriot

Page 43: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Cas d’interaction

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 d’erreur

connexion au moment par click sur le bouton

Page 44: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

Questions

• Avez-vous d’autres exemples d’interactions ?• Un autre modèle pourrait-il être implémenté ?• Avez-vous d’autres exemples d’IHM (Vues) ?• Quelle est la différence entre vue et

interaction ?• Quid de IHM ?

Page 45: POO / IHM Architecture Logicielle AM Dery-Pinna et Audrey Occello

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 d’interagir sans modifier une vue (ou le modèle) ?

• Peut on changer de modèle sans modifier la vue (ou le modèle) ?