49
MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC Vincent Guigue UPMC - LIP6 Vincent Guigue LI260 - Course de Voiture 1/47

Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Cours 4 : IHM, MVC

Vincent GuigueUPMC - LIP6

Vincent Guigue LI260 - Course de Voiture 1/47

Page 2: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Architecture actuelle

◦ Informations stockées dansune image◦ Création de l’image :

- Soit dans le main- Soit dans la Simulation

◦ Modification de l’image :- Dans la simulation

◦ Sauvegarde de l’image :- Dans le main

+drive(Commande c): voidVoiture <<INT>>Circuit <<INT>>

+ play() : void- playOneShot() : void

- Strategy strategySimulation

Commande

Utilise

Strategy <<INT>>

Génère

Vincent Guigue LI260 - Course de Voiture 2/47

Page 3: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Vers un système indépendant

◦ On veut un système indépendant- Pouvoir le brancher ou le débrancher facilement, sansintervenir dans le code de la simulation

- Pouvoir changer de système de visualisation◦ Il existe un modèle standard (assez lourd) pour gérer cette

situation : MVC Model View Controller- Pour chaque élément (voiture, circuit,...), un objet vue estcréé.

- Une vue générique est élément capable de gérer la vue d’unobjet (cf slide suivant)

- Lorsque le modèle change il informe le Controller (évènement)- Le Controller met à jour les informations d’affichage

Vincent Guigue LI260 - Course de Voiture 3/47

Page 4: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Proposition de base

◦ Information toujours stockées dans une image◦ On travaille sur un système de branchement universel depuis le

main- On pourra brancher un autre système plus tard

◦ Modèle physique :- Aucune référence à l’affichage- Modèle autonome : peut fonctionner sans affichage

◦ Visualisation- Branchement depuis le main

Modèle physique

Voiture

Circuit

Vue

Observer de Voiture

Branchement dans le main

Vincent Guigue LI260 - Course de Voiture 4/47

Page 5: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Observer

◦ Le code sera développé dans un nouveau package :li260.view.observeurs◦ VoitureObserveur sait afficher la voiture dans l’image◦ Le système d’affichage est découplé du modèle : on peut le

débrancher ou en mettre un autre... Depuis le main

Voiture <<INT>> Circuit <<INT>>Strategy <<INT>>

...Simulation

Commande

+ print(BufferedImage im): voidObserveur <<INT>>

+ print(BufferedImage im): void- Voiture v

VoitureObserveur- ArrayList<Observeur> liste- BufferedImage im

Controleur

Vincent Guigue LI260 - Course de Voiture 5/47

Page 6: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Observer : cahier des charges

◦ Support = image◦ Fonction = sauver des informations

Cahier des charges associé :un objet est Observer s’il est capable de sauver des informationsdans une image.Exemple : l’observer de voiture sauve la position de la voiture enchangeant la couleur d’un pixel.

1 pub l i c i n t e r f a c e Obse rve r {2 pub l i c vo id p r i n t ( Bu f f e r ed Image im ) ;3 }

Vincent Guigue LI260 - Course de Voiture 6/47

Page 7: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Oberver : implémentation

