JavaFX Scene Builder Usage Basics (i)

How do you use scene Builder to write a program together? Let's discuss it here.

(i) Basic preparatory work

I am using NetBeans with JavaFX Scene Builder.

What we need to do with NetBeans is the following steps: File-to-new project-->javafx-->javafx Fxml application, and then click Next,

After establishing the project document, we can see that there are three documents under the project, one of them. Fxml file, two. java files,

Where Fxmldocument.fxml is the user interface, we can write it through JavaFX Scene Builder, Fxmldocumentcontroller.java is a controller for the user interface through which we can control the controls defined by the Fxml file through Java code. (In NetBeans, if we have a fxml file, you can directly generate a Java Fxml controller by right-clicking the control on the build controller), and Javafxapplication11.java can display the interface.

(ii) A little knowledge that needs to be known

(1) Key of interface display

In our pure Java code, we put the scene in the stage and then show it, and here we have the same principle. In Javafxapplication11.java, we have this line of code:

Parent root = Fxmlloader.load (GetClass (). GetResource ("Fxmldocument.fxml"));

This is our key, we load the hierarchical object from the resource file Fxmldocument.fxml with the Fxmlloader.load () method and assign the value to the variable named root. We then put the root node in the scene so that our user interface can be implemented.

(2) interface control, the key to respond to interaction

For fxml files, we can open JavaFX Scene Builder to design our interface, set up Fx:id, triggers, controllers, save in NetBeans project, and right-click the Fxml file in NetBeans. Refactoring or build controller (we'll talk about it in detail below)

(iii) JavaFX Scene Builder Basic Introduction

First, let's take a look at its basic interface:

Then, on the left you can see the JavaFX control list and UI layer structure, the middle is the visual area, the design time to drag the control from the control list to the visual area, the right is the control's properties, you need to pay attention to the property bar includes properties (properties), Layout, Code ( Code) altogether three parts, wherein the property mainly controls the control itself's size, the alignment, the CSS style add, etc., the layout mainly controls the control in the panel alignment, the position and so on some properties, but the code part is also the relatively key part, below we will specify.

(iv) One of the most critical steps when using Scene Builder

We can show the page through the design of the interface and then through the above knowledge, but because we use Scene Builder to write the Fxml file with the ultimate purpose of working with Java code, then how does Java invoke the controls in the Fxml file? The key here is the code part mentioned above, first look at what it looks like:

We name the fx:id part of the control, and when we build the controller in NetBeans we generate the corresponding variable so that we can control the controls on the interface in the controller, and in the following part, the trigger part, we also name it, The corresponding function of the trigger will appear in the generated trigger, and we can also write the corresponding action.

Other than that

On the left side of the entire interface, we need to name the controller class to specify the controllers for the Fxml file.

Through the above, we believe we can basically operate on NetBeans and JavaFX Scene Builder, and display the Fxml interface and control it. Our next section will be a demonstration of a concrete example.

JavaFX Scene Builder Usage Basics (i)