B2 · Episode 9 · 4:45
JavaFX GUIs and the MVC Architecture
This episode explains the Model-View-Controller (MVC) architecture in Java, demonstrating how the same controller and model can support both a JavaFX graphical interface and a console-based interface. It also shows how swapping the model—e.g., from a sum counter to an average calculator—changes behavior without altering views or interfaces.
Source：Nicolas Hurtubise / classe.iro.umontreal.ca · License：CC BY-SA 4.0
Transcript
Donc ça, c'est un peu l'overview de notre programme découpé en modèle- vue-
So, this is an overview of our program, structured using the model-view-
contrôleur. On a vraiment une classe qui sert à 100% à
controller pattern. We have a class whose sole purpose is to
définir qu'est- ce qui peut se passer.
define what actions are possible.
On a notre contrôleur ici qui va faire le pont entre la vue et le modèle,
Our controller here bridges the view and the model,
qui va être capable de dire au modèle il
and can tell the model:
faut rajouter un nombre, qui va être capable de dire à la vue il faut afficher telle
‘You need to add a number’; and can tell the view:
affaire. Puis notre modèle est indépendant de tout ça,
‘You need to display this information.’ Our model is entirely independent of all this,
notre modèle a vraiment pas besoin d'interface graphique pour exister.
and doesn’t require any graphical interface to function.
Donc ça c'est notre petit programme.
So, this is our small program.
Mettons qu'on voulait plutôt une interface en ligne de commande.
Suppose instead we wanted a command-line interface.
Bien, on pourrait le faire assez facilement.
Well, we could do that quite easily.
Dans le fond, notre contrôleur a juste besoin d'une
Essentially, our controller just needs a view class
classe vue qui répond à une commande qui update output.
that implements an ‘updateOutput’ method.
Dans le fond, quand on a une modification à faire au niveau du modèle,
Essentially, whenever there’s a change in the model,
il faut aller mettre à jour la vue.
we must update the view accordingly.
Fait que ici ce que j'ai fait,
So, what I did here was
c'est que je suis allé créer une interface vue. simplement pour définir que quelque
create a view interface—simply to declare that
chose qui est une vue
anything considered a ‘view’
doit posséder la fonction update output.
must implement the ‘updateOutput’ function.
Donc n'importe quelle vue doit posséder la fonction update output
Thus, any view must have an ‘updateOutput’ function,
à partir d'un texte à afficher.
which takes a text string to display as its parameter.
ma vue graphique c'est quelque chose qui possède cette fonction là donc c'est
My graphical view implements this function, so it’s
quelque chose qui est externe à l'application puisque c'est du JavaFX mais qui
external to the application (built with JavaFX), yet
implémente aussi mon interface pour définir ce que c'est qu'une vue
also implements my ‘view’ interface.
Quand on appelle cette fonction- là, ça vient modifier ma
When this function is called,
composante qui sert à afficher mon
it updates the component used to display the output,
texte qui sert à afficher l'output.
namely, the component responsible for showing the output text.
mettons qu'on veut une vue en console à la place mettons qu'on veut une vue en
Suppose we want a console view instead—suppose we want a console view
console à la place on
to replace it.
pourrait en écrire une dans le fond notre vue en console ça serait une classe
We could write one ourselves: our console view would be a class,
similaire à notre vue graphique
similar in structure to our graphical view.
Mais plutôt que de définir des
But instead of defining graphical components,
composantes graphiques, tout ce que ça va faire,
its sole function would be to
c'est aller créer une instance du contrôleur,
create an instance of the controller,
attendre des événements sur la ligne de commande,
then wait for events from the command line,
donc en lisant ça avec un scanner par exemple.
for example, by reading input with a scanner.
Update output, ce qu'on pourrait décider de faire,
Update the output—here's what we could decide to do:
c'est aller simplement vider la console en mettant plein de sauts de ligne,
simply clear the console by inserting many line breaks,
donc juste pour s'assurer qu'il n'y a rien d'affiché avant,
so that the screen is completely blank before anything appears.
puis après ça on va aller afficher de façon jolie une petite boîte qui va contenir
Then, we’ll display a neat box containing
notre nombre. Donc je fais une démonstration.
our number. Let me demonstrate.
Si j'exécute ça en console.
If I run this in the console.
Je vais avoir ça ici.
I’ll get this here.
Donc on attend des événements sur la console.
So we're waiting for new releases on the console.
Quand je tape quelque
When I type something,
chose, ça me le rajoute à mon compteur.
it adds it to my counter.
Puis à chaque fois qu'il se passe quelque chose, il faut, le contrôleur
Then each time something happens, the controller must
est le même que tout à l'heure, le modèle est le même que tout à l'heure.
be the same as just now—the model is also the same as just now.
Quand il y a un événement au niveau de la vue, au niveau de ce qui est rentré,
When an event occurs at the view level—that is, at the level of what is input—
ça avertit le contrôleur.
it notifies the controller.
De la même façon que tantôt, puis
Just as just now,
le contrôleur n'a pas bougé, le contrôleur fait la même chose.
the inspector hasn’t moved, and does the same thing.
Quand on ajoute un texte, il faut
When adding text, you must
modifier le modèle et demander à la vue de modifier son output.
modify the model and instruct the view to update its output.
Ok, fait, ça c'est pour faire une vue différente pour le même programme.
OK, done—that’s for creating a different view for the same program.
On pourrait bien entendu modifier le contrôleur pour ces deux vues-
We could, of course, modify the controller for these two views—
là. Présentement notre vue va simplement.
Right now, our view simply
aller afficher dans le fond un
displays in the background a
compteur qui incrémente du nombre qu'on lui demande.
counter that increments by the number requested.
Dans le fond, lui demande rajoute moi tel nombre,
Essentially, it tells it: ‘Add this number,’
rajoute moi tel nombre, rajoute moi tel nombre.
‘add this number,’ ‘add this number.’
On pourrait décider de se faire un compteur différent qui va plutôt
We could decide to create a different counter that will
garder la même interface, donc un autre modèle qui va être similaire au compteur
keep the same interface—so another model
qu'on avait avant.
similar to the earlier counter.
Donc on se dit que plutôt que d'avoir un compteur qui rajoute ces nombres,
So instead of having a counter that keeps adding numbers,
rajoute ces nombres, rajoute ces nombres, on va
‘add this number,’ ‘add this number,’ we’ll
faire un compteur qui affiche la moyenne.
create a counter that displays the average.
Donc encore une fois, c'est un modèle qui est très très simple,
Again, this is a very, very simple model,
mais c'est simplement pour illustrer.
but it’s just for illustration.
mettons que je veux que mon programme qui permet de rajouter des nombres affiche la
Suppose I want my program—which adds numbers—
moyenne des nombres ajoutés plutôt que le total, bien je
to display the average of the added numbers instead of the total; then I
pourrais aller changer ma classe ici.
could go change my class here.
Puis dire que maintenant mon modèle, c'est un compteur moyenne,
Then declare: ‘Now my model is an average counter,’
c'est un compteur de ce type- là.
a counter of this type.
Si je viens lancer mon programme graphique avec ça, j'ai
If I run my graphical program with this setup,
pas touché à mes vues, j'ai pas touché à mes définitions d'interface,
I haven’t touched any views or interface definitions,
puis la logique de l'application a été modifiée.
yet the application’s logic has been changed.
Maintenant si je dis que je veux ajouter 10, 20 puis 30,
Now, if I say I want to add 10, 20, and then 30,
ce qui est affiché ici c'est la moyenne de ces trois valeurs- là.
what appears here is the average of these three values.