Javafx 简明教程

JavaFX - Installation using Visual Studio Code

Microsoft Visual Studio Code 还允许你创建一个 JavaFX 应用程序。你无需任何额外的插件或安装来创建非模块化项目。相反，我们只需像 Netbeans 和 Eclipse IDE 一样，更新运行配置即可。

Microsoft Visual Studio Code also allows you to create a JavaFX application. You do not need any extra plug-ins or installations to create a non-modular project. Instead we just update the run configurations, like Netbeans and Eclipse IDE.

在本章中，我们将安装最新版本的 Microsoft Visual Studio Code，以配合最新版本的 JavaFX SDK。

In this chapter, we will install the latest version of Microsoft Visual Studio Code to work with the latest version of JavaFX SDK.

Installing Visual Studio Code

与 NetBeans 类似，Microsoft VSCode 也为 JavaFX 提供了内置支持。因此，你可以在不使用任何附加插件的情况下，以使用 JavaFX 创建任何应用程序。要建立 VSCode 环境，你需要按照以下步骤操作。

Like NetBeans, Microsoft VSCode also provides inbuilt support for JavaFX. Thus, you can create any application using JavaFX without any additional plug-ins. To set up the VSCode environment, you need to follow the steps given below.

Step 1 − 转到 Visual Studio Code 网站，然后单击给出的相应下载链接。

Step 1 − Go to the Visual Studio Code website and click the appropriate download link given.

vscode download page

名为 VSCodeUserSetup-x64-1.73.1.exe 的文件将开始下载。下载完成后，运行此文件以开始安装。

A file named VSCodeUserSetup-x64-1.73.1.exe will start downloading. Once the download is done, run this file to start the installation.

Step 2 − 随即会出现一个带有许可协议的新设置窗口。你可以阅读协议，然后单击“我接受”以开始安装。

Step 2 − Then, a new setup window pops up with the license agreement. You can read the agreement and click "I agree" in order to start the installation.

vscode license

Step 3 − 现在要求你执行一些附加任务，例如为 VSCode 创建桌面快捷方式等。勾选你要执行的复选框，然后单击“下一步”。

Step 3 − Now, you are asked to perform few additional tasks, like creating a desktop shortcut for VSCode, etc. Check the boxes that you want to perform and click 'Next'.

vscode additional tasks

Step 4 − Visual Studio Code 现在已准备好进行安装。单击“安装”以开始安装。

Step 4 − Your Visual Studio Code is now ready to be installed. Click 'install' to begin the installation.

vscode install

Step 5 − 此步骤显示安装过程。这可能需要一段时间才能完成。

Step 5 − This step shows the process of installation. This might take a while to finish.

Step 6 − 安装完成后，你可以单击下图中所示的“完成”。

Step 6 − Once your installation is finished, you can click on "Finish" as shown in the image below.

vscode install finish

单击“完成”后，应用程序将立即启动。如果你不希望立即启动它，可以在此步骤中取消选中启动复选框。

The app is launched immediately after you click 'finish'. If you don’t want to launch it just yet, you can uncheck the Launch check box in this step.

Creating JavaFX Project in Visual Studio Code

Visual Studio Code 安装后，你可以按照以下步骤创建 JavaFX 应用程序。

Once your Visual Studio Code is installed, you can create a JavaFX application by following the steps below.

Step 1 − 转到“帮助 → 显示所有命令”

Step 1 − Go to "Help → Show All Commands"

vscode help

Step 2 − 然后，找到“Java: Create Java Project…​”命令并运行它。

Step 2 − Then, find "Java: Create Java Project…​" command and run it.

vscode create java project

Step 3 − 在此步骤中，单击下图所示的“无构建工具”命令，因为我们不会尝试使用 Maven 和 Gradle 等构建工具。

Step 3 − In this step, click on the "No build tools" command as shown in the image below, because we are not trying to use any build tools like Maven and Gradle etc.

vscode no build tools

Step 4 − 现在，输入一个 Java 项目文件夹名称以存储适用于 JavaFX 应用的代码。

Step 4 − Now, input a Java project folder name to store the codes for JavaFX application.

vscode java project

Step 5 − 您必须向您的项目添加 JavaFX 依赖项。只需通过单击“引用的库”旁边的“+”符号，导入 JavaFX SDK 的“lib”文件夹内所有 JAR 文件即可完成此操作。

Step 5 − You must add JavaFX dependencies to your project. This is done by simply importing all the JAR files within the "lib" folder of JavaFX SDK, by clicking on the '+' symbol beside Referenced Libraries.

vscode referenced libraries

Step 6 − 选择 JavaFX SDK 的“lib”目录中存在的所有 .jar 文件。

Step 6 − Select all the .jar files present in the "lib" directory of JavaFX SDK.

vscode jar files

Step 7 − 正如您所见，所有 .jar 文件现已导入“引用的库”。

Step 7 − As you can see, all the .jar files are now imported to Referenced Libraries.

vscode jar files imported

Step 8 − 现在，删除 App.java 库中已存在的 src 文件，以避免运行时错误。

Step 8 − Now, delete the pre-existing App.java file in the src library to avoid runtime errors.

vscode delete appjava

Step 9 − 创建包含要在 src 库下执行的相关代码的文件。作为示例，我们正在创建一个 “hellofx”包，并在其中创建了 “Main.java”、“hellofx.fxml”和 “Controller.java”文件。请参见下面的截图。

Step 9 − Create the files containing relevant code to execute under the src library. As a sample, we are creating a "hellofx" package and created "Main.java", "hellofx.fxml" and "Controller.java" files within it. Look in the screenshot below.

vscode create files

Step 10 − 在“运行和调试”视图中，单击“创建 launch.json 文件”。

Step 10 − In the "Run and Debug" viewlet, click on the "create a launch.json file".

vscode launch json

Step 11 − 创建 launch.json 文件后，将“<Java_lib_path>”更新为系统中的 JavaFX SDK 的“lib”路径，并单击下图中突出显示的绿色按钮。这将运行您的 JavaFX 应用。

Step 11 − Once the launch.json file is created, update the "<Java_lib_path>" to the "lib" path of JavaFX SDK in your system and click the green button highlighted in the image below. This will run your JavaFX application.

vscode run

Step 12 − 一个新窗口弹出，显示您的示例 JavaFX 应用的输出。

Step 12 − A new window pops up displaying the output of your sample JavaFX application.

vscode output

Note − 我们将在后续章节中了解代码。

Note − We will learn about the codes in further chapters.