B2 · Episode 6 · 5:05
JavaFX GUI Development: The Model-View-Controller Architecture
This episode explains how to apply the Model-View-Controller (MVC) architecture to JavaFX applications, separating business logic, user interface definition, and event handling to improve code readability and maintainability.
Source：Nicolas Hurtubise / classe.iro.umontreal.ca · License：CC BY-SA 4.0
Transcript
Vous vous retrouvez ici à avoir beaucoup, beaucoup,
You’ll find yourself here with many, many
beaucoup de possibilités à chaque moment,
possibilities at every moment,
puis ça commence à être un peu absurde d'initialiser tous nos objets dans la
then it starts to feel a bit absurd to initialize all our objects in the
fonction start, puis tous nos événements les définir dans la fonction start.
start function, and then define all our events there too.
Donc, la question ici, ça va être comment est- ce qu'on peut séparer le code pour
So, the question here is: how can we separate the code
garder le tout le plus lisible et
to keep it as readable
le plus maintenable possible.
and maintainable as possible?
Il y a plusieurs solutions, mais
There are several solutions, but a common one is to adopt a Model-View-Controller (MVC) architecture.
une solution commune est d'y aller avec une architecture de type modèle- vue-
So, the Model-View-Controller architecture
contrôleur. Donc, l'architecture modèle- vue- contrôleur,
is something quite classic
c'est quelque chose qui est assez classique
and works by not mixing everything together in one large function that simultaneously handles
et qui va. plutôt que de tout mêler dans une grosse fonction qui va à la fois faire
logic, event definitions, graphical component creation,
la logique, la définition d'événements, la définition de composants graphiques,
and input validation.
la validation d'entrées, on va séparer le
Instead, we separate the code based on what role each part plays in the program;
code en fonction de quelle fonction joue quel rôle dans le programme puis par rôle
and by role, we actually separate
en fait on va vraiment séparer les différentes parties du code selon la logique
the different parts of the code according to logic,
selon ce qui est affiché selon les événements selon tout ça
what’s displayed, what events trigger actions, and so on.
Donc modèle vue contrôleur, bah le nom le dit,
Model-View-Controller—the name says it all:
on va avoir trois composantes. Premièrement, on va avoir le modèle.
we’ll have three components. First, we’ll have the Model.
Donc le modèle, c'est le code qui va contenir la logique interne de l'application.
The Model is the code that contains the application’s internal logic.
Ça va regrouper toutes les données, tous les calculs,
It groups together all data and calculations,
tout ce qui est relié au problème qu'on essaie de résoudre.
everything related to the problem we’re trying to solve.
Mettons qu'on revient sur l'exemple de logiciel comptable, ben on va
Take our accounting software example: we’ll
avoir dans notre modèle de l'information sur les employés,
have employee-related information in our Model,
de l'information sur les salaires qu'on va verser,
information about salaries to be paid,
toute la partie calculer comment est- ce qu'on verse quel salaire à qui,
and all the logic for calculating how much salary to pay to whom,
ça va rentrer dans le modèle.
all of which falls under the Model’s responsibility.
Donc le modèle, c'est vraiment la logique interne de l'application,
So, the model is truly the application’s internal logic,
c'est toute l'information qui sert à faire marcher l'application,
that is, all the information needed to make the application run,
puis qui sert à résoudre le problème.
and then used to solve the problem.
On va nécessairement avoir la vue.
We will necessarily have the view.
La vue, c'est le code qui sert à définir ce qui doit être affiché.
The view is the code that defines what should be displayed.
Donc la vue vraiment ce qu'elle va contenir c'est la définition de comment par
So, what the view truly contains is the definition of how to display—for instance,
exemple comment est- ce qu'on affiche les
how to present the information from
informations d'une fiche de paie.
a pay slip.
Quel bouton va être placé où dans l'interface,
For example, where each button is placed in the interface,
quel texte est positionné où exactement.
and exactly where each piece of text is positioned.
Donc la vue ça va vraiment être du code simple qui va servir à dire qu'est- ce qui
So, the view will essentially be simple code
est affiché à quel endroit dans l'interface.
used to specify what appears where in the interface.
Finalement, on va avoir le contrôleur.
Finally, we’ll have the controller.
Le contrôleur, c'est le code qui va relier les deux ensemble.
The controller is the code that links the model and the view together.
Donc, par exemple, quand on clique
For example, when a user clicks a button in the interface
sur un bouton dans l'interface qui est afficher le chèque de paie,
labeled “Display Pay Slip,”
il faudrait qu'une fonction du contrôleur soit appelée.
a function in the controller must be called.
Cette fonction- là va demander au modèle de calculer toutes les valeurs pour
That function will ask the model to calculate all values
afficher la fiche de paie.
needed to display the pay slip.
Puis une fois que c'est calculé,
Once those values are calculated,
elle va demander à la vue d'afficher la scène qui correspond à la fiche de paie avec
it will then ask the view to display the corresponding pay-slip screen,
les valeurs qui ont été calculées.
populated with the calculated values.
Si on résume, toute la logique du code va se trouver dans les modèles.
In summary, all core business logic resides in the models.
Donc le modèle doit vraiment représenter votre problème, puis
So, the model must truly represent your real-world problem, and
doit pouvoir exister sans l'interface graphique.
must be able to exist independently of the graphical interface.
C'est vraiment quelque chose qui devrait pas dépendre de la présence ou de l'absence
This truly shouldn’t depend on whether buttons are present or absent.
de boutons. C'est quelque chose qui devrait vous permettre de résoudre votre
It should let you solve your problem abstractly, at its core.
problème dans l'abstrait, dans le fond.
at its core.
Les contrôleurs, c'est vraiment la section de votre code qui va se limiter à faire
Controllers are truly the part of your code that simply acts as a bridge.
le pont entre les événements qui peuvent survenir
connecting events that may occur in the view or in the model.
dans la vue ou dans le modèle.
in the view or in the model.
Donc c'est vraiment quelque chose de relativement simple qui va
So it’s truly something relatively simple.
vraiment juste coller les deux morceaux ensemble.
It really just glues those two pieces together.
Puis les vues devraient être vraiment aussi simples et stupides que possible,
Views, then, should be as simple and ‘dumb’ as possible.
pas de logique dans la vue, seulement de la définition d'interface et de la
No logic belongs in the view—only interface definitions and event declarations.
déclaration d'événements.
and event declarations.
Dans le fond, quand il y a un bouton qui peut déclencher un événement,
Fundamentally, when a button can trigger an event,
dans la vue on va définir le bouton, puis quand
in the view we simply define the button.
il y a un événement sur ce bouton- là, on va simplement
Then, when an event occurs on that button,
transférer cette information- là,
we simply pass along that information.
donc dire qu'il y a eu un événement au contrôleur,
That is, tell the controller: ‘An event has occurred.’
c'est le contrôleur qui va se charger de faire en
The controller then takes charge of ensuring
sorte que le modèle se comporte en fonction de ça,
the model behaves accordingly.
puis que les vues affichent la bonne affaire en fonction.
And views display the correct content accordingly.
Si on prend le petit exemple de décomposition modèle vue contrôleur,
Taking the classic Model-View-Controller (MVC) decomposition as an example,
on pourrait regarder le lecteur de musique VLC qui permet de lire de la musique avec
consider VLC, a music player that supports playing music, managing playlists,
des playlists, faire pause, faire play,
pausing, playing,
changer de chanson, revenir à une autre chanson,
switching tracks, returning to previous ones,
bref il y a toutes sortes de choses qu'on peut faire avec ça,
in short, offering all kinds of features.
c'est essentiellement un lecteur de musique standard.
It’s essentially a standard music player.
Comment est- ce qu'on pourrait appliquer le principe de modèle vue contrôleur là-
How could we apply the Model-View-Controller principle here?
dessus? Dans la vue, nécessairement,
In the view, we necessarily have
on va avoir la définition de la hiérarchie des composants graphiques.
the definition of the graphical components' hierarchy.
On va définir les boutons, on va définir la barre pour le temps,
We’ll define the buttons, and we’ll also define the time bar,
on va définir le temps restant, le temps total,
define the remaining time and the total time,
l'image qui va servir à afficher la pochette de l'album.
and the image used to display the album cover.
Donc ça, ça va être vraiment la partie de la vue.
So this will truly be the visual part.
Puis chacun des boutons va avoir un événement relié qui va
Then, each button will have an associated event that will
appeler le contrôleur pour lui dire il vient de se passer telle affaire.
call the controller to inform it that a specific event has just occurred.
Le modèle ensuite, le
Then, the model
modèle il faut que ce soit une représentation complètement indépendante de
must be a representation completely independent of
l'affichage graphique.
the graphical display.
Autrement dit, on pourrait avoir une classe,
In other words, we could have a class,
par exemple, qui représente une chanson.
for example, that represents a song.