B2 · 第9集 · 4:45

JavaFX界面与MVC架构

本集讲解Java程序的MVC设计模式,演示如何用同一控制器和模型适配图形界面与命令行界面,并替换模型实现不同功能(如求和变求平均值)。

来源:Nicolas Hurtubise / classe.iro.umontreal.ca · 许可:CC BY-SA 4.0

字幕

  1. Donc ça, c'est un peu l'overview de notre programme découpé en modèle- vue-

    因此,这是对我们程序的整体概览,它采用模型-视图-

  2. contrôleur. On a vraiment une classe qui sert à 100% à

    控制器模式。我们确实有一个类,其唯一作用就是

  3. définir qu'est- ce qui peut se passer.

    定义哪些操作可以执行。

  4. On a notre contrôleur ici qui va faire le pont entre la vue et le modèle,

    这里的控制器负责在视图与模型之间建立桥梁,

  5. qui va être capable de dire au modèle il

    它能通知模型:

  6. faut rajouter un nombre, qui va être capable de dire à la vue il faut afficher telle

    需要添加一个数字;也能通知视图:

  7. affaire. Puis notre modèle est indépendant de tout ça,

    需要显示某项内容。而我们的模型完全独立于这些部分,

  8. notre modèle a vraiment pas besoin d'interface graphique pour exister.

    它无需图形界面即可运行。

  9. Donc ça c'est notre petit programme.

    这就是我们的小程序。

  10. Mettons qu'on voulait plutôt une interface en ligne de commande.

    假设我们想改用命令行界面。

  11. Bien, on pourrait le faire assez facilement.

    很好,这完全可以轻松实现。

  12. Dans le fond, notre contrôleur a juste besoin d'une

    本质上,我们的控制器只需一个视图类,

  13. classe vue qui répond à une commande qui update output.

    该类需支持名为 updateOutput 的方法。

  14. Dans le fond, quand on a une modification à faire au niveau du modèle,

    本质上,当模型层面发生变更时,

  15. il faut aller mettre à jour la vue.

    就必须同步更新视图。

  16. Fait que ici ce que j'ai fait,

    因此,我在这里所做的,

  17. c'est que je suis allé créer une interface vue. simplement pour définir que quelque

    创建了一个视图接口,仅用于声明:

  18. chose qui est une vue

    任何被称作‘视图’的东西,

  19. doit posséder la fonction update output.

    都必须具备 updateOutput 这一函数。

  20. Donc n'importe quelle vue doit posséder la fonction update output

    因此,任意视图都必须拥有 updateOutput 函数,

  21. à partir d'un texte à afficher.

    该函数接收一段待显示的文本作为参数。

  22. ma vue graphique c'est quelque chose qui possède cette fonction là donc c'est

    我的图形界面视图就实现了这个函数,因此它属于

  23. quelque chose qui est externe à l'application puisque c'est du JavaFX mais qui

    应用程序外部的组件(使用 JavaFX 实现),但同时又

  24. implémente aussi mon interface pour définir ce que c'est qu'une vue

    也实现了我定义的‘视图’接口。

  25. Quand on appelle cette fonction- là, ça vient modifier ma

    调用该函数时,

  26. composante qui sert à afficher mon

    会更新用于显示输出的组件,

  27. texte qui sert à afficher l'output.

    即用于呈现输出文本的组件。

  28. mettons qu'on veut une vue en console à la place mettons qu'on veut une vue en

    假设我们想要一个控制台视图,而不是……假设我们想要一个控制台视图

  29. console à la place on

    来替代它。

  30. pourrait en écrire une dans le fond notre vue en console ça serait une classe

    我们可以自己编写一个:我们的控制台视图将是一个类,

  31. similaire à notre vue graphique

    结构与图形视图类似。

  32. Mais plutôt que de définir des

    但不同于定义图形组件,

  33. composantes graphiques, tout ce que ça va faire,

    它的全部功能就是:

  34. c'est aller créer une instance du contrôleur,

    创建一个控制器实例,

  35. attendre des événements sur la ligne de commande,

    然后监听命令行上的事件,

  36. donc en lisant ça avec un scanner par exemple.

    例如用扫描器读取输入。

  37. Update output, ce qu'on pourrait décider de faire,

    更新输出,我们可以决定这样做:

  38. c'est aller simplement vider la console en mettant plein de sauts de ligne,

    直接用多个换行符清空控制台,

  39. donc juste pour s'assurer qu'il n'y a rien d'affiché avant,

    以确保显示之前界面完全空白。

  40. puis après ça on va aller afficher de façon jolie une petite boîte qui va contenir

    接着,我们将美观地显示一个包含

  41. notre nombre. Donc je fais une démonstration.

    我们数字的小窗口。下面我来演示一下。

  42. Si j'exécute ça en console.

    如果我在控制台中运行这个。

  43. Je vais avoir ça ici.

    我将在这里拿到这个。

  44. Donc on attend des événements sur la console.

    因此,我们期待主机上推出新内容。

  45. Quand je tape quelque

    当我输入一些

  46. chose, ça me le rajoute à mon compteur.

    东西,它就会加到我的计数器上。

  47. Puis à chaque fois qu'il se passe quelque chose, il faut, le contrôleur

    然后每次发生什么事情时,都需要控制器

  48. est le même que tout à l'heure, le modèle est le même que tout à l'heure.

    和刚才一样,模型也和刚才一样。

  49. Quand il y a un événement au niveau de la vue, au niveau de ce qui est rentré,

    当视图层面,也就是输入内容层面发生事件时,

  50. ça avertit le contrôleur.

    它会通知控制器。

  51. De la même façon que tantôt, puis

    和刚才一样,

  52. le contrôleur n'a pas bougé, le contrôleur fait la même chose.

    检查员一动不动,他做了同样的事。

  53. Quand on ajoute un texte, il faut

    添加文本时,必须

  54. modifier le modèle et demander à la vue de modifier son output.

    修改模型,并通知视图更新其输出。

  55. Ok, fait, ça c'est pour faire une vue différente pour le même programme.

    好的,完成了——这是为了对同一程序创建不同的视图。

  56. On pourrait bien entendu modifier le contrôleur pour ces deux vues-

    当然,我们也可以修改控制器以适配这两个视图——

  57. là. Présentement notre vue va simplement.

    目前,我们的视图只是简单地

  58. aller afficher dans le fond un

    在后台显示一个

  59. compteur qui incrémente du nombre qu'on lui demande.

    按指定数值递增的计数器。

  60. Dans le fond, lui demande rajoute moi tel nombre,

    本质上,就是告诉它:‘给我加上这个数’,

  61. rajoute moi tel nombre, rajoute moi tel nombre.

    ‘再加这个数’,‘再加这个数’。

  62. On pourrait décider de se faire un compteur différent qui va plutôt

    我们可以决定创建一个不同的计数器,它将

  63. garder la même interface, donc un autre modèle qui va être similaire au compteur

    保持相同的接口,因此采用另一个模型,

  64. qu'on avait avant.

    与之前那个计数器类似。

  65. Donc on se dit que plutôt que d'avoir un compteur qui rajoute ces nombres,

    也就是说,我们不再使用一个不断累加数值的计数器,

  66. rajoute ces nombres, rajoute ces nombres, on va

    ‘加这个数’,‘加这个数’,而是

  67. faire un compteur qui affiche la moyenne.

    创建一个计算并显示平均值的计数器。

  68. Donc encore une fois, c'est un modèle qui est très très simple,

    再次强调,这是一个非常非常简单的模型,

  69. mais c'est simplement pour illustrer.

    仅用于演示说明。

  70. mettons que je veux que mon programme qui permet de rajouter des nombres affiche la

    假设我希望自己的程序——用于添加数字的程序——

  71. moyenne des nombres ajoutés plutôt que le total, bien je

    显示所添加数字的平均值,而非总和;那么我

  72. pourrais aller changer ma classe ici.

    就可以在这里修改我的类。

  73. Puis dire que maintenant mon modèle, c'est un compteur moyenne,

    然后声明:现在我的模型是一个‘平均值计数器’,

  74. c'est un compteur de ce type- là.

    是这种类型的计数器。

  75. Si je viens lancer mon programme graphique avec ça, j'ai

    如果我用这个设置运行图形化程序,

  76. pas touché à mes vues, j'ai pas touché à mes définitions d'interface,

    我没有改动任何视图,也没有改动界面定义,

  77. puis la logique de l'application a été modifiée.

    但应用程序的逻辑已被修改了。

  78. Maintenant si je dis que je veux ajouter 10, 20 puis 30,

    现在,如果我说要加上10、20和30,

  79. ce qui est affiché ici c'est la moyenne de ces trois valeurs- là.

    屏幕上显示的是这三个数值的平均值。