前言

Jdk 从 1.8 开始 jdk 自带 JavaFX,到 Jdk 11 开始 jdk 不再内置 JavaFX,所以如果你使用的是高版本的 jdk 在使用 javaFX 的时候就需要先安装 javaFX,并在 idea 里进行配置。

本文主要是对高版本 jdk 安装配置 javaFX 进行讲解,在本文开始前,你的电脑安装的 jdk 版本应该大于等于 17 。

如果你还没安装 jdk17 ,可以参考 jdk17安装,多版本jdk安装切换 安装

如果你对 javaFX ,感兴趣可以访问 javaFX 官网首页

(你也可以在电脑上安装多个版本的 jdk ,在 idea 项目设置里指定使用已安装的 jdk 17 版本)

使用 javaFX 可以通过下载 javaFX SDK 然后导入到项目中,也可以通过 Maven 自动下载依赖使用,下面讲解这两种方式。

一、 javaFX 各模块名和作用

根据 官网 javaFX 模块说明 ,javaFX SDK 里有以下模块:

模块名说明
javafx-controls定义可用于JavaFX UI工具包的UI控件、图表和外观。
javafx-fxml为JavaFX UI工具包定义FXML API。
javafx-base定义JavaFXUI工具包的基本API,包括绑定、属性、集合和事件的API。
javafx-graphics定义JavaFX UI工具包的核心场景API(如布局容器、应用程序生命周期、形状、转换、画布、输入、绘画、图像处理和效果),以及动画、css、并发、几何、打印和窗口化的API。
javafx-media定义用于播放媒体和音频内容的API,作为JavaFX UI工具包的一部分,包括MediaView和MediaPlayer。
javafx-swing为JavaFXUI工具包中包含的JavaFX/Swing互操作支持定义API,包括SwingNode(用于在JavaFX应用程序中嵌入Swing)和JFXPanel(用于在Swing应用程序中插入JavaFX)。
javafx-web为JavaFX UI工具包中包含的WebView功能定义API。

简单说明一下:

javafx-controls :用于显示窗口、外观和场景 scene;

javafx-fxml:用于界面的布局。javaFX 可以使用 java 代码来对页面布局并且设置各种控件,当然也可以使用 fxml 来编写,使用 fxml 的好处是界面相关的布局、按钮等显示的控件可以在 fxml 里编写,而逻辑处理可以只由 java 代码来处理,这样分层比较清晰,写得代码比较少。如果你布局和控件也使用 java 代码编写,那么可以不必引入 javafx-fxml 模块。

javafx-media:用于播放视频、音频的 api 。如果你想使用 javaFX 开发一个视频播放器,那么就需要引入这个模块。

javafx-web:用于打开网页和显示本地的 html 。如果你想在你开发的应用里嵌入一个网页,比如百度,或者你想嵌入一个你本地的静态 html 页面,那么就需要引入这个模块。

二、方式一:通过 Maven 使用 javaFX

1.创建 JavaFx 类型的项目

在这里插入图片描述

2.创建项目后修改 pom.xml

项目创建后 pom.xml 里默认只 引用了 JavaFx 的 javafx-controls 和 javafx-fxml 模块,如果需要用到其他模块可以根据自己需要加上。(我这里全部引用了,并且所有模块用了最新的 21.0.2 版本。)

下面是我的 pom.xml 文件(注意检查 mainClass 里启动类路径要配成你自己项目的启动类路径):

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>javafx</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>javafx</name>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <!-- 定义可用于JavaFX UI工具包的UI控件、图表和外观。 -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-controls</artifactId>
            <version>21.0.2</version>
        </dependency>

        <!-- 为JavaFX UI工具包定义FXML API。 -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-fxml</artifactId>
            <version>21.0.2</version>
        </dependency>

        <!-- 定义JavaFXUI工具包的基本API,包括绑定、属性、集合和事件的API。 -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-base</artifactId>
            <version>21.0.2</version>
        </dependency>

        <!-- 定义JavaFX UI工具包的核心场景API(如布局容器、应用程序生命周期、形状、转换、画布、输入、绘画、图像处理和效果),以及动画、css、并发、几何、打印和窗口化的API。 -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-graphics</artifactId>
            <version>21.0.2</version>
        </dependency>

        <!-- 定义用于播放媒体和音频内容的API,作为JavaFX UI工具包的一部分,包括MediaView和MediaPlayer。 -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-media</artifactId>
            <version>21.0.2</version>
        </dependency>

        <!-- 为JavaFXUI工具包中包含的JavaFX/Swing互操作支持定义API,包括SwingNode(用于在JavaFX应用程序中嵌入Swing)和JFXPanel(用于在Swing应用程序中插入JavaFX)。 -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-swing</artifactId>
            <version>21.0.2</version>
        </dependency>

        <!-- 为JavaFX UI工具包中包含的WebView功能定义API。 -->
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-web</artifactId>
            <version>21.0.2</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>17</source>
                    <target>17</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.openjfx</groupId>
                <artifactId>javafx-maven-plugin</artifactId>
                <version>0.0.8</version>
                <executions>
                    <execution>
                        <!-- Default configuration for running with: mvn clean javafx:run -->
                        <id>default-cli</id>
                        <configuration>
                            <mainClass>com.example.javafx/com.example.javafx.HelloApplication</mainClass>
                            <launcher>app</launcher>
                            <jlinkZipName>app</jlinkZipName>
                            <jlinkImageName>app</jlinkImageName>
                            <noManPages>true</noManPages>
                            <stripDebug>true</stripDebug>
                            <noHeaderFiles>true</noHeaderFiles>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

