[Java] Sample to create GUI application with JavaFX + IntelliJ + Scene Builder

3 minute read

Introduction

I wanted to make a GUI application. There are various libraries and frameworks for creating GUI applications, but I personally wish I could make it in Java, which I am most good at, so I tried to build an environment for development using JavaFX. ~~ I was satisfied just by making a sample! ~~

Please note that the bottom line is the fucking article that throws in other articles. However, I think there are various ways to write the same thing as the other articles, so I wonder if it can be helped (excuse).

The source is here. https://github.com/dhirabayashi/javafx_sample

Super appropriate term explanation

JavaFX

  • A library that allows you to create nice GUI applications in Java
  • Originally it was a RIA library, but RIA has become an Owakon Now it is a normal GUI library
  • Now it’s no longer bundled with the JDK, so you need to install OpenJFX separately (though Gradle does it nicely).

IntelliJ (IntelliJ IDEA)

  • IDE compatible with Java
  • I think it’s more popular than Eclipse now
  • There is a paid Ultimate and a free Community version
  • Community version is used in this sample

Scene Builder

  • A tool that facilitates development with JavaFX
  • GUI based development such as placing components by drag & drop

Environment

  • macOS Catalina 10.15.6
  • AdoptOpenJDK 14.0.1

Environment construction procedure

The JDK and IntelliJ are already installed.

Create a JavaFX project with IntelliJ

You may want to refer to the article below. It is easy to understand because it covers everything from project creation to sample code creation and execution. JavaFX application development with IntelliJ IDEA and Gradle -From environment construction to sample code-

However, it didn’t work for some reason in my environment, so I changed the source a bit. Class#getResource() → ClassLoader#getResource()

MainApp.java


package com.github.dhirabayashi.javafx;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.util.Objects;

public class MainApp extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        var cl = getClass().getClassLoader();
        Parent root = FXMLLoader.load(Objects.requireNonNull(cl.getResource("scene.fxml")));

        Scene scene = new Scene(root);
        scene.getStylesheets().add(Objects.requireNonNull(cl.getResource("styles.css")).toExternalForm());

        stage.setTitle("JavaFX sample");
        stage.setScene(scene);
        stage.show();
    }
}

Cooperation of Scene Builder and IntelliJ

Although it is possible to develop with just the above steps, I think that it is easier to introduce Scene Builder and develop with GUI rather than developing all with code base, so I will show the procedure. (After all it is a round throw)

There is IntelliJ official help on this, so it’s good to see it. Configure JavaFX Scene Builder

All you have to do is install Scene Builder separately and set its path in IntelliJ. If you do not use Japanese, the menu name will be different, but if you open Preferences and search for “JavaFX”, it will appear.

JavaFX develops a GUI by editing the fxml file, but it is an image that if you use Scene Builder, the contents of that fxml will be rewritten in a nice way. To open the Scene Builder, select the fxml file and select “Open in Scene Builder” from the right-click menu. [^scenebuilder] [^scenebuilder]: Double click to open the fxml file and select “Scene Builder” in the tab at the bottom left, but in that procedure it seems that the preview and controller skeleton code generation function cannot be used. , It is recommended to start from the right click.

Screenshot 2020-08-30 11.28.22.png

This article was easy to understand how to use Scene Builder. Although it is an example of Eclipse, the operation after opening Scene Builder does not change. Basic usage of Scene Biulder

in conclusion

It was a shit article as we had previously noticed, but I’m glad I had a JavaFX development environment for now.