ESIEE1

Patrons Observateur/MVCprogrammation évènementielle

Notes de cours

jean-michel Douin, douin au cnam point frversion : 9 Septembre 2013

ESIEE2

Sommaire

• Patron Observateur

• Programmation évènementielle

• Patron MVC Modèle Vue Contrôleur

ESIEE3

Principale bibliographie utilisée

• [Grand00]– Patterns in Java le volume 1

http://www.mindspring.com/~mgrand/

• [head First] – Head first : http://www.oreilly.com/catalog/hfdesignpat/#top

• [DP05] – L’extension « Design Pattern » de BlueJ : http://hamilton.bell.ac.uk/designpatterns/

• [divers]– Certains diagrammes UML : http://www.dofactory.com/Patterns/PatternProxy.aspx– informations générales http://www.edlin.org/cs/patterns.html

ESIEE4

Patrons/Patterns pour le logiciel

• Origine C. Alexander un architecte

• Abstraction dans la conception du logiciel– [GoF95] la bande des 4 : Gamma, Helm, Johnson et Vlissides

• 23 patrons/patterns

• Architectures logicielles

ESIEE5

Introduction : rappel

• Classification habituelle

– Créateurs  • Abstract Factory, Builder,   Factory Method,  Prototyp,e  Singleton

– Structurels •  Adapter,  Bridge,  Composite,  Decorator,  Facade,  Flyweight,  Proxy

– Comportementaux   Chain of Responsability.  Command,  Interpreter,  Iterator,

  Mediator,  Memento,  Observer,  State,

  Strategy, Template Method, Visitor

ESIEE6

Les patrons déjà vus …

• Adapter– Adapte l’interface d’une classe conforme aux souhaits du client

• Proxy– Fournit un mandataire au client afin de contrôler/vérifier ses accès

ESIEE7

Patron Observer/observateur

– Notification d’un changement d’état d’une instance aux observateurs inscrits

• Un Observé– N’importe quelle instance qui est modifiée

• i.e. un changement d’état comme par exemple la modification d’une donnée d’instance

• Les observateurs seront notifiés– A la modification de l’observé, – Synchrone, ( sur la même machine virtuelle …)

• Un ou plusieurs Observés / un ou plusieurs observateurs

• Ajout et retrait dynamiques d’observateurs

ESIEE8

UML & le patron Observateur, l’original

• http://www.codeproject.com/gen/design/applyingpatterns/observer.gif

ESIEE9

Le patron observateur en Java

– Lors d’un changement d’état : notification aux observateurs inscrits

// les observateurspublic interface Observer{

public void update();

}

// les observéspublic interface Subject{

public void attach(Observer o);

public void detach(Observer o);

public void notify();

}

ESIEE10

ConcreteObservable

public class ConcreteSubject implements Subject{

private Collection<Observer> observers = new ……

public void attach(Observer observer){ observers.add(observer); }

public void detach(Observer observer){ observers.remove(observer); }

public void notify(){

for(Observer obs : observers)

obs.update();

}

}

ESIEE11

ConcreteObserver

public class ConcreteObserver implements Observer{

public void update(){ // une notification a eu lieu …. }

}

Quel est l’observé initiateur ?

Quels sont les paramètres ?

ESIEE12

Observer : mise en oeuvre

Observable o = new ConcreteObservable();Observer obs1= new ConcreteObserver();

o.addObserver(obs1);

o.notify(); // obs1 est réveillé

Observer obs2= new ConcreteObserver();

o.addObserver(obs2);

o.notify(); // obs1 et obs2 sont réveillés…

ESIEE13

Démonstration / discussion

ESIEE14

Observer et ses paramètres …

– A chaque notification l’observé est transmis

public interface Observer{ public void update(Observable obs);}

– A chaque notification l’observé et un paramètre sont transmis

public interface Observer{ public void update(Observable obs, Object param);}

ESIEE15

Existe déjà, voir java.util

• java.util.Observable Subject

• java.util.Observer Observer

• java.util.Observer & java.util.Observableupdate addObserver

removeObserver

notifyObservers

….

ESIEE16

java.util.Observer

public interface Observer{

 void update(Observable o, Object arg);

}

L’Observé est transmis en paramètre Observable o

accompagné éventuellement de paramètres Object arg

« update » est appelée à chaque notification

ESIEE17

java.util.Observable

public class Observable{  public void addObserver(Observer o) ;

public void deleteObserver(Observer o) ;

public void deleteObservers() ;

public int countObservers() ;

public void notifyObservers() ;

