JavaFx 入门教程

最新推荐文章于 2024-08-15 00:00:00 发布

HUHAGE

最新推荐文章于 2024-08-15 00:00:00 发布

阅读量2.9k

点赞数 26

文章标签： java

本文链接：https://blog.csdn.net/wsyhok/article/details/139441144

版权

第一部分：介绍 JavaFX

1.1 什么是 JavaFX？

JavaFX 是一个用于构建富客户端应用程序的软件平台，它由 Oracle 公司开发并于 2008 年推出。作为 Java 平台的一部分，JavaFX 提供了丰富的图形化用户界面（GUI）工具包和丰富的多媒体功能，可用于开发跨平台的桌面、移动和嵌入式应用程序。

1.2 JavaFX 的作用

JavaFX 在界面开发中扮演着重要的角色，其主要作用包括：

丰富的 UI 控件库： JavaFX 提供了丰富的 UI 控件，如按钮、标签、文本框、列表框等，使开发者可以轻松创建各种交互式界面。
图形和动画： JavaFX 支持强大的图形和动画功能，包括 2D 和 3D 图形绘制、图像处理、转场动画等，可以为应用程序添加生动和吸引人的视觉效果。
布局管理器： JavaFX 提供了灵活的布局管理器，如 VBox、HBox、BorderPane 等，帮助开发者轻松实现界面布局和排版。
多媒体支持： JavaFX 支持多媒体功能，包括音频、视频播放和流媒体等，可以用于开发多媒体应用程序和游戏。
丰富的样式支持： JavaFX 使用 CSS（层叠样式表）来管理界面的外观和样式，开发者可以通过样式定义来定制界面的外观和风格。
跨平台性： JavaFX 应用程序可以在各种操作系统上运行，包括 Windows、Mac OS X、Linux 和嵌入式系统，为开发者提供了更广泛的应用场景。

总之，JavaFX 提供了一套强大而灵活的工具和技术，帮助开发者快速构建现代化、交互式和具有吸引力的用户界面。通过学习和掌握 JavaFX 技术，开发者可以更轻松地开发出高质量的桌面和移动应用程序。

1.3 JavaFX 与 Swing 的比较

特点	JavaFX	Swing
UI 控件库	更现代、更丰富的 UI 控件库	较为传统、功能相对较少的 UI 控件库
图形和动画	支持丰富的图形和动画效果	动画和图形效果相对简单
布局管理器	提供灵活的布局管理器	布局管理器相对固定、灵活性较低
CSS 样式支持	支持 CSS 样式定义和样式管理	不支持 CSS 样式，样式定制相对困难
多媒体支持	支持音频、视频播放等多媒体功能	多媒体支持相对较弱
跨平台性	能够在多种操作系统上运行	也能够跨平台，但对于外观的一致性有所欠缺
社区支持	Oracle 主导，社区活跃度相对较低	有着较为活跃的社区支持

1.4 工具演示

看一个开发好的工具。

E:\Coder\Java\JavaFx\demos\HUHATools\target\HUHATools

第二部分：环境搭建与入门代码

在这一部分，我们将会介绍如何搭建 JavaFX 的开发环境以及一些基础知识，包括项目创建和结构等。

2.1 安装 Java 开发工具包（JDK）和集成开发环境（IDE）

在开始 JavaFX 的开发之前，首先需要安装 Java 开发工具包（JDK）和一个集成开发环境（IDE），例如 IntelliJ IDEA 或 Eclipse。

安装 JDK：
1. 前往 Oracle 官网或 AdoptOpenJDK 等网站下载最新版本的 JDK（JDK 可以选择 1.8 版本，该版本是原生带了 javafx 的包的，后来的版本去除了相关包，需要手动添加）。
2. 根据操作系统类型（Windows、Mac、Linux）选择相应的安装包进行安装。
3. 安装完成后，设置系统环境变量 JAVA_HOME，并将 JDK 的 bin 目录添加到系统的 PATH 环境变量中。
安装 IDE：
1. 下载并安装 IntelliJ IDEA 或 Eclipse，这两个 IDE 都对 JavaFX 有很好的支持。
2. 安装过程中可以根据需要选择安装额外的插件或配置。
安装 SceneBuilder：
1. 用于界面设计，可以方便地调整页面展示。

2.2 创建一个简单的 JavaFX 项目

在安装完 JDK 和 IDE 之后，我们可以开始创建一个简单的 JavaFX 项目来熟悉开发环境和基本操作。

在 IDE 中创建项目：
1. 打开 IntelliJ IDEA 或 Eclipse，并选择创建新项目。
2. 在项目创建向导中选择 JavaFX 项目模板（如果 IDE 支持）或普通的 Java 项目模板。

