Desktop program learning in Java Development -- fxml layout and control learning

JavaFx project

After creating a new project, our project has three files

  • program entry class, load the interface and display it
  • event handling, bound with fxml
  • Sample.fxml interface

sample.fxml needs to define the corresponding controller through the tag fx:controller

<!-- The outermost layout is used fx:controller Property -->
<FlowPane fx:controller="sample.Controller" ..>

Technical Term

The relationship between stage, scene, container, Layout and controls

Common Container (layout) Container

Container and layout can be unified into one concept

  • Vbox
    Equivalent to vertical LinearLayout
  • Hbox
    It is equivalent to the LinearLayout in the vertical direction
  • FlowPanel
    It is equivalent to LinearLayout. The direction can be defined as horizontal or vertical. Set the horizontal direction. After the first row is full, it will automatically wrap. Set the vertical direction. After the first column is full, it will automatically change to the next column
  • BorderPane
    Top, middle, bottom, left and right parts
  • AnchorPane
    It is equivalent to the constraint layout in Android. For example, let a control be 100px from the right and 100px from the bottom
  • ScrollPane   Sliding layout
  • GridPane   It is usually used in such a layout: the input form of the read-only label on the first column and the input field on the second column, that is, a common user name, followed by an input box

Common Control

The default is native, and the JFX prefix is in Jfoenix


  • label
  • JFXPasswordField   Password box
  • JFXTextField   Single line input box
  • JFXTextArea   Multiline input box


  • JFXButton

Selection box

  • JFXCheckbox
  • JFXRadioButton
  • MenuButton   Drop down selection


  • ImageView

progress bar

  • JFXProcessbar
  • JFXSlider   Horizontal adjustment, similar to the horizontal line when pressing the volume key
  • JFXSpinner   Circle progress bar


  • JFXToggleButton


  • JFXListView


    • MenuBar   It comes with a mouse to change color, just like the menu bar of scene builder
    • Menu
    • MenuItem
    • RadioMenuItem   After clicking, there will be a √ in front. There can be multiple menus in a column, but only one radiomenuitem can be selected. Radiomenuitems are mutually exclusive and need to be divided into the same group using toggleGroup

CheckMenuItem   Multiple choices. You can select multiple menus in a column

    ToggleGroup toggleGroup = new ToggleGroup();

    RadioMenuItem radioItem1 = new RadioMenuItem("Option 1");
    radioItem.setOnAction(new EventHandler<ActionEvent>() {
        @Override public void handle(ActionEvent e) {
            System.out.println("radio toggled");
    RadioMenuItem radioItem2 = new RadioMenuItem("Option 2");
    radioItem.setOnAction(new EventHandler<ActionEvent>() {
        @Override public void handle(ActionEvent e) {
            System.out.println("radio toggled");
  • SeparatorMenuItem   Split line
    **It can only be used after being added to the MenuBar**
  • SpiltMenuButton   There is a button on the left and a drop-down arrow on the right. Click the left to realize the button operation. Click the right to select an item in the list that appears to change the button on the left

Generate fxml layout using SceneBuilder

Because there are few existing tools, only one interface tool, so we don't have to study the fxml code.

Let's get started with a user login interface and use scene builder to make the following layout


  This is the general framework of the interface I made. Of course, it can be different. There are many ways to implement it


  The controls in the main interface are displayed in the center, which is equivalent to the gravity property of Android layout, and sets the display of sub layout or controls


  Set prompt text in the input box and display it in the center


  Input box spacing



The spacing between the two buttons below is the same as above. Just set the right margin of the registration Button on the left

Get control instance and control event handling

Here, we set the id of the control we need to find the instance through the id, so as to call the set method of the instance object to set the content or get the content

For event processing, we only need to define a method name, and then go to the file to implement the relevant logic


  Previously, we used the attribute fx:controller has bound sample.fxml with controller. We can directly let SceneBuilder generate controller code




  Click login to prompt a dialog box
Encapsulate JFXDialog code, one line of code can be used

//here, Jfoenix The development team did not consider that the dialog box was created after clicking, demo Directly in It's written in the file
//I am issue A foreign developer was found there, directly in controller Inside, the create dialog box is displayed
//I tossed a little, ready to think about it Android In that way, the dialog box can be generated by one line of code. Here, it's OK to use the code of foreign developers for the time being
//If used, if Stage If the width of the dialog box is not long, the dialog box will not be displayed completely Set it in
final JFXAlert<String> alert = new JFXAlert<>((Stage) tfPassword.getScene().getWindow());

// Create the content of the JFXAlert with JFXDialogLayout
JFXDialogLayout layout = new JFXDialogLayout();
layout.setHeading(new Label("Enter Username"));
layout.setBody(new VBox(new Label("Please enter the username of the person you would like to add.")));

// Buttons get added into the actions section of the layout.
JFXButton addButton = new JFXButton("ADD");
addButton.setOnAction(new EventHandler<ActionEvent>() {
    public void handle(ActionEvent addEvent) {
        // When the button is clicked, we set the result accordingly

JFXButton cancelButton = new JFXButton("CANCEL");
cancelButton.setOnAction(new EventHandler<ActionEvent>() {
    public void handle(ActionEvent closeEvent) {

layout.setActions(addButton, cancelButton);




Tags: Java

Posted on Fri, 03 Dec 2021 04:54:33 -0500 by xsaero00