零基础学Java——第十一章：实战项目 - 桌面应用开发（JavaFX入门）

第十一章：实战项目 - 桌面应用开发（JavaFX入门）

欢迎来到我们实战项目的桌面应用开发部分！在前面的章节中，我们可能已经接触了Swing。现在，我们将目光投向JavaFX，一个更现代、功能更丰富的用于构建桌面应用的Java库。

1. JavaFX 简介

JavaFX是一个用于构建富客户端应用程序的Java平台。它最初是为了替代Swing而设计的，提供了更现代的UI控件、图形和媒体API、以及对CSS样式的支持。

1.1 JavaFX 与 Swing 的区别

• 外观与感觉：JavaFX应用通常具有更现代、更美观的界面。它支持CSS样式，使得定制UI变得更加灵活。
• 架构：JavaFX采用了一种基于场景图（Scene Graph）的架构，这使得处理复杂的2D和3D图形变得更容易。
• 并发性：JavaFX有更好的内置并发支持，可以更轻松地在后台线程执行任务而不会冻结UI。
• WebView：JavaFX包含一个基于WebKit的WebView组件，可以方便地在应用中嵌入Web内容。
• FXML：JavaFX引入了FXML，一种基于XML的标记语言，用于定义用户界面结构，从而实现UI设计与业务逻辑的分离。

1.2 为什么选择 JavaFX？

• 现代UI：如果你想创建具有现代感和良好用户体验的桌面应用，JavaFX是一个不错的选择。
• 强大的图形和媒体功能：JavaFX在处理图形、动画和多媒体方面表现出色。
• 社区支持：虽然Swing历史悠久，但JavaFX拥有一个活跃的社区，并且自Java 11以来，它已从JDK中分离出来，由OpenJFX社区维护和发展。

2. 搭建 JavaFX 开发环境

从Java 11开始，JavaFX不再包含在JDK中。你需要单独下载并配置JavaFX SDK。

2.1 下载 JavaFX SDK

你可以从 OpenJFX官网 下载适合你操作系统和JDK版本的JavaFX SDK。

2.2 配置IDE（以IntelliJ IDEA为例）

1. 创建新项目：在IntelliJ IDEA中创建一个新的Java项目。
2. 添加JavaFX库：
   • 进入 File -> Project Structure -> Libraries。
   • 点击 + 号，选择 Java，然后导航到你下载的JavaFX SDK中的 lib 文件夹，将其添加为项目库。
3. 配置VM选项（运行/调试配置时）：
   • 进入 Run -> Edit Configurations...
   • 在 VM options 中添加：

     --module-path /path/to/javafx-sdk-xx/lib --add-modules javafx.controls,javafx.fxml
     

     将 /path/to/javafx-sdk-xx/lib 替换为你JavaFX SDK lib 文件夹的实际路径。

3. 第一个 JavaFX 应用：Hello JavaFX

让我们创建一个简单的JavaFX应用来显示 “Hello JavaFX!”。

3.1 创建主类