这里我们选择 1.8 版本的 JDK 会出现下面报错，提示这个版本不支持 Javafx，但是考虑到我们公司主流还是使用 JDK8，所以我们换一种方式创建项目。

我们直接新建一个 maven 项目，选择 1.8 版本的 JDK：

2.3 Hello World 示例：创建一个简单的 JavaFX 程序

在创建好项目之后，我们可以编写一个简单的 Hello World 程序来测试 JavaFX 的运行情况。

这里，我们有 2 种方式来实现 hello world 例子：

在界面上展示一个按钮，点击按钮弹出：Hello， World！

这里先直接看演示效果，先不讲解代码。

方式一：无前台代码的模式

编写一个启动类即可

demoApplication1.java:

package com.huha; import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Alert; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.layout.StackPane; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class demoApplication1 extends Application { @Override public void start(Stage primaryStage) { // 创建一个标签 Label label = new Label("Click the button to say Hello!"); // 创建一个按钮 Button button = new Button("Say Hello"); // 给按钮添加点击事件处理器 button.setOnAction(e -> showAlert()); // 创建一个垂直布局容器，并将标签和按钮添加到容器中 VBox vbox = new VBox(10); // 10 是垂直间距 vbox.setAlignment(Pos.CENTER); // 居中展示 vbox.getChildren().addAll(label, button); // 创建一个场景，将布局容器添加到场景中 Scene scene = new Scene(vbox, 300, 200); // 设置主舞台的标题和场景，并显示主舞台 primaryStage.setTitle("Hello World Application"); primaryStage.setScene(scene); primaryStage.show(); } // 弹出对话框显示 "Hello, World!" private void showAlert() { Alert alert = new Alert(Alert.AlertType.INFORMATION); alert.setTitle("Hello"); alert.setHeaderText(null); alert.setContentText("Hello, World!"); alert.showAndWait(); } public static void main(String[] args) { // 启动 JavaFX 应用程序 launch(args); } }

直接运行main方法：

效果：

方式二：有前台代码的模式（fxml+conttoller）

编写界面代码：

hello.fxml：
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.control.Label?> <?import javafx.scene.layout.VBox?> <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.huha.HelloWorldController" spacing="10" alignment="CENTER"> <Label text="Click the button to say Hello!"/> <Button text="Say Hello" onAction="#showAlert"/> </VBox>
1. 使用 JavaFX 提供的 UI 控件和布局管理器来设计一个简单的界面，包含一个按钮和一个标签的界面。
编写逻辑代码：

HelloWorldController.java:
package com.huha; import javafx.fxml.FXML; import javafx.scene.control.Alert; import javafx.scene.control.ButtonType; public class HelloWorldController { // 点击按钮时调用的方法 @FXML private void showAlert() { Alert alert = new Alert(Alert.AlertType.INFORMATION); alert.setTitle("Hello"); alert.setHeaderText(null); alert.setContentText("Hello, World!"); alert.showAndWait(); } }

demoApplication2.java:
package com.huha; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; public class demoApplication2 extends Application { @Override public void start(Stage primaryStage) throws Exception{ // 加载 FXML 文件 Parent root = FXMLLoader.load(getClass().getResource("/hello.fxml")); // 创建场景 Scene scene = new Scene(root, 300, 200); // 设置舞台标题 primaryStage.setTitle("Hello World Application"); // 设置舞台场景 primaryStage.setScene(scene); // 显示舞台 primaryStage.show(); } public static void main(String[] args) { launch(args); } }
1. 编写 Java 代码来处理界面的交互逻辑，实现点击按钮时弹出提示的方法。
2. 编写启动类
运行程序：
1. 在 IDE 中运行程序，并查看界面效果。
2. 确保程序能够正常运行，并且界面能够按照预期进行交互。
3. 最终效果：

通过完成这个 Hello World 示例，我们可以快速了解 JavaFX 的基本开发流程和操作，为后续的学习打下基础。

同时，我们也可以了解到，开发javafx程序，可以使用两种方式：一种是直接编写后台代码，一种是编写前台fxml+后台controller的方式。

这部分内容将会帮助同事们快速搭建好 JavaFX 的开发环境，并且能够编写和运行简单的 JavaFX 程序，为后续学习和实践打下基础。

第三部分：控件与布局

在这一部分，我们将学习如何使用 JavaFX 进行界面设计，并了解不同的布局管理器以及它们的使用方法。要学习javafx，首先要了解如何设计它的界面，界面如何布局，有哪些控件可以用。

3.1 JavaFX 中的基本 UI 控件介绍

在 JavaFX 中，有许多常用的 UI 控件可以用来构建界面，例如按钮、标签、文本框、列表框等。在这一部分，我们将学习如何使用这些基本 UI 控件，并了解它们的常用属性和方法。

3.1.1 标签（Label）

标签（Label）用于显示简单的文本信息，比如展示控件标题、说明性文字等，不能进行编辑。

在 JavaFX 中，可以使用 javafx.scene.control.Label 类来创建标签，并设置文本内容。

很简单，下面这些就属于标签：

用法示例：

HelloWorld.fxml：

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Label?> <?import javafx.scene.layout.VBox?> <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.huha.HelloWorldController" spacing="10">  <Label text="Hello, World!"/> </VBox>

通过给 Label 加上 id，可以后台控制 Lable 的展示内容：

<Label fx:id="lable" text="Hello, World!"/>

这样，后台 controller 种可以通过@FXML注解来获取到这个 Lable 控件：

@FXML Label label;

完整的HelloWorldController代码：

package com.huha; import javafx.fxml.FXML; import javafx.fxml.Initializable; import javafx.scene.control.Alert; import javafx.scene.control.ButtonType; import javafx.scene.control.Label; import java.net.URL; import java.util.ResourceBundle; public class HelloWorldController implements Initializable { // 点击按钮时调用的方法 @FXML private void showAlert() { Alert alert = new Alert(Alert.AlertType.INFORMATION); alert.setTitle("Hello"); alert.setHeaderText(null); alert.setContentText("Hello, World!"); alert.showAndWait(); } @FXML Label label; @Override public void initialize(URL location, ResourceBundle resources) { label.setText("Hi, HUHA!"); } }

3.1.2 按钮（Button）

按钮（Button）用于触发用户交互操作，例如点击按钮执行特定的动作。

在 JavaFX 中，可以使用 javafx.scene.control.Button 类来创建按钮，并设置按钮的文本内容和点击事件处理器。

用法示例：

 <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.VBox?> <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.huha.HelloWorldController" spacing="10">  <Button text="Say Hello" onAction="#showAlert"/> </VBox>

import javafx.fxml.FXML; import javafx.scene.control.Alert; import javafx.scene.control.Alert.AlertType; public class HelloWorldController { // 点击按钮时调用的方法 @FXML private void showAlert() { Alert alert = new Alert(AlertType.INFORMATION); alert.setTitle("Hello"); alert.setHeaderText(null); alert.setContentText("Hello, World!"); alert.showAndWait(); } }

3.1.3 单行文本框（TextField）

文本框（TextField）用于接收用户输入的文本信息。

在 JavaFX 中，可以使用 javafx.scene.control.TextField 类来创建文本框，并获取用户输入的文本内容。

用法示例：

 <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.TextField?> <?import javafx.scene.layout.VBox?> <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.huha.HelloWorldController" spacing="10">  <TextField promptText="Enter your name"/> </VBox>

3.1.4 文本区域（TextArea）

与文本框（TextField）一样，文本区域（TextArea）用于接收用户输入的文本信息，只不过文本区域适用于多行输入的情况，对于大段文本的展示效果更好。

在 JavaFX 中，可以使用 javafx.scene.control.TextArea 类来创建文本区域，并获取用户输入的文本内容。

用法示例：

 <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.TextField?> <?import javafx.scene.layout.VBox?> <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.huha.HelloWorldController" spacing="10">  <TextArea promptText="这是文本块"/> </VBox>

3.1.4 列表框（ListView）

列表框（ListView）用于显示一个列表，并且允许用户从列表中选择一个或多个项目。

在 JavaFX 中，可以使用 javafx.scene.control.ListView 类来创建列表框，并设置列表的数据源和选择模式。

用法示例：

 <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.ListView?> <?import javafx.scene.layout.VBox?> <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="HelloWorldController" spacing="10">  <ListView fx:id="listView"/> </VBox>

import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.fxml.FXML; import javafx.scene.control.ListView; public class HelloWorldController implements Initializable{ @FXML private ListView<String> listView; @Override public void initialize() { // 初始化列表数据 ObservableList<String> items = FXCollections.observableArrayList("Item 1", "Item 2", "Item 3"); listView.setItems(items); } }

3.1.5 选择框（ChoiceBox）

用法示例：

import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.fxml.FXML; import javafx.scene.control.ListView; public class HelloWorldController implements Initializable{ @FXML ChoiceBox choDatabase; @Override public void initialize() { // 初始化选择框数据 choDatabase.setItems(FXCollections.observableArrayList("MySQL", "SQLServer", "DM")); choDatabase.setValue("MySQL"); } }

3.1.6 单选按钮（RadioButton）

用于单选功能的实现，用RadioButton和ToggleGroup搭配使用，实现单选控制。

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.ListView?> <?import javafx.scene.layout.VBox?> <VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="HelloWorldController" spacing="10">  <RadioButton fx:id="btnradiojiqunyes" layoutX="47.0" layoutY="7.0" mnemonicParsing="false" text="开启" /> <RadioButton fx:id="btnradiojiqunno" layoutX="125.0" layoutY="7.0" mnemonicParsing="false" text="关闭" /> </VBox>

import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.fxml.FXML; import javafx.scene.control.ListView; public class HelloWorldController implements Initializable{ @FXML RadioButton btnradiojiqunyes; @FXML RadioButton btnradiojiqunno; @Override public void initialize() { // 初始化单选控件数据 ToggleGroup tgjiqun = new ToggleGroup(); btnradiojiqunyes.setToggleGroup(tgjiqun); btnradiojiqunno.setToggleGroup(tgjiqun); } }

通过学习以上示例，我们可以了解到 JavaFX 中常用的基本 UI 控件及其用法，包括标签、按钮、文本框和列表框。这些控件是构建用户界面的基础，基本上我们在简单工具的开发过程中，用上面的控件就够了，掌握它们的使用方法对于进行界面设计和开发非常重要。

3.2 不同的布局管理器介绍

可以看到，在不使用布局管理器的情况下，我们的程序控件布局是非常不美观的，所有的控件基本都撑满了页面。没有任何居中效果。

JavaFX 提供了多种布局管理器，如 Pane、 VBox、HBox、BorderPane 等，用于实现不同的界面布局。在这一部分，我们将学习每种布局管理器的特点和使用方法，以及如何选择合适的布局管理器来实现我们想要的界面布局。

3.2.1 Pane

"Pane" 在英语中通常指的是一个平面区域或窗口的一部分。在计算机界面设计中，特别是在GUI（图形用户界面）的上下文中，"pane" 通常指的是窗口内部的一个独立区域，用于展示或交互特定类型的内容。例如，在网页浏览器中，"pane" 可以指代标签页内的内容区域；在办公软件中，"pane" 可能指的是文档编辑区、工具栏或对话框的一部分。

在JavaFX中，"Pane" 是一个布局类，用于组织和管理其他GUI组件（如按钮、文本框等）。JavaFX中有多种Pane类，如AnchorPane、BorderPane、GridPane、HBox、VBox等，每种都有其特定的布局策略。

Pane 是其它布局控件类的父类，我们可以将 Pane 看成一个绝对布局控件，当我们将某个控件放置在 Pane 当中的时候，我们需要指定它的位置坐标（layoutX 和 layoutY）。

当我们将一个控件拖拽到 Pane 中的时候，会自动生成 layoutX 和 layoutY 坐标。

示例代码：

buju.xml

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.*?> <?import java.lang.*?> <?import javafx.scene.layout.*?> <Pane fx:controller="com.huha.BuJuController" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="350.0" prefWidth="500.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1"> <children> <Button layoutX="318.0" layoutY="210.0" mnemonicParsing="false" text="登录" /> <Label layoutX="136.0" layoutY="104.0" text="用户名：" /> <Label layoutX="136.0" layoutY="162.0" text="密码：" /> <TextField layoutX="212.0" layoutY="100.0" /> <PasswordField layoutX="212.0" layoutY="158.0" /> </children> </Pane>

package com.huha; /** * @Description * @Author HUHA * @Date 2024-06-03 */ public class BuJuController { }

启动类bujuApplication：

package com.huha; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; public class bujuApplication extends Application { @Override public void start(Stage primaryStage) throws Exception{ // 加载 FXML 文件 Parent root = FXMLLoader.load(getClass().getResource("/buju.fxml")); // 创建场景 Scene scene = new Scene(root); // 设置舞台标题 primaryStage.setTitle("学习布局"); // 设置舞台场景 primaryStage.setScene(scene); // 显示舞台 primaryStage.show(); } public static void main(String[] args) { launch(args); } }

尝试修改按钮的x、y坐标，看有什么变化。

3.2.2 BorderPane

BorderPane 布局管理器将子节点放置在上、下、左、右和中心五个区域，通常用于创建包含顶部菜单栏、底部状态栏和中间内容区域的界面。

特点：

可以设置上、下、左、右和中心五个区域的子节点。
中心区域会自动拉伸以填充剩余空间。
适用于复杂布局的情况。

示例代码：

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.BorderPane?> <?import javafx.scene.layout.HBox?> <BorderPane xmlns:fx="http://javafx.com/fxml/1" prefHeight="400.0" prefWidth="600.0"> <top> <HBox style="-fx-background-color: lightblue;"> <Button text="Top" /> </HBox> </top> <bottom> <HBox style="-fx-background-color: lightgreen;"> <Button text="Bottom" /> </HBox> </bottom> <left> <HBox style="-fx-background-color: lightsalmon;"> <Button text="Left" /> </HBox> </left> <right> <HBox style="-fx-background-color: lightyellow;"> <Button text="Right" /> </HBox> </right> <center> <HBox style="-fx-background-color: lightgray;"> <Button text="Center" /> </HBox> </center> </BorderPane>

3.2.3 FlowPane

FlowPane在一行上排列连续的子组件，并且如果当前行填满了以后，则自动将子组件向下推到下一行。

特点：

子节点按照添加顺序排列。
可以设置水平或垂直排列。
子节点超出容器大小时会自动换行。
FlowPane可以通过设置hgap和vgap属性来控制子节点之间的水平和垂直间距。

示例代码：

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.FlowPane?> <FlowPane xmlns:fx="http://javafx.com/fxml/1" prefHeight="400.0" prefWidth="600.0" hgap="10.0" vgap="10.0"> <Button text="Button 1" /> <Button text="Button 2" /> <Button text="Button 3" /> <Button text="Button 4" /> <Button text="Button 5" /> <Button text="Button 6" /> <Button text="Button 7" /> <Button text="Button 8" /> <Button text="Button 9" /> <Button text="Button 10" /> </FlowPane>

3.2.4 GridPane

GridPane 是 JavaFX 中的一个二维布局容器，它将其子节点按行和列进行排列。

GridPane可以通过设置hgap和vgap属性来控制子节点之间的水平和垂直间距。

每个子节点可以通过设置GridPane.rowIndex和GridPane.columnIndex属性来指定其在GridPane中的位置。

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.GridPane?> <GridPane xmlns:fx="http://javafx.com/fxml/1" prefHeight="400.0" prefWidth="600.0" hgap="10.0" vgap="10.0"> <Button text="Button 1" GridPane.rowIndex="0" GridPane.columnIndex="0" /> <Button text="Button 2" GridPane.rowIndex="0" GridPane.columnIndex="1" /> <Button text="Button 3" GridPane.rowIndex="1" GridPane.columnIndex="0" /> <Button text="Button 4" GridPane.rowIndex="1" GridPane.columnIndex="1" /> <Button text="Button 5" GridPane.rowIndex="2" GridPane.columnIndex="0" /> <Button text="Button 6" GridPane.rowIndex="2" GridPane.columnIndex="1" /> </GridPane>

3.2.5 VBox

VBox（Vertical Box）布局管理器将子节点垂直排列，一个在另一个下面。可以通过设置间距来控制子节点之间的距离。

特点：

垂直排列子节点。
VBox可以通过设置spacing属性来控制子节点之间的间距。。
适用于垂直布局的情况。

示例代码：

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.VBox?> <VBox xmlns:fx="http://javafx.com/fxml/1" prefHeight="400.0" prefWidth="600.0" spacing="10.0"> <Button text="Button 1" /> <Button text="Button 2" /> <Button text="Button 3" /> <Button text="Button 4" /> <Button text="Button 5" /> </VBox>

3.2.6 HBox

HBox（Horizontal Box）布局管理器将子节点水平排列，一个在另一个旁边。可以通过设置间距来控制子节点之间的距离。

特点：

水平排列子节点。
HBox可以通过设置spacing属性来控制子节点之间的间距。。
适用于水平布局的情况。

示例代码：

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.HBox?> <HBox xmlns:fx="http://javafx.com/fxml/1" prefHeight="400.0" prefWidth="600.0" spacing="10.0"> <Button text="Button 1" /> <Button text="Button 2" /> <Button text="Button 3" /> <Button text="Button 4" /> <Button text="Button 5" /> </HBox>

效果：

3.2.7 TitledPane

TitledPane 是一个可折叠的面板，它包含一个标题和一个内容区域。

用户可以通过点击标题来展开或折叠内容区域。TitledPane 通常与 Accordion 控件一起使用，以创建一个可折叠面板的集合。

特点

标题：TitledPane 的标题可以是文本、图像或自定义节点。你可以使用 setText 和 setGraphic 方法设置标题文本和图形。
内容区域：TitledPane 的内容区域可以包含任何 JavaFX 节点。你可以使用 setContent 方法设置内容区域的节点。
展开和折叠：用户可以通过点击标题来展开或折叠内容区域。你还可以使用 setExpanded 方法以编程方式展开或折叠面板。
动画：TitledPane 支持展开和折叠时的动画效果。你可以使用 setAnimated 方法启用或禁用动画。
事件处理：TitledPane 提供了一些事件，如 expandedProperty 和 collapsedProperty，以便在面板展开或折叠时执行特定操作。

示例代码：

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.control.TitledPane?> <?import javafx.scene.layout.VBox?> <VBox xmlns:fx="http://javafx.com/fxml/1" prefHeight="400.0" prefWidth="600.0" spacing="10.0"> <TitledPane text="Titled Pane 1"> <VBox spacing="10.0"> <Button text="Button 1" /> <Button text="Button 2" /> </VBox> </TitledPane> <TitledPane text="Titled Pane 2"> <VBox spacing="10.0"> <Button text="Button 3" /> <Button text="Button 4" /> </VBox> </TitledPane> </VBox>

效果：

3.2.8 Accordion

Accordion 允许用户在多个可折叠面板（TitledPane）之间进行切换。

基本概念

TitledPane：TitledPane 是 Accordion 中的一个子节点，它包含一个标题和一个可折叠的内容区域。用户可以通过点击标题来展开或折叠内容区域。
展开和折叠：当用户点击某个 TitledPane 的标题时，该面板将展开以显示其内容。同时，其他展开的面板将自动折叠。
选中面板：Accordion 允许你设置一个选中的 TitledPane。选中的面板将始终保持展开状态，而其他面板将折叠。

示例代码：

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Accordion?> <?import javafx.scene.control.Button?> <?import javafx.scene.control.TitledPane?> <Accordion xmlns:fx="http://javafx.com/fxml/1" prefHeight="400.0" prefWidth="600.0"> <panes> <TitledPane text="Titled Pane 1"> <Button text="Button 1" /> </TitledPane> <TitledPane text="Titled Pane 2"> <Button text="Button 2" /> </TitledPane> <TitledPane text="Titled Pane 3"> <Button text="Button 3" /> </TitledPane> </panes> </Accordion>

效果：

通过学习以上不同的布局管理器及其特点，我们可以根据实际需要选择合适的布局管理器来实现界面的布局。不同的布局管理器适用于不同的场景，可以帮助我们更方便地创建各种类型的用户界面。

3.3 使用 Scene Builder 工具设计界面

Scene Builder 是一个可视化的界面设计工具，可以帮助我们更直观地设计 JavaFX 界面。在这一部分，我们将学习如何使用 Scene Builder 工具来创建和编辑界面，以及如何将 Scene Builder 中设计好的界面（FXML）与 Java 代码进行整合。

3.3.1 下载与安装 Scene Builder

Scene Builder 是由 Oracle 提供的免费界面设计工具，你可以从官方网站下载适用于你操作系统的版本，并按照官方指引进行安装。也可以在这里下载：https://gluonhq.com/products/scene-builder/

3.3.2 设计界面

打开 Scene Builder 后，你将看到一个空白的界面，可以从左侧的控件库中拖拽控件到界面上，并通过拖拽调整控件的位置和大小，以及通过属性面板设置控件的属性。

在 IDEA 中，可以便捷地调用 Scene Builder 打开 FXML 文件：

3.3.3 保存与导出界面

设计好界面后，可以通过菜单栏中的 "File -> Save" 保存界面文件，通常使用 .fxml 格式保存。保存后的文件可以与 Java 代码进行关联，用于在应用程序中加载界面。

3.3.4 与 Java 代码关联

通过在 FXML 文件中设置 fx:controller 属性，指定控制器类，然后在控制器类中通过 @FXML 注解将界面上的控件与 Java 代码中的字段关联起来。这样就可以在 Java 代码中操作界面上的控件了。

第四部分：事件处理与控件交互

4.1 事件驱动编程概念介绍

事件驱动编程是一种常见的编程范式，它基于事件和事件处理器的概念，使得程序能够响应用户的操作和系统的事件。在事件驱动编程中，程序通常被设计成一个事件驱动的系统，它会监听和响应发生的事件，从而执行相应的操作。

4.1.1 事件（Event）

事件是程序中发生的某种动作或状态变化，它可以是用户操作、系统通知、外部设备输入等。常见的事件包括鼠标点击、键盘输入、窗口关闭、数据到达等。在事件驱动编程中，事件是驱动程序执行的触发器。

4.1.2 事件源（Event Source）

事件源是指能够产生事件的对象或组件。事件源可以是用户界面中的控件（如按钮、文本框）、系统中的设备（如键盘、鼠标）、或者其他程序模块。当事件发生时，事件源会向系统发送事件通知。

4.1.3 事件处理器（Event Handler）

事件处理器是用于处理特定类型事件的代码块或方法。当事件源发生事件时，相应的事件处理器会被调用，从而执行相应的操作。事件处理器通常是以回调函数的形式存在，它会被注册到事件源上，当事件发生时被调用。

4.1.4 事件监听（Event Listening）

事件监听是指程序对事件源的监听和响应过程。当事件源发生事件时，程序会调用相应的事件处理器来处理事件。事件监听使得程序能够实时地响应用户操作和系统事件，从而提高了程序的交互性和实时性。

4.1.5 示例

举个简单的例子，假设我们有一个按钮，当用户点击按钮时，会触发一个事件，我们希望在按钮被点击时执行某个操作。这时，按钮就是事件源，按钮的点击就是事件，执行点击操作的代码就是事件处理器。通过将事件处理器注册到按钮上，当按钮被点击时，相应的事件处理器会被调用，从而执行点击操作的代码。

button.setOnAction(event -> { // 执行点击操作的代码 });

暂时无法在飞书文档外展示此内容

总结

事件驱动编程是一种常见的编程范式，它通过事件和事件处理器的机制实现程序的响应式和交互式。在事件驱动编程中，事件是驱动程序执行的触发器，事件源是产生事件的对象，事件处理器是处理事件的代码块，事件监听是程序对事件源的监听和响应过程。事件驱动编程使得程序能够实时地响应用户操作和系统事件，提高了程序的交互性和实时性。

4.2 事件处理器的注册和使用

在 JavaFX 中，事件处理器的注册和使用很简单。

需要将事件处理器注册到相应的 UI 控件上。在 FXML 文件中，可以使用 on<Event> 属性来指定事件处理器的名称；在控制器类中，可以使用 @FXML 注解来将事件处理器方法与 UI 控件关联。

示例代码：

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.control.Label?> <?import javafx.scene.layout.VBox?> <VBox xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.huha.ButtonClickDemoController" prefHeight="400.0" prefWidth="600.0" spacing="10.0"> <Button fx:id="button" text="Click Me!" onAction="#onButtonClick" /> <Label fx:id="label" text="Click the button to change this text." /> </VBox>

ButtonClickDemoController.java：

import javafx.event.ActionEvent; import javafx.fxml.FXML; import javafx.scene.control.Label; public class ButtonClickDemoController { @FXML private Label label; @FXML protected void onButtonClick(ActionEvent event) { label.setText("Button clicked!"); } }

通过这种方式，我们可以方便地将事件处理器注册到 UI 控件上，并在事件发生时执行相应的操作。

4.3 实现一个简单的控件交互功能

界面上展示一个下拉选择框，可以选择“是”或者“否”，另外显示一个标签。

当下拉框选择“是”，标签显示：你选择了是；否则，标签显示：你选择了否。

FXML:

<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.ChoiceBox?> <?import javafx.scene.control.Label?> <?import javafx.scene.layout.VBox?> <VBox xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ChoiceBoxDemoController"> <ChoiceBox fx:id="choiceBox" /> <Label fx:id="label" /> </VBox>

Controller:

import javafx.fxml.FXML; import javafx.scene.control.ChoiceBox; import javafx.scene.control.Label; public class ChoiceBoxDemoController { @FXML private ChoiceBox<String> choiceBox; @FXML private Label label; @FXML public void initialize() { choiceBox.getItems().addAll("是", "否"); choiceBox.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> { label.setText("你选择了" + newValue); }); } }

启动类：

import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class ChoiceBoxDemo extends Application { @Override public void start(Stage primaryStage) throws Exception { FXMLLoader loader = new FXMLLoader(getClass().getResource("ChoiceBoxDemo.fxml")); VBox root = loader.load(); Scene scene = new Scene(root, 300, 200); primaryStage.setTitle("ChoiceBox Demo"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

第五部分：高级主题与扩展

5.1 使用 CSS 样式美化界面

使用 CSS 样式美化 JavaFX 界面可以让你的应用程序看起来更加现代化、美观，并且可以增强用户体验。在 JavaFX 中，你可以通过 CSS 文件或者内联样式来定义控件的外观和样式。下面详细介绍如何使用 CSS 样式美化界面：

5.1.1 使用外部 CSS 文件

（1）创建 CSS 文件

首先，创建一个外部的 CSS 文件（例如 styles.css），用于定义控件的样式。

/* styles.css */ /* 设置按钮的背景色和字体颜色 */ .button { -fx-background-color: #007bff; /* 蓝色背景 */ -fx-text-fill: white; /* 白色字体 */ } /* 设置标签的字体样式和大小 */ .label { -fx-font-family: Arial; -fx-font-size: 14px; }

（2）在界面中引用 CSS 文件

在你的 FXML 文件中，通过 stylesheets 属性引用外部的 CSS 文件。

 <Scene xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="MainController" stylesheets="@styles.css">  </Scene>

5.1.2 使用内联样式

除了使用外部 CSS 文件之外，你也可以直接在界面的 FXML 文件中使用内联样式来定义控件的样式。

<Button text="Click Me" style="-fx-background-color: #007bff; -fx-text-fill: white;"/>

5.1.3 使用选择器

CSS 选择器可以让你根据控件的类型、ID 或者类名来选择控件并定义样式。

/* 使用类选择器定义样式 */ .my-button { -fx-background-color: #007bff; /* 蓝色背景 */ -fx-text-fill: white; /* 白色字体 */ }

 <Button text="Click Me" styleClass="my-button"/>

5.1.4 伪类和状态选择器

JavaFX 提供了一些伪类和状态选择器，用于根据控件的状态来定义样式，例如鼠标悬停、按下等状态。

/* 设置按钮在鼠标悬停时的样式 */ .button:hover { -fx-background-color: #0056b3; /* 深蓝色背景 */ }

5.2 图标的使用

这里介绍一种简单优雅的方式使用图标，那就是利用 ikonli。

首先引入 maven 依赖：

<dependency> <groupId>org.kordamp.ikonli</groupId> <artifactId>ikonli-fontawesome5-pack</artifactId> <version>2.4.0</version> </dependency>

其中包含的图标：

https://kordamp.org/ikonli/cheat-sheet-fontawesome5.html

代码示例：

<Label fx:id="jiajiemi"> <graphic> <StackPane styleClass="custom-jfx-list-view-icon-container"> <FontIcon iconLiteral="fas-unlock" iconSize="22" styleClass="custom-jfx-list-view-icon"/> </StackPane> </graphic> 加解密 </Label>

5.3 利用三方库实现更好看的界面

JFoenix 是一个 JavaFX 的第三方库，它提供了一套 Material Design 风格的 UI 组件。

Github:https://github.com/sshahine/JFoenix

（1）添加 JFoenix 依赖

首先，你需要将 JFoenix 添加到项目的依赖中。如果你使用 Maven，可以在 pom.xml 文件中添加以下依赖：

<dependency> <groupId>com.jfoenix</groupId> <artifactId>jfoenix</artifactId> <version>9.0.10</version> </dependency>

（2）创建一个简单的 JavaFX 应用程序

创建一个名为 JFoenixDemo.java 的主类：

import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class JFoenixDemo extends Application { @Override public void start(Stage primaryStage) throws Exception { FXMLLoader loader = new FXMLLoader(getClass().getResource("JFoenixDemo.fxml")); VBox root = loader.load(); Scene scene = new Scene(root, 300, 200); primaryStage.setTitle("JFoenix Demo"); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

（3）创建一个 FXML 文件

创建一个名为 JFoenixDemo.fxml 的 FXML 文件：

<?xml version="1.0" encoding="UTF-8"?> <?import com.jfoenix.controls.JFXButton?> <?import javafx.scene.layout.VBox?> <VBox xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"> <JFXButton text="JFoenix Button" /> </VBox>

在这个 FXML 文件中，我们使用了 JFoenix 提供的 JFXButton 组件。

（4）运行应用程序

运行 JFoenixDemo 类，你将看到一个包含 JFoenix 按钮的窗口。

（5）扩展示例

你可以使用 JFoenix 提供的其他组件，如 JFXTextField、JFXComboBox、JFXDatePicker 等，来创建更复杂的用户界面。在实际开发中，你可以根据需要扩展此示例，以实现更好看的 JavaFX 界面。

第六部分：JavaFX 的打包

JavaFX 应用程序的打包是将应用程序和其依赖项打包成一个可执行的文件，以便在用户的计算机上运行。JavaFX 提供了多种打包工具和方式，使得打包过程变得简单且灵活。下面介绍两种常用的 JavaFX 应用程序打包方式：使用 Maven 和使用 JavaFX 的打包工具。

6.1. 利用 javapackager

pom 中添加 javapackager 打包插件

<plugin> <groupId>io.github.fvarrui</groupId> <artifactId>javapackager</artifactId> <version>1.6.6</version> <executions> <execution> <phase>package</phase> <goals> <goal>package</goal> </goals> <configuration>  <mainClass>com.huha.huhatoolbox.HUHAToolBoxApplication</mainClass>  <bundleJre>true</bundleJre> <jrePath>./src/main/jdk1.8.0_60/jre</jrePath> <generateInstaller>false</generateInstaller> <administratorRequired>false</administratorRequired>  <platform>windows</platform> <copyDependencies>true</copyDependencies>  <displayName>HUHAToolBox</displayName> <name>HUHAToolBox</name> <version>2.0</version>      <winConfig> <icoFile>.\src\main\resources\image\icons\tool.ico</icoFile> <generateSetup>false</generateSetup> <generateMsi>false</generateMsi> <generateMsm>false</generateMsm> </winConfig> </configuration> </execution> </executions> </plugin>