第 8 课：使 GUI 元素具有交互性

 

第 8 课：使 GUI 元素具有交互性

是否准备使您的应用程序具有一些交互性？本课向您展示了如何按照逐步操作过程向按钮应用程序添加行为。一旦您理解了此概念，就可以继续创建更为复杂的交互式应用程序。

 

目录

 

-	添加图形
-	定义光标
-	处理鼠标进入事件
-	处理鼠标单击事件
-	处理鼠标按下事件
-	处理鼠标释放事件
-	处理鼠标退出事件

 

使用 JavaFX Script，您可以通过方便的事件处理机制以预编程方式对事件进行应用程序响应。每个可能显示行为的 JavaFX 对象都具有映射到与事件相关的函数的实例变量。您可以定义这些函数来处理诸如单击鼠标按钮或释放键之类的事件。例如，您可以定义在用鼠标单击圆时显示文本的函数。有关对象可以处理的事件的完整列表，请参见 JavaFX Script API。

本课将通过创建一个简单的交互式应用程序来帮助您了解如何在 JavaFX 中处理鼠标事件。此应用程序演示了一个“播放－暂停”按钮，在您执行不同的鼠标操作时，该按钮的外观将发生变化。在您进入或退出按钮区域或者单击、按下或释放按钮时，该按钮将自动更改其外观。下面的图像显示了按钮在每个描述状态时的屏幕抓图。

图 1：鼠标离开按钮     图 2：鼠标在按钮上     图 3：鼠标按下   鼠标光标不在按钮上，显示“播放”指示器，按钮不突出显示。 鼠标光标在按钮区域中，按钮突出显示。 鼠标光标正按下此按钮，但没有发生单击，按钮变暗。

图 4：显示“暂停”       图 5： 鼠标离开按钮   鼠标光标已释放按钮，发生了单击，指示器从“播放”变为“暂停”，按钮突出显示。   鼠标光标退出按钮区域，显示“暂停”指示器，按钮不突出显示。

 

在初始状态，当鼠标进入按钮时，按钮开始变亮。然后，当您按下或单击按钮时，它会变暗。如果您释放鼠标按钮，其指示器从“播放”变为“暂停”。如果您再次单击此按钮，“暂停”指示器将再次切换为“播放”。

由于本课着重讨论事件处理，因此不介绍创建图形的实际过程。相反，本课提供图形的完整源代码，并给出如何处理这些图形上发生的事件的详细步骤。如果您要了解有关创建图形的更多信息，请参阅创建图形对象。

创建一个扩展名为 .fx 的文件，例如 FXInteractiveButton.fx。避免使用与现有的类、实例变量或保留字的名称匹配的文件名，因为这会在编译过程中导致错误。有关现有的类、变量和保留字的更多信息，请参见 JavaFX Script API 和学习 JavaFX Script 编成教程。

您可以在任意时间使用以下命令编译您的代码：

javafxc FXInteractiveButton.fx

 

您可以使用以下命令运行编译的代码：

javafx FXInteractiveButton

 

添加图形

向应用程序添加图形。Graphics.fx 文件中提供了用来显示图形的完整源代码。

---

注意：表示按钮的圆、表示“播放”指示器的三角形的路径和表示“暂停”指示器的矩形都定义在一个 Group 中，因为事件发生在此 Group 中的图形上。有关 Group 类的更多信息，请参见 JavaFX Script API。

---

定义光标

只要您创建了一个按钮，您就可以定义一个手形光标，当您指向该按钮时将显示这个光标。

定义光标：

1. 添加 javafx.scene.Cursor 导入语句。
2. 在 Group 内部指定 cursor 变量，然后将其值设置为 Cursor.HAND。

以下代码将生成此效果：

import javafx.scene.Cursor; //required to display a "Hand" cursor Stage { ... content: [ ... Group { ... cursor: Cursor.HAND ... content: [ ... ] } ] }

 

有关 Cursor 类的更多信息，请参见 JavaFX Script API。有关 JavaFX SDK 中的可视光标列表，请参见 JavaFX GUI 简介。

处理鼠标进入事件

当鼠标光标进入按钮区域时将发生此事件。它由 onMouseEntered 函数控制。

处理鼠标进入事件：

1. 添加 javafx.scene.input.MouseEvent 导入。
2. 定义 onMouseEntered 函数。

---

注意：使用 evt 变量作为此函数的 MouseEvent 类型属性。并且，此函数没有输出值，因此它的返回类型是 void。

---

所有事件处理函数都使用变量 evt，并且它们的类型都是 void。这些函数还引用 Group，因此，它们应该在 Group 内部指定，如以下代码中所示：

import javafx.scene.input.MouseEvent; //required to handle mouse events Stage { ... content: [ ... Group { ... content: [ ... ] onMouseEntered: function(evt: MouseEvent):Void { effect.level = 0.65; } } ] }

 

一旦您的鼠标进入此按钮，此按钮就开始变亮。变亮效果是由 effect 和 level 变量控制的。发亮级别设置为 0.65，该级别足够高，可以看到光标在按钮上。有关 onMouseEntered 函数的更多信息，请参见JavaFX Script API。有关 MouseEvent 类的更多信息，请参见 JavaFX Script API。

