Swing - Partie 3 : MVC Modèle Vue Contrôleur
Swing - Partie 3: MVC
Description
Partie 3 du tutoriel sur Swing. Thèmes : MVC, Calculette graphique
Introduction
Dans cette troisième partie, nous allons voir l'architecture MVC à travers un exemple complet. Ce sera le dernier tutoriel consacré à Swing, il y aura peut être un tutoriel sur comment concevoir ses composants graphiques... Les 3 tutoriaux sont une initiation à Swing, j'espère que vous progresserez vite maintenant que vous avez toutes les bases mais bon, comme on dit, "C'est en forgeant que l'on devient forgeron" donc à vos claviers!
L'application que nous allons concevoir dans ce tutoriel, est disponible sur le site (ici) pour éviter de mettre tout le code dans ce tutoriel et pour éviter que vous le tapiez! Nous verrons que les parties les plus importantes.
Concepts abordés :
- MVC
- JFrame, JButton, JTextField, BorderLayout, GridLayout
Modèle Vue Contrôleur (MVC)
J'avais mentionné le MVC dans le premier tutoriel sans trop m'y attarder. Sur Wikipedia on trouve la définition suivante :
L'architecture Modèle Vue Contrôleur (MVC) est un motif 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. Ce motif a été mis au point en 1979 par Trygve Reenskaug, qui travaillait alors sur SmalltalkXerox PARC. dans les laboratoires de rechercheCe modèle d'architecture impose la séparation entre les données, les traitements et la présentation, ce qui donne trois parties fondamentales dans l'application finale : le modèle, la vue et le contrôleur :
- Le Modèle représente le comportement de l'application : traitements des données, interactions avec la base de données, etc. Il décrit les données manipulées par l'application et définit les méthodes d'accès.
- la Vue correspond à l'interface avec laquelle l'utilisateur interagit. Les résultats renvoyés par le modèle sont dénués de toute présentation mais sont présentés par les vues. Plusieurs vues peuvent afficher les informations d'un même modèle. Elle peut être conçue en html, ou tout autre « langage » de présentation. La vue n'effectue aucun traitement, elle se contente d'afficher les résultats des traitements effectués par le modèle, et de permettre à l'utilisateur d'interagir avec elles.
- le Contrôleur prend en charge la gestion des événements de synchronisation pour mettre à jour la vue ou le modèle. Il n'effectue aucun traitement, ne modifie aucune donnée, il analyse la requête du client et se contente d'appeler le modèle adéquat et de renvoyer la vue correspondant à la demande.
Il faut comprendre que MVC est un modèle de conception logicielle c'est à dire une manière d'organiser les différentes parties du code pour une application graphique. Elle sépare l'application en 3 parties : le modèle (le programme), la vue (l'interface graphique) et le contrôleur (l'interaction avec l'utilisateur).
Pour mieux comprendre, nous allons réaliser une application complete : une calculette graphique! Cela nous permettra de revoir et d'approndir les concepts des deux premiers tutoriaux et de mettre en oeuvre le MVC.
Le modèle
Le modèle est la partie qui réalise tous les traitements c'est à dire pour nous, réalise tous les calculs de la calculette. Expliquer le modèle ici n'apporte
pas grand chose, c'est pour cela que je vous invite à regarder mon code (ici), la classe CalculetteModele
Le modèle contient les opérations d'ajout, de soustraction, multiplication et division c'est à dire les opérations possibles de la calculette. Elle contient aussi le total en cours etc.. Il faut bien comprendre que pour avoir un code propre, le plus réutilisable et avec une maintenance aisée, il faut dissocier au maximum la partie traitement des données et l'interface graphique. On voit beaucoup de programme (de débutant notamment) qui code tout dans la même classe mélangeant traitement et interface graphique.. C'est pas bon du tout! La grande qualité du modèle MVC est justement de dissocier traitement et interface graphique.
Pourquoi ? Imaginez, vous travaillez dans une équipe, comment partager le travail si tout est mélangé? Plus grave, si vous voulez changer l'interface graphique (un système de skin par exemple) , faudra tout recoder? Pour porter une application sur un autre système (bon c'est vrai qu'en Java la question ne se pose pas trop) faudra tout reprendre pour adapter l'interface graphique à l'autre système d'exploitation...Pas très flexible! Coder une ligne coûte cher (environ 15 dollars), maintenir une ligne de code coûte très cher (75 dollars !!!) , il vaut mieux perdre un peu de temps au début dans l'architecture de l'application pour gagner en efficacité et clarté plus tard. Voila c'est dit lol.
La vue
La vue est la représentation graphique du modèle à savoir ici la calculette. Nous allons créer un panel numérique ainsi que des boutons qui nous permettrons d'effecteur les différentes opérations. Reportez vous au code (ici), la classe CalculetteVue
Nous allons utiliser 2 panels pour placer nos objets : un panel pour la fenêtre entière et un panel pour les boutons.
BorderLayout :
Pour la fenêtre entière, nous allons utiliser un BorderLayout. Ce layout permet de placer de placer des objets dans plusieurs directions :
On peut ainsi placer des panel au Nord (en haut de la fenetre), au centre, à l'Est (a droite) etc...
Pour créér un BorderLayout :
JPanel panel=new JPanel(); panel.setLayout(new BorderLayout());
Pour placer un composant dans une direction, on utilise la fonction add du panel avec en parametre la direction :
panel.add(new JLabel("Mon Conposant"),BorderLayout.NORTH);
BorderLayout.NORTH place ainsi le composant au nord, BorderLayout.SOUTH au sud etc...
Nous placererons au Nord, la zone texte où s'affiche le texte et au centre le pavé numérique.
Au Nord :
La zone de texte est un JTextField. C'est un champ texte que l'on peut modifier à la souris. Celui-ci nous servira à afficher les résultats des opérations ainsi que les nombres entrés.
Pour récupérer le contenu d'un champ texte, il faut utiliser la fonction getText() qui retourne un objet String. Pour définir le contenu, on utilise setText().
Note : on veut récupérer un entier à partir de la zone de texte, or l'objet retourné par getText() est un String, il faut donc la convertir :
int entier=Integer.parseInt(edit.getText());
Si la chaine n'est pas valide (un nombre n'est pas entré), une exception est levée, cela nous permet de verifier la validité de l'entrée :
try{
int entier=Integer.parseInt(edit.getText());
}catch(Exception e)
{
//pas valide
}
Au centre :
Au centre nous plaçons le pavé numérique.
Les boutons sont placés selon une matrice (en grille si vous préférez), un LayoutManager réalise cela pour nous : le GridLayout.
JPanel panel=new JPanel(); panel.setLayout(new GridLayout(4,4));
Le premier paramètre du constructeur du GridLayout est le nombre de lignes et le deuxième paramètre le nombre de lignes.
Les boutons:
Les boutons sont des simples JButton comme nous avons vu dans la première partie. Toutefois, MVC oblige, la gestion d'évènement des boutons (c'est à dire quand on clique dessus) ne doit pas être fait dans la vue mais dans le contrôleur que nous allons voir.
Le Contrôleur
Le contrôleur gère les interactions avec l'interface graphique. Notre contrôleur gère les evènements des boutons quand on clique dessus. La classe contrôleur implémente donc un ActionListener c'est à dire un "écouteur" de boutons (voir partie 2). Le contrôleur ne fait pas de traitement, ne modifie pas de données, il est juste la passerelle entre le modèle, l'interface graphique et l'utilisateur.
Quand on clique sur un chiffre du pavé numérique par exemple, le contrôleur appelle une fonction de la vue pour lui dire d'ajouter un chiffre à la zone de sélection.
Quand on clique sur une opération, le contrôleur appelle une fonction du modèle pour effectuer l'opération et ensuite le contrôleur signale à la vue qu'elle doit mettre à jour sa vue c'est à dire afficher le résultat de l'opération.
Je vous invite à regarder la classe CalculetteControleur
Conclusion
Voila, j'ai fini mes 3 tutoriaux sur l'initiation à Swing, il reste tant de choses à découvrir!. Je sais qu'ils sont loin d'être parfaits mais bon j'ai fait de mon mieux pour la communauté! Pour toutes questions n'hésitez pas! Je réponds toujours (dans la mesure du possible :D )
Merci de votre lecture
TucoBouch
- Swing mvc
- Mvc swing - Meilleures réponses
- Mvc java swing - Meilleures réponses
- Actionlistener java swing - Conseils pratiques -Java
- Jtable swing - Forum Java
- Java swing animation ✓ - Forum Java
- Mvc - Conseils pratiques -PHP
- Swing videur - Forum PHP