 public void notifyObservers(Object arg) ;

 public boolean hasChanged() ;

protected  void setChanged() ;

protected  void clearChanged() ;

}

ESIEE18

Un Exemple : une liste et ses observateurs

• Une liste est observée, à chaque modification de celle-ci, ajout, retrait, … les observateurs inscrits sont notifiés

public class Liste<E> extends java.util.Observable{

…

public void ajouter(E e){

… // modification effective de la liste

setChanged(); // l’état de cette liste a changé

notifyObservers(e); // les observateurs sont prévenus

}

Une liste ou n’importe quelle instance …

ESIEE19

Un Exemple : un observateur de la liste

Liste<Integer> l = new Liste<Integer>();

l.addObserver( new Observer(){ public void update(Observable o,Object arg){ System.out.print( o + " a changé, " ); System.out.println( arg + " vient d'être ajouté !"); } });

C’est tout ! démonstration

ESIEE20

Démonstration/discussion

ESIEE21

EventListener / comme Observer

• java.awt.event.EventListener – Les écouteurs/observateurs

• Convention syntaxique de Sun pour ses API– XXXXXListener extends EventListener

« update » addXXXXXListener

exemple l’interface ActionListener addActionListener

• EventObject comme ActionEvent

ESIEE22

Observateur comme XXXXListener

• Une grande famille !

ESIEE23

Une IHM et ses écouteurs

• Chaque item est un sujet observable … avec ses écouteurs…

– Pour un « Bouton », à chaque clic les écouteurs/observateurs sont prévenus

public class Button extends Component{

…

public void addActionListener(ActionListener al){

}

ESIEE24

Un bouton prévient ses écouteurs …

Button b = new Button("empiler");

b.addActionListener(unEcouteur); // 1

b.addActionListener(unAutreEcouteur); // 2

b.addActionListener(

new ActionListener(){ // 3 écouteurs

public void actionPerformed(ActionEvent ae){

System.out.println("clic !!! ");

}

});

Une instance de la classe java.awt.Button (observable)notifie à

ses instances inscrites java.awt.event.ActionListener …(observer)

ESIEE25

Un écouteur comme Action Listener

import java.util.event.ActionListener;import java.util.event.ActionEvent;

public class EcouteurDeBouton implements ActionListener{

public void actionPerformed(ActionEvent e){ // traitement à chaque action sur le bouton }

}

//c.f. page précédenteActionListener unEcouteur = new EcouteurDeBouton(); b.addActionListener(unEcouteur); // 1

ESIEE26

Démonstration / Discussion

ESIEE27

API Java, patron Observateur, un résumé

• Ajout/retrait dynamiques des observateurs ou écouteurs

• L’observable se contente de notifier– Notification synchrone à tous les observateurs inscrits

• API prédéfinies java.util.Observer et java.util.Observable

ESIEE28

patrons Observer / MVC

• Modèle Vue Contrôleur

agit, modifie le Modèle

Observés / Observateurs

ESIEE29

MVC : Observer est inclus

ObservableModèle

ObserverVue

(update)

(getState)

(setState)

Contrôleur

ESIEE30

MVC Avantages

• Souple ?

CapteursContrôleur

Liste des mesuresModèle

(1)

CapteursContrôleur

CapteursContrôleur

CapteursContrôleur

CapteursContrôleur

CapteursContrôleur

(1)

HistogrammeVue

(3)

HistogrammeVue

HistogrammeVue

HistogrammeVue

HistogrammeVue

graphiqueVue

(2)

(2)

(3)

ESIEE31

Un cycle MVC

Utilisateur

Contrôleur Vue

Modèle

1

2

inscription

3

4

ESIEE32

Un cycle MVC, le bouton empiler

Utilisateur

Contrôleur Vue

Modèle

Clic !

empiler

inscription

notification

4

ESIEE33

Démonstration / MVC en pratique

• Un Modèle – Plusieurs Contrôleurs– Plusieurs Vues

ESIEE34

Démonstration : le Modèle i.e. un Entier

import java.util.Observable;

public class Modèle extends Observable{ private int entier; public int getEntier(){ return entier; }

public String toString(){ return "entier : " + entier; } public void setEntier(int entier){ this.entier = entier; setChanged(); notifyObservers(entier); }}

Vue

Modèle

update notifyObservers

ESIEE35

Démonstration : une Vue

public interface Vue{ public void afficher();}

import java.util.Observable;import java.util.Observer;

public class Vue1 implements Vue, Observer{ private Modèle modèle; public Vue1( Modèle modèle){ // inscription auprès du modèle this.modèle = modèle; modèle.addObserver(this); } public void afficher(){ System.out.println(" Vue1 : le modèle a changé : " + modèle.toString()); }

public void update(Observable o, Object arg){ // notification if(o==modèle) afficher(); } }

Vue

Modèle

toString afficher update

ESIEE36

Démonstration : un contrôleur

public class Contrôleur1{

private Modèle modèle;

public Contrôleur1(Modèle modèle){

this.modèle = modèle;

}

public void incrémenter(){

modèle.setEntier(modèle.getEntier() +1);

}

}

Contrôleur

Modèle

setEntier

incrémenter

ESIEE37

Un modèle, une vue, un contrôleur

// Un Modèle

Modèle modèle = new Modèle();

// Ce modèle possède une vue

Vue vue = new Vue1(modèle);

// un Contrôleur ( déclenche certaines méthodes du modèle)

Contrôleur1 contrôleur = new Contrôleur1(modèle);

contrôleur.incrémenter();

contrôleur.incrémenter();

}

ESIEE38

Un modèle, deux vues, deux contrôleurs

// Un Modèle

Modèle modèle = new Modèle();

// deux vues

Vue vueA = new Vue1(modèle);

Vue vueB = new Vue1(modèle);

// 2 Contrôleurs

Contrôleur1 contrôleurA = new Contrôleur1(modèle);

Contrôleur1 contrôleurB = new Contrôleur1(modèle);

contrôleurA.incrémenter();

contrôleurB.incrémenter();

ESIEE39

Discussion

Modèle

(1)

CapteursContrôleurContrôleurA

(1)(3)

HistogrammeVueVueA

(2)

(2)

(3)

ESIEE40

AWT / Button, discussion

• Un « Button » (le contrôleur) contient un MVCÀ part entière

• Text, TextField, Label, … « sont » des Vues• Button, Liste, … « sont » des contrôleurs

• Une IHM (JApplet,…) contient la Vue et le Contrôle– Alors le compromis architecture/lisibilité est à rechercher

ESIEE41

Un JButton comme MVC

• Au niveau applicatif appel de tous les observateurs inscrits– actionPerformed(ActionEvent ae ), interface ActionListener

Utilisateur

IHM JButton Vue du JButton

JButton

Clic !

change Modifier l’aspect du JButton

4

ESIEE42

Application, un TP

Développez une application de type calculette à pileL'évaluation d'une expression arithmétique est réalisée à l’aide d'une pile.

Par exemple l'expression 3 + 2 engendre la séquence : empiler(3); empiler(2); empiler(depiler() + depiler()); // simple non ?

Une Interface graphique :

Quel découpage ? Modèle, Vue et Contrôleur ?

ESIEE43

Proposition avant discussion

• MVC proposé :– Le Contrôleur est un JPanel,

• Transforme les actions sur les boutons ou l’entrée d’une opérande en opérations sur le Modèle

– Le Modèle est une Pile• Est un « Observable »

– La Vue est un JPanel, • Observateur du Modèle, la vue affiche l’état du Modèle à chaque notification

contrôleur

Vue

– ou bien Le Modèle est une calculette qui utilise une pile•Est un « Observable »

ESIEE44

Proposition après discussion

• MVC proposé :– Le Contrôleur est une classe qui implémente tous les listeners

• Transforme les actions sur les boutons ou l’entrée d’une opérande en opérations sur le Modèle

– Le Modèle est une Pile• Est un « Observable »

– La Vue est un JPanel, une JApplet, Une Frame … ce que l’on voit• Observateur du Modèle, la vue affiche l’état du Modèle à chaque notification

Vue

– ou bien Le Modèle est une calculette qui utilise une pile•Est un « Observable »

ESIEE45

MVC doc de Sun

• http://java.sun.com/blueprints/patterns/MVC-detailed.html

ESIEE46

IHM et MVC assez répandu …

• Discussion– Evolution, maintenance, à la recherche du couplage faible– Exemple

peut-on changer d’IHM ?, peut-elle être supprimée ? peut-on placer le modèle sur une autre machine ? …

ESIEE47

Conclusion

• MVC– Très utilisé

– Couplage faible obtenu

– Intégration claire du patron Observateur

Modèle Vue Contrôleur (MVC) est une méthode 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. Cette méthode a été mise au point en 1979 par Trygve Reenskaug, qui travaillait

alors sur Smalltalk dans les laboratoires de recherche Xerox PARC[1].

–Extrait de http://fr.wikipedia.org/wiki/MVC