60、JavaFX应用开发：使用Scene Builder与编写代码

最新推荐文章于 2025-10-08 15:21:27 发布

dapp9builder

最新推荐文章于 2025-10-08 15:21:27 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

分类专栏： Java编程入门：从控制结构到面向对象文章标签： JavaFX Scene Builder FXML

本文链接：https://blog.youkuaiyun.com/dapp9builder/article/details/150522333

Java编程入门：从控制结构到面向对象专栏收录该内容

69 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

JavaFX应用开发：使用Scene Builder与编写代码

1. Scene Builder简介

Scene Builder是Oracle提供的免费设计工具，用于可视化创建图形用户界面（GUI）。你既可以仅使用Java代码编写JavaFX GUI应用，过程与编写Swing应用类似；也可以使用Scene Builder来可视化创建GUI。具体操作是将所需组件从组件库拖放到空白窗口，对组件进行布局并设置属性，最后将GUI保存为FXML文件。

FXML是一种标记语言，用于描述JavaFX场景图中的组件，其使用标签组织数据，类似于HTML在网页浏览器中格式化文本的方式。例如，以下是一个简单的FXML示例：

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity"
           minHeight="-Infinity" minWidth="-Infinity" prefHeight="130.0"
           prefWidth="173.0" xmlns:fx="http://javafx.com/fxml/1"
           xmlns="http://javafx.com/javafx/2.2">
  <children>
     <Label fx:id="myLabel" layoutX="53.0" layoutY="31.0"
 text="Hello World!" />
     <Button fx:id="myButton" layoutX="53.0" layoutY="80.0"
mnemonicParsing="false" text="Click Me" />
  </children>
</AnchorPane>

2. 启动Scene Builder

你可以从以下网址下载Scene Builder：www.oracle.com/technetwork/java/javafx/downloads/ 。
- Windows系统 ：安装时会在桌面自动创建快捷方式，你可以通过双击快捷方式，或者在“所有程序”中找到“JavaFX Scene Builder”并点击对应的版本号（如2.0）来启动。
- Mac系统 ：前往“应用程序”文件夹，双击JavaFX Scene Builder的快捷方式（版本号如2.0）来启动。

3. Scene Builder主窗口

Scene Builder主窗口包含多个常用的屏幕元素，各部分功能如下：
| 面板名称 | 功能描述 |
| ---- | ---- |
| 菜单栏 | 包含Scene Builder的各种命令 |
| 库面板 | 提供JavaFX组件列表，可将组件拖放到内容面板以添加到GUI中 |
| 内容面板 | 用于可视化设计应用程序的GUI，通过从库面板拖放组件来创建 |
| 文档面板 | 分为层次结构和控制器两部分。层次结构部分显示正在构建的GUI场景图，控制器部分允许将GUI连接到包含应用程序事件监听器的Java类 |
| 选择栏 | 显示场景图中当前选定节点的层次路径 |
| 检查器面板 | 分为属性、布局和代码三个部分。属性部分可查看和编辑所选组件的属性值；布局部分可指定组件在GUI窗口调整大小时的显示方式；代码部分可给组件分配fx:id，并指定事件处理程序 |

4. 使用Scene Builder创建Kilometer Converter GUI