3.module-info

除了在 pom.xml 中声明要下载的 javafx 模块,还需要在 module-info.java 里声明用到的模块(默认只引用了 controls 、fxml ),所有如果用到了 base、web 等其他 javafx 模块也需要在 module-info.java 里面加入对应的模块名。

我这里所有 7 个模块都引用了,我的 module-info.java 如下(我的包路径是com.example.javafx):

module com.example.javafx{
    requires javafx.controls;
    requires javafx.fxml;
    requires javafx.base;
    requires javafx.graphics;
    requires javafx.media;
    requires javafx.swing;
    requires javafx.web;


    opens com.example.javafx to javafx.fxml;
    exports com.example.javafx;
}

最终,我的项目结构如下(如果有红色报错可以刷新项目加载所需要的依赖):

在这里插入图片描述

三、方式二:手动下载 javaFX sdk 并引入项目

1. javaFX下载

javaFX 官网 选择你要下载的版本和你电脑的操作类型,然后下载 SDK ,这里推荐下载 21.0.2 版本。

因为 21.0.2 是当前比较新且长期支持的 LTS 版本。

在这里插入图片描述

2. 环境变量配置

下载后的压缩安装包解压到你的安装目录里,然后新建环境变量 PATH_TO_FX ,对应的值是 javaFx 安装包下对应的 lib 目录

在这里插入图片描述

3. IDEA中配置

(1)选择 file --> Project Structure --> Modules–> Dependencies,然后把 javaFX 安装包下对应的 lib目录里的所有模块 jar 包都依赖上。

在这里插入图片描述
在这里插入图片描述

(2)选择 Run --> Edit ConFiguratiobs

在这里插入图片描述
或者 idea 里右上角选择 Edit ConFiguratiobs

在这里插入图片描述

(3)选择 Modify options --> Add VM options

(不同版本的 idea 里 Add VM options 位置可能会略有不同)
在这里插入图片描述

路径填自己的 javaFX 安装路径:

--module-path "D:\Program\javaFx\javafx-sdk-21.0.2\lib" --add-modules javafx.controls,javafx.fxml,javafx-base,javafx-graphics,javafx-media,javafx-swing,javafx.web 

在这里插入图片描述
点击 apply 和 OK

(4)新建 module-info.java 文件

在项目的 src/main/java/ 路径下新建 module-info.java 文件,用于声明项目要引用的 javafx 模块。
(如果 idea 中无法新建 module-info.java ,可以在电脑上新建该文件后复制到目录下)

我的 module-info.java 入下:

module com.example.javafx {
    requires javafx.controls;
    requires javafx.fxml;
    requires javafx.base;
    requires javafx.graphics;
    requires javafx.media;
    requires javafx.swing;
    requires javafx.web;


    opens com.example.javafx to javafx.fxml;
    exports com.example.javafx;
}

(5)最终我的项目目录结构如下

在这里插入图片描述

四、javaFX 示例

通过上面两种方式的任意一种你已经创建了一个 javaFX 项目,你可以在你的启动类里的 start 方法里写一些代码测试。

下面是我的启动类里的代码:

(1)打印 javafx 版本和 java 版本