1 pub l i c c l a s s Vo i t u r eOb s e r v e r implements Obse rve r {2 p r i v a t e Vo i t u r e v o i t u r e ;3 p r i v a t e Co lo r c o l o r = Co lo r . y e l l ow ;4 p r i v a t e Co lo r co l o rDe r ape = Co lo r . r ed ;56 pub l i c Vo i t u r eOb s e r v e r ( Vo i t u r e v o i t u r e ) { t h i s . v o i t u r e = v o i t u r e ; }78 p r i v a t e i n t getX ( ){ re tu rn ( i n t ) v o i t u r e . g e t P o s i t i o n ( ) . getX ( ) ; }9

10 p r i v a t e i n t getY ( ){ re tu rn ( i n t ) v o i t u r e . g e t P o s i t i o n ( ) . getY ( ) ; }1112 pub l i c Co lo r g e tCo l o r ( ) {13 i f ( v o i t u r e . getDerapage ( ) ) re tu rn co l o rDe r ape ;14 re tu rn c o l o r ;15 }1617 pub l i c vo id p r i n t ( Bu f f e r ed Image im ) {18 im . setRGB ( getX ( ) , getY ( ) , g e tCo l o r ( ) . getRGB ( ) ) ;19 }

Vincent Guigue LI260 - Course de Voiture 7/47

Page 8: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Usage

Usage type depuis le main :12 C i r c u i t c = C i r c u i t F a c t o r y . b u i l d ( . . . ) ; // s i méthode b u i l d s t a t i c3 Vo i t u r e v = Vo i t u r eFa c t o r y . b u i l d ( c ) ; // s i méthode b u i l d s t a t i c45 S t r a t e g y s t r = new S t r a t e g y ( c , v , . . . ) ;67 Vo i t u r eOb s e r v e r vobs = new Vo i t u r eOb s e r v e r ( v ) ;8 Vue vue = new Vue ( c ) ;9 vue . add ( vobs ) ;

◦ Bcp d’abstraction◦ Possibilité de retirer très facilement l’observation (en laissant

le modèle fonctionner)

Vincent Guigue LI260 - Course de Voiture 8/47

Page 9: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Usage (2)

◦ EVOLUTIVITE :- Si on veut changer la représentation de la voiture, c’est facile

· Exemple : changer la couleur de la trace

- Changer la représentation ne modifie pas la simulation- Changer la simulation ne modifie pas la représentation

◦ LIMITE :- Les observeurs forment un ensemble cohérent avec lecontroleur : il faut les faire évoluer ensemble

- Il faut encore gérer la dynamique : les observers doivent êtreappeler régulièrement !

Vincent Guigue LI260 - Course de Voiture 9/47

Page 10: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Principe général

Evènement vs programmation linéaireDifférents éléments réagissent les uns par rapport aux autres : ilsémettent des événements et écoutent ce qui se passe autour d’eux.

Principe : chaque composant doit être indépendant, le main fait lelien entre certains émetteurs et certains récepteurs.

Exemple :1 La voiture bouge, la simulation (physique) doit envoyer un

signal : update2 Si la vue est branchée, elle reçoit le message et procède à une

mise à jour

Vincent Guigue LI260 - Course de Voiture 10/47

Page 11: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Emetteur/récepteur

◦ Émetteur : la Simulation émet un évènement lorsqu’une miseà jour de l’affichage est nécessaire

- L’émission revient à un appel de méthode dans le récepteur- L’émetteur doit connaître/stocker les récepteurs pour pouvoirleur envoyer le message

- Les récepteurs doivent répondre à un cahier des charges : ondoit être sur que la méthode de réception est implémentée...

◦ Récepteur : le Controleur recoit le message à travers un appelà la méthode manageUpdate(). Il met à jour l’image.

- L’observeur fait le tampon entre la simulation et l’affichage,c’est le garant de l’indépendance

Cahiers des charges ⇒ utilisation d’interfaces

Vincent Guigue LI260 - Course de Voiture 11/47

Page 12: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Définition des interfaces

◦ Emetteur :1 pub l i c i n t e r f a c e UpdateEventSender {2 pub l i c vo id add ( Upda t eEven tL i s t en e r l i s t e n e r ) ;3 pub l i c vo id update ( ) ;4 }

1 Recevoir des écouteurs2 Leur envoyer un message

◦ Récepteur :1 pub l i c i n t e r f a c e Upda t eEven tL i s t en e r {2 pub l i c vo id manageUpdate ( ) ;3 }

1 Réagir en cas de message

Vincent Guigue LI260 - Course de Voiture 12/47

Page 13: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Emetteur/récepteur UML

+ update() : void+ add(UpdateEventListener l): void...

- ArrayList< UpdateEventListener> list...

Simulation

+ print(BufferedImage im): voidObserveur <<INT>>

+ manageUpdate(): void...

- ArrayList<Observeur> liste- BufferedImage im

Controleur

+ void update()+ void add(UpdateEventListener l)

UpdateEventSender <<INT>>+ void manageUpdate()

UpdateEventListener <<INT>>

...

Dans le main :1 C i r c u i t F a c t o r y c f a c = new C i r c u i t F a c t o r y F r omF i l e ( f i l e n ame ) ;2 C i r c u i t t r a c k = c f a c . b u i l d ( ) ; // s i méthode non s t a t i c3 Vo i t u r eFa c t o r y vFac = new F e r r a r i F a c t o r y ( t r a c k ) ;4 Vo i t u r e v = vFac . b u i l d ( ) ; // s i méthode non s t a t i c5 ( . . . ) // s t r a t e g i e s6 Con t r o l e u r ihm = new Con t r o l e u r ( t r a c k ) ;7 ihm . add (new Vo i t u r eObs e r v eu r ( v ) ) ;8 simu . add ( ihm ) ;9 simu . p l a y ( )

Vincent Guigue LI260 - Course de Voiture 13/47

Page 14: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Séquence de communication

ACTE 0 :◦ Le main fait le lien entre Vue(=Controleur dans cette

modélisation) et Modèle physique(ligne 8 transparent précédent)

ACTE 1 : Emission/Diffusion◦ La simulation décide d’envoyer un message

appel à void update()1 pub l i c vo id update ( ) {2 f o r ( Upda t eEven tL i s t en e r3 l i s t e n e r : l i s t e n e r s )4 l i s t e n e r . manageUpdate ( ) ;5 }

Vincent Guigue LI260 - Course de Voiture 14/47

Page 15: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Séquence de communication (2)

ACTE 2 : ReceptionLes méthodes manageUpdate() des récepteurs sont invoquées

ACTE 3 : Mise à jour de la vue◦ Le controleur/vue a un attribut ArrayList<Observer>liste

1 pub l i c vo id manageUpdate ( ) {2 f o r ( Observeur Image o : l i s t e )3 o . p r i n t ( image ) ;4 }

Vincent Guigue LI260 - Course de Voiture 15/47

Page 16: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Evolutivité

Dans les cours à venir, nous étudierons :◦ Bibliothèque SWING (interface graphique JAVA)◦ Introduction à la 3D

Nouvelle notion : affichage temps réel (ou au moins dynamique)...

Bonne nouvelle :L’architecture prévue est capable de gérer cela !Rafraichissement de l’affichage lors des notifications dechangements...

Vincent Guigue LI260 - Course de Voiture 16/47

Page 17: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

SWING : la librairie JAVA pour les IHM

◦ Surcouche de AWT (Abstract Window Toolkit)◦ Swing, une librairie qui permet de créer tous les éléments

classiques des interfaces : Fenêtre, boutons, listes...◦ Gestion propre des évènements et de la communication entre

les différents composants

Dans ce cours :◦ Que se passe-t-il quand on clique ?◦ Comment réactualiser l’affichage du projet ?◦ ...

Vincent Guigue LI260 - Course de Voiture 17/47

Page 18: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Idée générale

Imbrication des composants :

Vincent Guigue LI260 - Course de Voiture 18/47

Page 19: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Niveau supérieur : la fenêtre

◦ Composant JFrame◦ Création d’une fenêtre :1 JFrame f e n e t r e = new JFrame ( " S imu l a t i o n ␣ LI260 ␣ ! " ) ;

◦ Tous les composants de base (dont JFrame) sont desconteneurs : on ajoute les éléments dans le conteneur.

1 f e n e t r e . add (new JPane l ( ) ) ;

◦ La taille du composant JFrame sera définie automatiquementpar les composants ajoutésNormalement, pas besoin de plus d’options ? Sinon, cf lajavadoc !

Vincent Guigue LI260 - Course de Voiture 19/47

Page 20: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Layout : philosophie de remplissage

Stratégie de remplissage 6= composantN’importe quel conteneur peut être associé à n’importe quellestratégie de remplissage...

Quelques exemples :

Vincent Guigue LI260 - Course de Voiture 20/47

Page 21: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Layout : les possibilités principales

◦ Gestionnaire par défault : java.awt.FlowLayout

- Agencement de gauche à droite, de haut en bas, utilise la taillepréférée des sous-composants

◦ Gestionnaire à bords : java.awt.BorderLayout

- Agencement de 5 sous-composants : Nord, Sud, Est, Ouest etCentre

◦ Gestionnaire à grille : java.awt.GridLayout

- Agencement dans une grille N ×M avec une taille partagéepar tous les sous-composants

Vincent Guigue LI260 - Course de Voiture 21/47

Page 22: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Layout : syntaxe dans le détailSur un exemple type :

1 pub l i c c l a s s Test {2 pub l i c s t a t i c vo id main ( S t r i n g [ ] a r g s ){3 Jbut ton [ ] bouton ;4 bouton = new JButton [ nb ] ;5 f o r ( i n t i =0; i<nb ; i++)6 bouton [ i ] = new JButton ( "Bouton"+( i +1)) ;78 JFrame f e n e t r e = new JFrame ( "mon␣ t e s t " ) ;9 f e n e t r e . s e t S i z e ( 320 , 200 ) ;

1011 // cho i x l a y o u t12 ( . . . )1314 // a j o u t des boutons15 ( . . . )1617 // a c t i v a t i o n s t anda rd18 f e n e t r e . s e t V i s i b l e ( t rue ) ;19 f e n e t r e . pack ( ) ;20 }

Vincent Guigue LI260 - Course de Voiture 22/47

Page 23: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Layout : syntaxe dans le détail (2)

1 // cho i x l a y o u t2 Con ta i n e r c o n t e n e u r P r i n c i p a l = f e n e t r e . getContentPane ( ) ;3 c o n t e n e u r P r i n c i p a l . s e tLayou t (new FlowLayout ( ) ) ;45 // a j o u t des boutons6 f o r ( i n t i =0; i<nb ; i++)7 c o n t e n e u r P r i n c i p a l . add ( bouton [ i ] ) ;

Vincent Guigue LI260 - Course de Voiture 23/47

Page 24: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Layout : syntaxe dans le détail (3)

1 // cho i x l a y o u t2 Con ta i n e r c o n t e n e u r P r i n c i p a l = f e n e t r e . getContentPane ( ) ;3 c o n t e n e u r P r i n c i p a l . s e tLayou t (new BorderLayout ( ) ) ;45 // a j o u t des boutons6 c o n t e n e u r P r i n c i p a l . add ( bouton [ 0 ] , BorderLayout .NORTH) ;7 c o n t e n e u r P r i n c i p a l . add ( bouton [ 1 ] , BorderLayout .EAST ) ;8 c o n t e n e u r P r i n c i p a l . add ( bouton [ 2 ] , BorderLayout .SOUTH) ;9 c o n t e n e u r P r i n c i p a l . add ( bouton [ 3 ] , BorderLayout .WEST) ;

10 c o n t e n e u r P r i n c i p a l . add ( bouton [ 4 ] , BorderLayout .CENTER) ;

Vincent Guigue LI260 - Course de Voiture 24/47

Page 25: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Layout : syntaxe dans le détail (4)

1 // cho i x l a y o u t2 Con ta i n e r c o n t e n e u r P r i n c i p a l = f e n e t r e . getContentPane ( ) ;3 c o n t e n e u r P r i n c i p a l . s e tLayou t (new Gr idLayout ( ) ) ;45 // a j o u t des boutons6 f o r ( i n t i =0; i<nb ; i++)7 c o n t e n e u r P r i n c i p a l . add ( bouton [ i ] ) ;

Vincent Guigue LI260 - Course de Voiture 25/47

Page 26: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Astuce : les boites

Obtenir des dispositions complexes :

◦ Gestionnaire à boîtes : javax.swing.Box◦ agencement à l’horizontale ou verticale très flexible◦ possibilités d’insérer des ressorts (dites «glue» terme mal

choisi)◦ possibilités d’imbriquer les boîtes les unes dans les autres

Vincent Guigue LI260 - Course de Voiture 26/47

Page 27: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Astuce : les boites (2)

Obtenir des dispositions complexes :

1 Con ta i n e r c o n t e n e u r P r i n c i p a l = f e n e t r e . getContentPane ( ) ;2 Box vbox = Box.createVerticalBox() ; // méthode s t a t i q u e3 c o n t e n e u r P r i n c i p a l . add ( vbox ) ;4 Box hbox = Box.createHorizontalBox() ;5 vbox . add ( hbox ) ;6 f o r ( i n t i =0; i <5; i++)7 hbox . add ( bouton [ i ] ) ;8 f o r ( i n t i =5; i<nb ; i++)9 vbox . add ( bouton [ i ] ) ;

Vincent Guigue LI260 - Course de Voiture 27/47

Page 28: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Astuce : les boites (32)

Obtenir des dispositions complexes :

1 Con ta i n e r c o n t e n e u r P r i n c i p a l = f e n e t r e . getContentPane ( ) ;2 Box vbox = Box . c r e a t eV e r t i c a l B o x ( ) ; // méthode s t a t i q u e3 c o n t e n e u r P r i n c i p a l . add ( vbox ) ;4 Box hbox = Box . c r e a t eHo r i z o n t a lBo x ( ) ; vbox . add ( hbox ) ;5 f o r ( i n t i =0; i <4; i++) hbox . add ( bouton [ i ] ) ;6 hbox . add (Box.createHorizontalGlue() ) ; hbox . add ( bouton [ 4 ] ) ;7 vbox . add (Box.createVerticalGlue() ) ;8 f o r ( i n t i =5; i<nb ; i++) vbox . add ( bouton [ i ] ) ;

Vincent Guigue LI260 - Course de Voiture 28/47

Page 29: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Bibliothèque de composants

Vincent Guigue LI260 - Course de Voiture 29/47

Page 30: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Bibliothèque de composants

Vincent Guigue LI260 - Course de Voiture 29/47

Page 31: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Bibliothèque de composants

Vincent Guigue LI260 - Course de Voiture 29/47

Page 32: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Cas d’étude

1 pub l i c c l a s s ConvertView extends JFrame {2 p r i v a t e JLabe l p r i x L b l ;3 p r i v a t e JTex tF i e l d p r i xTx t ;4 p r i v a t e JLabe l t auxLb l ;5 p r i v a t e JTex tF i e l d tauxTxt ;6 p r i v a t e JLabe l c o n v e r s i o n L b l ;7 p r i v a t e JButton c o n v e r t i r B t n ;8 p r i v a t e JButton qu i t t e rB t n ;9

10 pub l i c ConvertView ( S t r i n g t i t r e , i n t l a r g e u r , i n t hauteu r ) {11 // à comp l é t e r12 }

Vincent Guigue LI260 - Course de Voiture 30/47

Page 33: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Dialogue des composants : évènements

◦ Lorsque l’on clique sur un bouton, le bouton envoie unévénement◦ Il faut écouter ces évènements pour agir en conséquence.

Vincent Guigue LI260 - Course de Voiture 31/47

Page 34: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Gestion des évènements SWINGCréer un objet qui écoute :◦ Les évènements Button : ActionListener◦ Les évènements Souris : MouseListener

1 pub l i c c l a s s Con t r o l e u r implements Ac t i o nL i s t e n e r , MouseL i s t ene r {2 pub l i c vo id mouseC l i cked (MouseEvent e ) {}3 pub l i c vo id mouseEntered (MouseEvent e ) {}4 pub l i c vo id mouseEx i ted (MouseEvent e ) {}5 pub l i c vo id mousePressed (MouseEvent e ) {}6 pub l i c vo id mouseRe leased (MouseEvent e ) {}7 pub l i c vo id ac t i onPe r f o rmed ( Act ionEvent e ) {}8 }

Appel et usage :1 JButton conv e r t = new JButton ( " Con v e r t i r " ) ;2 JPane l pane l = new JPane l ( ) ;3 Con t r o l e u r c = new Con t r o l e u r ( ) ;4 conv e r t . a d dAc t i o nL i s t e n e r ( c ) ;5 pane l . addMouseL i s t ene r ( c ) ;6 // on peut ( évidemment ) a j o u t e r l e s composants dans une f e n ê t r e . . .

Vincent Guigue LI260 - Course de Voiture 32/47

Page 35: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Gestion des évènements SWING (2)

◦ On est automatiquement dirigé vers la méthode de gestion desévènements

- On vérifie l’origine de l’évènement- Les informations relatives à l’évènements sont disponibles

◦ On effectue l’opération adéquat

1 pub l i c vo id ac t i onPe r f o rmed ( Act ionEvent e ) {2 i f ( e . getActionCommand ( ) . e qu a l s ( " Co n v e r t i r " ) ){3 [ . . . ]4 }5 }6 pub l i c vo id mousePressed (MouseEvent e ) {7 i f ( e . getButton ()==1) [ . . . ]8 e l s e i f ( e . getButton ()==2) [ . . . ]9

10 // usage11 double x = e . getX ( ) ; double y = e . getY ( ) ;12 }

Vincent Guigue LI260 - Course de Voiture 33/47

Page 36: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Gestion des évènements SWING (3)

Interaction entre le Controleur et les composants SWING

1 Controleur possède les composants comme attributs : Pas trèspropre

- Controleur et Vue ne sont plus indépendants dans ce cas2 Construction d’évènements spécifiques

- Le contrôleur envoie un évènement à la vue avec lesinformations utiles...

- Propre mais assez lourd

1 pub l i c vo id ac t i onPe r f o rmed ( Act ionEvent e ) {2 i f ( e . getActionCommand ( ) . e qu a l s ( " Co n v e r t i r " ) ){3 // r é c u p é r a t i o n d ’ un champ4 // mise à j o u r d ’ un au t r e champ5 }6 }

Vincent Guigue LI260 - Course de Voiture 34/47

Page 37: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Solution 1

◦ Création d’un objet Jeu regroupant tous les éléments dumodèle◦ Création d’un objet InterfaceGr connaissant tous les

éléments de la vue

Gestion simple... Et peu évolutiveA chaque action, le contrôleur répond en modifiant directement leséléments concernés :l’ensemble du contrôleur est développé spécifiquement à uneversion de l’application.

◦ Est suffisant pour LI260 ? Probablement...

1 pub l i c c l a s s Con t r o l e u r implements Ac t i o n L i s t e n e r {2 p r i v a t e Jeu j e u ;3 p r i v a t e I n t e r f a c eG r pane l ;45 . . .

Vincent Guigue LI260 - Course de Voiture 35/47

Page 38: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Solution 1 (sur l’exemple précédent)

1 // main2 JButton conv e r t = new JButton ( " Con v e r t i r " ) ;3 JButton q u i t = new JButton ( " Qu i t t e r " ) ;4 JTex tF i e l d p r i x = new JTex tF i e l d ( ) ;5 JTex tF i e l d taux = new JTex tF i e l d ( ) ;6 JLabe l r e s u l t = new JLabe l ( ) ;7 [ . . . ] // Choix Layout8 [ . . . ] // Ajout des composants dans un JPanel , dans une JFrame9

10 // conna i s s a n c e des composants11 Con t r o l e u r c = new Con t r o l e u r ( p r i x , taux , r e s u l t ) ;12 conv e r t . a d dAc t i o nL i s t e n e r ( c ) ;13 qu i t . addMouseL i s t ene r ( c ) ;

Vincent Guigue LI260 - Course de Voiture 36/47

Page 39: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Solution 1 (sur l’exemple précédent)

1 // Dans l e Con t r o l e u r2 p r i v a t e JTex tF i e l d p r i x ;3 p r i v a t e JTex tF i e l d taux ;4 p r i v a t e JLabe l r e s u l t ;5 [ . . . ] // c o n s t r u c t e u r . . .67 pub l i c vo id ac t i onPe r f o rmed ( Act ionEvent e ) {8 i f ( e . getActionCommand ( ) . e qu a l s ( " Co n v e r t i r " ) ){9 double d_pr ix = Double . va lueOf ( p r i x . getText ( ) ) ;

10 double d_taux = Double . va lueOf ( taux . getText ( ) ) ;1112 r e s u l t . s e tTex t ( d_pr ix ∗d_taux ) ;13 }14 }

Vincent Guigue LI260 - Course de Voiture 37/47

Page 40: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Solution 2

Le contrôleur connait une vue abstraite (= cahier descharges=interface)

+ void sendEvent(EventMAJVue e)- Vue vue

Controleur

+ void maj(EventMAJVue e)Vue <<INT>>

+ void maj(EventMAJVue e)- ArrayList<Observer> liste

VueImpl

Ordonne une MAJ

- informations diverses...EventMAJVue

Utilisent pour la communication d'informations

Exemple : Ordre = mise à jour de la position de la voiture◦ La vue est indépendante pour gérer l’ordre...◦ Une modification de la vue n’implique pas de modification du

contrôleur.

Vincent Guigue LI260 - Course de Voiture 38/47

Page 41: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Proposition actuelle

◦ Utilisation des composants existants◦ Développement d’un contrôleur pour la gestion des

évènements- Réception des évènements standard des composants- Mise à jour des composants via leur méthodes setXXX

◦ Limites : pas de possibilité d’interagir avec le coeur d’uncomposant

- Exemple : pas de composant tableau noir avec des possibilitésde dessin

◦ Solution : la surcharge des composants existants

Vincent Guigue LI260 - Course de Voiture 39/47

Page 42: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Surcharge de composants

Proposition de vue pour le projet :1 pub l i c c l a s s IHMSwing extends JPane l2 implements Upda t eEven tL i s t en e r {3 p r i v a t e Ar r a yL i s t <ObserverSWING> l i s t ;45 [ . . . ] // c o n s t r u c t e u r67 // g e s t i o n des évènements s t anda rd8 pub l i c vo id manageUpdate ( ) {9 r e p a i n t ( ) ; // f o n c t i o n s p é c i f i q u e des composants SWING

10 }1112 // su r c h a r g e de l a méthode d ’ a f f i c h a g e du composant13 pub l i c vo id pa i n t ( G raph i c s g ) {14 super . p a i n t ( g ) ;15 [ . . . ] // code à a j o u t e r pour d e s s i n e r ce que l ’ on veut16 }17 }

Vincent Guigue LI260 - Course de Voiture 40/47

Page 43: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Surcharge du JPanel : méthode paint

1 Appel à rafraichir (venant d’autres éléments du programme, dusystème...)

2 La JFrame notifie tous ses éléments (transmission enprofondeur dans l’arbre)

3 Le JPanel fait alors appel à sa méthode standard publicvoid paint(Graphics g)

La méthode transmet un pointeur permettant de dessiner :

Vincent Guigue LI260 - Course de Voiture 41/47

Page 44: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

ObserverSWING

Maintenant que le fonctionnement de SWING est clarifié, vousdevez concevoir des Observer adéquats...

Les observers reçoivent le pointeur Graphics et se dessinent euxmêmes...

1 pub l i c i n t e r f a c e ObserverSWING {2 pub l i c vo id p r i n t ( G raph i c s g ) ;3 }

NB : l’affichage est entièrement fait à chaque appel, il faut donctout dessiner (Circuit, Voiture...). Rien n’est persistent.

Vincent Guigue LI260 - Course de Voiture 42/47

Page 45: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

ObserverSWING : exemple

Implémentation basique pour la voiture :1 pub l i c c l a s s Vo i t u r eOb s e r v e r implements ObserverSWING{2 p r i v a t e Vo i t u r e v o i t u r e ;3 p r i v a t e Co lo r c o l o r = Co lo r . y e l l ow ;45 pub l i c Vo i t u r eObs e r v eu r ( Vo i t u r e v o i t u r e ) {6 t h i s . v o i t u r e = v o i t u r e ;7 }89 pub l i c i n t getX ( ){ re tu rn ( i n t ) v o i t u r e . g e t P o s i t i o n ( ) . getX ( ) ; }

1011 pub l i c i n t getY ( ){ re tu rn ( i n t ) v o i t u r e . g e t P o s i t i o n ( ) . getY ( ) ; }1213 pub l i c vo id p r i n t ( G raph i c s g ){14 g . s e t C o l o r ( c o l o r ) ;15 g . drawRect ( getX ( ) , getY ( ) , 2 , 2 ) ;16 }17 }

Vincent Guigue LI260 - Course de Voiture 43/47

Page 46: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

CircuitObserver et affichage d’image

L’affichage d’une image est trivial une fois étudiée la javadoc deGraphics :

1 // dans C i r c u i tO b s e r v e r23 p r i v a t e Image t rack Im ;4 [ . . . ] // c o n s t r u c t e u r56 pub l i c vo id p r i n t ( G raph i c s g ) {7 g . drawImage ( t rack Im , 0 , 0 , nu l l ) ;8 }

Vincent Guigue LI260 - Course de Voiture 44/47

Page 47: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Depuis le main

1 JFrame f en = new JFrame ( ) ;2 IHMSwing ihm = new IHMSwing ( ) ;34 ihm . add (new C i r c u i tOb s e r v e u r ( t r a c k ) ) ;5 ihm . add (new Vo i t u r eObs e r v eu r ( v ) ) ;6 ihm . add (new T r a j e c t o i r eOb s e r v e u r ( v ) ) ;7 ihm . add (new RadarObserveur ( s t r a t e g y . getRadar ( ) , v ) ) ;89 simu . add ( ihm ) ; // p o s s i b i l i t é de met t re p l u s i e u r s obs

1011 ihm . s e t P r e f e r r e d S i z e (new Dimens ion (768 , 1 024 ) ) ;12 f en . se tContentPane ( ihm ) ;13 f en . s e t V i s i b l e ( t rue ) ;14 f en . pack ( ) ;1516 simu . p l a y ( ) ;

Vincent Guigue LI260 - Course de Voiture 45/47

Page 48: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Quelques astuces utiles

◦ Quitter le programme proprement- En fermant la fenêtre JFrame

1 JFrame windows = new JFrame ( ) ;2 windows . s e tD e f a u l t C l o s eOp e r a t i o n ( JFrame .EXIT_ON_CLOSE) ;

- Suite à un clic sur Quitter

1 System . e x i t ( 0 ) ;

◦ Bug de gestion de la taille des JTextField1 J t e x t F i e l d t e x t F i e l d = new J t e x t F i e l d ( 4 0 ) ; // 40 c a r a c t è r e s2 t e x t F i e l d . setMaximumSize ( t e x t F i e l d . g e t P r e f e r r e d S i z e ( ) ) ;

Vincent Guigue LI260 - Course de Voiture 46/47

Page 49: Cours 4 : IHM, MVCguigue/wikihomepage/uploads/... · MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation Cours 4 : IHM, MVC VincentGuigue UPMC-LIP6 Vincent Guigue

MVC - observer MVC - évènements SWING Dialogue avancé Personnalisation

Quelques astuces utiles (2)

Gestion du rafraîchissement des JPanel :Plusieurs problèmes se posent :◦ courses trop rapides◦ affichage qui se met à jour seulement à la fin de la course

1 pub l i c vo id manageUpdate ( ) {2 t r y { // pour l e s c o u r s e s t r op r a p i d e s3 Thread . s l e e p ( 1 ) ;4 } catch ( I n t e r r u p t e dE x c e p t i o n e ) {5 e . p r i n t S t a c kT r a c e ( ) ;6 }7 // Pour que l ’ a f f i c h a g e s u i v e co r r e c t emen t8 Sw i n g U t i l i t i e s . i n v o k eL a t e r (new Runnable ( ) {9 pub l i c vo id run ( ) {

10 r e p a i n t ( ) ;11 }12 } ) ;1314 }

Vincent Guigue LI260 - Course de Voiture 47/47