下面通过具体步骤展示如何使用Scene Builder创建Kilometer Converter应用的GUI：
1. 启动Scene Builder ：按照上述启动方法打开Scene Builder。
2. 创建根节点 ：从库面板的“容器”部分拖动一个AnchorPane组件到内容面板，此时内容面板会显示AnchorPane，文档面板的层次结构部分也会出现相应条目。
3. 调整AnchorPane大小 ：AnchorPane默认大小为600像素宽、400像素高，对于本应用过大，可通过以下两种方式调整大小：
- 使用组件的大小调整手柄 ：在内容面板中选择组件时，其边缘会出现大小调整手柄，将鼠标光标移到手柄上，光标会变为双向箭头，点击并拖动鼠标即可调整组件大小。
- 使用检查器面板的布局部分 ：点击检查器面板的下拉箭头，确保“查看部分”被选中，然后打开布局部分，更改“首选宽度”和“首选高度”字段为所需的值（如280像素宽、135像素高）。
4. 创建提示标签 ：打开库面板的“控件”部分，找到Label组件并拖动到AnchorPane上。选中该Label组件，打开检查器面板的属性部分，找到“文本”属性，将其值改为“Enter a distance in kilometers:”。也可以通过双击内容面板中的Label组件直接编辑文本。
5. 分配fx:id给标签 ：选中Label组件，打开检查器面板的代码部分，找到“fx:id”字段，将其值改为“promptLabel”。
6. 调整标签位置 ：如有必要，通过鼠标点击并拖动Label组件，将其移动到AnchorPane的左上角区域。
7. 创建文本框 ：在库面板的“控件”部分找到“文本字段”组件，拖动到AnchorPane上。选中该文本框组件，使用其大小调整手柄调整大小，并将其拖动到大致所需的位置。
8. 分配fx:id给文本框 ：选中TextField组件，打开检查器面板的代码部分，将“fx:id”字段的值改为“kilometerTextField”。
9. 创建输出标签 ：
- 从库面板的“控件”部分拖动一个Label组件到AnchorPane上。
- 选中该Label组件，打开检查器面板的属性部分，删除“文本”属性的内容，使其不显示文本。
- 调整该Label组件的大小和位置，使其与预期效果相似。
- 选中该Label组件，打开检查器面板的代码部分，将“fx:id”字段的值改为“outputLabel”。
10. 创建转换按钮 ：
- 从库面板的“控件”部分拖动一个Button组件到AnchorPane上。
- 选中该Button组件，打开检查器面板的属性部分，将“文本”属性的值改为“Convert to Miles”。
- 调整该Button组件的位置，使其与预期效果相似。
- 选中该Button组件，打开检查器面板的代码部分，将“fx:id”字段的值改为“convertButton”。
11. 查看场景图组件 ：文档面板的层次结构部分会显示添加到GUI场景图的组件，点击层次结构面板中的组件可在内容面板中选中该组件。若想在文档面板中查看每个组件的fx:id，点击面板顶部的向下箭头，选择“层次结构显示”，然后选择“显示fx:id”。
12. 保存GUI为FXML文件 ：在菜单栏中点击“文件”，选择“另存为”，选择系统中的保存位置，将文件保存为“KilometerConverter.fxml”，并记住保存位置，后续需要在相同位置保存Java文件。
13. 预览GUI ：在菜单栏中点击“预览”，选择“在窗口中显示预览”，可查看GUI的预览效果，查看完毕后关闭预览窗口。

5. 编写应用程序代码

创建好GUI并保存为FXML文件后，还需要编写Java代码来运行应用程序。一个简单的JavaFX应用程序通常包含主应用类和控制器类。

主应用类

主应用类负责加载FXML文件、在内存中构建场景图并显示GUI。以下是Kilometer Converter应用的主应用类代码：

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;  
import javafx.stage.Stage;

public class KilometerConverter extends Application {
    public void start(Stage stage) throws Exception {
        // 加载FXML文件
        Parent parent = FXMLLoader.load(getClass().getResource("KilometerConverter.fxml"));
        // 构建场景图
        Scene scene = new Scene(parent);
        // 显示窗口
        stage.setTitle("Kilometer Converter");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        // 启动应用程序
        launch(args);
    }
}

编写和测试主应用类的步骤如下：
1. 打开Java编辑器，创建一个名为“KilometerConverter.java”的新源代码文件。
2. 按照上述代码准确输入KilometerConverter类的代码。
3. 将“KilometerConverter.java”文件保存到与之前创建的“KilometerConverter.fxml”文件相同的位置。
4. 编译并运行“KilometerConverter.java”文件，此时应用程序会显示GUI，但点击“Convert to Miles”按钮不会有任何反应，因为还未编写按钮的事件处理程序。

控制器类

控制器类负责处理应用程序运行时发生的事件，包含必要的导入语句、引用场景图中具有fx:id的组件的私有变量、可选的初始化方法和事件监听器方法。以下是Kilometer Converter应用的控制器类代码：

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

public class KilometerConverterController {
    @FXML
    private Button convertButton;

    @FXML
    private TextField kilometerTextField;

    @FXML
    private Label outputLabel;

    @FXML
    private Label promptLabel;

    // 可选的初始化方法，在FXML文件加载后自动调用
    public void initialize() {
        // 可在此处进行必要的初始化操作
    }

    // 按钮的事件监听器方法
    public void convertButtonListener() {
        final double CONVERSION_FACTOR = 0.6214;
        // 从TextField获取输入的公里数
        String str = kilometerTextField.getText();
        // 将公里数转换为英里数
        double miles = Double.parseDouble(str) * CONVERSION_FACTOR;
        // 显示转换后的距离
        outputLabel.setText(str + " kilometers is " + miles + " miles.");
    }
}

编写和注册控制器类的步骤如下：
1. 打开Java编辑器，创建一个名为“KilometerConverterController.java”的新源代码文件。
2. 按照上述代码输入KilometerConverterController类的代码，可选择省略初始化方法（如果不需要）。
3. 将“KilometerConverterController.java”文件保存到与“KilometerConverter.fxml”文件相同的位置。
4. 编译“KilometerConverterController.java”文件。
5. 在Scene Builder中打开“KilometerConverter.fxml”文件。
6. 在文档面板的层次结构部分点击AnchorPane的条目，选中根节点。
7. 打开文档面板的控制器部分，点击下拉列表，选择“KilometerConverterController”类。
8. 在文档面板的层次结构部分选择Button组件。
9. 在检查器面板的代码部分，点击“On Action”的下拉列表，选择“convertButtonListener”，将该方法注册为Button组件的事件监听器。
10. 点击菜单栏的“文件”，选择“保存”，保存FXML文件。
11. 运行主应用类“KilometerConverter”的代码，输入一个值到TextField中，点击“Convert to Miles”按钮，会显示转换后的英里数。

