JavaFX GUI编程深度解析！

Java进阶程序员

于 2024-10-08 14:03:23 发布

阅读量518

点赞数 19

文章标签： java

本文链接：https://blog.csdn.net/2401_87704405/article/details/142758104

版权

环境说明：Windows 10 + IntelliJ IDEA 2021.3.2 + Jdk 1.8

上期回顾

在上期的学习中，我们探讨了Java中的集合框架。通过对List、Set、Map等结构的详细分析与案例演示，我们掌握了如何高效地管理数据。这些数据结构为后续开发复杂的应用程序打下了坚实基础。随着学习的深入，我们将逐渐从数据处理转向更为直观的图形用户界面编程（GUI），这将提升用户与程序的交互体验。本期，我们将带领大家进入JavaFX的世界，通过详尽的分析与代码演示，掌握GUI编程的核心技术。

前言

JavaFX是用于开发桌面应用程序的现代Java GUI框架，提供了丰富的UI控件、强大的CSS样式支持以及灵活的布局方式。随着技术的发展，JavaFX逐渐取代了过时的Swing库，成为现代Java应用程序开发的首选。它不仅简化了开发流程，还提升了界面设计的美观性和响应性。

本期内容将介绍JavaFX的基础知识、其核心结构和组件、应用开发的流程，并通过多个实际案例展示JavaFX的强大功能。此外，我们还将深入探讨JavaFX与其他GUI框架的对比分析，并在最后分享如何测试与优化JavaFX应用程序的性能。

摘要

本文将全面讲解JavaFX的基本概念、常用控件、布局管理、事件处理、动画与多媒体支持等方面的内容。通过多个实例代码，读者将学习如何利用JavaFX创建实用且美观的桌面应用程序。同时，文章将包含对JavaFX源码的解析、扩展内容探讨及其与其他GUI框架的对比分析。文章最后会提供测试用例、代码解读以及JavaFX在实际项目中的应用场景，以帮助读者更好地掌握这一强大的技术。

正文

JavaFX 简介

JavaFX是什么？

JavaFX是Oracle开发的一套现代化Java桌面应用程序开发框架，用于替代老旧的Swing和AWT。其主要特点包括：

模块化设计：JavaFX自Java 9之后被集成到模块系统中，开发者可以按需引用不同模块。
CSS支持：开发者可以通过CSS文件轻松控制应用程序的外观，从而大幅提升UI设计的灵活性和美观度。
FXML文件：JavaFX允许使用FXML文件（类似于HTML）来定义UI布局，开发者可以分离UI设计和逻辑代码，提高开发效率。
强大的多媒体支持：JavaFX原生支持图形、音频、视频以及动画等多媒体内容，非常适合开发带有丰富视觉效果的应用程序。

JavaFX历史背景

JavaFX最早于2008年发布，最初是作为一个独立的平台来竞争Adobe Flash和Microsoft Silverlight。然而随着Flash等技术的逐渐消亡，JavaFX逐步转型为专注于桌面应用开发的框架。自Java 8以来，JavaFX成为JDK的一部分，并且在Java 11之后被独立为一个模块化库，使其适应现代的开发需求。

JavaFX与Swing对比

功能集成：JavaFX原生支持媒体、动画等功能，Swing则需要第三方库来实现类似功能。
UI设计的灵活性：JavaFX支持使用FXML定义界面，并可以通过CSS进行定制化设计，而Swing仅限于Java代码内嵌UI设计。
性能：JavaFX在图形渲染方面使用了硬件加速，比Swing效率更高，特别是在处理复杂的图形和动画时表现更佳。

JavaFX基础结构与组件

Application 类

每个JavaFX应用程序都必须继承自javafx.application.Application类，这是所有JavaFX程序的入口。Application类的核心方法是start()，此方法定义了JavaFX应用启动时的界面初始化逻辑。

java

代码解读

复制代码

