B2 · Episode 10 · 5:14
Understanding MVC Architecture in JavaFX
This episode explains the Model-View-Controller (MVC) architecture in JavaFX, focusing on how to separate interface, logic, and control layers for flexibility and reusability—such as adapting a game from JavaFX to Android without rewriting core logic.
Source：Nicolas Hurtubise / classe.iro.umontreal.ca · License：CC BY-SA 4.0
Transcript
Même chose si je vais exécuter mon programme en mode ligne de commande,
The same applies if I run my program in command-line mode,
si j'affiche 10, 20 puis
if I display 10, then 20, and then
30, ce qui est affiché ici c'est
30—what appears here is
la moyenne de mes trois nombres.
the average of these three numbers.
Donc vraiment ici, j'ai la possibilité de modifier le modèle sans toucher à
So here, I can truly modify the model without changing
l'interface graphique,
the graphical interface,
sans toucher au contrôleur, et inversement, je peux
nor the controller. Conversely, I can
changer complètement l'interface, faire
completely change the interface—build
une autre interface dans une autre librairie graphique, sans toucher au modèle.
a new interface using a different graphics library, without touching the model.
Ça peut être particulièrement pratique si
This can be especially useful if
vous faites un petit jeu, puis que vous voulez porter ce jeu- là sur Android,
you create a small game and later want to port that game to Android,
par exemple. Vous pouvez commencer par développer votre petit jeu avec JavaFX.
for example. You can start by developing your small game with JavaFX.
puis plus tard décider de réécrire la vue dans quelque chose de complètement
Later, you can decide to rewrite the view using something completely different—
différent, dans une librairie qui est complètement différente,
a graphics library that’s entirely different,
avec d'autres fonctions, avec d'autres façons de faire,
offering different features and different ways of doing things,
sans toucher à la logique de votre jeu.
without modifying your game’s core logic.
Fait que voilà, vous avez la possibilité en MVC, si vous faites bien ça,
So there you have it: with MVC, if implemented correctly,
d'avoir un contrôleur qui peut faire le pont entre plusieurs vues,
your controller can act as a bridge between multiple views,
plusieurs modèles, puis vous avez la possibilité de réutiliser votre modèle tel quel
and also between multiple models. Plus, you can reuse your model as-is
dans d'autres programmes.
in other programs.
Cette architecture- là, cette façon
This architecture—this way of writing your code—
d'écrire votre code est assez puissante et assez flexible,
is quite powerful and flexible,
et c'est ça qui va vous être demandé de faire pour la suite de vos programmes en
and this is exactly what you’ll be expected to do for future programs in JavaFX.
JavaFX. Bon, une petite note sur modèle vue contrôleur en pratique.
Alright, a quick practical note on Model-View-Controller.
Tout le monde s'entend sur le fait que c'est une bonne idée de séparer le code qui
Everyone agrees it’s a good idea to separate the code that
définit l'interface, du code qui gère les interactions entre l'affichage et la
defines the interface from the code that handles interactions between the display and the logic,
logique, et du code qui s'occupe de la logique du programme.
and from the code that handles the program’s business logic.
Dans le fond, tout le monde s'entend sur le fait que c'est une bonne idée de séparer
Fundamentally, everyone agrees it’s a good idea to separate the view from the model and controller.
la vue du modèle et du contrôleur.
the view, model, and controller.
Le concept est cependant pas défini de façon
The concept itself, however, is not defined
parfaitement unique, parfaitement exacte.
in a perfectly unique or perfectly precise way.
Et le code que je viens de vous montrer pour mon petit compteur,
And the code I just showed you for my little counter
c'est un exemple d'application de modèle vue contrôleur.
is an example of applying the Model-View-Controller (MVC) pattern.
D'une librairie à l'autre, d'un contexte à l'autre,
From one library to another, from one context to another,
vous allez tomber sur toutes sortes d'implantations du modèle vue contrôleur.
you’ll encounter all sorts of MVC implementations.
Vous avez ici cinq diagrammes différents qui essaient tous d'expliquer ce que c'est
Here are five different diagrams
le modèle vue contrôleur, et
that all try to explain what MVC is,
qui ont toutes des flèches dans tous les sens qui partent n'importe comment.
yet each has arrows pointing every which way, haphazardly.
Dans le fond, le concept à la base,
Fundamentally, the core idea
c'est vraiment d'être capable d'isoler les différentes composantes,
is truly about being able to isolate the different components,
mais la façon dont on définit les événements,
yet how events are defined,
la façon dont on définit qui appelle qui, qui connaît quoi, va
how we define who calls whom and who knows what,
changer selon le contexte.
will vary depending on the context.
Dans le fond, la structure de code que je vous montre dans mon exemple sur Studium,
In fact, the code structure I’m showing you in my Studium example
c'est un exemple, mais ça
is just one example,
peut pas tout le temps s'appliquer.
but it can’t always be applied.
mettons qu'on essaie d'appliquer le modèle vue contrôleur sur un site web plutôt que
Suppose we try applying the MVC pattern to a website instead of a graphical user interface application,
sur un logiciel à l'interface graphique.
then things change.
la façon d'interagir avec le site web va principalement se faire via la barre du
Interaction with the website mainly happens via the browser’s address bar and hyperlinks—
navigateur via les hyperliens mettons que vous allez sur perdu com
for instance, when you go to perdu.com,
C'est pas la vue qui définit c'est quoi l'événement qui peut se produire,
it’s not the view that defines what events can occur;
c'est vraiment juste que l'événement qui peut se produire,
rather, the only possible event is simply
c'est on veut afficher telle page, on veut afficher telle vue.
‘we want to display this page’ or ‘we want to display this view.’
Fait que la façon de faire le modèle vue contrôleur ici,
Here, the way we implement the Model-View-Controller (MVC) pattern
ce sera pas forcément de commencer par les vues qui définissent les événements.
won’t necessarily start with views that define events.
Dans le cas d'un logiciel graphique,
In the case of a graphical application,
vous avez pas le choix de partir de l'interface graphique.
you have no choice but to start from the graphical interface.
L'utilisateur va interagir directement avec la vue, donc c'est
The user interacts directly with the view, so
la vue qui va aller appeler le contrôleur puis lui dire qu'il vient de se passer ça.
the view calls the controller and tells it what just happened.
Mais donc dans les faits, il y a vraiment plusieurs façons d'arriver au même
In practice, there are truly several ways to achieve the same result,
résultat, puis toutes les façons sont pas tout le temps possibles selon le contexte
yet not all approaches are always possible depending on your context,
dans lequel vous êtes.
i.e., the specific context you’re in.
Notez finalement que modèle- vue- contrôleur,
Finally, note that Model-View-Controller (MVC)
c'est une architecture logicielle parmi d'autres.
is just one software architecture among many.
Le code MVC qu'on va vous demander d'écrire dans le cadre du cours,
The MVC code you’ll be asked to write in this course,
le code qu'on vous montre dans le cadre du cours,
and the code shown to you in class,
ça va faire office de code- école, ça va vous permettre de saisir
will serve as pedagogical example code—to help you grasp the concept more clearly,
mieux le concept, puis ça va vous donner des bases sur la
and to give you a foundation in separating different components’ responsibilities.
séparation des différentes composantes.
(This separation)
Mais sachez que si vous vous intéressez à JavaFX en dehors du cours,
Also, be aware: if you’re interested in JavaFX beyond this course,
il y a d'autres patterns de développement qui sont utilisés en pratique.
other development patterns are actually used in practice.
Les bonnes pratiques de JavaFX vont demander plus de notions que ce qu'on a le temps
Best practices for JavaFX involve concepts
de voir, vont demander d'autres types d'architecture que ce qu'on a le temps de
beyond what we have time to cover in class,
voir, ça dépasse les buts du cours,
and require other architectural approaches beyond our course’s scope.
donc si jamais c'est quelque chose qui vous intéresse,
So, if this interests you,
si vous voulez continuer à écrire du JavaFX,
and you’d like to keep writing JavaFX applications,
mais sachez que ce que vous allez écrire dans le cadre du cours,
keep in mind that the code you’ll write in this course
c'est plus un code école, c'est plus quelque chose qui va vous permettre de
is primarily educational—it’s designed to help you understand the general concept,
comprendre le concept général que de vraiment
not to teach you JavaFX specifically.
apprendre JavaFX en particulier.
(It doesn’t equate to real-world JavaFX expertise.)
Donc voilà pour ça, ça fait le tour des interfaces graphiques.
So that's it for graphical interfaces.
Si vous avez des questions, je vous invite à aller les poser sur le forum sur
If you have any questions, please go to
Studium. S'il y a des choses qui sont pas claires,
the Studium forum to ask them. If anything is unclear,
on va répondre à vos questions sur le forum.
we’ll answer your questions there.