Licence Bio Info Année Un modèle de conception pour les applications avec interfaces graphiques Le Modèle-Vue-Contrôleur

Transcription

1 Université Paris 7 Programmation objet Licence Bio Info Année TD n 7 - Correction Un modèle de conception pour les applications avec interfaces graphiques Le Modèle-Vue-Contrôleur Le TD d aujourd hui est très fortement en rapport avec le projet. Un peu d attention s il vous plaît! Exercice 1 Ce modèle de conception est l un des plus dur à comprendre. Non pas tant par sa complexité, mais parce qu il y a à peu près autant d interprétations de ce modèle, depuis sa première version Smalltalk, qu il y a d ouvrages en parlant. Cette mise en garde concernant les renseignements que vous pourriez avoir envie de chercher par vous même, on va ici vous présenter une seule version et tout devrait bien se passer. Ce modèle consiste à découpler une application en trois principaux rôles (le modèle, la vue, et le contrôleur, donc), afin que chaque rôle puisse être modifié ou remplacé facilement, et indépendamment des autres. Les différents adeptes du MVC sont néanmoins grosso-modo d accord sur ces points : Le modèle contient les données de l application. La vue est la représentation des données pour l utilisateur. Il peut y en avoir plusieurs, éventuellement. Le contrôleur permet à l utilisateur de modifier les données de l application. Il peut aussi éventuellement y en avoir plusieurs. Le modèle, même s il fait des calculs, doit être indépendant de la façon dont on présente les données. Et bien sur, comme tout le temps en objet, plus on peut encapsuler, mieux c est. Les différents MVC diffèrent surtout par les responsabilités accordées à la vue et au contrôleur (quid de l interface graphique, quand on clique sur une zone de l écran par exemple? Où est la frontière entre modèle et controleur?) et par la nature du couplage entre les rôles (on a au moins un controleur capable d agir sur un modèle capable d agir sur une vue, mais en pratique, ça suffit rarement, comme en Java ou beaucoup de composants sont à la fois vue et controleur). On veut réaliser un jeu pour entraîner des non-informaticiens à la technique subtile du clicgauche. La fenêtre principale du jeu présente une zone carrée, initialement verte, et un affichage du score total. Lorsqu on clique dans le carré, on gagne un point, sinon, on en perd un. De plus lorsqu on clique sur la zone carrée, elle s affiche en rouge. Si on clique à côté, elle s affiche en vert. Pour la modélisation, dans cet exercice, on ajoute comme contrainte qu on veut pouvoir ultérieurement ajouter d autres représentations du jeu, par exemple, entraîner l utilisateur à viser sur le clavier en tapant la lettre C pour viser le carré, ou aussi modifier le programme pour lui faire viser une cible ronde. Cela implique de bien rendre le modèle indépendant à la fois du contrôleur et de la vue. On ne vous demande pas de réaliser ces modifications, juste de faire en sorte qu elles soient réalisables sans modifier le modèle. 1

2 Les classes de la bibliothèque standard dont vous aurez besoin : java.awt.color, javax.swing.jframe, java.awt.dimension, java.awt.graphics, javax.swing.jpanel que vous avez déjà vues la semaine dernière. java.awt.event.mouseadapter, java.awt.event.mouseevent qui vous permettront de gérer les clics souris. Comme la semaine dernière, n hésitez pas à commencer à faire des impressions sur la console pour comprendre quand les méthodes sont appelées. Commencez par modéliser soigneusement votre programme en définissant le modèle, la (ou les ) vues, et le contrôleur. Vous ferez tout d abord cet exercice avec une fenêtre de taille fixe, 400 par 400, et un carré au milieu de la fenêtre de taille 100 par 100. Vous écrirez le score où vous voulez dans le même composant graphique. 1. Décrivez les responsabilités de chacun des rôles du MVC, et dégagez-en les relations dont vous allez avoir besoin entre ces classes. Tracez un diagramme dynamique au besoin. 2. Décrivez précisément le modèle et le contrôleur. Décrivez la méthode paint de votre vue. 3. Implémentez votre solution, en utilisant des commentaires au format javadoc. Correction : // fichier Cible.java import java.awt.color; import javax.swing.jframe; public class Cible extends JFrame{ public static final int TAILLE = 400 ; public static final int CENTRE = TAILLE / 2 ; public static final Color TOUCHE = Color.RED ; public static final Color RATE = Color.GREEN ; public static final int RAYON = 100 ; public Cible(){ super("cible") ; VueCible vue = new VueCible(); ModeleCible modele = new ModeleCible(vue); ControleurCible controleur = new ControleurCible(modele) ; setdefaultcloseoperation(jframe.exit_on_close) ; setcontentpane(vue) ; vue.setcontroleur(controleur) ; public static void main(string[] args) { Cible c = new Cible() ; c.pack() ; c.setresizable(true) ; c.setvisible(true) ; // fichier ControleurCible.java import java.awt.event.mouseadapter; import java.awt.event.mouseevent; 2

