Interaction Homme Machine

IHM
Université Saad
Dahlab de Blida

Série 4: Réalisation d’applications

interactives: Modèle-Vue-Contrôleur
(MVC) en JavaFx (Partie 1)

Mme BOUTOUMI
L3 ISIL/SIQ
 Historique
• L'idée de séparer l'interface utilisateur du reste du code est apparu
à la fin des années 1970, lorsque la principale modification
d’interface commençait a devenir incontournable:
 Passage de l'interface textuelle à une interface « graphique »
 Comment continuer à faire fonctionner les logiciels existants en
utilisant ce nouveau type d’affichage?
• En 1979 Trygve Reenskaug (équipe Smalltalk), proposa une solution
pour répondre au problème:
 Met en évidence le problème d’interdépendance des données
ainsi que le besoin de consulter les données
 Initialement appelée MVE (Model View Editor) puis MVC (Model
View Controller)
 Le patron de conception MVC
• Un patron de conception est une solution standardisée à un problème,
indépendante des langages de programmation.
• Une architecture logicielle est une manière de structurer une application ou
un ensemble de logiciels.
• Le Modèle-Vue-Contrôleur (MVC) est un patron de conception très utilisé dans
la conception des IHM, en particulier les sites et applications Web.
 Souvent présenté comme patron d’architecture
 Il présente un grand intérêt dans le travail en équipe et la répartition des
tâches.
 Il permet de mieux structurer son code source et de le séparer en trois
parties distinctes.

Modèle Vue Controleur

 MVC: structure du modèle
• Organiser, structurer une application interactive en
séparant:
 Les données et leurs traitements:
Le Modèle
 La représentation des données:
La Vue
 Le comportement de l’application:
Le Contrôleur
 Le Modèle (Model)
• Le Modèle est un ensemble de composants contenant les données et les opérations
logiques permettant la manipulation de ces données.
 Représente le comportement de l’application
 Les données métiers ainsi que la communication vers la structure de données
(SGBDR, NoSQL, XML,…).
• Rôle:
 Encapsuler les données de l’application
 Effectuer les traitements sur ces données
 Etre indépendant des vues et contrôleurs
• Conséquences :
 L'interface du modèle propose :
o La mise à jour des données
o La consultation des données
 Résultats du modèle dénués de toute présentation
 Maintenir une liste d'écouteurs (vues et/ou contrôleurs se déclarent comme
écouteurs)
 Prévenir les écouteurs lorsque la donnée est modifiée
 Implantation du design pattern Observer: Model, est Observable
 La Vue (View)
• La vue est une représentation visuelle des données de
l’application (UI)
• Rôle :
 Présenter les données du modèle
 Se maintenir à jour lorsque le modèle est modifié
 Récupérer tous les évènements de l’utilisateur.
 Transmettre au Controller les évènements utilisateur.
• Conséquences :
 Plusieurs vues possibles pour les mêmes données
 Doit s'enregistrer comme écouteur au niveau du modèle
(selon l’implémentation)
 La vue n'effectue aucun traitement
 Le Contrôleur (Controller)
• Le Contrôleur, reçoit les évènements envoyés par la Vue, et lors d’une
demande de modification demande au modèle de synchroniser la nouvelle
valeur
• Rôle :
 Permettre à l'utilisateur de modifier la donnée encapsulée dans le modèle
 Reçoit les événements de l’utilisateur :
o Par l'intermédiaire de la vue
o Il analyse la requête et applique un traitement de contrôle
 Déclenche les actions à effectuer :
o Il transmet des messages au modèle
o Si nécessaire, il informe la vue de se mettre à jour (Gestion des
événements de synchronisation)
• Conséquences :
 Doit éventuellement s'enregistrer comme écouteur du modèle pour être
mis à jour si le modèle est modifié (selon l’implémentation)
 Doit appeler les accesseurs du modèle en fonction des actions de
l’utilisateur
 Caractéristiques
• Les classes du niveau Modèle devraient encapsuler complètement
l’information et le comportement liés à la logique d’application
• Les classes de Vue sont responsables des entrées et des sorties, mais ne
contiennent pas de données ou de fonctionnalités liées à l’application
• Un modèle peut avoir plusieurs vues et contrôleurs. Un contrôleur peut
être associé à plusieurs vues, mais une vue n’ai associée qu’à un seul
contrôleur.
Architecture MVC
 Avantages du MVC (1/2)
