24
2011/2012 F. Mallet 1 Modèle/Vue/Contrôleur F. Mallet [email protected] http://deptinfo.unice.fr/~fmallet/java/

Modèle/Vue/Contrôleur - deptinfo.unice.frdeptinfo.unice.fr/~fmallet/java/cours6.pdf · MVC - Bref historique Introduit par Trygve Reenskaug, 70s Xerox Parc, environnement SmallTalk-80

Embed Size (px)

Citation preview

2011/2012 F. Mallet 1

Modèle/Vue/Contrôleur

F. [email protected]

http://deptinfo.unice.fr/~fmallet/java/

Interfaces graphiquesSéparation du modèle et de la vue Changer, dynamiquement ou non, le « look&Feel » ou

le thème• Windows, MacOS, Motif, Java/Metal, …

Décomposer la complexité• Se concentrer sur la fonctionnalité• L’aspect est secondaire : + ou - simple, avec ou sans RAD

Gestion de vues multiples• HTML, WML, Swing, XML, …

2011/20122

F. Mallet

Exemple – Plusieurs vues

Joseph Bergin : http://csis.pace.edu/~bergin/

2011/2012 3F. Mallet

MVC - Bref historique

Introduit par Trygve Reenskaug, 70s Xerox Parc, environnement SmallTalk-80

Depuis, plusieurs adaptations et interprétations Dont MVP : Modèle/Vue/Présentation

Modèle Mémorise l’état courant (d’une partie) de l’application

Vue Affiche l’état courant du modèle

Contrôleur/Présentation Définit quand et comment le modèle et la vue sont modifiés

2011/2012 4F. Mallet

PAC : Un autre modèle d’agent

[Coutaz 88] Trois facettes : Présentation (C + V de MVC) Abstraction (M de MVC) Contrôle : communication entre agent et liaison entre A et P

Hiérarchisation : MVC ne définit de hiérarchie, ni les relations entre plusieurs

agents MVC ! Arbre : relation père-fils Heuristique de conception Communication par message

2011/2012 5F. Mallet

PAC et MVC : vue multiple

CA

CP

CP

M

C V1

V2

2011/2012 6F. Mallet

MVC - Fonctionnement

Modèle•État courant•Notifie les changements

Contrôleur•Traduit les interactions en actions sur le modèle•S’intègre au framework graphique : e.g. Swing

Vue•Dessine le modèle

Modifie l’état

Sélectionne

Notifie les vues ou le contrôleur

2011/2012 7F. Mallet

Le contrôleur

Doit s'intégrer à l'environnement graphique sélectionné : framework AWT : Ancien système graphique de Java Swing : Nouveau système graphique de Java SWT : Framework graphique de Eclipse (IBM) J2ME : classes pour les téléphones ou les PDA

Il faut donc connaître ce framework Connaître les classes principales Connaître les mécanismes d'extensions prévus C'est un travail long et fastidieux

2011/2012 8F. Mallet

L'environnement graphique de Java

A l'origine : AWT (paquetage java.awt) Un paquetage est un ensemble de classes regroupées

autour du même thèmeSwing a été rajouté : JDK 1.1 (javax.swing) Moins gourmand en mémoire Plus modulaire (basé sur MVC)

Le composant graphique le plus simple est représenté par la classe java.awt.Component

Le composant graphique swing le plus simple : javax.swing.JComponent qui hérite de java.awt.Component

2011/2012 9F. Mallet

java.awt.Component

Définit un élément graphique Une dimension

• Accesseur: Dimension getSize()• Modificateurs:

– void setSize(Dimension)

– ou void setSize(int,int)

Une position• Accesseur: java.awt.Point getLocation()• Modificateurs:

– void setLocation(java.awt.Point)

– ou void setLocation(int, int)

Dessiner le contenu• void paint(java.awt.Graphics g)

2011/2012 10F. Mallet

java.awt.Graphics

Contexte graphique (« morceau d’écran »)Permet de dessiner Changer de crayon : void setColor(Color) drawRect, drawOval, drawPolygon,

drawString, fillRect, fillOval drawImage(img, x, y, ImageObserver)

Obtenu automatiquement (repaint(), redimensionnement, etc.)

2011/2012 11F. Mallet

Méthodes à connaître

repaint() ! validate() ! setEnabled(true / false) : activé / désactivé (Rectangle) getBounds / setBounds(x,y, w, h) :

positionne et dimensionne getWidth() : largeur / getHeight() : hauteur getX() et getY() : obtenir une coordonnée setVisible(true / false) getBackground et setBackground [objet Color,

définition RGB]

2011/2012 12F. Mallet

javax.swing.JComponent

Hérite de ContainerMéthodes de commodité setPreferredSize setDoubleBuffered(true/false) / isDoubleBuffered() setOpaque(true / false)

