使用JavaFX+构建GUI+教程

创建应用程序窗口
为了显示图形，需要创建一个窗口。 创建窗口： 1. 指定 Stage 对象字面值。绘制任何对象都需要使用 Stage。
Stage {}
这等效于：
Stage { }
2. 此窗口应该足够大，以便能够将矩形和圆都显示出来。在本示例中，此窗 口是一个 249 x 251 像素的矩形。要创建如此大小并且标题为 "Declaring is Easy" 的窗口，请在花括号中使用以下代码声明这些值：
]
由于矩形是在任何其他对象之前声明的，所以首先绘制该矩形。该矩形将位于后 来绘制的任何其他对象后面。
此代码使用 Circle 对象字面值来创建 Circle 类的一个实例。圆具有 5 个 用来定义其状态的实例变量，包括窗口上的 X 和 Y 位置、半径、填充和笔画颜 色。结果，此代码创建了一个圆，其半径为 83，圆心位于 118,110，且以白色 填 充 ，轮廓 线 为 红 色 。有关 Circle 类的更多信息，请参见 JavaFX Script API。
第 3 课：在图形场景中显示 UI 对象
本课介绍 作为 JavaFX Script 编程语言 基础的 节点 体系结 构和 场景图 形， 并包含 有关
Scene、Node 和 Group 类的信息。在本课中，您将构建一个图形场景、创建一组节
点并对该组应用变换。有关声明性语法的概念的更多信息，请参见使用声明性语法。
} }
运行此代码时，将显示以下窗口。
图 5：完整的应用程序
更改代码和运行示例
将圆放在正方形下面。要执行此操作，请使用以下代码切换圆和正方形的顺序：
import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.Color; import javafx.scene.shape.Circle;
JavaFX Script 编程语言是基于场景图形的。场景图形是一个树状数据结构，可 用于在场景中定义图形对象的分层结构。场景图形中的单个元素称作节点。每个 节点都有一个父节点，但根节点除外，根节点没有父节点。每个节点是叶节点或 分支。叶节点没有子节点。分支节点具有零个或多个子节点。 JavaFX 节点可处理不同类型的内容，如 UI 组件、形状、文本、图像和媒体。 可以变换节点，也可以对其设置动画。您还可以对节点应用各种效果。
图 2：空窗口
设置场景
在 stage 内，设置用来容纳 Node 对象（如圆或矩形）的 scene。使用以下代 码创建 Scene：
Stage { ... scene: Scene { content: [ ] }
}
此场景是用来放置节点类型的对象的根区域。此场景具有一个用来容纳节点的 content 变量。有许多不同类型的节点，如图形对象、文本和 GUI 组件。有 关节点和 Scene 类的更多信息，请参见在图形场景中显示 UI 对象一课和 JavaFX Script API。 当您运行目前已定义的代码时，将会看到以下窗口。
运行示例
现在，您可以运行整个示例了。以下代码是一个完整的 Declaring.fx 文件：
import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.Color; import javafx.scene.shape.Circle;
正如您在学习 JavaFX Script 编程语言中所了解的那样，JavaFX Script 使用 声明性方法进行编程。在创建应用程序的 UI 时，声明很方便，因为在代码中声 明的对象的结构反映了场景图形的视觉结构，这样您就能很轻松地理解和维护代 码。有关场景图形的更多信息，请参见在图形场景中显示 UI 对象。 为帮助您理解此方法，在本课中，您将按照逐步操作过程创建一个简单的样例 JavaFX Script 应用程序，该应用程序将绘制一个绿色的圆角矩形，并在该矩形 上面绘制一个具有红色轮廓线的白色圆。这两个对象都位于标题为 "Declaring Is Easy!!" 的窗口中。运行此应用程序时，将显示以下窗口。
Stage { title: "Declaring Is Easy!" width: 249 height: 251 visible: true
scene: Scene { content: [ Rectangle { x: 45 y: 35 width: 150 height: 150 arcWidth: 15 arcHeight: 15 fill: Color.GREEN }, Circle { centerX: 118 centerY: 110 radius: 83 fill: Color.WHITE stroke: Color.RED } ]
JavaFX 提 供 对 效 果 （ 通 过 javafx.scene.effect 和 javafx.scene.effect.light 软件包提供）的强大支持。在 JavaFX GUI 简 介中，您可以看到一些应用的效果和变换。 节点可以接收鼠标和键盘事件。您可以定义在出现此类事件时可以收到通知的函 数。有关详细信息，请参见使 GUI 元素具有交互性。 可以将节点组合到一起，将其看作单个实体。如果需要为几个节点提供通用行为 ， 请将它们组合在一起，然后为整个组定义所需的行为。javafx.scene.Group 类表示一组节点。 现在，创建如图 1 所示的简单应用程序。此应用程序的图形场景包含三个节点， 这三个节点分别显示在下面的单独窗口中。它们是形状对象（圆）、文本和图像 。
javafxc Declaring.fx
您可以使用以下命令运行编译的代码：
javafx Declaring
添加必要的导入
将导入添加到 .fx 文件中，以确保此应用程序可以访问必要的类。
import javafx.stage.Stage; import javafx.scene.Scene; rectangle on a window import javafx.scene.shape.Rectangle; rectangle import javafx.scene.paint.Color; rectangle and circle with color import javafx.scene.shape.Circle;
Stage { title: "Declaring Is Easy!" width: 249 height: 251 visible: true scene: Scene { content: [ Circle { centerX: 118 centerY: 110 radius: 83 fill: Color.WHITE stroke: Color.RED }, Rectangle { x: 45 y: 35 width: 150 height: 150 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ] }
}
编译并运行此应用程序。矩形现在位于圆的上方。
图 6：已切换的对象顺序
注意：您可以使用 JavaFX Script 支持的布局方法来简化对象布局。有关布局 方法的更多信息，请参见排放 GUI 元素。
总结
正如本课所展示的，声明性语法可简化图形的创建并使代码易于阅读和维护。您 在代码中声明的元素的顺序与它们在应用程序中出现的顺序是匹配的。
在本课中，您将创建一个具有三个节点（圆、文本和图像）的应用程序，如下所 示。
图 1：节点示例
JavaFX 可以绘制场景中的所有内容。您可以将场景看作用来绘制图形内容的绘 图表面。场景是一个用来容纳场景图形节点的容器。 在任何 JavaFX GUI 应用程序中，都需要创建一个场景并向其中添加节点。您可 以通过应用效果、变换和动画来修改图形场景。JavaFX 运行时负责处理图形场 景中的任何更改并在必要时进行重新绘制。 javafx.scene.Node 类是场景图 形节点 的基类 。 所有其他节 点类（ 例如 javafx.scene.shape.Circle）可从 Node 类继承。有关实例变量和函数 的完整列表，请参见 Node 类的 API 文档。 Node 类可定义一个局部坐标系，在该坐标系中，X 坐标值从左向右递增，Y 坐 标值从上向下递增。 可以通过应用变换（如平移、旋转、缩放和剪切）来更改节点。例如，平移可将 节点 的坐 标 系 原 点沿 X 或 Y 轴或 这两 个 轴 移 动。 要 定 义 平移 ， 请 设 置 translateX 或 translateY 变量或这两个变量的值。
Stage { title: "Declaring Is Easy!" width: 249 height: 251 visible: true
}
冒号左边的词 title、width、height 和 visible 称作实例变量，您可以 参阅 Stage 文档以获取可用变量的完整列表。title 将 'Declaring Is Easy' 短语放在窗口的顶部边框中。width 和 height 是像素值。有关 JavaFX Script 中对象字面值、类和实例变量的更多信息，请参见语言教程中的编写脚 本和使用对象。 当您运行目前已定义的代码时，将会看到以下窗口。
使用 JavaFX 构建 GUI 教程
使用声明性语法
您是否熟悉声明性编程？JavaFX Script 使用的就是这种简单而强大的编码样式。本课通过指 导您创建一个简单的 GUI 应用程序来展示使用声明性语句是多么容易。有关更多信息，请 参阅学习 JavaFX Script 编程语言中的编写脚本、使用对象和编写您自己的类。