import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage)  {
        String javaVersion = System.getProperty("java.version");
        String javafxVersion = System.getProperty("javafx.version");
        Label l = new Label("Hello, 你的JavaFX版本是: " + javafxVersion + ", Java版本是 " + javaVersion + ".");
        Scene scene = new Scene(new StackPane(l), 640, 480);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

输出效果:

在这里插入图片描述

(2)打开百度网页

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage)  {
        stage.setTitle("JavaFX WebView Example");
        WebView webView = new WebView();
        webView.getEngine().load("http://www.baidu.com");
        StackPane root = new StackPane();
        root.getChildren().add(webView);
        Scene scene = new Scene(root);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

输出效果:

在这里插入图片描述

(3)简单页面


import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ButtonBar;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.control.Separator;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) {
        VBox vbox = new VBox();

        GridPane gp = new GridPane();
        gp.setPadding(new Insets(10));
        gp.setHgap(4);
        gp.setVgap(8);
        VBox.setVgrow(gp, Priority.ALWAYS);

        Label lblTitle = new Label("欢迎来到售后支持页面。");

        Label lblEmail = new Label("邮箱");
        TextField tfEmail = new TextField();

        Label lblPriority = new Label("优先级");
        ObservableList<String> priorities =
                FXCollections.observableArrayList("高", "中", "低");
        ComboBox<String> cbPriority = new ComboBox<>(priorities);

        Label lblProblem = new Label("问题");
        TextField tfProblem = new TextField();

        Label lblDescription = new Label("描述");
        TextArea taDescription = new TextArea();

        gp.add(lblTitle, 1, 1);
        gp.add(lblEmail, 0, 2);
        gp.add(tfEmail, 1, 2);
        gp.add(lblPriority, 0, 3);
        gp.add(cbPriority, 1, 3);
        gp.add(lblProblem, 0, 4);
        gp.add(tfProblem, 1, 4);
        gp.add(lblDescription, 0, 5);
        gp.add(taDescription, 1, 5);

        Separator sep = new Separator(); // 水平分割线

        ButtonBar buttonBar = new ButtonBar();
        buttonBar.setPadding(new Insets(10));

        Button saveButton = new Button("保存");
        Button cancelButton = new Button("取消");

        buttonBar.setButtonData(saveButton, ButtonBar.ButtonData.OK_DONE);
        buttonBar.setButtonData(cancelButton, ButtonBar.ButtonData.CANCEL_CLOSE);

        buttonBar.getButtons().addAll(saveButton, cancelButton);

        vbox.getChildren().addAll(gp, sep, buttonBar);

        Scene scene = new Scene(vbox);

        stage.setTitle("布局面板测试");
        stage.setScene(scene);
        stage.setWidth(736);
        stage.setHeight(414);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

输出效果:

在这里插入图片描述

其他示例可以参考我的文章:

javaFX WebView使用及打开网页

JavaFX实例:简单日历的实现

五、 javaFX 文档及教程

JavaFX 官网文档

JavaFX 官网文档翻译

JavaFX Tutorial

JavaFX Tutorial

JavaFX - 教程

JavaFX 教程

w3cschool JavaFX 教程

易百JavaFX 教程

JavaFx布局讲解

JavaFx css 美化

JFoenix javaFX组件美化


另外,如果你对 javaFX 感兴趣,你可以看下 gitgub上的这个项目 xJavaFxTool ,或者我 gitgub上使用 javaFX 开发的一个应用: XTool

在这里插入图片描述

在这里插入图片描述


其他 javaFX 相关学习教程可参考:

JavaFX 入门
JavaFX的几个新特性,让Swing彻底过时
JavaFX FXML教程
JavaFX FXML教程
JavaFX FXML教程
JavaFX FXML
JavaFX入门(四):JavaFX布局(一)
最通俗易懂——JavaFX可视化窗口如何插入图片
快速创建基于JavaFX的桌面App
JavaFx的那些坑
JavaFX 加载 fxml 文件 方法三 在 Controller 对 Stage 进行操作
Stage窗口介绍,打开新窗口
场景切换
fxml场景切换
JavaFX - 实现管理多个Stage窗口切换及源码解析
JavaFx的Stage管理实现切换案例——登录页面
scenebuilder教程-与Controller类进行绑定、scenebuilder生成Controller类
JavaFx教程第四部分:CSS 样式
JavaFx之整合JFoenix(十四)
JavaFX绑定
JavaFx2.0—Binding
JavaFX属性与绑定
场景切换
场景切换
JavaFX: FXML嵌套和子Controller(Sub-Controller)
JavaFx嵌套控制器
使用 JavaFx 示例将文本和图像复制到剪贴板

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