JavaFX VSCode Starter Guide

JavaFX VSCode Starter Guide ◼ This guide is designed for beginners in Java and JavaFX who want to develop using VSCode. ◼ This guide is based on Java 21 and JavaFX 23. ◼ Contents – 1) Installing the development environment – 2) Creating an app from a template (c)2025 Hidekazu Kubota https://github.com/sosuisen/ 1

• https://github.com/sosuisen/

1) Installing the development environment ◼ Install necessary tools – OpenJDK 21 – Maven • https://maven.apache.org/install.html – Visual Studio Code – Scene Builder • https://gluonhq.com/products/scene-builder/#download ◼ Please ensure that both OpenJDK and Maven are included in your PATH so they can be executed from the command line. 2

• https://maven.apache.org/install.html
• https://gluonhq.com/products/scene-builder/#download

Install Extensions for Java and JavaFX ◼ Install VSCode Extensions for Java and JavaFX ◼ Extension Pack for Java ◼ JavaFX Essentials Pack – It is recommended not to install any JavaFX plugins that are not included in this pack, as their functions may overlap. 3

2) Creating an app from a template ◼ To create a JavaFX project, use a Maven Archetype. ◼ mvn archetype:generate 4

Candidates ◼ Since many candidates will be shown, type jfx-sss-fxml and press the Enter key to narrow the list. ◼ Enter 1 to choose jfx-sss-fxml. 5

Select Archetype Version ◼ Press the Enter key to select the latest version. 6

groupId ◼ The following are the details of your project. ◼ groupId is the reverse domain name notation for your organization. For a small practice app, you can use com.example as groupId. 7

artifactId, version and package ◼ artifactId is the name of your project. ◼ For the version and package, you can simply press the Enter key to select the default value. 8

Confirmation ◼ Press the Enter key. 9

Project Created ◼ A folder with the same name as the artifactId will be created. ◼ Open this folder in VS Code. 10

Launch your app ◼ Select Launcher.java and click Run or Debug to launch your app. The [Run | Debug] menu will appear shortly after the Java extensions finish loading. 11

Result ◼ A blank window appears. 12

Scene Builder ◼ Right-click the main.fxml file and select "Open in Scene Builder" to begin developing with Scene Builder. ◼ This is a graphical UI editor. 13

About archetypes ◼ These archetypes do not utilize Java's module system (JPMS). While many JavaFX samples adopt JPMS, it is likely too complex for beginners looking to create desktop applications with JavaFX. ◼ If you want to explore an architecture similar to MVC, the javafx-sss-fxml-mvc archetype will be a helpful reference. ◼ This is just the starting point. Enjoy your journey with JavaFX! 14