6. 使用样本控制器骨架

除了手动输入控制器类的代码，Scene Builder还提供了样本“骨架”。点击“视图”菜单，选择“显示样本控制器骨架”，会弹出一个窗口显示控制器骨架，你可以点击“复制”按钮将代码复制到剪贴板，然后粘贴到IDE的编辑窗口中。使用样本骨架的好处是它包含了所有必要的导入语句和具有fx:id的组件的私有字段声明，你只需更改类名并编写事件监听器方法即可。

7. 创建JavaFX应用程序的总结

创建JavaFX应用程序的大致步骤如下：

graph LR
    A[使用Scene Builder设计GUI] --> B[为计划在Java代码中访问的组件分配fx:id，保存为FXML文件]
    B --> C[编写主应用类代码，加载FXML文件并启动应用程序，保存并编译代码到相同位置]
    C --> D[编写控制器类代码，包含事件处理方法，保存并编译代码到相同位置]
    D --> E[在Scene Builder中注册控制器类，为需要响应事件的组件注册事件处理方法，再次保存FXML文件]

设计GUI ：使用Scene Builder设计GUI，为所有计划在Java代码中访问的组件分配fx:id，将GUI保存为FXML文件。
编写主应用类 ：编写代码加载FXML文件并启动应用程序，将代码保存并编译到与FXML文件相同的位置。
编写控制器类 ：编写包含GUI事件处理方法的控制器类代码，保存并编译到相同位置。
注册控制器和事件处理方法 ：在Scene Builder中注册控制器类，为需要响应事件的组件注册事件处理方法，再次保存FXML文件。

通过以上步骤，你可以完整地创建一个JavaFX应用程序，实现GUI的设计和事件处理功能。

JavaFX应用开发：使用Scene Builder与编写代码

8. 代码分析

在前面的内容中，我们已经完成了Kilometer Converter应用程序的GUI设计和代码编写。下面对主应用类和控制器类的代码进行详细分析。

主应用类代码分析

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;  
import javafx.stage.Stage;

public class KilometerConverter extends Application {
    public void start(Stage stage) throws Exception {
        // 加载FXML文件
        Parent parent = FXMLLoader.load(getClass().getResource("KilometerConverter.fxml"));
        // 构建场景图
        Scene scene = new Scene(parent);
        // 显示窗口
        stage.setTitle("Kilometer Converter");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        // 启动应用程序
        launch(args);
    }
}

导入必要的类 ： import javafx.application.Application; 导入JavaFX应用程序的基类； import javafx.fxml.FXMLLoader; 用于加载FXML文件； import javafx.scene.Parent; 和 import javafx.scene.Scene; 用于构建场景图； import javafx.stage.Stage; 用于表示应用程序的窗口。
继承 Application 类 ： public class KilometerConverter extends Application 表明这是一个JavaFX应用程序类。
重写 start 方法 ： public void start(Stage stage) throws Exception 是JavaFX应用程序的入口点， Stage 对象表示应用程序的窗口。
加载FXML文件 ： Parent parent = FXMLLoader.load(getClass().getResource("KilometerConverter.fxml")); 使用 FXMLLoader 加载FXML文件，返回根节点。
创建场景图 ： Scene scene = new Scene(parent); 创建一个场景图，根节点为 parent 。
设置窗口标题和场景 ： stage.setTitle("Kilometer Converter"); 设置窗口标题； stage.setScene(scene); 指定要显示的场景图。
显示窗口 ： stage.show(); 显示应用程序的窗口。
main 方法 ： public static void main(String[] args) 是Java程序的入口点， launch(args); 调用 Application 类的 launch 方法启动应用程序。

控制器类代码分析

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

public class KilometerConverterController {
    @FXML
    private Button convertButton;

    @FXML
    private TextField kilometerTextField;

    @FXML
    private Label outputLabel;

    @FXML
    private Label promptLabel;

    // 可选的初始化方法，在FXML文件加载后自动调用
    public void initialize() {
        // 可在此处进行必要的初始化操作
    }

    // 按钮的事件监听器方法
    public void convertButtonListener() {
        final double CONVERSION_FACTOR = 0.6214;
        // 从TextField获取输入的公里数
        String str = kilometerTextField.getText();
        // 将公里数转换为英里数
        double miles = Double.parseDouble(str) * CONVERSION_FACTOR;
        // 显示转换后的距离
        outputLabel.setText(str + " kilometers is " + miles + " miles.");
    }
}

