JavaFX - function implementation (updated from time to time)

Feature 1: The "loading" panel

There are two ways to achieve the loading effect: one is to achieve the effect through the stage , and the effect of this method is not very ideal: 1. The stage is global. In the APPLICATION_MODAL mode, all operations on the original interface are invalid; 2. In the In non-APPLICATION_MODAL mode, drag the original interface and you will find that there are actually two windows. The second is to use StackPane to add a loading panel when performing time-consuming operations, and remove it after the operation is over. The advantage is that it can perform global and local effects , and only restricts the operation of local components, without affecting the user's operation of other components.

<!-- ui目录中的loading.fxml -->
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<BorderPane id="AnchorPane" prefHeight="300.0" prefWidth="300.0" style="-fx-background-color: rgba(0,0,0,0.7); -fx-opacity: 0.5; -fx-fill: #409eff;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <center>
      <GridPane alignment="CENTER" prefHeight="120.0" prefWidth="120.0" BorderPane.alignment="CENTER">
        <columnConstraints>
            <ColumnConstraints fillWidth="false" hgrow="SOMETIMES" maxWidth="67.0" minWidth="120.0" prefWidth="90.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints maxHeight="70.0" minHeight="10.0" prefHeight="70.0" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="70.0" minHeight="10.0" prefHeight="70.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <ImageView fitHeight="60.0" fitWidth="60.0" pickOnBounds="true" preserveRatio="true" GridPane.halignment="CENTER">
               <image>
                  <Image url="@img/load.gif" />
               </image>
               <GridPane.margin>
                  <Insets bottom="2.0" />
               </GridPane.margin>
            </ImageView>
            <Label alignment="CENTER" prefHeight="25.0" prefWidth="120.0" style="-fx-fill: #409eff;" text="载入中。。。" textAlignment="CENTER" textFill="#009eff" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP">
               <font>
                  <Font size="20.0" />
               </font>
               <GridPane.margin>
                  <Insets top="2.0" />
               </GridPane.margin>
            </Label>
         </children>
      </GridPane>
   </center>
</BorderPane>

The code implementation of the calling panel:

public static void loadPane(javafx.scene.layout.StackPane stackPane) {
    try {    // 添加loading面板到容器组件，自动居中
        stackPane.getChildren().add(javafx.fxml.FXMLLoader.load(PopupFrame.class.getResource("ui/loading.fxml")));
    } catch (Exception e) {
        e.printStackTrace();
    }
}

// stackPane.getChildren().remove(1);    // 移除loading面板，返回到原界面

Function 2: Preview image or customize pop-up panel (window)

The effect is similar to the pop-up window in the lower part of the coding software, which will disappear automatically when you click elsewhere.  It is realized through Popup  in JavaFX (there is basically no information about its use ~ I want to cry). The following is before and after clicking the "News" button, when the user clicks anywhere outside the Popup, it will automatically disappear.

                       ​​​​​​​        ​​​​​​​

 Dear friends, just design  preview.fxml according to your own needs.

/** 弹出式窗口
 * @param owner 主界面
 * @param caller 使触发按钮恢复原状态
 * @param y 显示的位置
 */
public static void preview(javafx.stage.Stage owner, javafx.scene.control.ToggleButton caller, double y) {
    try {
        javafx.stage.Popup popup = new javafx.stage.Popup();
        javafx.scene.layout.BorderPane bp = javafx.fxml.FXMLLoader.load(PopupFrame.class.getResource("ui/preview.fxml"));
        popup.getContent().add(bp);
        // 显示的尺寸
        bp.setMinSize(owner.getWidth()-6, 250);
        bp.setMaxHeight(250);
        // 显示的位置坐标
        popup.show(owner, owner.getX()+2, y-212);
        popup.setAutoHide(true);
        popup.setConsumeAutoHidingEvents(true); // 调用完隐藏事件后，就消耗掉事件，不再往里面的组件传递
        popup.setOnHiding((event) -> {
            caller.setSelected(false);
        });
    } catch (IOException e) {
        e.printStackTrace();
    }
}