零基础学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为例）

创建新项目：在IntelliJ IDEA中创建一个新的Java项目。
添加JavaFX库 ：
- 进入 File -> Project Structure -> Libraries。
- 点击 + 号，选择 Java，然后导航到你下载的JavaFX SDK中的 lib 文件夹，将其添加为项目库。
配置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 创建主类

java 复制代码

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 {

    @Override
    public 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 复制代码

<?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元素的事件和逻辑：

java 复制代码

package com.example.javafxapp;

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

public class HelloController {
    // 如果需要在Java代码中引用FXML中的元素，可以使用@FXML注解
    // @FXML
    // private Label myLabel;

    // 初始化方法，在FXML加载完成后调用
    @FXML
    public void initialize() {
        System.out.println("Controller initialized!");
    }
}

5.3 加载 FXML 文件

在主应用类中加载FXML：

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;

import java.io.IOException;

public class AppWithFXML extends Application {

    @Override
    public 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 表达式

java 复制代码

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

6.2 在 FXML 中指定事件处理器

FXML:

xml 复制代码

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

Controller:

java 复制代码

public class MyController {
    @FXML
    private 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 复制代码

<?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):

java 复制代码

package com.example.javafxapp;

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

public class CalculatorController {

    @FXML
    private TextField numField1;

    @FXML
    private TextField numField2;

    @FXML
    private Label resultLabel;

    @FXML
    private 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):

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 {

    @Override
    public 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应用，你会越来越熟练！