第 5 课：对 UI 对象应用数据绑定

来源：互联网发布：炫浪网络社区打不开编辑：程序博客网时间：2024/06/05 10:01

第 5 课：对 UI 对象应用数据绑定

本课介绍 JavaFX 中的数据绑定功能。使用此机制后，当一个变量发生变化时，另一个变量会随之更新（根据您定义的两个变量之间的关系）。有关数据绑定概念的更多信息，请参阅学习 JavaFX Script 编程语言中的数据绑定和触发课程。

-	创建应用程序窗口
-	添加圆
-	将填充模式添加到圆中
-	添加滑块
-	定义绑定关系

在编程过程中，通常需要在另一个参数发生变化时更新某个特定参数。在 JavaFX Script 编程语言中，您可以通过数据绑定机制来完成此操作。您可以定义任意两个变量之间的关系，以便当一个变量发生变化时另一个变量会随之更新。JavaFX 将跟踪任何变化并进行必要的更新。这种关系连同更新机制称为数据绑定。

要了解数据绑定的工作原理，请按如下所示创建一个简单的应用程序：

图 1：启动后的数据绑定示例

具体的思路是，绘制一个滑块和一个圆，该圆的圆心绑定到滑块的值。圆的内部使用径向渐变模式进行绘制。在您移动滑块时，圆也随之移动。静止渐变填充使圆显示出日蚀各个阶段的效果。

图 2：圆的位置根据滑块的位置进行变化

创建一个扩展名为 .fx 的文件，例如 sample.fx。在任何时间，您都可以使用以下命令编译您的代码：

javafxc sample.fx

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

javafx sample

创建应用程序窗口

创建一个标题为 "Data Binding" 的应用程序窗口，其宽度为 220 像素，高度为 170 像素。有关详细信息，请参见使用声明性语法。以下代码可创建此窗口。

import javafx.stage.Stage;
 
Stage {
    title: "Data Binding"
    width: 220
    height: 170
    visible: true
}

尽管这些代码很短，但它是一个完整的 JavaFX 应用程序，其输出如下所示。

图 3：应用程序窗口

添加圆

您可以向您的应用程序窗口添加对象，方法是：将这些对象放在 Stage 的 scene 中。有关更多详细信息，请参见在图形场景中显示 UI 对象。有关 Circle 类的详细信息，请参见使用声明性语法。

为 javafx.scene.shape.Circle 和 javafx.scene.paint.Color 类添加 import 语句。

通过添加 Circle 对象字面值定义场景的 content 变量。

import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
  
Stage {
    title: "Data Binding"
    width: 220
    height: 170
    visible: true
    scene: Scene {
    content: Circle {
        centerX: 50 centerY : 60 radius: 50
        stroke: Color.YELLOW}
    }
}

默认情况下，圆的内部是黑色的，场景的背景是白色的。在此步骤中，输出如下所示。

图 4：添加到场景的圆

设置 fill 变量的值，以更改背景颜色。

scene: Scene {
   fill: Color.LIGHTGRAY
   ...
}

将填充模式添加到圆中

您可以通过将称为径向渐变的特定填充模式添加到圆中来增加示例的视觉吸引力。使用此模式后，当滑块移动时会显示出日蚀的效果。

要实现此绘制功能，请使用 RadialGradient 类。您可以通过使用 Stop 类来指定两种或更多种颜色，并且 RadialGradient 类将在它们之间提供一个插值。通过定义圆心和半径来指定一个可控制渐变模式的圆。您还可以在应用了第一种颜色的圆内定义焦点。最后一种颜色应用于圆的周界线。

对于径向渐变填充模式，您可以为圆心、半径和焦点指定绝对值。在这种情况下，您需要将 proportional 变量设置为 false。如果将 proportional 变量设置为 true，则圆心、半径和焦点的值范围应该是 0.0 到 1.0，并且径向渐变将进行缩放以填充它所应用到的形状。