package com.example.javafxapp;import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;public class HelloJavaFX extends Application {@Overridepublic void start(Stage primaryStage) throws Exception {// 创建一个标签Label helloLabel = new Label("Hello JavaFX!");// 创建一个布局容器（StackPane会将子节点居中显示）StackPane root = new StackPane();root.getChildren().add(helloLabel);// 创建一个场景，并将布局容器放入场景中// 参数：根节点，场景宽度，场景高度Scene scene = new Scene(root, 300, 200);// 设置舞台（窗口）的标题primaryStage.setTitle("我的第一个JavaFX应用");// 将场景设置到舞台上primaryStage.setScene(scene);// 显示舞台primaryStage.show();}public static void main(String[] args) {// 启动JavaFX应用launch(args);}
}

代码解释：

• Application 类：所有JavaFX应用都必须继承 javafx.application.Application 类。
• start(Stage primaryStage) 方法：这是JavaFX应用的入口点。当应用启动时，JavaFX运行时会调用此方法。Stage 对象是顶级JavaFX容器，类似于Swing中的 JFrame。
• Label：用于显示文本的控件。
• StackPane：一种布局面板，它将其子节点堆叠在一起，默认居中显示。
• Scene：场景是所有JavaFX内容的容器。一个 Stage 包含一个 Scene。
• primaryStage.show()：显示窗口。
• launch(args)：Application 类中的静态方法，用于启动JavaFX应用。

3.2 运行应用

确保你的VM选项配置正确。然后运行 HelloJavaFX 类的 main 方法。你应该会看到一个标题为“我的第一个JavaFX应用”的窗口，窗口中央显示着“Hello JavaFX!”。

4. JavaFX 核心概念

4.1 Stage (舞台)

Stage 是JavaFX应用的顶级容器，代表一个窗口。一个应用可以有多个 Stage。

4.2 Scene (场景)

Scene 是 Stage 内部内容的容器。它包含一个场景图（Scene Graph），这是一个由节点（Node）组成的树形结构。

4.3 Node (节点)

场景图中的所有元素都是节点。节点可以是：

• UI控件 (Control)：如 Button, Label, TextField 等。
• 布局面板 (Layout Pane)：如 StackPane, VBox, HBox, GridPane 等，用于组织其他节点。
• 图形元素 (Shape)：如 Rectangle, Circle 等。
• 媒体元素 (MediaView)：用于显示视频或音频。

4.4 布局面板 (Layout Panes)

JavaFX提供了多种布局面板来帮助你组织UI元素：

• HBox：水平排列子节点。
• VBox：垂直排列子节点。
• BorderPane：将区域划分为顶部、底部、左侧、右侧和中心。
• GridPane：在网格中排列子节点。
• FlowPane：当一行放不下时，自动换行排列子节点。
• StackPane：堆叠子节点，常用于居中显示。

5. FXML：声明式UI设计

FXML是一种基于XML的标记语言，允许你以声明方式定义JavaFX用户界面。这使得UI设计与应用程序逻辑分离，提高了代码的可维护性。

5.1 创建 FXML 文件

一个简单的FXML文件可能如下所示 (hello_view.fxml)：

<?xml version="1.0" encoding="UTF-8"?><?import javafx.scene.control.Label?>
<?import javafx.scene.layout.StackPane?><StackPane fx:controller="com.example.javafxapp.HelloController" xmlns:fx="http://javafx.com/fxml/1" alignment="CENTER"><children><Label text="Hello from FXML!" /></children>
</StackPane>

5.2 创建控制器类

控制器类 (HelloController.java) 用于处理FXML中定义的UI元素的事件和逻辑：

package com.example.javafxapp;import javafx.fxml.FXML;
import javafx.scene.control.Label;public class HelloController {// 如果需要在Java代码中引用FXML中的元素，可以使用@FXML注解// @FXML// private Label myLabel;// 初始化方法，在FXML加载完成后调用@FXMLpublic void initialize() {System.out.println("Controller initialized!");}
}

5.3 加载 FXML 文件

在主应用类中加载FXML：

package com.example.javafxapp;import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;import java.io.IOException;public class AppWithFXML extends Application {@Overridepublic void start(Stage primaryStage) throws IOException {// 加载FXML文件FXMLLoader loader = new FXMLLoader(getClass().getResource("hello_view.fxml"));Parent root = loader.load();primaryStage.setTitle("JavaFX App with FXML");primaryStage.setScene(new Scene(root, 300, 200));primaryStage.show();}public static void main(String[] args) {launch(args);}
}

确保 hello_view.fxml 文件位于与 AppWithFXML.java 相同的包路径下（或者在 resources 目录下并正确引用路径）。

6. 事件处理

JavaFX中的事件处理与Swing类似，但有一些JavaFX特有的方式。

6.1 使用 Lambda 表达式

Button myButton = new Button("点我!");
myButton.setOnAction(event -> {System.out.println("按钮被点击了!");
});

6.2 在 FXML 中指定事件处理器

FXML:

<Button text="Click Me" onAction="#handleButtonClick" />

Controller:

public class MyController {@FXMLprivate void handleButtonClick(ActionEvent event) {System.out.println("Button clicked via FXML!");}
}

7. JavaFX 常用控件

• Label: 显示文本。
• Button: 用户可以点击的按钮。
• TextField: 单行文本输入框。
• TextArea: 多行文本输入框。
• CheckBox: 复选框。
• RadioButton: 单选按钮 (通常与 ToggleGroup 一起使用)。
• ChoiceBox: 下拉选择框。
• ComboBox: 可编辑的下拉选择框。
• ListView: 显示项目列表。
• TableView: 显示表格数据。
• ImageView: 显示图片。
• ProgressBar / ProgressIndicator: 显示进度。

8. 生活中的例子：一个简单的计算器

让我们构思一个简单的加法计算器。

• 界面：两个 TextField 用于输入数字，一个 Label 用于显示结果，一个 Button 用于执行计算。
• 布局：可以使用 VBox 或 GridPane。

FXML (calculator_view.fxml):

<?xml version="1.0" encoding="UTF-8"?><?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.VBox?><VBox alignment="CENTER" spacing="10" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.javafxapp.CalculatorController"><padding><Insets bottom="20.0" left="20.0" right="20.0" top="20.0" /></padding><TextField fx:id="numField1" promptText="输入第一个数字" /><TextField fx:id="numField2" promptText="输入第二个数字" /><Button text="计算加法" onAction="#handleAddButton" /><Label fx:id="resultLabel" text="结果:" />
</VBox>

Controller (CalculatorController.java):

package com.example.javafxapp;import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;public class CalculatorController {@FXMLprivate TextField numField1;@FXMLprivate TextField numField2;@FXMLprivate Label resultLabel;@FXMLprivate void handleAddButton() {try {double num1 = Double.parseDouble(numField1.getText());double num2 = Double.parseDouble(numField2.getText());double sum = num1 + num2;resultLabel.setText("结果: " + sum);} catch (NumberFormatException e) {resultLabel.setText("请输入有效的数字!");}}
}

主应用类 (CalculatorApp.java):

package com.example.javafxapp;import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;public class CalculatorApp extends Application {@Overridepublic void start(Stage primaryStage) throws Exception {Parent root = FXMLLoader.load(getClass().getResource("calculator_view.fxml"));primaryStage.setTitle("简单加法计算器");primaryStage.setScene(new Scene(root, 300, 250));primaryStage.show();}public static void main(String[] args) {launch(args);}
}

这个例子展示了如何使用FXML定义界面，并使用控制器处理用户输入和更新UI。

9. 总结与下一步

JavaFX为开发功能丰富、界面现代的桌面应用提供了一个强大的平台。通过FXML，我们可以将UI设计与业务逻辑分离，使代码更易于管理。

下一步可以探索的内容：

• 更复杂的布局和控件。
• CSS样式定制。
• JavaFX动画和效果。
• 图表API (javafx.scene.chart)。
• 3D图形。
• 与外部服务集成。

继续练习，尝试构建自己的JavaFX应用，你会越来越熟练！