• Evite le stockage des données à plusieurs endroits.
• Propose une définition cohérente du modèle, axé sur les
processus issus du domaine, et non axés sur les
interfaces hommes machines,
• Maintenance facilitée par le découplage vue(s)-modèle
• Possibilité pour le modèle d'informer la vue des
modifications incrémentalement (par exemple, ajout
d'une ligne dans une table).
 Avantages du MVC (2/2)
• Modularité
 Séparation claire entre les données du programme et la partie
graphique affichant les données.
 Permet une séparation des tâches de développement (une
personne peut s’occuper des vues, une autre du modèle, etc.).
 Permet l’exécution du modèle de façon indépendante de
l’interface .
• Extensibilité
 Permet l’ajout de nouvelles vues sans modifications du modèle.
 Garantit une plus grande portabilité en facilitant la migration du
modèle vers un nouveau type d’environnement de gestion
d’interface.
 Minimise l’impact de changements dans les spécifications liées à
l’interface sur le niveau de la logique d’application.
 Inconvénients
• L’inconvénient majeur du modèle MVC est qu’il n’est
pas adapté pour des projets de petite envergure.
• Pour respecter la logique de séparation des composant,
il faut créer un fichier/répertoire pour chacun de ces
derniers, augmentant ainsi de manière inutile la taille
de l’application.
• Coût des communications des composants
• Limite potentiellement floue entre les composants
 Partie 1: Implémentation de MVC pas à pas
• Implémenter en appliquant le patron MVC l’application
d’incrémenter et de décrémenter un compteur initialisé à
0. L'utilisateur n'a pas la possibilité de diminuer la valeur du
compteur en dessous de la valeur 0. L’exemple permet de
voir la séparation des composants de l’application. . Nous
n'utilisons ici qu'un seul package appelé «packMVC ». Dans
une application MVC de grande taille, il est conseillé plutôt
de clairement séparer les packages des modèles, des vues
et des contrôleurs.
 Partie 1: Implémentation de MVC pas à pas
a. LE MODELE : une classe décrivant les données et les
opérations de base effectuées sur ces données. Dans
notre exemple, il s’agit d’un entier « valeur » dont on
peut lire, incrémenter et décrémenter.
package packMVC;
public class CompModel {
private int cpt=0;
public void incrr(){ cpt++}
public void decrr(){cpt--;}
public int getCpt() {return cpt;
}
public void rasCpt() {
this.cpt = 0;
}
}
 Partie 1: Implémentation de MVC pas à pas
• La vue aussi consiste en une classe unique, nommé
CompVu. il s’agit d’une fenêtre contenant d’un bouton
(Button) permettant d’incrémenter la valeur initiale du
compteur, un autre bouton (Button) permettant de
décrémenter et d’afficher le résultat sur une étiquette
(Label).
 Partie 1: Implémentation de MVC pas à pas
public class CompView {
private Label l;
private Button bincr,bdecr; l.setFont(new Font("Arial", 40));
root.setCenter(l);
public CompView(Stage stage) { root.setBottom(bottomroot);
BorderPane root=new BorderPane(); Scene scene = new Scene(root);
FlowPane bottomroot= new stage.setTitle("Compteur / Decompteur");
FlowPane(); stage.setScene(scene);
stage.show();
bincr=new Button("++");
}
bdecr=new Button("--"); public Label getL() {
bdecr.setDisable(true); return l;
bottomroot.getChildren().addAll(binc }
r, bdecr); public Button getBincr() {
return bincr;
bottomroot.setPadding(new
}
Insets(10)); bottomroot.setHgap(10); public Button getBdecr() {
bottomroot.setAlignment(Pos.TOP_C return bdecr;
ENTER); }
l=new Label("0"); }
 Partie 1: Implémentation de MVC pas à pas
• Le contrôleur : son rôle est d’écouter les événements
provoqués par l’utilisateur et les interpréter en forme
de traitements effectués sur le modèle. Il consiste en
une seule classe, nommé CompController implémenté
comme suit:
 Partie 1: Implémentation de MVC pas à pas
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
public class CompController {
private CompModel model;
private CompView vue;
public CompController(CompModel m, CompView v) {
model = m;
vue = v;
}
public void initController() {
vue.getBincr().setOnAction( event -> {
if(model.getCpt()==0)
vue.getBdecr().setDisable(false);
model.incrr();
vue.getL().setText(Integer.toString(model.getCpt()));
});
 Partie 1: Implémentation de MVC pas à pas

vue.getBdecr().setOnAction( event -> {

model.decrr();
vue.getL().setText(Integer.toString(model.getCpt()));
if(model.getCpt()==0) vue.getBdecr().setDisable(true);
});
}
}
 Partie 1: Implémentation de MVC pas à pas
LA CLASSE PRINCIPALE : Elle crée les objets Model, View et Controller.
import javafx.application.Application;
import javafx.stage.Stage;
public class CompApp extends Application{
public static void main(String[] args) {
launch(args); }
public void start(Stage primaryStage) {
CompModel m = new CompModel();
CompView v = new CompView(primaryStage);
CompController c = new CompController(m, v);
c.initController();
}
}
 Devoir ISIL
• G1: Implémenter en appliquant le patron MVC une interface graphique
qui permet à l’utilisateur d’introduire le montant d’une somme en une
devise choisie et d’afficher son équivalent en une autre devises choisies.
• G2 : L'Indice de Masse Corporelle (IMC) est un indicateur plus fiable que
le poids pour évaluer votre corpulence. Il permet d’évaluer les risques
pour la santé liés au surpoids ou à la maigreur. Car le poids seul ne suffit
pas à diagnostiquer une obésité, un surpoids ou une maigreur
excessive. L'IMC est calculé en divisant le poids en kilos par le carré de la
taille en mètre. L'Organisation Mondiale de la Santé (OMS) a défini cet
indice comme le standard permettant d'identifier des problèmes de
poids. Implémenter en appliquant le patron MVC une interface
graphique qui permet à l’utilisateur de calculer l'IMC.
• G3: Reprendre l’exercice 3 de la série 3 en appliquant le patron MVC.
 Devoir SIQ
• G1: Reprendre l’exercice 2 de la série 3 en appliquant le patron MVC.
• G2 : On veut créer une application en appliquant le patron MVC
qui calcule le carré d’un nombre. Le résultat s'affiche
immédiatement, et s'actualise dès que le nombre est modifié. Le
résultat visible est le suivant :

• G3: On veut créer une application en appliquant le patron MVC qui

calcule la somme ou la soustraction de deux nombres. Le résultat
s'affiche immédiatement, et s'actualise dès qu’un nombre est modifié.