B2 · 第8集 · 5:15
JavaFX图形界面开发
本集讲解如何用JavaFX创建图形界面，重点介绍MVC架构中视图、控制器和模型的分工与协作。
来源：Nicolas Hurtubise / classe.iro.umontreal.ca · 许可：CC BY-SA 4.0
字幕
qui vous permet de jouer à toutes sortes de jeux de cartes
让您能玩各种纸牌游戏
dans le fond la logique de la disposition des cartes ici va changer selon le jeu la
本质上，纸牌的布局逻辑会随游戏而变
façon les cartes sont disposées puis la façon dont on
即纸牌的具体摆放方式
gagne une partie de cartes
以及一局牌如何判定胜负
Mais essentiellement, peu importe le jeu que vous choisissez,
但无论您选择哪种游戏
il y a une logique commune.
都遵循一个共通的逻辑
Peu importe le jeu que vous choisissez,
无论您选择哪种游戏
vous devriez toujours être capable d'afficher ce petit menu- là qui vous permet de
您都应该能随时调出这个小菜单
créer une nouvelle partie, recommencer la partie, choisir un autre jeu,
用来新建一局、重开当前局、切换其他游戏
annuler, recommencer.
或撤销、重做操作
Puis tout ce qui change dans le fond, c'est la disposition des cartes,
而真正变化的，只是纸牌的排列方式
puis la façon de détecter si on a gagné ou si on a perdu.
以及胜负的判定方式
Dans le fond, il y a toute la vue ici,
实际上，整个界面中
la grosse majorité de la vue ici va être réutilisée d'un jeu à l'autre,
绝大部分内容都能在不同游戏中复用
ce qui veut dire que vraiment si on écrit chacun des jeux cartes comme étant un
也就是说，如果我们将每种纸牌游戏都设计为独立的模块
modèle séparé, tout ce qui nous reste à faire c'est de brancher ça dans
那么只需将其接入这个主程序
ce programme- là, puis dans
再接入
le fond on a toute la partie de la vue qui est déjà faite.
底层已实现好的界面部分
quand on veut rajouter un nouveau jeu de cartes.
当我们想新增一种纸牌游戏时
Ok, on va regarder un exemple un petit peu plus concret en JavaFX.
好的，我们来看一个更具体的 JavaFX 示例
Donc il y a le fichier MVC.
这是 MVC 项目文件
zip qui devrait être disponible sur Studium.
它应该已在 Studium 平台上提供下载
On va aller regarder un petit programme qui permet d'entrer des nombres.
我们将查看一个用于输入数字的小程序
Donc c'est ici le programme qu'on va avoir.
这就是我们要运行的程序
Puis quand on clique sur ajouter dans le fond, ça va ajouter ça à un compteur,
点击‘添加’按钮后，数值将累加到计数器中
puis le résultat va s'afficher ici.
结果会显示在这里
Fait que allons regarder ça,
那么，我们来看看这个，
allons regarder ça ici.
我们在这里看看。
Comment est- ce qu'on peut faire ça?
我们该怎么实现呢？
Bien, on va vouloir une classe qui extende application
好的，我们需要一个继承自Application的类，
et qui nous permet de simplement définir les éléments graphiques qu'on veut
它能让我们直接定义想要使用的图形元素。
utiliser. Dans la méthode start ici, bien on va lui définir nos
在start方法中，我们将为标题、输入数字的区域，
composantes pour le titre, pour la zone où on va rentrer nos nombres.
添加按钮、输出内容——也就是我们要显示的内容，并让界面更美观。
le bouton pour ajouter,
添加按钮，
la sortie donc qu'est ce qu'on veut afficher, on va aller rendre ça joli.
输出内容——也就是我们要显示的内容，并让界面更美观。
On va aller définir un événement qui peut se produire quand on clique sur le bouton,
我们将定义一个点击按钮时触发的事件，
puis dans le fond, ça va être le gros de notre classe Vue.
而这基本上就是我们的视图（Vue）类的核心部分。
Notre classe Vue va avoir une fonction update_output qu'on peut appeler et qui va
我们的视图类将有一个update_output函数，我们可以调用它，
permettre de modifier le texte qui est affiché dedans.
用来修改其中显示的文本。
Donc si je lance ce programme- là.
现在，我运行这个程序。
On va regarder ce qui se passe.
我们来看一下会发生什么。
Si je lance ce programme- là, je vais avoir mon super compteur,
运行后，我会看到我的超级计数器，
je peux rentrer des nombres, puis quand je clique sur ajouter ici,
我可以输入数字，然后点击这里的‘添加’按钮，
l'événement qui se produit c'est celui- là ici.
触发的事件就是这个。
C'est simplement d'aller avertir le contrôleur qu'on veut ajouter un nombre à
这个事件只是通知控制器：
partir de la valeur qui est dans
我们要根据这个输入框中的值，
cet input- là.
这个输入框里的值。
Donc cet input- là, on peut aller chercher la valeur qui est ici avec cette
对于这个输入框，我们可以用这个函数获取其中的值，
fonction- là. Puis dans le fond, voilà,
然后本质上就是这样，
le contrôleur écrit dans la vue directement, le contrôleur écrit ici.
控制器直接向视图写入内容，也就是在这里写入。
Au moment d'instancier le contrôleur,
在实例化控制器时，
on lui passe en paramètre une référence à l'instance de vue qu'on a en ce moment.
我们会把当前视图实例的引用作为参数传给它。
Puis à ce moment- là,
然后就在那一刻，
cette instance- là va pouvoir être référencée dans l'autre sens.
这个实例就能被反向引用。
Si on va regarder au niveau du contrôleur, qu'est- ce qui se passe?
如果查看控制器层面，会发生什么？
Le contrôleur, au moment de le créer,
控制器在创建时，
va simplement garder une référence à la vue pour pouvoir aller demander à la vue de
会简单地保存一个对视图的引用，以便能向视图发出请求，
modifier ce qui est affiché.
修改当前显示的内容。
Puis le contrôleur va aller créer le modèle.
接着，控制器将创建模型。
Donc le contrôleur va aller créer le modèle,
因此，控制器将创建模型——
le modèle qui est simplement un compteur, donc un compteur qui
这个模型只是一个计数器，
possède une fonction ajouter, donc on peut rajouter quelque chose,
它有一个“添加”函数，我们可以向其中添加数值，
puis on peut aller chercher la valeur totale avec tout ce qui a été ajouté.
之后还能获取所有已添加数值的总和。
Donc ici c'est vraiment le modèle de l'application,
所以，这里的模型就是应用程序的核心模型，
c'est le problème abstrait qui est essentiellement de compter,
即抽象的问题本质：计数，
de rajouter des nombres, compter.
向其中添加数字并累加。
C'est quelque chose qui peut clairement exister sans interface graphique,
它完全可以脱离图形界面而独立存在，
c'est quelque chose qu'on pourrait intégrer dans un autre projet,
也可以轻松集成到其他项目中，
c'est quelque chose où on pourrait faire une interface textuelle à ça.
我们甚至可以为它开发一个纯文本界面。
Fait que le contrôleur ici va aller garder une référence à la vue,
因此，控制器会保存对视图的引用，
va aller créer le modèle, puis va commencer par aller mettre à jour la vue en lui
创建模型，然后首先更新视图，
demandant d'utiliser la valeur du modèle comme output.
要求视图使用模型的当前值作为输出内容。
quand on clique sur le bouton
当用户点击按钮时，
pour rajouter un nombre dans notre
向视图中添加一个数字，
vue ça appelle la fonction du contrôleur avec le texte qui correspond au nombre
就会调用控制器中的对应函数，并传入代表该数字的文本，
qu'on veut rajouter.
也就是我们想添加的那个数字。
Cette fonction- là dans le fond
这个函数本质上会，
va aller lire ce qui a été rentré,
读取用户输入的内容，
va demander au modèle de rajouter ce nombre- là,
请求模型添加该数字，
puis va demander à la vue de se mettre
然后请求视图相应地更新自身，
à jour en conséquence.
完成整个流程。
On fait un try catch ici parce que quand on essaie de valider
这里使用 try-catch 是因为，在尝试验证输入时
l'entrée, dans le fond quand on essaie de lire le texte comme étant un double,
本质上是在尝试把文本当作双精度数来读取，
peut- être que les utilisateurs ont écrit n'importe quoi, puis à ce moment- là,
用户可能输入了任意内容；此时，
le modèle peut pas fonctionner avec ça.
模型便无法正常运行。
Ce qui va se passer, c'est qu'on va, au moment du catch, dans le fond,
实际会发生的是：当执行 catch 时，
quand on se rend compte qu'il y a eu une erreur, on
也就是我们发现出错的那一刻，
va aller réinitialiser le modèle à zéro,
会将模型重置为初始状态，
puis on va aller afficher dans la vue erreur.
然后在视图中显示错误信息。