Dessin à l’écran : paint appel paintComponent paintBorder paintChildren

2011/2012 13F. Mallet

Hiérarchie partielle

2011/2012 14F. Mallet

Petites listes des JComponents

Les boutons JButton /JToggleButton / JCheckBox / JRadioButton java.awt.ButtonGroup (méthode add)

Les icones : javax.swing.ImageIcon créée avec le nom d’un fichier image par exemple

Les champs textuels JTextField/ JTextArea

Menus : les JMenuBar, JMenu, JMenuItemEtc… http://docs.oracle.com/javase/tutorial/uiswing/

2011/2012 15F. Mallet

Les fenêtres graphiques : JFrame

Les fenêtres sont des JWindowLes JFrame sont des (hérite de) JWindow avec Un titre, un menu (éventuel), un contenu

Le contentPane est un Container contient des composants graphiques (java.awt.Component) JFrame fen = new JFrame("fenetre"); fen.getContentPane().add(new JButton("Ok"));

Barre de titreBarre de menu

Panneau de contenu (contentPane : Container)

2011/2012 16F. Mallet

JFrame : quelques méthodes

setVisible(boolean b) Cache ou fait apparaître une fenêtre

setTitle(String title) Modifie le titre de la fenêtre

setSize(int width, int height) Modifie la taille de la fenêtre

pack () Choisit la taille “préférée” en fonction du contenu

2011/2012 17F. Mallet

Positionnement dans un containers

Ils peuvent contenir plusieurs composants Mais avec quelle disposition ?

Il délègue le travail à un LayoutManager null : les composants sont positionnés par un

système de coordonnées – setBounds(10, 20, 100,200);

FlowLayout : les composants ont leur taille “préférée” et sont disposés dans l'ordre d'ajout

BorderLayout : Nord, Sud, Est, Ouest, Centre GridLayout : forme tabulaire ligne x colonne

La méthode setLayout permet de choisirPar défaut, contentPane utilise BorderLayout

2011/2012 18F. Mallet

java.awt.BorderLayout

JFrame fen = new JFrame();

Container cP = fen.getContentPane();

cP.add(new JButton("1"), "Center") ;

cP.add(new JButton("2"), "North") ;

cP.add(new JButton("3"), "South") ;

cP.add(new JButton("4"), "East") ;

cP.add(new JButton("555"), "West") ;

fen.setVisible(true);

North et South ont leur hauteur “préférée”East et West ont leur largeur “préférée”Center remplit le reste

2011/2012 19F. Mallet

java.awt.GridLayout

JFrame fen = new JFrame();

Container cP = fen.getContentPane();

cP.setLayout(new GridLayout(2,3));

cP.add(new JButton("1")) ;

cP.add(new JButton("2")) ;

cP.add(new JButton("3")) ;

cP.add(new JButton("4")) ;

cP.add(new JButton("555")) ;

fen.setVisible(true);

Toutes les cellules ont la même tailleCette taille dépend de la taille du Container

2011/2012 20F. Mallet

java.awt.FlowLayout

JFrame fen = new JFrame();

Container cP = fen.getContentPane();

cP.setLayout(new FlowLayout());

cP.add(new JButton("1")) ;

cP.add(new JButton("2")) ;

cP.add(new JButton("3")) ;

cP.add(new JButton("4")) ;

cP.add(new JButton("555")) ;

fen.setVisible(true);

Toutes les cellules ont leur taille “préférée”

2011/2012 21F. Mallet

Capter les évènements

Lorsqu'on clique sur un bouton Il notifie ses écouteurs (de type ActionListener)

Pour devenir un écouteur Il faut s'enregistrer (addActionListener) Il faut implémenter l'interface ActionListener

Le même écouteur peut écouter différents boutons

*

javax.swing java.awt.eventécouteurs

*

2011/2012 22F. Mallet

Exemple d'écouteur : CacheFrame

Un écouteur qui ferme une fenêtreimport javax.swing.JFrame;import java.awt.event.*;class CacheFrame implements ActionListener {

private JFrame fenetre ;CacheFrame(JFrame f) {this.fenetre = f;

}public void actionPerformed(ActionEvent ae) {

this.fenetre.setVisible(false); }

}

ActionListener

2011/2012 23F. Mallet

Enregistrer l'écouteur

JFrame f = new JFrame();CacheFrame ecouteur = new CacheFrame(f);JButton cB = new JButton("Cliquez-moi");f.getContentPane().add(cB);cB.addActionListener(ecouteur);f.setVisible(true);

Lorsqu'on clique sur cB Il notifie ses écouteurs enregistrés : ici ecouteur C'est-à-dire, il exécute leur méthode actionPerformed

• Ici, cette méthode cache la fenêtre : fenetre.setVisible(false)

2011/2012 24F. Mallet