VS Code中JavaFX 项目环境配置

1. 获取JavaFX

1.1 JavaFX 下载

JavaFX

网站打开后应如图 1.1.1 所示：

图 1.1.1

单击左下角Download按钮，进入如图 1.1.2 所示页面：

图 1.1.2

 JavaFX version：

        选择你要使用的JavaFX版本，通常建议使用最新版本。为了稳定性考虑，不建议选择

        测试版，即后缀有[Early Access]的版本。

Operating System：

        选择你用来进行JavaFX开发时所使用的电脑操作系统。

Architecture：
        选择你的电脑CPU架构。

                Intel / AMD ：X64

                Apple Silicon ： Aarch64

        至于Arm32 与 X32，大概率用到这个选项的也不会来看这个教程。

Type：

        请选择SDK

之后点击绿色的Download（下载）即可。

1.2 解压缩

在下载完成之后，会看到一个Zip的压缩文件。解压后可看到如图 1.2.1 所示的文件目录。

图 1.2.1

我们需要使用的仅仅是lib文件夹下的所有文件。

2. 项目文件设置

2.1 文件目录结构

此处，仅仅是一个最基础的样板，请依据实际情况进行调整。如图 2.1.1 所示，这是一个最基础的文件目录结构。

图 2.1.1

在JavaFX_Sample文件夹下，有着四个文件夹，分别是".vscode", "bin", "lib", 与"src"。其中".vscode"是一个隐藏文件夹，在Unix系系统中，以"."开头的文件名意味着隐藏文件。

以下是各个文件夹的作用：

.vscode

        放置VS Code的配置文件。

bin

        放置Java源码编译后的class文件。

lib

        放置包括JavaFX在内的所有额外引用资源。

src

        放置自己编写的Java源码。

2.2 将JavaFX SDK置入自己的项目文件夹

 将下载好的JavaSDK压缩包解压后，进入 "lib" 文件夹内，选中所有的文件，复制。如图 2.2.1 所示。

图 2.2.1

 注意：在Windows操作系统中，此处应选择 "复制" ，在Windows中，没有"拷贝" 这一选项。

将刚才复制的文件粘贴进自己项目的 "lib" 文件夹内。如图 2.2.2 所示。

图 2.2.2

此时项目文件夹内的文件结构应如图 2.2.3 所示。

图 2.2.3

2.3 VS Code项目配置

进入".vscode" 这个隐藏文件夹，在其中创建两个文件："setting.json", "launch.json"。

setting.json

        告诉 VS Code 我的项目属性。

launch.json

        告诉VS Code 在启动项目时应当使用哪些参量。

结构如图 2.3.1 所示。 

图 2.3.1

注意：此时不需要在这两个JSON文件内写入任何内容。

2.4 设置setting.json

打开VS Code，使用VS Code打开项目文件夹【重要：不要使用VS Code打开项目文件夹下的子文件夹或者直接打开源码。例如我的项目文件夹名叫JavaFX_Sample，那么只打开这个文件夹就好，不要打开其中的 "src", "bin" 或者其他。】

在VS Code中可以找见刚才创建的 setting.json文件，使用VS Code编辑它。将如下内容写入这个文件：

{

"java.project.sourcePaths": "src",

"java.project.outputPath": "bin",

"java.project.referencedLibraries": "lib/*.jar"

}

"java.project.sourcePaths": "src"

        表明我们项目文件的源码位于项目文件夹中的 src 文件夹内。

"java.project.outputPath": "bin"

        表明我们需要将源码编译后的class文件输出到 bin 文件夹内。

"java.project.referencedLibraries": "lib/*.jar"

        表明我们所引用的JavaFX或其他额外资源位于lib文件夹内，我们引用的并使用的是jar文件。其中*为通配符，意味着等于任何文本，即文件名只要以.jar结尾都会被引用。

重要：这里的所有路径均采用相对路径。

如图 2.4.1 所示。

图 2.4.1 

2.5 创建JavaFX 源码

在项目文件夹(JavaFX_Sample)中的 "src" 文件夹内创建JavaFX的源码。如图 2.5.1 所示。

图 2.5.1

向 JavaFX_Sample.java 文件内写入一个JavaFX 源码的示例。

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

public class JavaFX_Sample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建一个标签控件
        Label label = new Label("Hello, JavaFX!");

        // 创建一个面板并将标签添加到面板中
        StackPane root = new StackPane();
        root.getChildren().add(label);

        // 创建一个场景并将面板添加到场景中
        Scene scene = new Scene(root, 300, 250);

        // 设置舞台的标题和场景，然后显示舞台
        primaryStage.setTitle("Simple JavaFX Application");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

如图 2.5.2 所示。

图 2.5.2

2.6 设置launch.json

launch.json的内容会在第一次运行JavaFX源码后自动生成。第一次运行并不会成功，我们需要VS Code创建一个模版而已，仅此而已。VS Code会在Java源码运行后，自动生成如下内容，如图 2.6.1 所示。

图 2.6.1

{

"configurations": [

{

"type": "java",

"name": "JavaFX_Sample",

"request": "launch",

"mainClass": "JavaFX_Sample",

"projectName": "JavaFX_Sample_8fbc05cd"

}

]

}

在这一部分中，我们需要关注如下信息：

"name": "JavaFX_Sample",

这里的name即是我们编写的JavaFX源码文件的名称，我们仅需要对它所在的{大括号}内进行编辑。添加如下键值对：

"vmArgs": "--module-path lib/ --add-modules=javafx.controls,javafx.fxml"

以下是对部分关键信息的解释：

--module-path lib/

        这里的 lib/ 的意思是，在相对路径下，在项目中，JavaFX SDK所在的文件目录，这里指的是项目文件夹中的lib文件夹内。

添加完成后，launch.json文件内应存在如下内容：

{

"configurations": [

{

"type": "java",

"name": "JavaFX_Sample",

"request": "launch",

"mainClass": "JavaFX_Sample",

"projectName": "JavaFX_Sample_8fbc05cd",

"vmArgs": "--module-path lib/ --add-modules=javafx.controls,javafx.fxml"

}

]

}

重要！！！一定不要忘记标红的地方有一个半角（英文的）逗号需要添加！！！

3. 完成JavaFX的配置

​​​​​​​在完成以上配置后，你就可以正常的在VS Code中使用JavaFX了。