B2 · Episode 7 · 4:56
JavaFX Music Player Architecture with MVC
This episode explains the Model-View-Controller (MVC) architecture for a JavaFX music player, clarifying how the model handles data and logic (e.g., song metadata, playback state), the view manages the graphical interface, and the controller mediates communication between them—enabling maintainability, testability, and separation of concerns.
Source：Nicolas Hurtubise / classe.iro.umontreal.ca · License：CC BY-SA 4.0
Transcript
On aurait là- dedans des informations reliées à une chanson en particulier,
This would contain information related to a specific song,
par exemple le titre, l'album, la durée, l'image de la pochette,
for example, the title, the album, the duration, and the album cover image,
le fichier qui est associé à ça.
and the associated audio file.
Ça contiendrait aussi l'état de la chanson qui est en train d'être jouée,
It would also contain the state of the song currently playing,
mettons. Combien de temps qui
for instance, how much time remains,
reste, est- ce qu'on est en mode play, est- ce qu'on est en mode pause,
whether we’re in play mode or pause mode,
tout ça. On pourrait avoir une classe générale
and so on. We could create a general class,
qui représente notre lecteur de musique,
to represent our music player,
ça contiendrait par exemple une playlist, ça contiendrait la chanson actuelle,
for example, containing a playlist and the current song,
puis ça définirait dans le fond toutes les actions abstraites.
and defining all abstract actions.
Pour qu'est- ce qu'on peut faire pour modifier l'état du lecteur de musique.
That is: what operations can we perform to change the player’s state?
Par exemple, passer à la prochaine chanson,
For example, skip to the next song,
ajouter une chanson dans la playlist, mettre la chanson
add a song to the playlist,
actuellement en pause, télécharger la pochette, toutes ces choses- là,
pause the current song, download the album cover—all such features,
ça irait dans le modèle.
would belong to the model.
Vraiment toutes ces choses- là,
Indeed, all these features,
c'est quelque chose qui pourrait exister sans l'interface graphique
could exist independently of any graphical interface,
et qui résoudrait quand même notre problème.
yet still solve our practical problem.
Comme je l'ai mentionné, le contrôleur c'est ce qui va relier les deux.
As I mentioned earlier, the controller links these two parts.
Dans le fond, quand on clique sur un bouton,
Essentially, when we click a button,
quand on clique sur un bouton dans l'interface,
when we click a button in the interface,
il faut que le contrôleur soit visé, puis à ce moment- là,
the controller must be invoked—and at that moment,
les méthodes dans le modèle vont être appelées.
the methods in the model will be called.
Quand on clique sur le bouton Next, au
When we click the 'Next' button,
niveau du modèle, il faudrait que la playlist passe
at the model level, the playlist must advance to the next song,
à la prochaine chanson.
and that’s its role.
Quand on clique sur pause, il faut que la chanson actuelle soit mise en pause.
When you click pause,
Puis inversement, quand le modèle est modifié,
Conversely, when the model changes,
il faut que le contrôleur soit avisé pour dire à la vue de se mettre à jour.
the controller must be notified so it can tell the view to update itself.
Dans le fond, quand il y a une chanson qui termine,
In practice, when a song finishes playing,
on passe automatiquement à la prochaine chanson.
it automatically advances to the next song.
Il faut changer la pochette d'album qui est affichée,
You need to change the album cover being displayed,
le titre de la chanson qui est affiché, tout ça.
the currently displayed song title, and all such elements.
Donc, ça va dans les deux sens.
So, this communication goes both ways.
Le contrôleur ne devrait vraiment avoir aucune autre logique que celle qui va faire
The controller itself should contain no other logic,
la communication entre la vue et le modèle.
only the logic that handles communication between the view and the model.
Fait que la décomposition MVC nous offre un assez gros avantage par rapport à tout
Thus, the MVC architecture offers a significant advantage over putting all code inside the start function,
mettre dans la fonction start, surtout au niveau de la maintenabilité du code.
especially regarding code maintainability.
Si vous voyez qu'il y a un bug au niveau de l'affichage,
If you spot a display bug,
ben vous savez tout de suite que vous avez besoin d'aller chercher l'erreur au
you immediately know you need to look into
niveau des classes reliées à la vue.
the classes related to the view.
S'il y a un problème de logique,
If there’s a logic problem,
ben vous savez tout de suite que vous devez chercher seulement dans les classes
you instantly know you only need to examine
reliées au modèle.
the classes related to the model.
Puis au niveau des tests unitaires, une
Also, at the unit testing level,
application graphique est très difficile à tester.
a graphical application is very hard to test.
Dans le fond, si toute votre logique dépend du bouton,
In fact, if all your logic depends on buttons—
puis dépend de la présence ou du clic dans un bouton.
for example, on whether a button exists or gets clicked,
ça devient très difficile d'écrire des tests,
writing tests becomes extremely difficult;
vous commencez à devoir trouver des façons weird de simuler des clics dans
you end up having to devise odd ways
l'interface. C'est vraiment pas très pratique.
to simulate clicks in the interface—which is truly impractical.
En MVC en particulier, le modèle va être indépendant de la vue,
In MVC, especially, the model will be independent of the view,
ce qui veut dire qu'on peut écrire des tests pour notre modèle exactement comme on
which means we can write tests for our model exactly as we would,
le ferait dans le cas où on aurait du code complètement en ligne de commande.
if our code were entirely command-line based.
Ok, j'aimerais ça revenir sur à quoi sert le contrôleur.
OK, I’d like to revisit what the controller is for.
Donc généralement quand j'explique le concept de modèle vue contrôleur,
So, generally when I explain the model-view-controller concept,
le modèle ça va assez bien, le modèle c'est assez clair,
the model part goes quite well—the model is fairly clear,
c'est la logique du code, c'est les fonctions qui servent à faire la
it’s the logic of the code—the functions that handle the business logic,
logique, c'est aussi les
and it also includes the data.
données. La vue c'est assez clair, la vue c'est la définition de l'interface.
The view is also clear—it’s the definition of the user interface.
Le contrôleur peut sembler
The controller, however, may seem
un peu plus flou ou un peu redondant.
a bit vague or somewhat redundant.
Dans le fond, la question c'est pourquoi est- ce qu'on pourrait pas avoir seulement
Fundamentally, the question is: why couldn’t we just have
une structure vue modèle?
a simple view-model structure?
Pourquoi est- ce qu'on pourrait pas seulement avoir la vue qui
Why couldn’t the view simply create the model?
crée le modèle?
That’s it?
Quand il y a quelque chose qui se passe dans la vue,
When something happens in the view,
il faut avertir le modèle. Quand il y a quelque chose dans le modèle qui se passe,
we need to notify the model. When something happens in the model,
il faut avertir la vue.
we need to notify the view.
Pourquoi est- ce qu'on a besoin d'un contrôleur qui fait le pont entre les deux?
So why do we need a controller to act as a bridge between them?
Puis la réponse à ça, c'est que la présence du contrôleur,
The answer is that the presence of the controller
c'est ce qui permet vraiment d'isoler le modèle de la vue.
is what truly enables isolation between the model and the view.
Ce qui permet vraiment de faire en sorte que la vue a pas besoin de connaître le
It ensures the view doesn’t need to know about the model to exist,
modèle pour exister, puis
and
le modèle a pas besoin de
the model doesn’t need to know about the view,
connaître la vue pour exister.
in order to exist.
Et ça, ça a des avantages assez intéressants,
And this has some quite interesting advantages,
entre autres le fait qu'on peut réutiliser un même modèle avec différentes vues.
for instance, the ability to reuse the same model with different views.
Ici, vous avez une screenshot du encore le lecteur de musique VLC,
Here you see a screenshot of the VLC media player,
donc le même que tout à l'heure,
the same one we just mentioned,
qui possède aussi une interface en ligne de commande.
which also offers a command-line interface.
Donc plutôt que d'afficher la playlist de
So instead of displaying the playlist graphically,
façon graphique, puis d'afficher le titre du fichier puis
then showing the current file’s title,
tout ça en interface graphique,
and all that in a graphical interface,
On a exactement le même modèle, on a exactement la même application,
we use exactly the same model and the same application,
la même logique, mais avec une interface codée dans une autre librairie
with identical logic,
complètement, dans une librairie qui permet d'afficher des choses en ligne de
but with an interface coded entirely in a different library—one designed for command-line display.
commande. L'inverse est également vrai.
The reverse is also true.
Ça devrait être possible de réutiliser une même vue pour afficher différents
In theory, the same view could be reused to display different models,
modèles, dans la mesure où les modèles sont compatibles entre eux bien sûr.
provided those models are compatible with each other, of course.
On a un bel exemple de ça avec le
A great example of this is the card game program,
programme. Ce programme- là, ce petit jeu de cartes- là de Gnome qui
this small GNOME card game,
est disponible sur Linux.
available on Linux.