The use of Scene Builder of JavaFX (developing a GUI gadget is so simple)

---

Blogger's Personal Community: Development and Algorithm Learning Community

Blogger Profile: Killing Vibe's Blog

Everyone is welcome to join and exchange and learn together~~

I. Introduction

First of all, let me declare that the strength of Java is not in the GUI. Now it is the world of the web. The blogger posted this article only for personal interest. If you are learning Java development and want to make GUI gadgets in your spare time, you can choose to use JavaFX. If you need to develop enterprise-level applications, it is recommended to use qt or wpf, and Electron is also a good choice.

Two, JavaFX and Scene Builder download

Since the release of JDK11, JavaFX has not been included in the JDK. For your convenience, you can use JDK8 directly.

The download address is as follows:

JavaFX Chinese official website

Can't front end? It doesn't matter.

As a Java drag-and-drop page design and coding tool, Scene Builder has powerful drag-and-drop design capabilities. For some beginners and situations that require quick response to page coding, the effect of this tool is absolutely satisfactory.

The official has detailed documents for your reference. This article only introduces the simple use of Scene Builder to help you quickly develop a desktop application with Java.

3. Use of Scene Builder

1. After downloading, open it and select Basic Application, which is helpful for understanding

2. After opening, it should be this interface

The one in the middle is the UI interface of the desktop program we want to design. On the left, there are some controls of JavaFX in the Library, such as buttons, which can be directly dragged to the middle, which is very convenient. We can design our own interface according to our own interface requirements, and finally only need to click save to generate the fxml file.

4. Detailed teaching (example)

4.1 Environment configuration

1. It is recommended to use Intellij-idea. The first step is to build a project (normally, a Maven project must be built)

2. Click File—>Click settings—>Languages&Frameworks—>JavaFX

Fill in the downloaded SceneBuilder.exe file in Path to SceneBuilder.

4.2 Create fxml file and Controller class file

What is an fxml file?

FXML is a file that represents JavaFX interface objects in XML format. Each element in the FXML file can be mapped to a class in JavaFX, and the attributes of each FXML element or its sub-elements can be mapped to the corresponding JavaFXML class. Attributes.

To put it bluntly, it is the file that controls this interface, which can be understood as the code representation of the interface~~

Why do you need a Controller class file?

It is used to bind this fxml file, to control some operations of this interface, and to realize some functions~~

1. After figuring it out, we now create two files in the project, as follows:

Create a fxml file:

Create a Controller class file:

Then modify fx：controllerthe properties inside this

2. Then right click on this test.fxml, click Open In SceneBuilder

3. Then the following interface will pop up, which is the SceneBuilder just introduced

4.3 Custom interface

Let’s make a chestnut at will:

1. Just pull a button control to the white area

2. Then you can change the style, appearance, etc. of this button in the properties attribute bar on the right, for example, I just changed hehe here.

3. There is also a code bar below, where you can set the id of the button, click events, etc. For example, I also changed it to hehe here, and you can also change it to xxxbutton, which is convenient for development

4. Click the preview button above to preview the interface we currently set

5. Click view and select Show Sample Controller Skeleton to directly display the code skeleton of the Controller class, which is very convenient! !

6. At this point, just copy this code to the TestController class we created earlier.

7. Don’t forget to click save, click File, then click save, and then the fxml file we created before will automatically fill in the code~~ Isn’t it very convenient

8. The original fxml file has added the button tag and the corresponding attributes

4.4 Running our program

After the above two files are completed, we only need to create an entry class to run our program.

First create a Main class , and then copy the following code into it (as for why, you can leave it alone, if you don’t understand, you can privately message the blogger, and the principle will be briefly explained later in the article)

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

import java.util.Objects;

/**
 * @author Dianzhi Han
 * @version 1.0
 * @description: TODO
 * @date 2022/11/18 12:45
 */

public class Main extends Application {
    
    

    @Override
    public void start(Stage primaryStage) throws Exception{
    
    
        Parent root = FXMLLoader.load(Objects.requireNonNull(getClass().getClassLoader().getResource("test.fxml")));
        primaryStage.setTitle("test");
        primaryStage.setScene(new Scene(root, 1300, 1000));
        primaryStage.show();
    }
    public static void main(String[] args) {
    
    
        launch(args);
    }
}

Then click run~~

You can modify the functions you can achieve by clicking the button in the click method according to your own functional requirements~

5. Expansion

• The Controller class we created before usually needs to implement the Initializable interface and rewrite the initialize method inside. It is used to initialize some things such as database data tables when the interface is initialized
• The order of executing the program is init() -> start() -> stop(). Our entry class Main inherits the Application abstract class and rewrites its start() method, while the Controller class can rewrite init( ) method to do some initialization related work.

Take the button example above to explain what the attributes in the label are for~

• fx:idRefers to the id value of this control, in order to control this control in the Controller class
• onActionRefers to what function can be achieved by clicking this button
• textrefers to the text of the button
• The rest are the ones that control the size of the buttons

Summarize

The above is the introductory tutorial of JavaFX and the use of SceneBuilder that the blogger has worked hard and purely by hand. If you guys don’t understand anything, you can directly message the blogger. If it is helpful, please like + bookmark and follow. You have to support the blogger The biggest power to update~