Swing
PARTIE 3 : MVC
IntroductionDans cette troisième partie, nous allons voir l'architecture MVC à travers un exemple complet. Ce sera le dernier tutorial consacré à Swing, il y aura peut etre un tutorial sur comment concevoir ses composants graphiques... Les 3 tutoriaux sont une initiations à Swing, j'espere que vous progesserez 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 tutorial, est disponible sur le site (
ici) pour éviter de mettre tout le code dans ce tutorial et pour eviter que vous le tapiez! Nous verrons que les parties les plus importantes.
Concepts abordés :
-MVC
-JFrame, JButton, JTextField, BorderLayout, GridLayout
1. Modele Vue Controleur (MVC)J'avais mentionné le MVC dans le premier tutorial sans trop m'y attarder. SurWikipedia 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 recherche
Ce 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 modele de conception logicielle c'est a dire une maniere d'organiser les differentes parties du code pour une application graphique. Elle sépare l'application en 3 parties : le modele (le programme), la vue (l'interface graphique) et le controleur (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.
2. Le ModeleLe modele est la partie qui réalise tout les traitements c'est a dire pour nous, réalise tout les calculs de la calculette. Expliquer le modele ici n'apporte
pas grand chose, c'est pour cela que je vous invite a regarder mon code (
ici), la classe CalculetteModele
Le modele contient les operations d'ajout, de soustraction, multiplication et division c'est a dire les operations possibles de la calcullette. 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 meme 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 systeme de skin par exemple) , faudra tout recoder? Pour porter une application sur un autre systeme (bon c'est vrai qu'en Java la question ne se pose pas trop) faudra tout reprendre pour adapter l'interface graphique à l'autre systeme d'exploitation...Pas trés flexible! Coder une ligne coute cher (environ 15 dollars), maintenir une ligne de code coute 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
3. La VueLa vue est la representation graphique du modele à savoir ici la calculette. Nous allons créér un panel numérique ainsi que des boutons qui nous permettrons d'effecteur les differentes operations. Reportez vous au code (
ici), la classe
CalculetteVueNous allons utiliser 2 panels pour placer nos objets : un panel pour la fenetre entiere et un panel pour les boutons.
BorderLayout :Pour la fenetre entiere, nous allons utiliser un BorderLayout. Ce layout permet de placer de placer des objets dans plusieures 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 a la souris. Celui çi nous servira a afficher les resultats des operations ainsi que les nombres entrés.
Pour récuperer 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écuperer un entier a 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 placons 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 parametre du constructeur du GridLayout est le nombre de lignes et le deuxieme parametre le nombre de lignes.
Les boutons :Les boutons sont des simples JButton comme nous avons vu dans la premiere partie. Toutefois, MVC oblige, la gestion d'evenement des boutons (c'est a dire quand on clique dessus) ne doit pas etre fait dans la vue mais dans le controleur que nous allons voir.
4. Le ControleurLe controleur gere les interactions avec l'interface graphique. Notre controleur gere les evenements des boutons quand on clique dessus. La classe controleur implémente donc un ActionListener c'est a dire un "écouteur" de boutons (voir partie 2). Le controleur ne fait pas de traitement, ne modifie pas de données, il est juste la passerelle entre le modele, l'interface graphique et l'utilisateur.
Quand on clique sur un chiffre du pavé numérique par exemple, le controleur appelle une fonction de la vue pour lui dire d'ajouter un chiffre a la zone de sélection.
Quand on clique sur une operation, le controleur appelle une fonction du modele pour effectuer l'operation et ensuite le controleur signale à la vue qu'elle doit mettre a jour sa vue c'est a dire afficher le résultat de l'opération.
Je vous invite a regarder la classe
CalculetteControleurConclusionVoila, j'ai finit mes 3 tutoriaux sur l'initiation à Swing, il reste tant de choses à découvrir!. Je sais qu'ils sont loins d'etre parfaits mais bon j'ai fait de mon mieux pour la communauté! Pour toutes questions n'hesitez pas! Je réponds toujours (dans la mesure du possible :D )
Merci de votre lecture
TucoBouch