3 public class ControleurCible extends MouseAdapter{ private ModeleCible modele ; public ControleurCible(ModeleCible modele){ this.modele = modele ; private boolean coorddanscarre(int x, int y){ return ( (x > (Cible.CENTRE - (Cible.RAYON/2))) && (x < (Cible.CENTRE + (Cible.RAYON/2))) && (y > (Cible.CENTRE - (Cible.RAYON/2))) && (y < (Cible.CENTRE + (Cible.RAYON/2))) ) ; public void mouseclicked(mouseevent e){ int x = e.getx() ; int y = e.gety() ; System.out.println("click sur " + x + " " + y) ; if (coorddanscarre(x,y)) modele.updatezone(true) ; modele.updatezone(false) ; // fichier ModeleCible.java public class ModeleCible { private VueCible vue ; private boolean currentzone ; private int currentpoints ; public ModeleCible(VueCible vue){ this.vue = vue ; currentpoints = 0 ; public void updatezone( boolean zone ){ currentzone = zone ; if (zone) currentpoints ++ ; currentpoints -- ; vue.update(currentzone, currentpoints) ; // fichier VueCible.java import java.awt.color; import java.awt.dimension; import java.awt.graphics; import javax.swing.jpanel; /** * La vue est ici à la fois: * - la représentation sous forme de dessin de l état du jeu: traduire les données du modèle * en leur représentation graphique (t^ache duale de celle du contr^oleur) * - l interface utilisateur qui envoie les événements bruts au contr^oleur * pour constitution des requ^etes à envoyer au modèle. 3

4 */ public class VueCible extends JPanel{ private boolean touche; private int score; public VueCible(){ touche = false ; score = 0 ; private void dessinecarre(graphics g){ g.setcolor(color.black) ; g.drawrect( Cible.CENTRE - (Cible.RAYON/2), Cible.CENTRE - (Cible.RAYON/2), Cible.RAYON, Cible.RAYON) ; private void coloriecarre(color color, Graphics g){ g.setcolor(color) ; g.fillrect( Cible.CENTRE - (Cible.RAYON/2), Cible.CENTRE - (Cible.RAYON/2), Cible.RAYON, Cible.RAYON) ; private void coloriefond(graphics g){ g.setcolor(color.white) ; g.fillrect(0,0,getwidth(), getheight()) ; private void affichescore(graphics g){ g.setcolor(color.black) ; g.drawstring("score: " + score, (Cible.TAILLE - Cible.RAYON)/2, (Cible.TAILLE - Cible.RAYON)/4 ) ; public void paint(graphics g){ coloriefond(g) ; if (touche) coloriecarre(cible.touche, g) ; coloriecarre(cible.rate, g) ; dessinecarre(g) ; affichescore(g); public void update(boolean touche, int score) { this.touche = touche ; this.score = score ; repaint() ; public void setcontroleur(controleurcible controleur) { addmouselistener(controleur) ; public Dimension getpreferredsize(){ 4

5 return new Dimension(Cible.TAILLE, Cible.TAILLE) ; Dans un deuxième temps, vous pourrez améliorer votre programme, voici deux idées d améliorations, mais vous pouvez laisser libre court à votre imagination : 1. Faites en sorte que votre fenêtre soit de taille modifiable par l utilisateur, tout en conservant la cible au milieu de la fenêtre et de la même taille. 2. Ajoutez un composant texte (un JLabel par exemple) et définissez le comme une nouvelle vue du modèle. Essayez de généraliser votre programme afin qu on puisse ajouter de nouvelles vues au modèle sans avoir à modifier cette classe. Correction : 1. Au lieu d utiliser les constantes de la classe CibleTAILLE et CENTRE, vous pouvez les calculer dynamiquement à l aide des méthodes getwidth() et getheight()qui renvoient la taille actuelle du composant. 2. Inspirez vous du TD précédent et utilisez une interface Vue qui sert à définir un observateur du modèle. Le modèle aura alors une liste des vues qui l observent, et pourra les actualiser en appellant sur tous ses vues la méthode update(currentzone, currentpoints) 5