导入必要的类 ： import javafx.fxml.FXML; 用于建立控制器类与FXML文件的连接； import javafx.scene.control.Button; 、 import javafx.scene.control.Label; 和 import javafx.scene.control.TextField; 分别导入按钮、标签和文本框的类。
声明私有字段变量 ：使用 @FXML 注解声明私有字段变量，用于引用FXML文件中具有fx:id的组件。
initialize 方法 ： public void initialize() 是可选的初始化方法，在FXML文件加载后自动调用，可在此处进行必要的初始化操作。
事件监听器方法 ： public void convertButtonListener() 是按钮的事件监听器方法，当按钮被点击时执行。
- 声明常量 CONVERSION_FACTOR 用于公里到英里的转换。
- String str = kilometerTextField.getText(); 从文本框中获取用户输入的公里数。
- double miles = Double.parseDouble(str) * CONVERSION_FACTOR; 将输入的公里数转换为英里数。
- outputLabel.setText(str + " kilometers is " + miles + " miles."); 在标签中显示转换后的距离。

9. 常见问题及解决方法

在使用Scene Builder和编写JavaFX应用程序代码的过程中，可能会遇到一些常见问题，以下是一些问题及解决方法：

问题描述	解决方法
FXML文件加载失败	检查FXML文件的路径是否正确，确保文件名和扩展名无误；检查FXML文件是否存在语法错误。
组件的fx:id无法正确绑定	确保在Scene Builder中为组件分配了fx:id，并且在控制器类中使用 `@FXML` 注解声明了对应的私有字段变量，字段名与fx:id一致。
事件处理方法未触发	检查在Scene Builder中是否为组件正确注册了事件处理方法，确保方法名与控制器类中的方法名一致。
编译错误	检查Java代码是否存在语法错误，确保导入了必要的类；检查代码中的变量名和方法名是否正确。

10. 扩展与优化

在掌握了基本的JavaFX应用程序开发方法后，可以对应用程序进行扩展和优化。

输入验证

在Kilometer Converter应用中，用户输入的公里数可能不是有效的数字，因此可以添加输入验证功能。修改控制器类的 convertButtonListener 方法如下：

public void convertButtonListener() {
    final double CONVERSION_FACTOR = 0.6214;
    String str = kilometerTextField.getText();
    try {
        double kilometers = Double.parseDouble(str);
        double miles = kilometers * CONVERSION_FACTOR;
        outputLabel.setText(str + " kilometers is " + miles + " miles.");
    } catch (NumberFormatException e) {
        outputLabel.setText("Please enter a valid number.");
    }
}

在上述代码中，使用 try-catch 块捕获 NumberFormatException 异常，如果用户输入的不是有效的数字，会在标签中显示错误提示信息。

界面美化

可以使用CSS样式表对应用程序的界面进行美化。在Scene Builder中，可以为组件添加样式类，然后在CSS文件中定义样式。例如，创建一个名为 styles.css 的文件，内容如下：

.button {
    -fx-background-color: #4CAF50;
    -fx-text-fill: white;
}

.label {
    -fx-font-size: 14px;
}

.text-field {
    -fx-border-color: #ccc;
    -fx-border-width: 1px;
}

在FXML文件中引入CSS文件：

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity"
           minHeight="-Infinity" minWidth="-Infinity" prefHeight="130.0"
           prefWidth="173.0" xmlns:fx="http://javafx.com/fxml/1"
           xmlns="http://javafx.com/javafx/2.2" stylesheets="@styles.css">
    <!-- 组件内容 -->
</AnchorPane>

通过以上步骤，可以为按钮、标签和文本框添加样式，使界面更加美观。

11. 总结

通过本文的介绍，我们学习了如何使用Scene Builder可视化创建JavaFX应用程序的GUI，以及如何编写Java代码来加载FXML文件、构建场景图、处理事件。具体步骤如下：
1. 使用Scene Builder设计GUI，为组件分配fx:id，保存为FXML文件。
2. 编写主应用类代码，加载FXML文件并启动应用程序。
3. 编写控制器类代码，处理GUI的事件。
4. 在Scene Builder中注册控制器类和事件处理方法，保存FXML文件。

同时，我们还对代码进行了详细分析，介绍了常见问题的解决方法，并对应用程序进行了扩展和优化。希望这些内容能帮助你更好地掌握JavaFX应用程序的开发。

graph LR
    A[设计GUI] --> B[编写主应用类]
    B --> C[编写控制器类]
    C --> D[注册控制器和事件处理方法]
    D --> E[扩展与优化]
    E --> F[完成应用程序]

通过不断实践和学习，你可以开发出更加复杂和功能强大的JavaFX应用程序。