1. Get JavaFX
1.1 JavaFX Download
JavaFX
The website should be opened as shown in Figure 1.1.1:
Figure 1.1.1
Click the Download button in the lower left corner to enter the page shown in Figure 1.1.2:
Figure 1.1.2
JavaFX version:
Select the JavaFX version you want to use, it is generally recommended to use the latest version. For stability reasons, it is not recommended to choose
Beta version, that is, the version with [Early Access] suffixed.
Operating System:
Select the computer operating system you will use for JavaFX development.
Architecture:
Choose your computer’s CPU architecture.Intel/AMD:X64
Apple Silicon: Aarch64
As for Arm32 and X32, there is a high probability that those who use this option will not read this tutorial.
Type:
Please select SDK
Then click the green Download.
1.2 Decompression
After the download is completed, you will see a Zip compressed file. After decompression, you can see the file directory as shown in Figure 1.2.1.
Figure 1.2.1
All we need to use is all the files in the lib folder.
2. Project file settings
2.1 File directory structure
This is just a basic sample, please adjust it according to the actual situation. As shown in Figure 2.1.1, this is the most basic file directory structure.
Figure 2.1.1
Under the JavaFX_Sample folder, there are four folders, namely “.vscode”, “bin”, “lib”, and “src”. Among them, “.vscode” is a hidden folder. In Unix systems, file names starting with “.” mean hidden files.
The following is the function of each folder:
.vscode
Place the VS Code configuration file.
bin
Place the compiled class file of Java source code.
lib
Place all additional referenced resources including JavaFX.
src
Place the Java source code you wrote.
2.2 Place JavaFX SDK into your own project folder
After decompressing the downloaded JavaSDK compressed package, go to the “lib” folder, select all the files, and copy them. As shown in Figure 2.2.1.
Figure 2.2.1
Note: In Windows operating system, “Copy” should be selected here. In Windows, there is no “Copy” option.
Paste the file you just copied into the “lib” folder of your project. As shown in Figure 2.2.2.
Figure 2.2.2
At this time, the file structure in the project folder should be as shown in Figure 2.2.3.
Figure 2.2.3
2.3 VS Code project configuration
Enter the “.vscode” hidden folder and create two files in it: “setting.json”, “launch.json”.
setting.json
Tell VS Code my project properties.
launch.json
Tell VS Code what parameters it should use when starting the project.
The structure is shown in Figure 2.3.1. 
Figure 2.3.1
Note: There is no need to write anything in these two JSON files at this time.
2.4 Settingssetting.json
Open VS Code and use VS Code to open the project folder [Important: Do not use VS Code to open subfolders under the project folder or directly open the source code. For example, my project folder is called JavaFX_Sample, so just open this folder. Do not open “src”, “bin” or others in it. 】
You can find the setting.json file you just created in VS Code and edit it using VS Code. Write the following content to this file:
{
“java.project.sourcePaths”: “src”,
“java.project.outputPath”: “bin”,
“java.project.referencedLibraries”: “lib/*.jar”
}
“java.project.sourcePaths”: “src”
Indicates that the source code of our project file is located in the src folder in the project folder.
“java.project.outputPath”: “bin”
Indicates that we need to output the compiled class file from the source code to the bin folder.
“java.project.referencedLibraries”: “lib/*.jar”
Indicates that the JavaFX or other additional resources we are referencing are located in the lib folder, and we are referencing and using jar files. Among them, * is a wildcard character, which means it is equal to any text, that is, as long as the file name ends with .jar, it will be quoted.
Important: All paths here are relative.
As shown in Figure 2.4.1.
Figure 2.4.1
2.5 Create JavaFX source code
Create the JavaFX source code in the “src” folder in the project folder (JavaFX_Sample). As shown in Figure 2.5.1.
Figure 2.5.1
Write a sample JavaFX source code to the JavaFX_Sample.java file.
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) {
//Create a label control
Label label = new Label("Hello, JavaFX!");
// Create a panel and add labels to the panel
StackPane root = new StackPane();
root.getChildren().add(label);
// Create a scene and add panels to the scene
Scene scene = new Scene(root, 300, 250);
//Set the stage title and scene, then display the stage
primaryStage.setTitle("Simple JavaFX Application");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
As shown in Figure 2.5.2.
Figure 2.5.2
2.6 Setting launch.json
The content of launch.json will be automatically generated after running the JavaFX source code for the first time. The first run will not be successful, we need VS Code to create a template, that’s all. VS Code will automatically generate the following content after running the Java source code, as shown in Figure 2.6.1.
Figure 2.6.1
{
“configurations”: [
{
“type”: “java”,
“name”: “JavaFX_Sample”,
“request”: “launch”,
“mainClass”: “JavaFX_Sample”,
“projectName”: “JavaFX_Sample_8fbc05cd”
}
]
}
In this part, we need to pay attention to the following information:
“name”: “JavaFX_Sample”,
The name here is the name of the JavaFX source code file we wrote. We only need to edit the {braces} where it is located. Add the following key-value pairs:
“vmArgs”: “–module-path lib/ –add-modules=javafx.controls,javafx.fxml”
Below is an explanation of some of the key information:
–module-path lib/
The lib/ here means the file directory where the JavaFX SDK is located in the project under a relative path. This refers to the lib folder in the project folder.
After the addition is completed, the following content should exist in the launch.json file:
{
“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”
}
]
}
Important! ! ! Don’t forget that there is a half-width (English) comma in the red area that needs to be added! ! !
3. Complete the configuration of JavaFX
?After completing the above configuration, you can use JavaFX normally in VS Code.
The knowledge points of the article match the official knowledge files, and you can further learn related knowledge. Java Skill TreeHomepageOverview 138,705 people are learning the system