B2 · 第5集 · 5:08
JavaFX图形界面基础
本集讲解JavaFX中场景（Scene）和舞台（Stage）的概念，演示如何创建启动界面、切换场景，以及构建多组件交互界面。
来源：Nicolas Hurtubise / classe.iro.umontreal.ca · 许可：CC BY-SA 4.0
字幕
Donc quand on crée une application,
因此，当我们创建一个应用程序时，
on doit absolument fournir une scène au stage par défaut.
必须为默认舞台提供一个场景。
Dans le fond, quand on crée une application,
实际上，当我们创建一个应用程序时，
la méthode start reçoit en paramètre un primary stage,
start方法会接收一个主舞台作为参数，
qui est dans le fond la première fenêtre de notre application.
它本质上就是我们应用程序的第一个窗口。
Puis pour que quelque chose soit affiché dedans,
接着，为了让其中显示内容，
il faut aller construire un arbre
我们需要构建一棵树，
qui va correspondre à la scène qu'on souhaite afficher.
这棵树对应我们希望显示的场景。
Ce qu'on fait avec primaryStage.
这就是我们用primaryStage来做的。
Scene comme ça, mais il n'y a rien qui nous empêche de créer d'autres scènes puis de
Scene（场景）是这样创建的，但并没有任何限制阻止我们创建其他场景，然后，
les afficher plus tard ou de les afficher en alternance.
在之后显示它们，或交替显示它们。
Dans le fond, à n'importe quel moment,
实际上，在任意时刻，
on peut décider de modifier la scène active en utilisant stage.
我们都可以通过stage决定更换当前活动的场景。
Scene. On n'est pas obligé de faire ça au début seulement.
Scene（场景）的设置并不局限于程序启动之初。
On pourrait par exemple décider d'ajouter un splash screen à notre application.
例如，我们可以为应用程序添加一个启动画面（splash screen）。
Dans le fond, un splash screen, c'est quoi?
那么，启动画面（splash screen）到底是什么呢？
C'est une espèce de petite image qui s'affiche au début de l'exécution et qui montre
它是一种小型图片，在程序启动初期显示，用于展示，
le logo et la version du programme, par exemple.
程序的标志和版本号等信息。
Donc, c'est le genre de chose qu'on fait quand on a un programme qui charge très
因此，这类设计常见于加载过程较为缓慢的程序中。
tranquillement.
加载过程非常平稳。
Il y a des programmes comme GIMP, comme Photoshop,
像GIMP、Photoshop这样的程序，
qui vont simplement montrer une petite image pendant que.
就会在加载期间简单地显示一张小图。
les composantes du programme se chargent.
程序的各个组件正在加载。
Donc dès qu'on clique quelque part dans cette image- là ou dès qu'on a fini de
因此，一旦用户点击该图片的任意位置，或者，
charger les ressources à charger,
所有待加载资源完成加载后，
mais on pourrait changer la scène pour afficher le vrai programme la vraie scène
我们就可以切换场景，显示真正的程序界面，即真正包含所需功能的场景。
qui contient vraiment ce qu'on veut faire mettons qu'on s'intéressait à faire ça en
假设我们想用JavaFX实现这一功能，
java fx on pourrait faire de quoi dans ce style là
可以采用类似这样的方式：
on aurait mettons un hbox comme ça qui est la racine de notre splash screen
比如，以一个HBox作为启动画面的根节点，
La scène elle même va
而该场景本身，
contenir quelque chose de très très simple,
只包含极其简单的元素，
disons une image comme ça qui est l'image
比如说这样一张图片，
qu'on souhaite afficher au tout début.
也就是我们希望在最开始显示的图片。
Puis, puis, puis, puis, puis, on va aller setter la scène comme étant cette scène-
然后，然后，然后，然后，然后，我们将把场景设置为——
là par défaut au début, et quand on clique quelque part sur cette scène- là,
这个场景作为程序启动时的默认界面；而当我们在该场景任意位置点击时，
on va aller recharger le primary stage.
就会重新加载主舞台。
Donc on afficherait quelque chose qui a l'air de ça par exemple,
因此，我们最终会显示类似这样的内容，例如：
donc ça c'est notre image qu'on souhaite afficher, avec le logo,
这是我们要展示的图片，上面有我们的标志，
notre superbe logo, et la version.
我们超酷的标志，以及版本号。
Quand on cliquerait quelque part,
当我们点击某处时，
à ce moment- là on aurait notre programme principal,
此时就会显示我们的主程序界面，
on aurait vraiment ce qui nous intéresse de faire.
也就是我们真正想实现的功能。
Fait que tout ça dans le fond c'est vraiment juste pour vous dire qu'une scène,
总之，这一切其实只是想告诉你们：所谓‘场景’，
c'est une façon de présenter des choses à l'utilisateur,
是一种向用户呈现内容的方式，
mais vous pouvez avoir plusieurs scènes dans votre programme,
但您的程序中可以拥有多个场景，
c'est même la base dans
这甚至正是其核心设计思想：
le fond. Si vous voulez un programme qui est minimalement intéressant,
如果您希望程序具备最基本的趣味性，
vous risquez d'avoir plus qu'une seule scène dans votre programme,
很可能就需要不止一个场景，
puis vous voulez que mettons quand on clique sur tel ou tel bouton,
比如，您可能希望：点击某个按钮时，
ben ça change la scène.
就切换到另一个场景。
OK, avec tout ça, vous commencez peut- être à réaliser que
好的，通过以上讲解，您或许开始意识到：
plus nos programmes vont devenir gros,
随着程序规模越来越大，
plus le code dans la fonction start va être un gros ramassis de définitions de
start函数中的代码也会越来越臃肿，
composantes, de définitions d'événements, puis de plein d'affaires.
充斥着大量组件定义、事件定义，以及其他各种内容。
mettons qu'on reprend un petit programme que j'ai montré quelques slides plus tôt
举个例子，我们回顾一个我之前几页幻灯片中展示过的小程序，
sans vraiment expliquer ce que ça faisait dans le fond ce programme là ici c'est un
当时并未深入解释它实际的功能；这个程序本质上是一个计数器，
genre de compteur donc c'est ce qu'on utilisait pour
我们曾用它来演示边框布局（Border Layout），
démontrer le border layout le border
准确地说，是边框面板（BorderPane）；
pane pardon l'idée ici est qu'on a une fenêtre qui contient cinq éléments
它的设计思路是：窗口中包含五个元素，
Au centre, on va avoir un compteur, donc une valeur qu'on peut modifier.
正中央是一个可修改数值的计数器。
Puis sur les quatre côtés,
然后在四个边上，
on a des boutons qui nous permettent d'ajouter un à la valeur ici,
有若干按钮，可用来将此处的数值加一，
de soustraire un, de multiplier par deux, de diviser par deux.
减一、乘二或除二。
Le code nécessaire pour faire tout ça
实现全部功能所需的代码
aurait à peu près l'air de ça.
大致如下所示。
Donc dans notre méthode start,
因此，在我们的 start 方法中，
on va aller définir notre border pane comme étant la racine,
我们将把 BorderPane 设为根节点，
on crée notre scene, on crée une valeur qui va être la valeur du compteur initial,
创建场景，并初始化一个计数器的初始值，
on va avoir un bouton pour incrémenter, un
再创建一个“加一”按钮，一个
bouton pour doubler, on va avoir un texte pour afficher la valeur,
“乘二”按钮，以及一个显示当前数值的文本框，
on va avoir un bouton pour diviser, un bouton pour décrémenter.
另有一个“除二”按钮和一个“减一”按钮。
Quand on clique sur le bouton incrémenter, il
点击“加一”按钮时，
faut modifier la valeur puis mettre à jour le texte qui affiche la valeur.
需修改数值，再更新显示该数值的文本。
Quand on clique sur le bouton pour décrémenter, il faut soustraire quelque chose,
点击“减一”按钮时，需执行减法操作，
il faut faire moins un à la valeur,
即让数值减一，
puis mettre à jour le texte.
然后更新文本内容。
Même chose pour le bouton doubler, même chose pour le bouton diviser.
“乘二”按钮和“除二”按钮的逻辑同理。
On va avoir du code qui va servir à positionner tout ça,
我们还需编写代码来布局所有元素，
donc à centrer ça dans chacune des zones.
也就是让每个元素在其所在区域居中显示。
Il faut ajouter ça dans notre conteneur, on set la scène, on demande à afficher.
接着将它们添加到容器中，设置场景并显示窗口。
Ok, donc il y a pas mal d'affaires.
好的，这里涉及的内容不少。
Encore une fois, pour un petit compteur, c'est pas si pire que ça.
不过，对于一个小型计数器来说，其实也没那么糟糕。
Mais ce qu'il faut voir ici, c'est que les éléments peuvent vraiment se produire
但此处关键在于：这些事件可能在任意时刻、以任意顺序发生，
n'importe quand, dans n'importe quel ordre,
而且
puis la logique finit par être éparpillée un peu partout.
最终导致业务逻辑分散在各处。
Pour un compteur, ça passe encore, mais imaginez un logiciel comptable.
对于一个电表，这还能接受，但试想一下一款会计软件。
Imaginez un logiciel comptable dans lequel vous avez des centaines de
试想一款会计软件，其中包含数百项
fonctionnalités, dans lequel vous avez de la gestion de paye à faire,
功能，比如需要处理薪资管理，
vous avez de la gestion de clients, de la gestion de factures,
客户管理、发票管理，
de la gestion d'impôts, de toutes sortes de choses.
税务管理，以及各种各样的事务。