stops 变量为径向渐变填充模式定义了一个颜色序列。使用方括号指定一个序列，使用逗号分隔其中的各个元素。

为 javafx.scene.paint 软件包中的 RadialGradient 和 Stop 类添加 import 语句。
使用 RadialGradient 对象字面值定义 fill 实例变量。
使用 centerX、centerY 和 radius 变量为圆心和半径指定绝对值。
通过使用 focusX 和 focusY 变量指定焦点。
将 proportional 变量设置为 false。

将 stops 变量定义为红色和白色的序列。

import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
 
content: Circle {
    centerX: 50 centerY : 60 radius: 50
    stroke: Color.YELLOW
    fill: RadialGradient {
        centerX: 50 centerY : 60 radius: 50
        focusX: 50 focusY: 30
        proportional: false
        stops: [
            Stop {offset: 0 color: Color.RED},
            Stop {offset: 1 color: Color.WHITE}
        ]
    }
}

编译并运行此修改后的代码会产生以下结果。

图 5：使用径向渐变模式填充的圆

添加滑块

javafx.ext.swing 软件包中的 SwingSlider 类提供了一个滑块控件。将此滑块添加到场景中，并将其放在圆的下方。默认情况下，滑块将显示在点 (0,0) 处。您可以使用 translateX 和 translateY 实例变量来指定在场景中按 X 轴和 Y 轴方向平移坐标的距离。

为 javafx.ext.swing.SwingSlider 类添加 import 语句。
将 SwingSlider 对象字面值添加到场景的 content 变量中。

指定滑块的最小值和最大值，并将当前值设置为零。

import javafx.ext.swing.SwingSlider;
 
content: [
    Circle {
       ...
    },
    SwingSlider {minimum: 0 maximum: 60 value : 0}
]

使用 translateX 和 translateY 实例变量指定滑块在场景内的位置。

content: [
    Circle {
       ...
    },
    SwingSlider {
        minimum: 0 
        maximum: 60 
        value : 0
        translateX: 10
        translateY: 110
    }
]

图 6：已添加到应用程序窗口的滑块

定义绑定关系

最后，将圆心与滑块值绑定。滑块显示在应用程序窗口中，您可以通过移动圆钮来更改其值。但是，您无法引用滑块值（该值是绑定所必需的）。解决办法是定义一个 slider 变量，然后引用 slider.value。

创建 slider 变量。

var slider = SwingSlider{minimum: 0 maximum: 60 value: 0 translateX: 10 translateY: 110};

定义绑定关系。

Circle {
    centerX: bind slider.value+50 centerY: 60 radius: 50
  ...

bind 运算符会跟踪右侧的值的任何变化。当滑块值发生变化时，圆心会随之更新，JavaFX 会自动在新的位置显示圆。由于径向渐变填充的位置不发生变化，因此您可以看到圆是如何相对于初始填充进行移动的。

最后，让我们来看一看数据绑定示例的完整代码。编译、运行和探究运行中的数据绑定。

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingSlider;

import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.paint.Stop;
import javafx.scene.paint.RadialGradient;
 
var slider = SwingSlider{minimum: 0 maximum: 60 value: 0 translateX: 10 translateY: 110};
 
Stage {
    title: "Data Binding"
    width: 220
    height: 170
    scene: Scene { 
        fill: Color.LIGHTGRAY;
        content: [ 
            slider, 
            Circle {
                centerX: bind slider.value+50 centerY: 60 radius: 50
            stroke: Color.YELLOW
            fill: RadialGradient {
                centerX: 50 centerY: 60 radius: 50
                focusX: 50 focusY: 30
                proportional: false
                stops: [
                    Stop {offset: 0 color: Color.RED},
                    Stop {offset: 1 color: Color.WHITE},
                ]
                }
           }
      ]
  }
  visible: true
}

总结

在本课中，您学习了如何创建数据绑定关系。在一个变量需要根据另一个变量的变化而更新时，可在您的应用程序中使用数据绑定机制。