处理鼠标单击事件

鼠标单击事件可控制单击按钮时按钮的行为。它是借助于 onMouseClicked 函数进行处理的。

处理鼠标单击事件：

1. 添加 javafx.scene.input.MouseButton 导入。这将仅启用对鼠标左键单击的处理。
2. 定义负责处理鼠标单击和鼠标按下事件的变量。以下是步骤 1 和步骤 2 的代码：
   
   

   import javafx.scene.input.MouseButton; //required to handle only left mouse button clicks var visiblePlay: Boolean = true; //required to switch between the "Play" and "Pause" indicator var visiblePause: Boolean = false; //required to switch between the "Play" and "Pause" indicator var play: Boolean = false; //required to identify whether "Play" or "Pause" indicator should be displayed Stage { ... }

    
   
3. 定义 onMouseClicked 函数。
   
   

   Group { ... content: [ ... ] onMouseEntered{...} onMouseClicked: function(evt: MouseEvent):Void { if(evt.button == MouseButton.PRIMARY) { if(play == true){ visiblePlay = true; visiblePause = false; play = false } else{ visiblePlay = false; visiblePause = true; play = true; } } } }

    
   
4. 将 visiblePlay 绑定到 Path 对象中的 visible 变量。
5. 将 visiblePause 绑定到每个 Rectangle 中的 visible 变量。以下是步骤 4 和步骤 5 的代码：
   
   

   Group { ... content: [ ... Path{ visible: bind visiblePlay; ... }, Rectangle { visible: bind visiblePause; ... }, Rectangle { visible: bind visiblePause; }, ] //event handling functions here }

    
   

上面的代码样例实际上会执行以下操作。

• 最初，visiblePlay 布尔变量设置为 true，play 布尔变量设置为 false。Path 的 visible 变量（用于定义“播放”指示器）绑定到 visiblePlay，并且也是 true，因此，在应用程序启动时，显示“播放”指示器。
• 在您单击此按钮时，visiblePlay 将变成 false，play 和 visiblePause 将变成 true。由于 Rectangle 的 visible 变量以图形方式表示“暂停”指示器，且被绑定到 visiblePause，因此，当 visiblePause 变成 true 时，将显示这些图形。在您单击此按钮时，会建立“播放”与“暂停”之间的切换显示逻辑。

---

注意：只能使用鼠标左键执行这些操作。这是由 if(evt.button == MouseButton.PRIMARY) 语句控制的。

---

有关 onMouseClicked 函数的更多信息，请参见 JavaFX Script API。有关 MouseButton 类的更多信息，请参见 JavaFX Script API。

处理鼠标按下事件

此事件定义按下鼠标按钮时您的应用程序将执行的操作。使用 onMousePressed 函数处理此事件。

要处理此事件，请定义 onMousePressed 函数，如以下代码所示：

Group { ... content: [ ... ] onMouseEntered {...} onMouseClicked {...} onMousePressed: function(evt: MouseEvent):Void { if(evt.button == MouseButton.PRIMARY) { effect.level = 0.0;} } }

 

一旦按下鼠标左键，屏幕按钮就变暗，以模仿按下的效果。如果按下鼠标但没有单击，则“播放-暂停”指示器不会发生变化。

---

注意：只能使用鼠标左键执行鼠标按下操作。这是由 if(evt.button == MouseButton.PRIMARY) 语句控制的。

---

有关 onMousePressed 函数的更多信息，请参见 JavaFX Script API。

处理鼠标释放事件

此事件定义在释放鼠标左键时您的应用程序执行的操作。此操作由 onMouseReleased 函数控制。

要处理鼠标释放事件，请使用以下代码：

Group { ... content: [ ... ] onMouseEntered {...} onMouseClicked {...} onMousePressed {...} onMouseReleased: function(evt: MouseEvent):Void { effect.level = 0.65; } }

 

释放鼠标按钮时，会发生 onMouseReleased 和 onMouseClicked 两个事件：当鼠标光标仍在图形按钮上时，应用程序中的图形按钮仍突出显示；“播放-暂停”指示器发生变化。

有关 onMouseReleased 函数的更多信息，请参见 JavaFX Script API。

处理鼠标退出事件

当鼠标光标退出按钮区域时，将发生此类事件。此事件是由 onMouseExited 函数定义的。

要定义鼠标退出事件，请使用以下代码：

Group { ... content: [ ... ] onMouseEntered {...} onMouseClicked {...} onMousePressed {...} onMouseReleased {...} onMouseExited: function(evt: MouseEvent):Void { effect.level = 0.3; } }

 

当鼠标光标退出图形按钮定义的区域时，不再突出显示此按钮。此按钮将返回其初始状态，发亮级别为 0.3。这是 Glow 效果的默认级别，它是 effect: effect 语句对 Group 设置的，作为初始突出显示状态。

有关 onMouseExited 函数的更多信息，请参见 JavaFX Script API。有关绑定的更多信息，请参见对 UI 对象应用数据绑定。

此处是完整的 FXInteractiveButton.fx 文件。

总结

JavaFX SDK 提供了可处理事件的所有内置函数。此示例展示了使用其中一些函数来使您的应用程序响应用户操作产生的事件是多么容易。