B2 · Episode 5 · 5:08
JavaFX Graphical User Interfaces Basics
This episode explains core JavaFX concepts—Stage and Scene—and demonstrates how to set up a primary window, create and switch between multiple scenes (e.g., a splash screen and main application interface), and build interactive UIs with buttons, text, and layout containers like BorderPane and HBox.
Source：Nicolas Hurtubise / classe.iro.umontreal.ca · License：CC BY-SA 4.0
Transcript
Donc quand on crée une application,
So, when we create an application,
on doit absolument fournir une scène au stage par défaut.
we must absolutely provide a scene to the default stage.
Dans le fond, quand on crée une application,
In fact, when we create an application,
la méthode start reçoit en paramètre un primary stage,
the start method receives a primary stage as its parameter,
qui est dans le fond la première fenêtre de notre application.
which is essentially the first window of our application.
Puis pour que quelque chose soit affiché dedans,
Then, to display something inside it,
il faut aller construire un arbre
we need to build a tree,
qui va correspondre à la scène qu'on souhaite afficher.
which corresponds to the scene we wish to display.
Ce qu'on fait avec primaryStage.
That’s what we do with primaryStage.
Scene comme ça, mais il n'y a rien qui nous empêche de créer d'autres scènes puis de
We create a Scene like this, yet nothing prevents us from creating additional scenes and then,
les afficher plus tard ou de les afficher en alternance.
displaying them later—or even switching between them.
Dans le fond, à n'importe quel moment,
In fact, at any time,
on peut décider de modifier la scène active en utilisant stage.
we can decide to change the active scene using the stage.
Scene. On n'est pas obligé de faire ça au début seulement.
We’re not required to do this only at the beginning.
On pourrait par exemple décider d'ajouter un splash screen à notre application.
For example, we could add a splash screen to our application.
Dans le fond, un splash screen, c'est quoi?
So, what exactly is a splash screen?
C'est une espèce de petite image qui s'affiche au début de l'exécution et qui montre
It’s a small image displayed at the very beginning of execution—showing, for instance,
le logo et la version du programme, par exemple.
the program’s logo and version number.
Donc, c'est le genre de chose qu'on fait quand on a un programme qui charge très
So, this is the kind of thing we use when our program loads quite slowly.
tranquillement.
Its loading proceeds very smoothly.
Il y a des programmes comme GIMP, comme Photoshop,
Programs like GIMP or Photoshop,
qui vont simplement montrer une petite image pendant que.
simply show a small image while,
les composantes du programme se chargent.
the program’s components are loading.
Donc dès qu'on clique quelque part dans cette image- là ou dès qu'on a fini de
So, as soon as someone clicks anywhere on that image—or once,
charger les ressources à charger,
all resources to be loaded have finished loading,
mais on pourrait changer la scène pour afficher le vrai programme la vraie scène
we can switch the scene to display the real application—the actual scene containing what we truly want to do.
qui contient vraiment ce qu'on veut faire mettons qu'on s'intéressait à faire ça en
Suppose we wanted to implement this in JavaFX,
java fx on pourrait faire de quoi dans ce style là
we could do something like this:
on aurait mettons un hbox comme ça qui est la racine de notre splash screen
For instance, use an HBox as the root of our splash screen,
La scène elle même va
and the scene itself will,
contenir quelque chose de très très simple,
contain something extremely simple,
disons une image comme ça qui est l'image
say, an image like this—one,
qu'on souhaite afficher au tout début.
that we wish to display right at the beginning.
Puis, puis, puis, puis, puis, on va aller setter la scène comme étant cette scène-
Then, then, then, then, then, we’ll set the scene to be —
là par défaut au début, et quand on clique quelque part sur cette scène- là,
this scene as the default interface when the program starts; and when we click anywhere on this scene,
on va aller recharger le primary stage.
the primary stage will reload.
Donc on afficherait quelque chose qui a l'air de ça par exemple,
So, we’d end up displaying something like this, for example:
donc ça c'est notre image qu'on souhaite afficher, avec le logo,
This is our image to display, featuring our logo,
notre superbe logo, et la version.
our awesome logo, and the version number.
Quand on cliquerait quelque part,
When we click somewhere,
à ce moment- là on aurait notre programme principal,
at that moment, our main program interface appears,
on aurait vraiment ce qui nous intéresse de faire.
i.e., exactly what we actually want to achieve.
Fait que tout ça dans le fond c'est vraiment juste pour vous dire qu'une scène,
In short, all this is really just to tell you that a ‘scene’
c'est une façon de présenter des choses à l'utilisateur,
is a way to present content to the user,
mais vous pouvez avoir plusieurs scènes dans votre programme,
yet your program can have multiple scenes,
c'est même la base dans
and that’s actually fundamental to its design:
le fond. Si vous voulez un programme qui est minimalement intéressant,
If you want your program to be even minimally engaging,
vous risquez d'avoir plus qu'une seule scène dans votre programme,
you’ll likely need more than just one scene,
puis vous voulez que mettons quand on clique sur tel ou tel bouton,
for instance, you might want clicking a certain button to
ben ça change la scène.
switch to a different scene.
OK, avec tout ça, vous commencez peut- être à réaliser que
OK—through all this, you may now realize that
plus nos programmes vont devenir gros,
as our programs grow larger,
plus le code dans la fonction start va être un gros ramassis de définitions de
the code inside the start() method becomes increasingly cluttered—
composantes, de définitions d'événements, puis de plein d'affaires.
full of component definitions, event definitions, and many other things.
mettons qu'on reprend un petit programme que j'ai montré quelques slides plus tôt
For example, let’s revisit a small program I showed a few slides earlier,
sans vraiment expliquer ce que ça faisait dans le fond ce programme là ici c'est un
without fully explaining what it actually does. Fundamentally, it’s a counter,
genre de compteur donc c'est ce qu'on utilisait pour
which we used to demonstrate Border Layout,
démontrer le border layout le border
more precisely, the BorderPane.
pane pardon l'idée ici est qu'on a une fenêtre qui contient cinq éléments
The idea here is that the window contains five elements,
Au centre, on va avoir un compteur, donc une valeur qu'on peut modifier.
with a counter—whose value can be modified—at the center.
Puis sur les quatre côtés,
Then, on all four sides,
on a des boutons qui nous permettent d'ajouter un à la valeur ici,
we have buttons that let us add one to this value,
de soustraire un, de multiplier par deux, de diviser par deux.
subtract one, multiply by two, or divide by two.
Le code nécessaire pour faire tout ça
The code needed to do all this
aurait à peu près l'air de ça.
would look roughly like this.
Donc dans notre méthode start,
So, in our start method,
on va aller définir notre border pane comme étant la racine,
we’ll set our BorderPane as the root,
on crée notre scene, on crée une valeur qui va être la valeur du compteur initial,
create our scene, and create a variable for the counter’s initial value,
on va avoir un bouton pour incrémenter, un
then create an “increment” button, a
bouton pour doubler, on va avoir un texte pour afficher la valeur,
“double” button, and a text element to display the current value,
on va avoir un bouton pour diviser, un bouton pour décrémenter.
plus a “divide” button and a “decrement” button.
Quand on clique sur le bouton incrémenter, il
When we click the increment button,
faut modifier la valeur puis mettre à jour le texte qui affiche la valeur.
we must update the value, then refresh the text that displays it.
Quand on clique sur le bouton pour décrémenter, il faut soustraire quelque chose,
When we click the decrement button, we must subtract something,
il faut faire moins un à la valeur,
specifically subtract one from the value,
puis mettre à jour le texte.
then update the text.
Même chose pour le bouton doubler, même chose pour le bouton diviser.
The same logic applies to the double and divide buttons.
On va avoir du code qui va servir à positionner tout ça,
We’ll also write code to position everything,
donc à centrer ça dans chacune des zones.
so each element is centered within its respective area.
Il faut ajouter ça dans notre conteneur, on set la scène, on demande à afficher.
Then we add them to our container, set the scene, and request display.
Ok, donc il y a pas mal d'affaires.
Okay, so there’s quite a bit going on here.
Encore une fois, pour un petit compteur, c'est pas si pire que ça.
Still, for a small counter, it’s not so bad.
Mais ce qu'il faut voir ici, c'est que les éléments peuvent vraiment se produire
What matters here, though, is that events can occur at any time and in any order,
n'importe quand, dans n'importe quel ordre,
and
puis la logique finit par être éparpillée un peu partout.
the logic ends up scattered throughout the code.
Pour un compteur, ça passe encore, mais imaginez un logiciel comptable.
For a meter, it’s still acceptable, but imagine an accounting software.
Imaginez un logiciel comptable dans lequel vous avez des centaines de
Imagine an accounting software with hundreds of
fonctionnalités, dans lequel vous avez de la gestion de paye à faire,
features—such as payroll management,
vous avez de la gestion de clients, de la gestion de factures,
customer management, invoice management,
de la gestion d'impôts, de toutes sortes de choses.
tax management, and all sorts of other tasks.