javafx??
使用JavaFX构建GUI应用程序－教程概述
BySun中国技术社区,12/4/08本教程提供了有关创建图形用户界面的基本概念，包括声明性语法、节点、形状、视觉效果、动画、布局和事件处理。在开始此教程之前，请先从学习JavaFXScript编程语言中了解核心概念和语言语法。
注意：有关下载和安装必要软件的说明，请参见语言教程的JavaFXScript入门。
本教程中的课程包括：
•第1课：JavaFXGUI简介－JavaFXAPI中可用的基本功能的可视指导。本课中的屏幕抓图显示了图形对象、UI组件、效果、文本模式、颜色方案和布局模式。
•第2课：使用声明性语法－介绍JavaFXScript编程语言的声明性语法。提供了一个逐步操作过程来介绍如何创建一个简单的GUI应用程序。
•第3课：在图形场景中显示UI对象－介绍作为JavaFXScript编程语言基础的节点体系结构和场景图形中的基本概念。您将构建一个应用程序图形场景、创建一组节点并对该组应用变换。
•第4课：创建图形对象－介绍如何创建复杂的图形对象。您将创建一个具有反射效果的音频播放器录制按钮。
•第5课：对UI对象应用数据绑定－通过实际示例介绍数据绑定机制。
•第6课：排放GUI元素－通过以图形方式说明方法和技巧的示例解释如何在JavaFX应用程序中排放UI元素。
•第7课：创建动画对象－说明如何构建图形对象并使用线性插值为其设置动画（JavaFX库支持的一种关键帧动画）。
•第8课：使GUI元素具有交互性－介绍如何创建交互性应用程序。通过处理鼠标事件提供了一个逐步操作过程来介绍如何向按钮应用程序添加行为。
1课：JavaFXGUI简介BySun中国技术社区,12/4/08本课介绍JavaFXAPI中可用的基本功能的可视指导。其中包含图形对象、组件、效果、文本模式、颜色方案和布局模式的屏幕抓图。已为所有可视指导提供了源文件。用户界面元素
以下屏幕抓图显示了您可以使用javafx.ext.swing软件包创建的标准UI组件。
1
使用JavaFX构建GUI应用程序教程日月雨林整理
图1：用户界面组件
可以在components.fx文件中找到此应用程序的完整代码。颜色
在运行colors.fx文件中提供的应用程序代码后，会显示以下窗口。此colors应用程序对javafx.scene.paint.Color类的所有常量的颜色模式进行了图示说明。您需要将鼠标指针悬停在颜色模式上方才能查看对应的颜色常量，如Color.FORESTGREEN、Color.YELLOW和Color.YELLOWGREEN。
图2：颜色模式形状和填充样式
此屏幕抓图显示了您可以使用javafx.scene.shape和javafx.scene.paint软件包创建的基本形状、填充这些形状的各种方法、线条样式和形状组合。
2
使用JavaFX构建GUI应用程序教程日月雨林整理
图3：基本形状、填充方法、线条样式和组合
可以在shapes.fx文件中找到此应用程序的完整代码。注意，屏幕抓图上的文本标题不是示例代码的组成部分。文本
在运行text.fx文件中提供的应用程序代码后，会显示以下窗口。此text应用程序显示应用于同一文本字符串的不同格式样式的样例。
图4：文本样例效果
在运行effects.fx文件中的已编译代码后，会显示以下窗口。此窗口显示可应用于JavaFXUI元素的效果。注意，屏幕抓图上的文本标题不是示例代码的组成部分。
3
使用JavaFX构建GUI应用程序教程日月雨林整理
图5：视觉效果变换
以下屏幕抓图演示了可对JavaFX应用程序中的图形、图像或文本执行的基本变换。
图6：变换
在transform.fx文件中找到此示例的完整代码。布局
4
使用JavaFX构建GUI应用程序教程日月雨林整理
以下屏幕抓图说明了使用javafx.scene.layout软件包排放UI元素的几种方法。
图7：水平布局
图8：垂直布局
图9：水平布局和垂直布局的组合
可以在hbox.fx、vbox.fx和lights.fx文件中找到这些示例的完整代码。可以在排放GUI元素中找到布局方法的详细描述。光标
以下示例介绍了可应用于JavaFX中任何UI元素的几种不同光标视图。编译并运行cursor.fx文件中的源代码，然后将鼠标光标从一个图形对象移动到另一个图形对象，以查看各种不同的光标视图。注意，屏幕抓图上的文本标题不是示例代码的组成部分。
5
使用JavaFX构建GUI应用程序教程日月雨林整理
图10：光标样式总结
本课简要介绍了JavaFXSDKAPI中可用的基本GUI功能。有关这些示例中使用的软件包和类的更多详细信息，请参阅API文档。继续学习本教程的下一课，以深入了解JavaFXSDK的功能。第2课：使用声明性语法
BySun中国技术社区,12/4/08您是否熟悉声明性编程？JavaFXScript使用的就是这种简单而强大的编码样式。本课通过指导简单的GUI应用程序来展示使用声明性语句是多么容易。有关更多信息，请参阅学习JavaFX语言中的编写脚本、使用对象和编写您自己的类。
正如您在学习JavaFXScript编程语言中所了解的那样，JavaFXScript使用声明性方法进行编程。在创建应用程序的UI时，声明很方便，因为在代码中声明的对象的结构反映了场景图形的视觉结构，这样您就能很轻松地理解和维护代码。有关场景图形的更多信息，请参见在图形场景中显示UI对象。
为帮助您理解此方法，在本课中，您将按照逐步操作过程创建一个简单的样例JavaFXScript应用程序，该应用程序将绘制一个绿色的圆角矩形，并在该矩形上面绘制一个具有红色轮廓线的白色圆。这两个对象都位于标题为\"DeclaringIsEasy!!\"的窗口中。运行此应用程序时，将显示以下窗口。
6
您创建一个Script编程使用JavaFX构建GUI应用程序教程日月雨林整理
图1：完整的应用程序
通过执行以下步骤，您将学会如何在构建应用程序时使用声明性语句。
创建一个扩展名为.fx的文件，例如Declaring.fx。避免使用与现有的类、实例变量或保留字的名称匹配的文件名，因为这会在编译过程中导致错误。有关现有的类、变量和保留字的更多信息，请参见JavaFXScriptAPI和学习JavaFXScript编程语言。您可以在任意时间使用以下命令编译您的代码：javafxcDeclaring.fx
您可以使用以下命令运行编译的代码：javafxDeclaring添加必要的导入
将导入添加到.fx文件中，以确保此应用程序可以访问必要的类。
importjavafx.stage.Stage;//requiredtorenderawindowimportjavafx.scene.Scene;//requiredtodisplayacircleandrectangleonawindow
importjavafx.scene.shape.Rectangle;//requiredtorendertherectangle
importjavafx.scene.paint.Color;//requiredtofillandstroketherectangleandcirclewithcolor
importjavafx.scene.shape.Circle;//requiredtorenderthecircle
创建应用程序窗口
为了显示图形，需要创建一个窗口。创建窗口：
指定Stage对象字面值。绘制任何对象都需要使用Stage。
7
使用JavaFX构建GUI应用程序教程日月雨林整理
Stage{}这等效于：Stage{}
此窗口应该足够大，以便能够将矩形和圆都显示出来。在本示例中，此窗口是一个249x251像素的矩形。要创建如此大小并且标题为\"DeclaringisEasy\"的窗口，请在花括号中使用以下代码声明这些值：Stage{
title:\"DeclaringIsEasy!\"width:249height:251visible:true}
冒号左边的词title、width、height和visible称作实例变量，您可以参阅Stage文档以获取可用变量的完整列表。title将'DeclaringIsEasy'短语放在窗口的顶部边框中。width和height是像素值。有关JavaFXScript中对象字面值、类和实例变量的更多信息，请参见语言教程中的编写脚本和使用对象。当您运行目前已定义的代码时，将会看到以下窗口。
图2：空窗口
设置场景
在stage内，设置用来容纳Node对象（如圆或矩形）的scene。使用以下代码创建Scene：
8
使用JavaFX构建GUI应用程序教程日月雨林整理
Stage{
...
scene:Scene{content:[]}}
此场景是用来放置节点类型的对象的根区域。此场景具有一个用来容纳节点的content变量。有许多不同类型的节点，如图形对象、文本和GUI组件。有关节点和Scene类的更多信息，请参见在图形场景中显示UI对象一课和JavaFXScriptAPI。当您运行目前已定义的代码时，将会看到以下窗口。
图3：具有场景的窗口
注意：由于白色是场景的默认填充颜色，因此窗口的内容被填充为白色。场景位于窗口之上。创建矩形
要在content内声明矩形，请使用以下代码：content:[
Rectangle{x:45y:35
width:150height:150
arcWidth:15arcHeight:15fill:Color.GREEN}]
x和y实例变量用来指定矩形的像素位置，arcWidth和arcHeight用来定义角的圆度，fill变量用来定义填充矩形的颜色。定义窗口的尺寸时，您已经看到了大小变量width和height。
注意：在前面的代码样例中，您显式声明了所需的颜色，不过您也可以声明表示此颜色的Web代码。要使用代码来指定绿色填充颜色，请声明：
9
使用JavaFX构建GUI应用程序教程日月雨林整理
fill:Color.web(\"#008000\")
结果，此代码在左上角45,35位置创建了一个矩形。此矩形的大小是150x150像素，角圆度为15，并且使用绿色填充。有关Rectangle类的更多信息，请参见JavaFXScriptAPI。以下图形显示了此步骤中的应用程序窗口。
图4：绿色圆角矩形创建圆
使用以下代码在绿色矩形上面声明一个圆并设置其样式：content:[
Rectangle{...},
Circle{
centerX:118centerY:110radius:83
fill:Color.WHITEstroke:Color.RED}]
由于矩形是在任何其他对象之前声明的，所以首先绘制该矩形。该矩形将位于后来绘制的任何其他对象后面。
此代码使用Circle对象字面值来创建Circle类的一个实例。圆具有5个用来定义其状态的实例变量，包括窗口上的X和Y位置、半径、填充和笔画颜色。结果，此代码创建了一个圆，其半径为83，圆心位于118,110，且以白色填充，轮廓线为红色。有关Circle类的更多信息，请参见JavaFXScriptAPI。运行示例
10
使用JavaFX构建GUI应用程序教程日月雨林整理
现在，您可以运行整个示例了。以下代码是一个完整的Declaring.fx文件：importjavafx.stage.Stage;importjavafx.scene.Scene;
importjavafx.scene.shape.Rectangle;importjavafx.scene.paint.Color;importjavafx.scene.shape.Circle;Stage{
title:\"DeclaringIsEasy!\"width:249height:251visible:truescene:Scene{content:[Rectangle{x:45y:35
width:150height:150arcWidth:15arcHeight:15fill:Color.GREEN},
Circle{
centerX:118centerY:110radius:83
fill:Color.WHITEstroke:Color.RED}]}}
运行此代码时，将显示以下窗口。
图5：完整的应用程序
更改代码和运行示例
将圆放在正方形下面。要执行此操作，请使用以下代码切换圆和正方形的顺序：
11
使用JavaFX构建GUI应用程序教程日月雨林整理
importjavafx.stage.Stage;importjavafx.scene.Scene;
importjavafx.scene.shape.Rectangle;importjavafx.scene.paint.Color;importjavafx.scene.shape.Circle;
Stage{
title:\"DeclaringIsEasy!\"width:249height:251visible:truescene:Scene{content:[Circle{
centerX:118centerY:110radius:83
fill:Color.WHITEstroke:Color.RED},
Rectangle{x:45y:35
width:150height:150arcWidth:15arcHeight:15fill:Color.GREEN}]}}
编译并运行此应用程序。矩形现在位于圆的上方。
图6：已切换的对象顺序
注意：您可以使用JavaFXScript支持的布局方法来简化对象布局。有关布局方法的更多信息，请参见排放GUI元素。
12
使用JavaFX构建GUI应用程序教程日月雨林整理
总结
正如本课所展示的，声明性语法可简化图形的创建并使代码易于阅读和维护。您在代码中声明的元素的顺序与它们在应用程序中出现的顺序是匹配的。
第3课：在图形场景中显示UI对象
BySun中国技术社区,12/4/08本课介绍作为JavaFXScript编程语言基础的节点体系结构和场景图形，并包含有关Scene、Node和Group类的信息。在本课中，您将构建一个图形场景、创建一组节点并对该组应用变换。有关声明性语法的概念的更多信息，请参见使用声明性语法JavaFXScript编程语言是基于场景图形的。场景图形是一个树状数据结构，可用于在场景中定义图形对象的分层结构。场景图形中的单个元素称作节点。每个节点都有一个父节点，但根节点除外，根节点没有父节点。每个节点是叶节点或分支。叶节点没有子节点。分支节点具有零个或多个子节点。
JavaFX节点可处理不同类型的内容，如UI组件、形状、文本、图像和媒体。可以变换节点，也可以对其设置动画。您还可以对节点应用各种效果。
在本课中，您将创建一个具有三个节点（圆、文本和图像）的应用程序，如下所示。
图1：节点示例
JavaFX可以绘制场景中的所有内容。您可以将场景看作用来绘制图形内容的绘图表面。场景是一个用来容纳场景图形节点的容器。
在任何JavaFXGUI应用程序中，都需要创建一个场景并向其中添加节点。您可以通过应用效果、变换和动画来修改图形场景。JavaFX运行时负责处理图形场景中的任何更改并在必要时进行重新绘制。
javafx.scene.Node类是场景图形节点的基类。所有其他节点类（例如
javafx.scene.shape.Circle）可从Node类继承。有关实例变量和函数的完整列表，请参见Node类的API文档。
Node类可定义一个局部坐标系，在该坐标系中，X坐标值从左向右递增，Y坐标值从上向下递增。
可以通过应用变换（如平移、旋转、缩放和剪切）来更改节点。例如，平移可将节点的坐标系原点沿X或Y轴或这两个轴移动。要定义平移，请设置translateX或translateY变量或这两个变量的值。
JavaFX提供对效果（通过javafx.scene.effect和javafx.scene.effect.light软件包
13
使用JavaFX构建GUI应用程序教程日月雨林整理
提供）的强大支持。在JavaFXGUI简介中，您可以看到一些应用的效果和变换。节点可以接收鼠标和键盘事件。您可以定义在出现此类事件时可以收到通知的函数。有关详细信息，请参见使GUI元素具有交互性。
可以将节点组合到一起，将其看作单个实体。如果需要为几个节点提供通用行为，请将它们组合在一起，然后为整个组定义所需的行为。javafx.scene.Group类表示一组节点。现在，创建如图1所示的简单应用程序。此应用程序的图形场景包含三个节点，这三个节点分别显示在下面的单独窗口中。它们是形状对象（圆）、文本和图像。
图2：位于单独窗口中的三个节点：圆、文本和图像
首先，将这些节点作为单独的节点添加到场景中。然后，将其组合在一起并对整个组应用变换。
创建一个扩展名为.fx的文件，例如nodes.fx。在任何时间，您都可以使用以下命令编译您的代码：javafxcnodes.fx
您可以使用以下命令运行编译的代码：javafxnodes创建应用程序窗口
创建一个标题为\"Nodes\"的应用程序窗口，其宽度为220像素，高度为170像素。有关详细信息，请参见使用声明性语法。以下代码可创建此窗口。importjavafx.stage.Stage;Stage{
title:\"Nodes\"width:220height:170visible:true}
此代码会生成如下所示的输出。
14
使用JavaFX构建GUI应用程序教程日月雨林整理
图3：\"Nodes\"窗口
创建场景
使用Scene对象字面值声明一个场景。让此场景具有淡蓝色背景。
1为javafx.scene.Scene和javafx.scene.paint.Color类添加import语句。2声明Scene对象字面值。
3
定义fill变量，以便为此场景设置背景。
importjavafx.scene.Scene;
importjavafx.scene.paint.Color;Stage{
title:\"Nodes\"width:220height:170visible:truescene:Scene{
fill:Color.LIGHTBLUE}}
此代码会产生以下输出。
图4：具有淡蓝色背景的场景添加第一个节点
通过将某个节点声明为scene的content的元素，您可以将此节点添加到该场景中。scene的content变量是一个节点序列，用来定义应用程序的图形内容。
15
使用JavaFX构建GUI应用程序教程日月雨林整理
第一个节点是圆。有关Circle类的详细信息，请参见使用声明性语法。将圆的边界绘制成黄色。
4导入javafx.scene.shape.Circle类。5定义scene的content变量。
6
将Circle对象字面值添加到content变量中。
importjavafx.scene.shape.Circle;Stage{
title:\"Nodes\"width:220height:170visible:truescene:Scene{
fill:Color.LIGHTBLUEcontent:Circle{
centerX:50centerY:50radius:50
stroke:Color.YELLOWfill:Color.WHITE}
}}
修改后代码会生成以下输出。
图5：具有圆节点的场景添加文本节点
7为javafx.text.Text类添加import语句。8
将Text对象字面值添加到content变量中。
默认情况下，文本节点将位于点(0,0)处，这意味着第一个字符的左下角点将位于点(0,0)处。这就是此时编译和运行此代码后此文本在应用程序窗口中不可见的原因。在下一步中，将更改默认位置，使该文本可见。
16
使用JavaFX构建GUI应用程序教程日月雨林整理
importjavafx.scene.text.Text;scene:Scene{
fill:Color.LIGHTBLUEcontent:[
Circle{
...
},
Text{
content:\"Duke\"}]}
使用方括号来指定节点序列，使用逗号分隔其中的元素。应用变换
您可以通过应用旋转变换来更改默认位置。旋转是通过锚点和角度来指定的。节点将按指定的角度围绕锚点顺时针旋转。
要计算必要的值，请参见图6。如果您将点(10,100)作为锚点，并绘制一个圆，其半径等于锚点到此文本节点的左下角点的距离，则此圆有一部分会落在圆节点内部。将文本节点沿该圆顺时针移动33度，得到的结果如图6所示。
9为javafx.scene.transform.Transform类添加import语句。
10定义文本节点的transforms变量来围绕点(10,100)将此节点旋转33度。importjavafx.scene.transform.Transform;scene:Scene{
fill:Color.LIGHTBLUEcontent:[
Circle{...
},
Text{
transforms:Transform.rotate(33,10,100)content:\"Duke\"}]}
修改后的代码会生成以下输出。
17
使用JavaFX构建GUI应用程序教程日月雨林整理
图6：具有圆和文本节点的场景
添加图像节点
有关使用图像的更多详细信息，请参见创建动画对象。
以下代码引用Java教程中使用的Duke图像的URL。默认情况下，图像节点的左上角点位于点(0,0)处。此图像的尺寸正好适合圆节点上的区域。需要连接到Internet才能显示此示例中的图像。
11为javafx.scene.image软件包中的Image和ImageView类添加import语句。12将ImageView对象字面值添加到content变量中。importjavafx.scene.image.Image;
importjavafx.scene.image.ImageView;
scene:Scene{
fill:Color.LIGHTBLUEcontent:[
Circle{
...},
Text{
...},
ImageView{
image:Image{url:
\"http://java.sun.com/docs/books/tutorial/uiswing/examples/components/TextSamplerDemoProject/src/components/images/dukeWaveRed.gif\
}]}
您创建了一个其图形场景包含三个节点的应用程序。输出如以下图像中所示。
18
使用JavaFX构建GUI应用程序教程日月雨林整理
图7：具有三个节点的场景
组合节点
现在，将节点添加到组，然后将该组添加到scene的content变量中。
13为javafx.scene.Group类添加import语句。
14修改scene的content变量声明，以便它包含Group对象字面值。15将所有节点移到Group的content变量中。代码应如下所示。importjavafx.scene.Group;scene:Scene{
fill:Color.LIGHTBLUEcontent:Group{
content:[
Circle{
...},Text{
...},
ImageView{
...}]}}
请注意，向组中添加对象的顺序很重要。此顺序定义了这些对象的排放方式。如果您最后添加圆节点（在文本和图像节点之后），则圆将在其他两个对象上面绘制。由于圆具有填充颜色，所以这些节点将不可见。对组应用变换
最后，为节点组定义平移，以便将此组移到窗口中央，如以下代码中所示。scene:Scene{
fill:Color.LIGHTBLUEcontent:Group{
translateX:55translateY:10
19
使用JavaFX构建GUI应用程序教程日月雨林整理
content:[
Circle{
...},Text{
...},
ImageView{
...}]}}
此修改将同时移动这三个节点，如以下图像中所示。
图8：节点组已移到窗口中央
此处是此示例应用程序的完整代码，供您参考。importjavafx.stage.Stage;importjavafx.scene.Scene;importjavafx.scene.Group;
importjavafx.scene.shape.Circle;importjavafx.scene.paint.Color;importjavafx.scene.image.Image;
importjavafx.scene.image.ImageView;importjavafx.scene.text.Text;
import
javafx.scene.transform.Transform;
Stage{
title:\"Nodes\"width:220height:170visible:truescene:Scene{
fill:Color.LIGHTBLUEcontent:Group{
translateX:55translateY:10content:[
20
使用JavaFX构建GUI应用程序教程日月雨林整理
Circle{
centerX:50centerY:50radius:50stroke:Color.YELLOWfill:Color.WHITE},Text{
transforms:Transform.rotate(33,10,100)content:\"Duke\"},
ImageView{
image:Image{url:
\"/docs/books/tutorial/uiswing/examples/components/TextSamplerDemoProject/src/components/images/dukeWaveRed.gif\
}]}}}总结
在本课中，您学习了如何构建应用程序的图形场景、向场景添加节点、组合节点并对组应用变换。现在，您可以继续创建更加复杂的图形应用程序了。
第4课：创建图形对象
JavaFXGUI简介对JavaFX中提供的丰富的内置图形、组件和效果集合进行了介绍。但是，如何使用这些元素为您的应用程序定制或创建更丰富的画面？本课向您介绍了如何组合几个简单的元素来创建一个具有明暗效果的按钮，该按钮会投下映像，就像放在一个可以产生反射的表面上一样。一旦您理解了结合使用不同元素的概念，就可以让您的奇思妙想成为现实。
您已经了解了足够多的JavaFX语言知识，可以开始创建更为复杂的图形对象并应用效果了。此部分介绍了使用JavaFXScript创建图形的典型过程。在本课中，您将为音频播放器创建一个设计方案，其中包括如下图所示的“录制”按钮。
图1：具有映像的“录制”按钮
21
使用JavaFX构建GUI应用程序教程日月雨林整理
要创建此按钮，可以从各种JavaFX对象和功能（如JavaFXGUI简介一课中所述）中进行选择。这些对象和功能包括：矩形、圆、渐变效果和反射效果。然后，您可以组合这些功能以生成所需的按钮图形。
注意：本课使用JavaFX语言中有限数量的图形功能。您可以结合使用其他效果和功能来创建UI元素，如滑块、进度条、按钮和搜索字段。
创建一个扩展名为.fx的文件，例如FXRecordButton.fx。避免使用与现有的类、实例变量或保留字的名称匹配的文件名，因为这会在编译过程中导致错误。有关现有的类、变量和保留字的更多信息，请参见JavaFXScriptAPI和学习JavaFXScript编程语言。您可以在任意时间使用以下命令编译您的代码：javafxcFXRecordButton.fx您可以使用以下命令运行编译的代码：javafxFXRecordButton创建应用程序窗口
为了显示图形，需要创建一个窗口。创建窗口：
1为javafx.stage.Stage类添加import语句。2声明Stage对象字面值。
3定义Stage对象的title、width、height和visible属性。有关详细信息，请参见使用声明性语法一课。代码如下：
importjavafx.stage.Stage;
//requiredtorenderawindow
Stage{
title:\"JavaFXRecordButton\"width:249height:251visible:true}
下面是此窗口的屏幕抓图。
图2：空窗口
22
使用JavaFX构建GUI应用程序教程日月雨林整理
设置场景
在Stage中，设置用来容纳Node对象（如圆或矩形）的场景并使用线性渐变对其进行填充。定义场景并使用渐变对其进行填充：
4为javafx.scene.Scene、javafx.scene.paint.LinearGradient、
javafx.scene.paint.Stop、javafx.scene.paint.Color类添加import语句。5声明Scene对象字面值。
6定义Scene对象的fill变量。
7在Scene内指定content变量。content变量用来容纳Scene的对象。以下代码用来设置场景，并使用均匀的黑白线性渐变对其进行填充：importjavafx.scene.Scene;
ofNodetypesuchasacircleandrectangleimportjavafx.scene.paint.LinearGradient;withalineargradient
importjavafx.scene.paint.Stop;andoffsetofthelineargradientimportjavafx.scene.paint.Color;objectswithcolor
//requiredtodisplayobjects//requiredtofillobjects//requiredtospecifycolors//requiredtofillandstroke
Stage{...
scene:Scene{
fill:LinearGradient{
startX:0.0,startY:0.0,endX:0.0,endY:1.0,proportional:truestops:[
Stop{offset:0.0color:Color.WHITE},Stop{offset:1.0color:Color.BLACK}]}
content:[
//objectsthatappearonthescene]}}
要使用渐变填充场景，请使用fill实例变量，然后将LinearGradient对象字面指定为其值。LinearGradient具有可用来定义渐变的方向、大小、颜色和样式的实例变量。
startX、startY、endX和endY实例变量用来控制渐变的水平方向和垂直方向以及大小。每一个对（startX和startY与endX和endY）用来定义渐变的起点坐标和终点坐标。如果某个对的结束值小于同一个对的起始值，则会使渐变反向。
注意：这些变量的值依赖于下一段中所述的proportional变量。
•proportional变量用来定义startX、startY、endX和endY的值是否进行缩放。如果proportional变量设置为true，则应该相对于窗口区域指定渐变的起点和终点(0.0-1.0)，然后在窗口中拉伸。如果proportional变量设置为false，则应该将起点和终点指定为绝对像
23
使用JavaFX构建GUI应用程序教程日月雨林整理
素值，渐变将不会拉伸。
例如，如果startY设置为30，endY设置为100，startX和endX都设置为0，并且
proportional设置为false，则渐变的Y起点将是位于窗口标题栏下方30个像素位置的点，渐变的Y终点将是位于标题栏下方100个像素位置的点。如果startY设置为0.5，endY设置为1.0，proportional设置为true，startX和endX都设置为0，则渐变的Y起点将是具有场景50%高度的Y值的点，Y终点将是具有场景100%高度的值的点。
•stops是一个Stop变量序列，用来定义沿渐变分布颜色的方式。Stop的offset变量用来定义一个点，在该点上，渐变应该是一种特定的颜色。offset是相对于场景区域指定的，其值的范围应该是0.0到1.0。Color变量用来定义渐变的颜色。对于Color值，您可以指定一个显式颜色（例如Color.WHITE）或此颜色的Web代码（例如Color.web(\"FFFFFF\")）。有关线性渐变的更多信息，请参见JavaFXScriptAPI。
有关节点和Scene类的更多信息，请参见在图形场景中显示UI对象一课和JavaFXScriptAPI。以下屏幕抓图显示使用渐变填充的窗口。
图3：使用线性渐变填充的窗口指定组
现在，您可以继续在场景中指定对象。此按钮由一个矩形和一个圆组成。这两个元素应该组合在一起，这样其映像就会正确落在背景上。组合元素：
8为javafx.scene.Group类添加import语句。9声明Group对象字面值。
10在Group内指定content变量。content变量用于容纳Group的对象。代码如下所示：
importjavafx.scene.Group;//requiredtogroupobjectstobeabletooperatewiththemasaunitStage{...
scene:Scene{...
content:[Group{
content:[]}
24
使用JavaFX构建GUI应用程序教程日月雨林整理
]}}
有关Group类的更多信息，请参见JavaFXScriptAPI。创建矩形
要创建按钮轮廓线，请将一个矩形声明为Group内容的一部分。要创建矩形，需要：
11添加javafx.scene.shape.Rectangle导入。
12声明Rectangle对象字面值及其变量。有关Rectangle类的更多信息，请参见使用声明性语法一课和JavaFXScriptAPI。下面是用来完成这两个步骤的代码：importjavafx.scene.shape.Rectangle;
//requiredtorenderarectangle
content:[
Group{
content:[Rectangle{
x:40y:55width:150height:50
arcWidth:20arcHeight:55stroke:Color.BLACKfill:null}]}]
这些代码可生成以下屏幕抓图。
图4：按钮轮廓线
25
使用JavaFX构建GUI应用程序教程日月雨林整理
填充矩形
使用fill变量对矩形由黑到白进行明暗填充。两种颜色之间的这种均匀明暗变化称作线性渐变。背景使用相同类型的明暗变化。下面是用来产生该效果的代码：Rectangle{
...
fill:LinearGradient{
startX:0.0,startY:0.0,endX:0.0,endY:1.0,proportional:truestops:[
Stop{offset:0.0color:Color.WHITE},Stop{offset:1.0color:Color.BLACK}]}}
结果，此代码在左上角40,55位置创建了一个矩形。此矩形位于窗口的中央，其大小是150x50像素，角圆度为20和55，并且使用黑白均匀线性渐变进行了填充。有关线性渐变的更多信息，请参见JavaFXScriptAPI。
此步骤的应用程序屏幕抓图如下图所示。
图5：使用渐变填充的按钮添加“录制”指示器
现在，您可以将红色“录制”指示器添加到该按钮上。将红色指示器添加到该按钮上：
13添加javafx.scene.shape.Circle导入
14使用Circle类声明圆及其变量。有关Circle类的更多信息，请参见使用声明性语法一课和JavaFXScriptAPI。
26
使用JavaFX构建GUI应用程序教程日月雨林整理
注意：圆也是Group内容定义的一部分。
下面是用来添加红色指示器的代码：importjavafx.scene.shape.Circle;
//requiredtorenderacircle
content:[Group{
content:[Rectangle{...},
Circle{
centerX:115centerY:80radius:15
fill:Color.web(\"#ff3300\")stroke:Color.DARKRED}]}]
结果，此代码创建了一个圆心为(115,80)、半径为15的圆。该圆位于矩形的中央。该圆使用红色填充，其轮廓线为暗红色。以下屏幕抓图显示了一个上面有红色圆的矩形。
图5：具有“录制”指示器的按钮应用反射图形效果
最后一步是将“录制”按钮的映像添加到背景上。应用反射效果：
15添加javafx.scene.effect.Reflectionimport语句。16使用effect和Reflection变量指定效果。
这似乎是一个很难编程的步骤，但其实仅需以下几行代码就可以实现：importjavafx.scene.effect.Reflection;//requiredtoapplya
reflectioneffect
27
使用JavaFX构建GUI应用程序教程日月雨林整理
content:[Group{
content:[Rectangle{...},
Circle{...}]
effect:Reflection{fraction:0.9topOpacity:0.5topOffset:2.5}
}]
reflection对象字面值具有一个fraction实例变量，该变量用来定义在映像中可见的按钮区域的百分比。topOpacity变量用来定义映像的不透明性度，topOffset用来定义按钮底部与映像顶部之间的距离。
注意：fraction和topOpacity变量的取值范围是0.0到1.0。
有关反射效果的更多信息，请参见JavaFXScriptAPI。有关JavaFXAPI中图形效果的完整列表，请参见JavaFXGUI简介一课。运行示例
现在，您可以运行整个示例了。以下代码是完整的FXRecordButton.fx文件：importjavafx.stage.Stage;importjavafx.scene.Scene;
importjavafx.scene.paint.LinearGradient;importjavafx.scene.paint.Stop;importjavafx.scene.paint.Color;importjavafx.scene.Group;
importjavafx.scene.shape.Rectangle;importjavafx.scene.shape.Circle;
import
javafx.scene.effect.Reflection;
Stage{
title:\"JavaFXRecordButton\"width:249height:251visible:truescene:Scene{
fill:LinearGradient{
startX:0,startY:0,endX:0,endY:1.0,proportional:truestops:[
Stop{offset:0.0color:Color.WHITE},Stop{offset:1.0color:Color.BLACK}]}
content:[
28
使用JavaFX构建GUI应用程序教程日月雨林整理
Group{
content:[Rectangle{
x:40y:55width:150height:50
arcWidth:20arcHeight:55stroke:Color.BLACKfill:LinearGradient{
startX:0.0,startY:0.0,endX:0.0,endY:1.0,proportional:truestops:[
Stop{offset:0.0color:Color.WHITE},Stop{offset:1.0color:Color.BLACK}]}},
Circle{
centerX:115centerY:80radius:15
fill:Color.web(\"#ff3300\")stroke:Color.DARKRED}]
effect:Reflection{fraction:0.9topOpacity:0.5topOffset:2.5}}]}}
运行此应用程序的结果如下图所示。
图6：具有映像的“录制”按钮
总结
本课向您展示了使用内置的JavaFXSDK效果和对象的组合来创建丰富的可视图形是多么容易。
第5课：对UI对象应用数据绑定
29
使用JavaFX构建GUI应用程序教程日月雨林整理
本课介绍JavaFX中的数据绑定功能。使用此机制后，当一个变量发生变化时，另一个变量会随之更新（根据您定义的两个变量之间的关系）。有关数据绑定概念的更多信息，请参阅学习JavaFXScript编程语言中的数据绑定和触发课程。
在编程过程中，通常需要在另一个参数发生变化时更新某个特定参数。在JavaFXScript编程语言中，您可以通过数据绑定机制来完成此操作。您可以定义任意两个变量之间的关系，以便当一个变量发生变化时另一个变量会随之更新。JavaFX将跟踪任何变化并进行必要的更新。这种关系连同更新机制称为数据绑定。
要了解数据绑定的工作原理，请按如下所示创建一个简单的应用程序：
图1：启动后的数据绑定示例
具体的思路是，绘制一个滑块和一个圆，该圆的圆心绑定到滑块的值。圆的内部使用径向渐变模式进行绘制。在您移动滑块时，圆也随之移动。静止渐变填充使圆显示出日蚀各个阶段的效果。
图2：圆的位置根据滑块的位置进行变化
创建一个扩展名为.fx的文件，例如sample.fx。在任何时间，您都可以使用以下命令编译您的代码：
javafxcsample.fx
您可以使用以下命令运行编译的代码：javafxsample
创建应用程序窗口
创建一个标题为\"DataBinding\"的应用程序窗口，其宽度为220像素，高度为170像素。有关详细信息，请参见使用声明性语法。以下代码可创建此窗口。importjavafx.stage.Stage;
30
使用JavaFX构建GUI应用程序教程日月雨林整理
Stage{
title:\"DataBinding\"width:220height:170visible:true}
尽管这些代码很短，但它是一个完整的JavaFX应用程序，其输出如下所示。
图3：应用程序窗口添加圆
您可以向您的应用程序窗口添加对象，方法是：将这些对象放在Stage的scene中。有关更多详细信息，请参见在图形场景中显示UI对象。有关Circle类的详细信息，请参见使用声明性语法。
1
为javafx.scene.shape.Circle和javafx.scene.paint.Color类添加import语句。
通过添加Circle对象字面值定义场景的content变量。importjavafx.scene.Scene;
importjavafx.scene.shape.Circle;importjavafx.scene.paint.Color;
Stage{
title:\"DataBinding\"width:220height:170visible:truescene:Scene{content:Circle{
centerX:50centerY:60radius:50stroke:Color.YELLOW}}}
默认情况下，圆的内部是黑色的，场景的背景是白色的。在此步骤中，输出如下所示。
31
使用JavaFX构建GUI应用程序教程日月雨林整理
图4：添加到场景的圆
设置fill变量的值，以更改背景颜色。scene:Scene{
fill:Color.LIGHTGRAY...}
将填充模式添加到圆中
您可以通过将称为径向渐变的特定填充模式添加到圆中来增加示例的视觉吸引力。使用此模式后，当滑块移动时会显示出日蚀的效果。
要实现此绘制功能，请使用RadialGradient类。您可以通过使用Stop类来指定两种或更多种颜色，并且RadialGradient类将在它们之间提供一个插值。通过定义圆心和半径来指定一个可控制渐变模式的圆。您还可以在应用了第一种颜色的圆内定义焦点。最后一种颜色应用于圆的周界线。对于径向渐变填充模式，您可以为圆心、半径和焦点指定绝对值。在这种情况下，您需要将
proportional变量设置为false。如果将proportional变量设置为true，则圆心、半径和焦点的值范围应该是0.0到1.0，并且径向渐变将进行缩放以填充它所应用到的形状。
stops变量为径向渐变填充模式定义了一个颜色序列。使用方括号指定一个序列，使用逗号分隔其中的各个元素。
2为javafx.scene.paint软件包中的RadialGradient和Stop类添加import语句。3使用RadialGradient对象字面值定义fill实例变量。
4使用centerX、centerY和radius变量为圆心和半径指定绝对值。5通过使用focusX和focusY变量指定焦点。6
将proportional变量设置为false。
将stops变量定义为红色和白色的序列。importjavafx.scene.paint.RadialGradient;importjavafx.scene.paint.Stop;
content:Circle{
centerX:50centerY:60radius:50stroke:Color.YELLOWfill:RadialGradient{
centerX:50centerY:60radius:50focusX:50focusY:30
32
使用JavaFX构建GUI应用程序教程日月雨林整理
proportional:falsestops:[
Stop{offset:0color:Color.RED},Stop{offset:1color:Color.WHITE}]}}
编译并运行此修改后的代码会产生以下结果。
图5：使用径向渐变模式填充的圆添加滑块
javafx.ext.swing软件包中的SwingSlider类提供了一个滑块控件。将此滑块添加到场景中，并将其放在圆的下方。默认情况下，滑块将显示在点(0,0)处。您可以使用translateX和translateY实例变量来指定在场景中按X轴和Y轴方向平移坐标的距离。
7为javafx.ext.swing.SwingSlider类添加import语句。8
将SwingSlider对象字面值添加到场景的content变量中。
指定滑块的最小值和最大值，并将当前值设置为零。importjavafx.ext.swing.SwingSlider;
content:[
Circle{...},
SwingSlider{minimum:0maximum:60value:0}]
使用translateX和translateY实例变量指定滑块在场景内的位置。
content:[
Circle{...},
SwingSlider{
minimum:0
33
使用JavaFX构建GUI应用程序教程日月雨林整理
maximum:60value:0
translateX:10translateY:110}]
图6：已添加到应用程序窗口的滑块定义绑定关系
最后，将圆心与滑块值绑定。滑块显示在应用程序窗口中，您可以通过移动圆钮来更改其值。但是，您无法引用滑块值（该值是绑定所必需的）。解决办法是定义一个slider变量，然后引用slider.value。创建slider变量。
varslider=SwingSlider{minimum:0maximum:60value:0translateX:10translateY:110};
定义绑定关系。
Circle{
centerX:bindslider.value+50centerY:60radius:50...
bind运算符会跟踪右侧的值的任何变化。当滑块值发生变化时，圆心会随之更新，JavaFX会自动在新的位置显示圆。由于径向渐变填充的位置不发生变化，因此您可以看到圆是如何相对于初始填充进行移动的。
最后，让我们来看一看数据绑定示例的完整代码。编译、运行和探究运行中的数据绑定。importjavafx.stage.Stage;importjavafx.scene.Scene;
importjavafx.ext.swing.SwingSlider;importjavafx.scene.shape.Circle;importjavafx.scene.paint.Color;importjavafx.scene.paint.Stop;
import
javafx.scene.paint.RadialGradient;
34
使用JavaFX构建GUI应用程序教程日月雨林整理
varslider=SwingSlider{minimum:0maximum:60value:0translateX:10translateY:110};
Stage{
title:\"DataBinding\"width:220height:170scene:Scene{
fill:Color.LIGHTGRAY;content:[
slider,Circle{
centerX:bindslider.value+50centerY:60radius:50stroke:Color.YELLOWfill:RadialGradient{
centerX:50centerY:60radius:50focusX:50focusY:30proportional:falsestops:[
Stop{offset:0color:Color.RED},Stop{offset:1color:Color.WHITE},]}}]}
visible:true}总结
在本课中，您学习了如何创建数据绑定关系。在一个变量需要根据另一个变量的变化而更新时，可在您的应用程序中使用数据绑定机制。
第6课：排放GUI元素
使用JavaFXSDK中的布局机制，您可以很容易地排列和对齐组件，而不必为每个UI对象指定绝对坐标。尽管绝对坐标可提供一定程度的灵活性，但有时您会发现布局机制更加方便。本教程中提供的示例代码使用JavaFXScript编程语言的数据绑定和声明性语法。有关这些概念的更多详细信息，请参阅学习JavaFXScript编程语言。
考虑创建三个圆和一个单选按钮切换组。每个单选按钮可控制对应圆中的一种颜色。选择该单选按钮后，即会应用这种颜色，否则，圆是灰色的。此方案模拟交通信号灯，它是本教程中用来说明布局机制的示例。
35
使用JavaFX构建GUI应用程序教程日月雨林整理
图1：交通信号灯
要评估和测试您的应用程序，请创建一个扩展名为.fx的文件，例如layout.fx。您可以在任意时间使用以下命令编译您的代码：javafxclayout.fx
您可以使用以下命令运行编译的代码：javafxlayout创建应用程序窗口
使用Stage类创建一个窗口：
123
为javafx.stage.Stage类添加import语句。将Stage对象字面值添加到代码中。指定窗口的标题、宽度和高度。
创建图形场景
在在图形场景中显示UI对象中，您已经了解了UI组件、形状、文本和图形被当作是图形场景中的对象分层结构。现在，您可以创建场景了。
456
为Scene和Color类添加import语句。
将Scene对象字面值添加到Stage类的scene实例变量中。使用Scene类的fill变量定义场景的颜色。
javafx.stage.Stage;
importjavafx.scene.Scene;
36
使用JavaFX构建GUI应用程序教程日月雨林整理
importjavafx.scene.paint.Color;Stage{
title:\"Lights\"width:220height:130visible:truescene:Scene{
fill:Color.HONEYDEW}//Scene}//Stage定义单选按钮
创建一组单选按钮，在给定的时间只能选择其中一个按钮。这称为切换组。请执行以下步骤：使用SwingToggleGroup类定义切换组。
注意：在本课的示例代码中，您将为每个UI元素定义一个变量名称，以便可以很容易地了解布局机制是如何工作的。您还要通过引用变量名称来对UI元素应用绑定。
78910使用SwingRadioButton类创建三个可用来选择特定交通信号灯的单选按钮。使用toggleGroup实例变量将每个单选按钮添加到组中。使用font实例变量来更改单选按钮的标题样式。将相应的import语句添加到代码中。
以下代码片段用来定义一个切换组，然后创建单选按钮并将它们添加到组中。javafx.ext.swing.SwingToggleGroup;
importjavafx.ext.swing.SwingRadioButton;importjavafx.scene.text.Font;vargroup=SwingToggleGroup{};
varchoice1=SwingRadioButton{
text:\"STOP\"
foreground:Color.GRAY
font:Font{name:\"Tahoma\"size:15}toggleGroup:group};varchoice2=SwingRadioButton{
text:\"READY\"
foreground:Color.GRAY
font:Font{name:\"Tahoma\"size:15}toggleGroup:group};varchoice3=SwingRadioButton{
text:\"GO\"
foreground:Color.GRAY
font:Font{name:\"Tahoma\"size:15}toggleGroup:group};
37
使用JavaFX构建GUI应用程序教程日月雨林整理
创建圆
绘制代表交通信号灯的圆：
11为Circle、RadialGradient和Stop类添加import语句。12在lightStop变量中定义代表红灯的圆。应用径向渐变填充以增强此示例的视觉效果。importimportimportimport
javafx.scene.shape.Circle;javafx.scene.paint.Color;
javafx.scene.paint.RadialGradient;javafx.scene.paint.Stop;
varlightStop=Circle{
centerX:12centerY:12radius:12
stroke:Color.BLACK
fill:bindRadialGradient{
centerX:8,centerY:8,radius:12,proportional:falsestops:[
Stop{offset:0.0color:Color.WHITE},
Stop{offset:1.0color:if(choice1.selected)
thenColor.REDelseColor.GREY
}//Stop
]//stops
}//RadialGradient
};//Circle
上面的代码样例使用数据绑定机制来更改圆的颜色。如果choice1变量的selected实例变量值为true，则color实例变量将变成Color.RED，否则，它将是Color.GREY。有关形状和视觉效果的更多信息，请参阅创建图形对象。
13再创建两个由lightReady和lightGo定义的圆，然后将这两个圆绑定到相应的单选按钮。创建垂直布局
在创建所有组件之后，您可以使用HBox和VBox类将其排放在场景中。VBox类用于垂直排列组件，HBox类用于水平排列组件。在本示例中，您需要使用一个VBox对象来排放单选按钮，使用一个HBox对象来排放圆，还要使用一个HBox来排列这两个框。
图2：HBox和VBox的组合为单选按钮创建垂直布局：
38
使用JavaFX构建GUI应用程序教程日月雨林整理
14将相应的import语句添加到代码中。VBox和HBox都位于javafx.scene.layout软件包中。使用以下代码行在垂直框中排列这些单选按钮：VBox{content:[choice1,choice2,choice3]}
15使用spacing实例变量定义VBox对象的元素之间的间隔（以像素为单位）。以下代码片段可完成这些任务。importjavafx.stage.Stage;importjavafx.scene.Scene;
importjavafx.ext.swing.SwingToggleGroup;importjavafx.ext.swing.SwingRadioButton;importjavafx.scene.shape.Circle;importjavafx.scene.paint.Color;
importjavafx.scene.paint.RadialGradient;importjavafx.scene.paint.Stop;importjavafx.scene.layout.HBox;importjavafx.scene.layout.VBox;import
javafx.scene.text.Font;
vargroup=SwingToggleGroup{};
varchoice1=SwingRadioButton{
text:\"STOP\"
foreground:Color.GRAY
font:Font{name:\"Tahoma\"size:15}toggleGroup:group};varchoice2=SwingRadioButton{
text:\"READY\"
foreground:Color.GRAY
font:Font{name:\"Tahoma\"size:15}toggleGroup:group};varchoice3=SwingRadioButton{
text:\"GO\"
foreground:Color.GRAY
font:Font{name:\"Tahoma\"size:15}toggleGroup:group};
varlightStop=Circle{
centerX:12centerY:12radius:12
stroke:Color.GRAY
fill:bindRadialGradient{
centerX:8,centerY:8,radius:12,
proportional:falsestops:[
Stop{offset:0.0color:
Color.WHITE},
39
使用JavaFX构建GUI应用程序教程日月雨林整理
Stop{offset:1.0color:if
(choice1.selected)
then
Color.RED
else
Color.GREY
}//Stop
]
}//RadialGradient
};
varlightReady=Circle{
centerX:12centerY:12radius:12
stroke:Color.GRAY
fill:bindRadialGradient{
centerX:8,centerY:8,radius:12,
proportional:falsestops:[
Stop{offset:0.0color:
Color.WHITE},
Stop{offset:1.0color:if
(choice2.selected)
then
Color.GOLD
else
Color.GRAY
}//Stop
]
}//RadialGradient
};
varlightGo=Circle{
centerX:12centerY:12radius:12
stroke:Color.GRAY
fill:bindRadialGradient{
centerX:8,centerY:8,radius:12,
proportional:falsestops:[
Stop{offset:0.0color:Color.WHITE},Stop{offset:1.0color:if
(choice3.selected)
then
Color.GREEN
else
Color.GREY
}//Stop
40
使用JavaFX构建GUI应用程序教程日月雨林整理
]
}//RadialGradient
};
Stage{
title:\"Lights\"width:220height:130visible:truescene:Scene{
fill:Color.HONEYDEWcontent:
VBox{spacing:10content:[choice1,choice2,choice3]}}//Scene}//Stage
编译和运行之后，此修改后的代码将生成以下窗口。
图3：具有单选按钮的垂直框应用水平布局
执行以下步骤对交通信号灯圆应用水平布局：使用以下代码行将这些圆添加到HBox对象的内容中。
HBox{spacing:15content:[lightStop,lightReady,lightGo]}
16将translateY实例变量设置为25来为水平框指定垂直偏移。
17使用另一个HBox对象来排放具有单选按钮的垂直框和具有圆的水平框。//请参见此示例的完整代码，如下所示。importjavafx.stage.Stage;importjavafx.scene.Scene;
importjavafx.ext.swing.SwingToggleGroup;importjavafx.ext.swing.SwingRadioButton;importjavafx.scene.shape.Circle;importjavafx.scene.paint.Color;
importjavafx.scene.paint.RadialGradient;importjavafx.scene.paint.Stop;importjavafx.scene.layout.HBox;importjavafx.scene.layout.VBox;import
javafx.scene.text.Font;
vargroup=SwingToggleGroup{};varchoice1=SwingRadioButton{
41
使用JavaFX构建GUI应用程序教程日月雨林整理
text:\"STOP\"
foreground:Color.GRAY
font:Font{name:\"Tahoma\"size:15}toggleGroup:group};
varchoice2=SwingRadioButton{
text:\"READY\"
foreground:Color.GRAY
font:Font{name:\"Tahoma\"size:15}toggleGroup:group};varchoice3=SwingRadioButton{
text:\"GO\"
foreground:Color.GRAY
font:Font{name:\"Tahoma\"size:15}toggleGroup:group};
varlightStop=Circle{
centerX:12centerY:12radius:12
stroke:Color.GRAY
fill:bindRadialGradient{
centerX:8,centerY:8,radius:12,
proportional:falsestops:[
Stop{offset:0.0color:
Color.WHITE},
Stop{offset:1.0color:if
(choice1.selected)
then
Color.RED
else
Color.GREY
}
]
}
};
varlightReady=Circle{
centerX:12centerY:12radius:12
stroke:Color.GRAY
fill:bindRadialGradient{
centerX:8,centerY:8,radius:12,
proportional:falsestops:[
Stop{offset:0.0color:
Color.WHITE},
42
使用JavaFX构建GUI应用程序教程日月雨林整理
Stop
{offset:1.0color:if
(choice2.selected)
then
Color.GOLD
else
Color.GRAY
}
]
}
};
varlightGo=Circle{
centerX:12centerY:12radius:12
stroke:Color.GRAY
fill:bindRadialGradient{
centerX:8,centerY:8,radius:12,
proportional:false
stops:[
Stop{offset:0.0color:Color.WHITE},
Stop{offset:1.0color:if(choice3.selected)
thenColor.GREENelseColor.GREY}
]
}
};
Stage{
title:\"Lights\"width:220height:130visible:truescene:Scene{
fill:Color.HONEYDEWcontent:HBox{
spacing:10content:[
VBox{spacing:10content:[choice1,choice2,choice3]},
HBox{spacing:15content:[lightStop,lightReady,lightGo]translateY:
25}
]
}//HBox}//Scene}//Stage
编译和运行之后，此代码将生成以下窗口。
43
使用JavaFX构建GUI应用程序教程日月雨林整理
图4：具有单选按钮的垂直框和具有圆的水平框总结
在本课中，您学习了如何在场景中排放UI组件。您可以针对您的当前任务使用布局机制、绝对坐标或这两种方法的组合。
第7课：创建动画对象
JavaFX库提供了对创建动画的内置支持。本课向您展示如何构建图形对象并使用线性插值为其设置动画（JavaFX库支持的一种关键帧动画）。本课中的示例使用JavaFXScript语言的声明性语法以及数据绑定、图形和特定于节点的功能，因此可能有助于您熟悉学习JavaFXScript编程语言、在图形场景中显示UI对象和创建图形对象。
本课介绍向简单应用程序添加动画的逐步操作过程。考虑创建一片云，在晴空中飘浮，碰到窗口边界时反弹，如以下窗口所示。
图1：在窗口内反弹的云
要评估和测试您的动画应用程序，请创建一个扩展名为.fx的文件，例如cloud.fx。您可以在任意时间使用以下命令编译您的代码：javafxccloud.fx
您可以使用以下命令运行编译的代码：javafxcloud
创建应用程序窗口
使用Stage类创建一个窗口：
12
为javafx.stage.Stage类添加import语句。将Stage对象字面值添加到代码中。
44
使用JavaFX构建GUI应用程序教程日月雨林整理
创建图形场景
正如您在在图形场景中显示UI对象中所了解到的那样，UI组件、形状、文本和图像被当作是图形场景中的对象分层结构。这些图形对象的动画也在场景中进行，因此下一步是创建一个场景。
34
为Scene和Color类添加import语句。
将Scene对象字面值添加到Stage类的scene实例变量中。Scene类的fill变量定义场景的颜色。importjavafx.stage.Stage;importjavafx.scene.Scene;
importjavafx.scene.paint.Color;Stage{
title:\"Cloud\"visible:truescene:
Scene{
fill:Color.WHITE}//Scene}//Stage
有关JavaFXScript编程语言中采用的声明性语法的更多信息，请参阅“使用声明性语法”。添加背景图像
在JavaFXSDK中，图像是使用javafx.scene.image.Image类创建的，图像位置在url实例变量中指定。请注意，只能将一个Node对象添加到场景内容中，因此，您需要使用一个名为ImageView的适配器类。有关场景和节点的更多详细信息，请参见在图形场景中显示UI对象。
5为Image和ImageView类添加两个新的导入。
6设置一个图像，用作飘浮的云的背景。您可以使用位于java.sun.com中的日照图像：/javafx/1/tutorials/ui/animation/weather-sun.png这些更改将反映在修改后的代码中，如下所示：
importimportimportimportStage{
title:\"Cloud\"visible:truescene:
Scene{
fill:Color.WHITEcontent:[
ImageView{image:Image{url:
\"http://java.sun.com/docs/books/tutorial/2d/basic2d/examples/images/weather-sun.png\
45
javafx.stage.Stage;javafx.scene.Scene;
javafx.scene.paint.Color;javafx.scene.image.Image;
javafx.scene.image.ImageView;
使用JavaFX构建GUI应用程序教程日月雨林整理
}
]
}//Scene}//Stage
编译和运行之后，此修改后的代码将生成以下窗口。
图2：使用背景图像的窗口
注意：由于没有指定窗口的宽度和高度，因此图像刚好填满窗口。
绘制一片云
通过绘制5个首尾相接的弧来创建实际的云。第一个弧的终点是第二个弧的起点。下图对此进行了说明。
图3：形成云的弧的端点
要在代码中绘制此云，您需要执行以下步骤：
javafx.scene.shape软件包中的MoveTo、ArcTo和Path类，如以下代码片段所示。
Path{
fill:Color.WHITE
stroke:Color.LIGHTBLUEstrokeWidth:2
effect:Lighting{light:DistantLight{azimuth:90}}elements:[
MoveTo{x:15y:15},
ArcTo{x:50y:10radiusX:20radiusY:20sweepFlag:true},
46
使用JavaFX构建GUI应用程序教程日月雨林整理
ArcToArcToArcToArcTo
]}//Path
{{{{x:x:x:x:70502015y:y:y:y:20605015radiusX:radiusX:radiusX:radiusX:20201010radiusY:radiusY:radiusY:radiusY:20sweepFlag:true},20sweepFlag:true},5sweepFlag:true},10sweepFlag:true},
MoveTo类用于指示此形状的起点，ArcTo类用于创建弧段。使用Path类（表示一个简单的形状）将所有弧段组合成一个形状，然后启用基本的几何路径构造。如果需要创建一个自己的形状，使其不同于javafx.scene.shape软件包中提供的基本图形形状，则Path类很有用。Path类扩展了Node类，并继承了后者的所有实例变量和函数。
注意：sweepFlag实例变量已设置为true，因此按顺时针方向（“正”角度）绘制弧。如果按逆时针方向绘制弧，这些弧将不能正确弯曲。
应用以下代码创建照明效果，使云具有浮雕感。
effect:Lighting{light:DistantLight{azimuth:90}}
这种效果模拟使用一个远距光源照亮对象。azimuth实例变量用于定义光源的角度。为MoveTo、ArcTo、Path、Lighting和DistantLight类添加import语句。
有关形状和视觉效果的更多信息，请参阅创建图形对象。以下修改后的代码包含图形场景、图像和云：importimportimportimportimportimportimportimportimportimport
javafx.stage.Stage;javafx.scene.Scene;
javafx.scene.paint.Color;javafx.scene.image.Image;
javafx.scene.image.ImageView;javafx.scene.shape.ArcTo;javafx.scene.shape.MoveTo;javafx.scene.shape.Path;
javafx.scene.effect.Lighting;
javafx.scene.effect.light.DistantLight;
Stage{
title:\"Cloud\"visible:truescene:
Scene{
fill:Color.WHITEcontent:[
ImageView{image:
Image{url:
\"/docs/books/tutorial/2d/basic2d/examples/images/weather-sun.png\
},
Path{
fill:Color.WHITE
47
使用JavaFX构建GUI应用程序教程日月雨林整理
stroke:Color.LIGHTBLUEstrokeWidth:2
effect:Lighting{light:DistantLight{azimuth:90}}elements:[
MoveTo{x:15y:15},
ArcTo{x:50y:10radiusX:20radiusY:20sweepFlag:
true},
ArcTo{x:70y:20radiusX:20radiusY:20sweepFlag:
true},
ArcTo{x:50y:60radiusX:20radiusY:20sweepFlag:
true},
ArcTo{x:20y:50radiusX:10radiusY:5sweepFlag:
true},
ArcTo{x:15y:15radiusX:10radiusY:10sweepFlag:
true},
]}//Path
]}//Scene
}//Stage
编译和运行之后，此修改后的代码将生成以下窗口。
图4：具有一个图像和一个看上去像云的形状的窗口创建水平运动
下一步是为云设置动画。JavaFXScript语言支持关键帧动画概念。这意味着，图形场景的动画状态过渡是通过场景在某些时间点的状态的起始快照和结束快照（关键帧）声明的。给定这两个状态后，系统就可以自动执行动画。一经请求，它就可以停止、暂停、继续、反向或重复运动。
首先，通过设置云的水平动画（没有垂直运动）来简化任务。然后，再添加垂直运动。要设置云的水平动画，请更改Path对象的translateX实例变量，并保持translateY实例变量不变。请执行以下步骤：
7
将Path对象的translateY变量设置为15。
为起始点(0,15)和结束点(387,15)定义关键帧。要计算这些值，请考虑图像大小(470x119)和形状大小(83x64)。下图说明了这些尺寸。
48
使用JavaFX构建GUI应用程序教程日月雨林整理
图5：关键帧
8动画沿着由javafx.animation.Timeline对象表示的时间线进行。每条时间线包含由javafx.animation.KeyFrame对象表示的两个或多个关键帧。
创建具有两个关键帧的时间线来执行云的水平运动，并在启动应用程序时开始此运动。起始点和结束点之间的位置是使用线性插值计算的。importjavafx.animation.Timeline;importjavafx.animation.KeyFrame;
importjavafx.animation.Interpolator;varx:Number;
Timeline{keyFrames:[
KeyFrame{time:0s
values:x=>0.0},
KeyFrame{time:7s
values:x=>387.0tweenInterpolator.LINEAR}
]
}.play();
time实例变量用来定义所经过的时间，在这段时间里，将在单个Timeline对象周期内设置关联值。time是javafx.lang.Duration类的变量，它具有一个Number值，后跟\"s\"或\"ms\"（分别表示秒和毫秒）。=>运算符为关键值列表提供了一个字面值构造函数。tween运算符是插值的字面值构造函数。因此，在7秒钟内，云从像素0开始移到位置387。
尽管KeyFrame动画是典型的JavaFX对象，但JavaFX提供了一种特殊的语法，与标准的对象字面值语法相比，使用这种语法表示动画更简单。使用trigger子句可将任意回调与关键帧相关联。由at指定的时间是相对于时间线的起点的。此功能可简化代码，如下所示：
importjavafx.animation.Timeline;importjavafx.animation.KeyFrame;
importjavafx.animation.Interpolator;
49
使用JavaFX构建GUI应用程序教程日月雨林整理
varx:Number;
Timeline{keyFrames:[
at(0s){x=>0.0},
at(7s){x=>387.0tweenInterpolator.LINEAR}
]
}.play();
将Path对象的translateX实例变量绑定到x变量，如以下代码片段所示：Path{...
translateX:bindx...}
在x变量发生变化时，Path对象的translateX对象也随之发生变化。有关数据绑定机制的更多详细信息，请参见对UI对象应用数据绑定。控制时间线周期
您可以使用Timeline类的实例变量来控制时间线周期。
89
将repeatCount实例变量设置为Timeline.INDEFINITE可以循环动画。将autoReverse实例变量设置为true可以启用双向运动。
以下代码可完成这些任务：
javafx.animation.Timeline;
importjavafx.animation.KeyFrame;
importjavafx.animation.Interpolator;varx:Number;
Timeline{
repeatCount:Timeline.INDEFINITEautoReverse:truekeyFrames:[
at(0s){x=>0.0},
at(7s){x=>387.0tweenInterpolator.LINEAR}
]
}.play();
此应用程序修改后的代码如下所示：importimportimportimportimportimport
javafx.animation.Interpolator;javafx.animation.Timeline;javafx.stage.Stage;javafx.scene.Scene;
javafx.scene.paint.Color;javafx.scene.image.Image;
50
使用JavaFX构建GUI应用程序教程日月雨林整理
importjavafx.scene.image.ImageView;importjavafx.scene.shape.ArcTo;importjavafx.scene.shape.MoveTo;importjavafx.scene.shape.Path;
importjavafx.scene.effect.Lighting;
importjavafx.scene.effect.light.DistantLight;
varx:Number;
Timeline{
repeatCount:Timeline.INDEFINITEautoReverse:truekeyFrames:[
at(0s){x=>0.0},
at(7s){x=>387.0tweenInterpolator.LINEAR}]
}.play();
Stage{
title:\"Cloud\"visible:truescene:
Scene{
fill:Color.WHITEcontent:[
ImageView{image:
Image{url:\"/docs/books/tutorial/2d/basic2d/examples/images/weather-sun.png\
},Path{
translateX:bindxtranslateY:15fill:Color.WHITE
stroke:Color.LIGHTBLUEstrokeWidth:2
effect:Lighting{light:DistantLight{azimuth:90}}elements:[
MoveTo{x:15y:15},
ArcTo{x:50y:10radiusX:20radiusY:20sweepFlag:true},ArcTo{x:70y:20radiusX:20radiusY:20sweepFlag:true},ArcTo{x:50y:60radiusX:20radiusY:20sweepFlag:true},ArcTo{x:20y:50radiusX:10radiusY:5sweepFlag:true},ArcTo{x:15y:15radiusX:10radiusY:10sweepFlag:true},]
}//Path]
}//Scene
onClose:function(){java.lang.System.exit(0);}//closeaction}//Stage
51
使用JavaFX构建GUI应用程序教程日月雨林整理
编译和运行之后，此代码将生成以下窗口：
图6：水平运动
此动画应用程序使用可按均匀时间增量移动对象的线性插值。您可以尝试其他形式的插值。例如，如果您设置Interpolator.EASEBOTH类型，则在时间线周期的起点和终点，云的运动速度将稍微下降。添加垂直运动
您可以通过创建最初所需的飘浮效果来改进应用程序。
10为此形状的y坐标创建另一个时间线。
translateY实例变量绑定到y值，如以下代码片段所示：vary:Number;Timeline{repeatCount:autoReverse:keyFrames:[at(0s){yat(4s){y]
}.play();...
Timeline.INDEFINITEtrue
=>0.0},
=>55.0tweenInterpolator.LINEAR},
Path{
...
translateY:bindy...}//Path
注意：在四秒钟之后，y变量达到其最大值位置，这比x变量要快。因此，translateY值变化得比translateX快。这将产生漫游效果。
以下是此示例的完整代码。
importjavafx.animation.Interpolator;
52
使用JavaFX构建GUI应用程序教程日月雨林整理
importjavafx.animation.Timeline;importjavafx.stage.Stage;importjavafx.scene.Scene;
importjavafx.scene.paint.Color;importjavafx.scene.image.Image;
importjavafx.scene.image.ImageView;importjavafx.scene.shape.ArcTo;importjavafx.scene.shape.MoveTo;importjavafx.scene.shape.Path;
importjavafx.scene.effect.Lighting;
importjavafx.scene.effect.light.DistantLight;
varx:Number;Timeline{repeatCount:Timeline.INDEFINITEautoReverse:true
keyFrames:[at(0s){x=>0.0},
at(7s){x=>387.0tweenInterpolator.LINEAR},
]
}.play();vary:Number;Timeline{repeatCount:Timeline.INDEFINITEautoReverse:true
keyFrames:[at(0s){y=>0.0},
at(4s){y=>55.0tweenInterpolator.LINEAR},
]
}.play();
Stage{
title:\"Cloud\"visible:truescene:
Scene{
fill:Color.WHITEcontent:[
ImageView{image:
Image{url:\"/docs/books/tutorial/2d/basic2d/examples/images/weather-sun.png\
},Path{
translateX:bindxtranslateY:bindyfill:Color.WHITE
stroke:Color.LIGHTBLUEstrokeWidth:2
effect:Lighting{light:DistantLight{azimuth:90}}elements:[
53
使用JavaFX构建GUI应用程序教程日月雨林整理
MoveTo{x:15y:15},
ArcTo{x:50y:10radiusX:ArcTo{x:70y:20radiusX:ArcTo{x:50y:60radiusX:ArcTo{x:20y:50radiusX:ArcTo{x:15y:15radiusX:]
}//Path
]
}//Scene
onClose:function(){java.lang.System.exit(0);}//closeaction}//Stage
2020201010radiusY:radiusY:radiusY:radiusY:radiusY:20sweepFlag:true},20sweepFlag:true},20sweepFlag:true},5sweepFlag:true},10sweepFlag:true},
编译和运行之后，此代码将生成以下窗口。
图7：在窗口内反弹的云总结
本课介绍了如何创建动画对象，并对插值动画进行了分析。请尝试使用本课中提到的概念和技巧来探究JavaFXSDK的其他动画功能。
第8课：使GUI元素具有交互性错误！未找到目录项。
是否准备使您的应用程序具有一些交互性？本课向您展示了如何按照逐步操作过程向按钮应用程序添加行为。一旦您理解了此概念，就可以继续创建更为复杂的交互式应用程序。
使用JavaFXScript，您可以通过方便的事件处理机制以预编程方式对事件进行应用程序响应。每个可能显示行为的JavaFX对象都具有映射到与事件相关的函数的实例变量。您可以定义这些函数来处理诸如单击鼠标按钮或释放键之类的事件。例如，您可以定义在用鼠标单击圆时显示文本的函数。有关对象可以处理的事件的完整列表，请参见JavaFXScriptAPI。
本课将通过创建一个简单的交互式应用程序来帮助您了解如何在JavaFX中处理鼠标事件。此应用程序演示了一个“播放－暂停”按钮，在您执行不同的鼠标操作时，该按钮的外观将发生变化。在您进入或退出按钮区域或者单击、按下或释放按钮时，该按钮将自动更改其外观。下面的图像显示了按钮在每个描述状态时的屏幕抓图。
54
使用JavaFX构建GUI应用程序教程日月雨林整理
图1：鼠标离开按钮图2：鼠标在按钮上图3：鼠标按下
鼠标光标不在按钮上，显示“播放”指示器，按钮不突出显示。鼠标光标在按钮区域中，按钮突出显示。
鼠标光标正按下此按钮，但没有发生单击，按钮变暗。
图4：显示“暂停”图5：鼠标离开按钮
鼠标光标已释放按钮，发生了单击，指示器从“播放”变为“暂停”，按钮突出显示。鼠标光标退出按钮区域，显示“暂停”指示器，按钮不突出显示。
在初始状态，当鼠标进入按钮时，按钮开始变亮。然后，当您按下或单击按钮时，它会变暗。如果您释放鼠标按钮，其指示器从“播放”变为“暂停”。如果您再次单击此按钮，“暂停”指示器将再次切换为“播放”。
由于本课着重讨论事件处理，因此不介绍创建图形的实际过程。相反，本课提供图形的完整源代码，并给出如何处理这些图形上发生的事件的详细步骤。如果您要了解有关创建图形的更多信息，请参阅创建图形对象。
创建一个扩展名为.fx的文件，例如FXInteractiveButton.fx。避免使用与现有的类、实例变量或保留字的名称匹配的文件名，因为这会在编译过程中导致错误。有关现有的类、变量和保留字的更多信息，请参见JavaFXScriptAPI和学习JavaFXScript编成教程。您可以在任意时间使用以下命令编译您的代码：
55
使用JavaFX构建GUI应用程序教程日月雨林整理
javafxcFXInteractiveButton.fx
您可以使用以下命令运行编译的代码：javafxFXInteractiveButton添加图形
向应用程序添加图形。Graphics.fx文件中提供了用来显示图形的完整源代码。
注意：表示按钮的圆、表示“播放”指示器的三角形的路径和表示“暂停”指示器的矩形都定义在一个Group中，因为事件发生在此Group中的图形上。有关Group类的更多信息，请参见JavaFXScriptAPI。
定义光标
只要您创建了一个按钮，您就可以定义一个手形光标，当您指向该按钮时将显示这个光标。定义光标：
12
添加javafx.scene.Cursor导入语句。
在Group内部指定cursor变量，然后将其值设置为Cursor.HAND。
以下代码将生成此效果：
javafx.scene.Cursor;
cursor
Stage{...
content:[...Group{...
cursor:Cursor.HAND...
content:[...]}]}
//requiredtodisplaya\"Hand\"
有关Cursor类的更多信息，请参见JavaFXScriptAPI。有关JavaFXSDK中的可视光标列表，请参见JavaFXGUI简介。处理鼠标进入事件
56
使用JavaFX构建GUI应用程序教程日月雨林整理
当鼠标光标进入按钮区域时将发生此事件。它由onMouseEntered函数控制。处理鼠标进入事件：
34
添加javafx.scene.input.MouseEvent导入。定义onMouseEntered函数。
注意：使用evt变量作为此函数的MouseEvent类型属性。并且，此函数没有输出值，因此它的返回类型是void。
所有事件处理函数都使用变量evt，并且它们的类型都是void。这些函数还引用Group，因此，它们应该在Group内部指定，如以下代码中所示：
importjavafx.scene.input.MouseEvent;mouseevents
Stage{...
content:[...
Group{...
content:[...]
onMouseEntered:function(evt:MouseEvent):Void{effect.level=0.65;}}]}
//requiredtohandle
一旦您的鼠标进入此按钮，此按钮就开始变亮。变亮效果是由effect和level变量控制的。发亮级别设置为0.65，该级别足够高，可以看到光标在按钮上。有关onMouseEntered函数的更多信息，请参见JavaFXScriptAPI。有关MouseEvent类的更多信息，请参见JavaFXScriptAPI。处理鼠标单击事件
鼠标单击事件可控制单击按钮时按钮的行为。它是借助于onMouseClicked函数进行处理的。处理鼠标单击事件：
5
添加javafx.scene.input.MouseButton导入。这将仅启用对鼠标左键单击的处理。
义负责处理鼠标单击和鼠标按下事件的变量。以下是步骤1和步骤2的代码：importjavafx.scene.input.MouseButton;mousebuttonclicks
varvisiblePlay:Boolean=true;
//requiredtohandleonlyleft
//requiredtoswitchbetweent
57
使用JavaFX构建GUI应用程序教程日月雨林整理
he\"Play\"and\"Pause\"indicatorvarvisiblePause:Boolean=false;//requiredtoswitchbetweenthe\"Play\"and\"Pause\"indicatorvarplay:Boolean=false;
//requiredtoidentifywhether
\"Play\"or\"Pause\"indicatorshouldbedisplayedStage{...}
定义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;}}}}
6将visiblePlay绑定到Path对象中的visible变量。
将visiblePause绑定到每个Rectangle中的visible变量。以下是步骤4和步骤5的代码：
Group{
...
content:[...Path{
visible:bindvisiblePlay;...},
Rectangle{
visible:bindvisiblePause;...},
58
使用JavaFX构建GUI应用程序教程日月雨林整理
Rectangle{
visible:bindvisiblePause;},
]
//eventhandlingfunctionshere}
上面的代码样例实际上会执行以下操作。
•最初，visiblePlay布尔变量设置为true，play布尔变量设置为false。Path的visible变量（用于定义“播放”指示器）绑定到visiblePlay，并且也是true，因此，在应用程序启动时，显示“播放”指示器。
•在您单击此按钮时，visiblePlay将变成false，play和visiblePause将变成true。由于Rectangle的visible变量以图形方式表示“暂停”指示器，且被绑定到visiblePause，因此，当visiblePause变成true时，将显示这些图形。在您单击此按钮时，会建立“播放”与“暂停”之间的切换显示逻辑。
注意：只能使用鼠标左键执行这些操作。这是由if(evt.button==MouseButton.PRIMARY)语句控制的。
有关onMouseClicked函数的更多信息，请参见JavaFXScriptAPI。有关MouseButton类的更多信息，请参见JavaFXScriptAPI。处理鼠标按下事件
此事件定义按下鼠标按钮时您的应用程序将执行的操作。使用onMousePressed函数处理此事件。要处理此事件，请定义onMousePressed函数，如以下代码所示：
{...
content:[...]
onMouseEntered{...}onMouseClicked{...}
onMousePressed:function(evt:MouseEvent):Void{if(evt.button==MouseButton.PRIMARY){effect.level=0.0;}}}
一旦按下鼠标左键，屏幕按钮就变暗，以模仿按下的效果。如果按下鼠标但没有单击，则“播放-暂停”指示器不会发生变化。
注意：只能使用鼠标左键执行鼠标按下操作。这是由if(evt.button==MouseButton.PRIMARY)语句控制的。
59
使用JavaFX构建GUI应用程序教程日月雨林整理
有关onMousePressed函数的更多信息，请参见JavaFXScriptAPI。处理鼠标释放事件
此事件定义在释放鼠标左键时您的应用程序执行的操作。此操作由onMouseReleased函数控制。要处理鼠标释放事件，请使用以下代码：
{...
content:[...]
onMouseEntered{...}onMouseClicked{...}onMousePressed{...}
onMouseReleased:function(evt:MouseEvent):Void{effect.level=0.65;}}
释放鼠标按钮时，会发生onMouseReleased和onMouseClicked两个事件：当鼠标光标仍在图形按钮上时，应用程序中的图形按钮仍突出显示；“播放-暂停”指示器发生变化。有关onMouseReleased函数的更多信息，请参见JavaFXScriptAPI。处理鼠标退出事件
当鼠标光标退出按钮区域时，将发生此类事件。此事件是由onMouseExited函数定义的。要定义鼠标退出事件，请使用以下代码：
Group{
...
content:[...]
onMouseEntered{...}onMouseClicked{...}onMousePressed{...}onMouseReleased{...}
onMouseExited:function(evt:MouseEvent):Void{effect.level=0.3;}}
当鼠标光标退出图形按钮定义的区域时，不再突出显示此按钮。此按钮将返回其初始状态，发亮级别为0.3。这是Glow效果的默认级别，它是effect:effect语句对Group设置的，作为初始突出显示状态。
有关onMouseExited函数的更多信息，请参见JavaFXScriptAPI。有关绑定的更多信息，请参见对UI对象应用数据绑定。
此处是完整的FXInteractiveButton.fx文件。
60
使用JavaFX构建GUI应用程序教程日月雨林整理
总结
JavaFXSDK提供了可处理事件的所有内置函数。此示例展示了使用其中一些函数来使您的应用程序响应用户操作产生的事件是多么容易。
61
因篇幅问题不能全部显示，请点此查看更多更全内容