/** * @Author bug菌 * @Source 公众号：猿圈奇妙屋 * @Date 2024-10-06 17:48 */ public class MainApp extends Application { @Override public void start(Stage primaryStage) { Button button = new Button("点击我"); Scene scene = new Scene(button, 300, 200); primaryStage.setTitle("JavaFX示例"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); // 启动JavaFX应用 } }

本地运行结果展示：

根据如上的测试用例，作者在本地进行测试结果如下，仅供参考，你们也可以自行修改测试用例或者添加其他的测试数据或测试方法，以便于进行熟练学习以此加深知识点的理解。

代码解析：

在本次的代码演示中，我将会深入剖析每句代码，详细阐述其背后的设计思想和实现逻辑。通过这样的讲解方式，我希望能够引导同学们逐步构建起对代码的深刻理解。我会先从代码的结构开始，逐步拆解每个模块的功能和作用，并指出关键的代码段，并解释它们是如何协同运行的。通过这样的讲解和实践相结合的方式，我相信每位同学都能够对代码有更深入的理解，并能够早日将其掌握，应用到自己的学习和工作中。

如上段代码创建了一个基本的 JavaFX 应用程序，显示一个带有 "点击我" 按钮的窗口。运行逻辑如下：

窗口设置：窗口标题设置为 "JavaFX示例"。
按钮控件：创建了一个按钮，显示文本为 "点击我"。
场景设置：将按钮添加到场景中，设置窗口大小为 300x200 像素。
显示窗口：通过 primaryStage.show() 显示这个窗口。
主函数：调用 launch(args) 启动 JavaFX 应用程序。

Stage与Scene

在JavaFX中，Stage代表应用程序的窗口，Scene则是窗口内显示的内容。开发者可以通过向Scene中添加不同的控件（如按钮、文本框等）来设计UI界面。

Node与控件

Node是所有可视化元素的基类，JavaFX的控件（如Button、Label、TextField等）都是Node的子类。这种设计模式使得所有的UI元素在处理事件、布局和样式时拥有一致的接口。

JavaFX布局管理

布局管理器简介

在JavaFX中，布局管理是通过不同的布局管理器（如Pane、HBox、VBox、GridPane等）来实现的。这些布局管理器控制着UI元素的排列和定位。

HBox：水平布局管理器，所有子节点按从左到右的顺序排列。
VBox：垂直布局管理器，子节点从上到下排列。
GridPane：网格布局管理器，子节点按行和列排列，适合用于创建类似表格的界面。

代码示例：网格布局

java

代码解读

复制代码

/** * @Author bug菌 * @Source 公众号：猿圈奇妙屋 * @Date 2024-10-06 17:50 */ public class GridLayoutExample extends Application { @Override public void start(Stage primaryStage) { GridPane grid = new GridPane(); Button btn1 = new Button("按钮1"); Button btn2 = new Button("按钮2"); Button btn3 = new Button("按钮3"); Button btn4 = new Button("按钮4"); grid.add(btn1, 0, 0); grid.add(btn2, 1, 0); grid.add(btn3, 0, 1); grid.add(btn4, 1, 1); Scene scene = new Scene(grid, 300, 200); primaryStage.setScene(scene); primaryStage.setTitle("网格布局示例"); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

在这个示例中，GridPane布局允许我们将控件放置在网格的特定行和列中。这样的布局适用于创建结构化的表单或面板。

本地运行结果展示：

代码解析：

这段代码展示了一个使用 JavaFX GridPane 布局的应用程序，它将按钮排列在网格中。主要内容如下：

布局：使用 GridPane 布局管理器，将控件按照网格的形式排列。
按钮创建：创建了四个按钮，分别为 "按钮1"、"按钮2"、"按钮3"、"按钮4"。
按钮添加到网格：
- btn1 在第0列第0行。
- btn2 在第1列第0行。
- btn3 在第0列第1行。
- btn4 在第1列第1行。
场景和窗口设置：场景大小为 300x200 像素，窗口标题为 "网格布局示例"。
应用启动：通过 launch(args) 启动 JavaFX 应用，显示包含四个按钮的窗口。

最终，用户会看到一个2x2网格，每个网格单元中包含一个按钮。

JavaFX事件处理

JavaFX的事件处理机制非常灵活，它基于事件冒泡和捕获机制，允许开发者对各种用户操作（如点击、键盘输入、鼠标移动等）做出响应。

事件处理器的使用

java

代码解读

复制代码

Button button = new Button("点击我"); button.setOnAction(e -> System.out.println("按钮被点击！"));

在这个简单的例子中，当用户点击按钮时，程序会在控制台输出一条信息。JavaFX的事件系统不仅支持单一控件的事件处理，还支持复杂的事件冒泡机制。

案例Demo：JavaFX登录界面

我们将创建一个简单的登录界面，包含用户名和密码输入框，以及登录按钮。

java

代码解读

复制代码

/** * @Author bug菌 * @Source 公众号：猿圈奇妙屋 * @Date 2024-10-06 17:53 */ public class LoginApp extends Application { @Override public void start(Stage primaryStage) { GridPane grid = new GridPane(); grid.setVgap(10); grid.setHgap(10); Label usernameLabel = new Label("用户名:"); TextField usernameField = new TextField(); Label passwordLabel = new Label("密码:"); PasswordField passwordField = new PasswordField(); Button loginButton = new Button("登录"); loginButton.setOnAction(e -> { String username = usernameField.getText(); String password = passwordField.getText(); System.out.println("用户名: " + username + ", 密码: " + password); }); grid.add(usernameLabel, 0, 0); grid.add(usernameField, 1, 0); grid.add(passwordLabel, 0, 1); grid.add(passwordField, 1, 1); grid.add(loginButton, 1, 2); Scene scene = new Scene(grid, 300, 200); primaryStage.setTitle("登录界面"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

本地运行结果展示：

代码解析：

这段代码实现了一个简单的 JavaFX 登录界面。主要功能如下：

布局设置：使用 GridPane 布局，设置了行间距 (vgap) 和列间距 (hgap) 各为 10 像素，以使组件之间的间距合适。
界面元素：
- 用户名标签 (Label) 和文本输入框 (TextField)。
- 密码标签 (Label) 和密码输入框 (PasswordField)，用于隐藏输入的密码。
- 登录按钮 (Button)：点击后，控制台会打印输入的用户名和密码。
按钮功能：当用户点击“登录”按钮时，程序通过 setOnAction 获取文本框中的用户名和密码，并在控制台输出。
布局：
- 用户名标签和文本框在第0行、第1列。
- 密码标签和密码框在第1行、第1列。
- 登录按钮位于第2行的第1列。
窗口设置：窗口标题为“登录界面”，窗口大小为 300x200 像素。

功能概述

用户输入用户名和密码，点击“登录”按钮后，程序会将输入的值打印到控制台，模拟简单的登录流程。

知识点解析

在这个案例中，我们使用了GridPane布局，将控件排列成一个整齐的登录表单。同时，通过事件处理器，我们可以在用户点击登录按钮时捕获输入的信息并进行相应处理。

扩展内容：JavaFX中的动画与多媒体

JavaFX不仅仅是一个普通的UI框架，它还提供了强大的动画和多媒体支持。我们可以轻松创建复杂的动画效果，或者嵌入视频和音频来增强应用的用户体验。

动画示例

java

代码解读

复制代码

/** * @Author bug菌 * @Source 公众号：猿圈奇妙屋 * @Date 2024-10-06 17:56 */ public class AnimationExample extends Application { @Override public void start(Stage primaryStage) { Button button = new Button("旋转按钮"); RotateTransition rt = new RotateTransition(Duration.seconds(2), button); rt.setByAngle(360); rt.setCycleCount(2); rt.setAutoReverse(true); button.setOnAction(e -> rt.play()); StackPane root = new StackPane(button); Scene scene = new Scene(root, 300, 200); primaryStage.setScene(scene); primaryStage.setTitle("动画示例"); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

通过这个例子，我们展示了如何使用RotateTransition创建简单的旋转动画。JavaFX的动画API非常强大，可以用来实现各种动态效果。

本地运行结果展示：

代码解析：

这段代码展示了一个使用 JavaFX 实现的简单动画示例，其中按钮会在点击时旋转。关键内容如下：

按钮创建：创建一个按钮，文本显示为“旋转按钮”。
旋转动画：
- 使用 RotateTransition 类为按钮设置旋转动画，动画时长为 2秒。
- setByAngle(360)：按钮旋转 360 度。
- setCycleCount(2)：动画循环两次。
- setAutoReverse(true)：动画播放完后会反向播放（旋转回去）。
按钮事件：当用户点击按钮时，触发动画播放 (rt.play())。
布局与场景：使用 StackPane 布局将按钮居中，窗口大小设置为 300x200 像素，标题为“动画示例”。

功能概述：

点击按钮后，按钮会旋转 360 度，反向再旋转回来，整个过程循环两次。

优缺点对比

JavaFX优点

现代化设计：JavaFX支持CSS样式和FXML文件，开发者可以快速实现美观且功能丰富的界面。
多媒体与动画支持：JavaFX原生支持媒体播放和复杂的动画效果，适合开发需要多媒体交互的应用。
跨平台性强：JavaFX应用可以在多个平台上运行，真正实现一次编写到处运行的承诺。

JavaFX缺点

移动端支持不足：尽管JavaFX可以通过一些第三方库移植到移动端，但官方并不提供原生支持，限制了其在移动平台的普及。
生态系统较小：相较于Swing，JavaFX的社区相对较小，学习资源和库支持略显不足。

测试用例

在JavaFX的开发过程中，测试也是一个不可忽视的部分。虽然JavaFX本身是一个GUI框架，但我们依然可以使用Junit框架对其逻辑部分进行测试。

测试代码

java

代码解读

复制代码

/** * @Author bug菌 * @Source 公众号：猿圈奇妙屋 * @Date 2024-10-06 18:00 */ public class LoginAppTest extends Application { @Override public void start(Stage primaryStage) { GridPane grid = new GridPane(); grid.setVgap(10); grid.setHgap(10); // 用户名标签与输入框 Label usernameLabel = new Label("用户名:"); TextField usernameField = new TextField(); // 密码标签与输入框 Label passwordLabel = new Label("密码:"); PasswordField passwordField = new PasswordField(); // 登录按钮 Button loginButton = new Button("登录"); loginButton.setOnAction(e -> { // 获取用户输入的用户名和密码 String username = usernameField.getText(); String password = passwordField.getText(); // 预期的正确用户名和密码 String expectedUsername = "admin"; String expectedPassword = "password"; // 验证用户名和密码 if (expectedUsername.equals(username) && expectedPassword.equals(password)) { System.out.println("登录成功"); } else { System.out.println("登录失败: 用户名或密码错误"); } // 输出到控制台显示输入的用户名和密码 System.out.println("输入的用户名: " + username + ", 输入的密码: " + password); }); // 将组件添加到网格布局中 grid.add(usernameLabel, 0, 0); grid.add(usernameField, 1, 0); grid.add(passwordLabel, 0, 1); grid.add(passwordField, 1, 1); grid.add(loginButton, 1, 2); // 设置场景与窗口 Scene scene = new Scene(grid, 300, 200); primaryStage.setTitle("登录界面"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); // 启动JavaFX应用 } }

在这个测试案例中，我们验证了用户输入的用户名和密码是否符合预期。这种逻辑测试有助于我们确保代码的正确性，特别是在复杂应用中非常重要。

测试结果

如果你输入的不是指定的登录密码，那么控制台将会输出对应的错误提示，演示如下：

测试代码解析

这段代码实现了一个简单的 JavaFX 登录界面应用，使用 GridPane 布局来放置用户名、密码输入框以及登录按钮。用户输入用户名和密码后，点击“登录”按钮会触发登录验证逻辑，并在控制台显示结果。下面逐步解析该代码：

1. `LoginAppTest` 类继承 `Application`

java

代码解读

复制代码

public class LoginAppTest extends Application {

LoginAppTest 继承自 Application 类，表明这是一个 JavaFX 应用程序。Application 是所有 JavaFX 应用的基类，start 方法是程序的入口。

2. 创建 UI 组件

java

代码解读

复制代码

GridPane grid = new GridPane(); grid.setVgap(10); grid.setHgap(10);

GridPane：网格布局，允许将元素按行列方式排列。
设置了水平间距（Hgap）和垂直间距（Vgap）为 10 像素，使得界面组件之间的间隔合理。

3. 用户名和密码输入框

java

代码解读

复制代码

Label usernameLabel = new Label("用户名:"); TextField usernameField = new TextField(); Label passwordLabel = new Label("密码:"); PasswordField passwordField = new PasswordField();

Label：创建了两个标签，一个用于提示用户名输入，一个用于提示密码输入。
TextField：用于输入用户名的文本框。
PasswordField：用于输入密码的密码框，输入的字符会以掩码形式（如星号 *）显示。

4. 登录按钮及点击事件

java

代码解读

复制代码

Button loginButton = new Button("登录"); loginButton.setOnAction(e -> { String username = usernameField.getText(); String password = passwordField.getText(); String expectedUsername = "admin"; String expectedPassword = "password"; if (expectedUsername.equals(username) && expectedPassword.equals(password)) { System.out.println("登录成功"); } else { System.out.println("登录失败: 用户名或密码错误"); } System.out.println("输入的用户名: " + username + ", 输入的密码: " + password); });

Button：创建了一个登录按钮，点击该按钮时触发 setOnAction 事件。
登录逻辑：
- 获取用户输入的用户名和密码。
- 定义了预期的用户名为 "admin"，密码为 "password"。
- 检查用户输入是否匹配预期值：
  - 如果匹配，输出 "登录成功"。
  - 如果不匹配，输出 "登录失败: 用户名或密码错误"。
- 无论是否成功，都会打印用户输入的用户名和密码。

5. 将组件添加到布局中

java

代码解读

复制代码

grid.add(usernameLabel, 0, 0); grid.add(usernameField, 1, 0); grid.add(passwordLabel, 0, 1); grid.add(passwordField, 1, 1); grid.add(loginButton, 1, 2);

使用 grid.add() 方法，将每个组件按行列的方式添加到 GridPane 布局中：
- 用户名标签位于第 0 列，第 0 行，用户名输入框位于第 1 列，第 0 行。
- 密码标签位于第 0 列，第 1 行，密码输入框位于第 1 列，第 1 行。
- 登录按钮位于第 1 列，第 2 行。

6. 设置场景并显示窗口

java

代码解读

复制代码

Scene scene = new Scene(grid, 300, 200); primaryStage.setTitle("登录界面"); primaryStage.setScene(scene); primaryStage.show();

Scene：创建一个场景，将 GridPane 布局作为场景的根节点，窗口大小为 300x200 像素。
primaryStage.setTitle("登录界面")：设置窗口的标题为“登录界面”。
primaryStage.show()：显示窗口。

7. 启动应用程序

java

代码解读

复制代码

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

launch(args)：调用 Application 类的 launch 方法启动 JavaFX 应用程序，加载并显示窗口。

小结：

该程序创建了一个简单的登录界面，允许用户输入用户名和密码，并在点击“登录”按钮时验证输入的值。
程序逻辑在控制台输出登录成功或失败的信息，并显示用户的输入，模拟了基本的登录验证流程。

使用场景

JavaFX适用于多种场景的桌面应用开发，特别是那些需要复杂UI布局、多媒体处理和动画效果的项目。

企业管理系统：例如库存管理、订单管理等。
教育与培训软件：如在线测试工具、学习管理系统等。
多媒体应用：如音乐播放器、视频编辑器等。
数据可视化工具：通过JavaFX的图形与动画功能，可以实现实时数据的可视化展示。

全文总结

通过本文的学习，读者对JavaFX有了一个全面的认识。我们从JavaFX的基础结构、核心组件、布局管理到事件处理、动画支持等多个方面进行了深入的探讨，并通过多个实际案例展示了如何在JavaFX中创建功能丰富的桌面应用程序。无论是简单的UI设计还是复杂的动画与多媒体应用，JavaFX都能够满足开发者的需求。