使用JavaFX+构建GUI+教程

此教程是您学习 JavaFX Script 编程诧言的起点。它叧着重亍介终基础知识，即着重亍所有 FX 应用程序通用的基本非可视核心绋构。学完本教程后，您就可以学习使用 JavaFX 构建 GUI 应用程序了，它是该系列的第二个教程。学完第二个教程乊后，媒体浏览器教程将引导您完成一个实际应用程序的完整端到端开収。 ### 使用JavaFX构建GUI教程 #### 一、JavaFX Script简介及声明性语法的重要性 JavaFX 是一个用于创建丰富的客户端应用程序的平台，它支持多种语言包括 JavaFX Script。JavaFX Script 是一种简单而强大的声明性语言，使得开发人员能够轻松地创建复杂的用户界面。在学习如何使用 JavaFX 构建 GUI 应用程序之前，首先需要了解 JavaFX Script 的基本概念。 **声明性编程**是一种编程范式，其关注点在于描述“**是什么**”而不是“**怎么做**”。这种方式非常适合用于构建用户界面，因为它允许开发者直接定义界面上的元素及其关系，从而简化了 UI 设计和维护的过程。例如，当创建一个包含按钮和文本框的窗体时，声明性语言允许我们直接描述这些组件的位置、大小和其他属性，而不需要编写一系列指令来实现这些布局效果。 #### 二、JavaFX Script语法特点 JavaFX Script 使用了一种简洁的语法，其中最显著的特点之一就是使用 **对象字面量** 来创建对象。对象字面量提供了一种非常直观的方式来构造和初始化对象。例如： ```java Stage{ title: "My Application", width: 600, height: 400 } ``` 在这个例子中，我们创建了一个 `Stage` 对象，并设置了它的标题、宽度和高度。这种语法不仅易于阅读，而且可以清晰地表达出对象的属性及其值。 #### 三、创建简单的JavaFX应用程序 接下来，我们将通过创建一个简单的JavaFX应用程序来深入理解声明性语法的应用。这个应用程序将显示一个带有标题的窗口，并在其中绘制一个绿色的圆角矩形以及一个红色边框的白色圆圈。 1. **创建项目文件**： - 创建一个 `.fx` 文件，比如命名为 `Declaring.fx`。避免使用与现有类名、变量名相同的文件名，以防止编译错误。 - 使用如下的命令编译和运行代码： ```bash javac -Xplugin:JavaFX ./Declaring.fx java -Xplugin:JavaFX ./Declaring ``` 2. **添加必要的导入**： - 为了使程序能够访问必要的类，需要在 `.fx` 文件中导入相应的包： ```java import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; ``` 3. **创建应用程序窗口**： - 首先需要创建一个 `Stage` 对象，这是所有 JavaFX 应用程序的基础，所有其他内容都将被渲染到这个 `Stage` 上。 - 窗口的大小和标题可以通过实例变量来设置： ```java Stage{ title: "Declaring Is Easy!" width: 249 height: 251 visible: true } ``` - 运行这段代码后，会显示出一个空白窗口。 4. **设置场景**： - 在 `Stage` 内部，需要设置一个 `Scene` 对象，它是所有 UI 元素的容器。可以使用如下代码创建 `Scene`： ```java Scene{ content: [] } ``` - 这段代码会创建一个空白的场景，并将其添加到窗口中。 5. **创建矩形**： - 接下来，在 `content` 数组中添加一个 `Rectangle` 对象： ```java Rectangle{ x: 45 y: 35 width: 150 height: 150 arcWidth: 15 arcHeight: 15 fill: Color.GREEN } ``` - 这个矩形的位置、尺寸和颜色都是通过实例变量来设置的。 6. **添加圆形**： - 同样，在 `content` 数组中添加一个 `Circle` 对象： ```java Circle{ center: { x: 100, y: 100 } radius: 50 stroke: Color.RED fill: Color.WHITE } ``` - 圆形的位置、半径、填充色和边框颜色同样通过实例变量设置。 7. **完整代码示例**： - 将以上部分组合起来，完整的代码如下所示： ```java import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Rectangle; import javafx.scene.paint.Color; import javafx.scene.shape.Circle; 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{ center: { x: 100, y: 100 } radius: 50 stroke: Color.RED fill: Color.WHITE } ] } } ``` #### 四、总结 通过本教程的学习，您已经掌握了使用 JavaFX Script 构建 GUI 的基础。接下来，可以继续深入学习 JavaFX 的更多高级特性，比如事件处理、动画、数据绑定等，这些都是构建复杂和动态的用户界面不可或缺的部分。同时，建议进一步探索 JavaFX 的官方文档和社区资源，以便获得更全面的知识和技术支持。