JavaFX 8 下簡化自定義控件的外部調用以及流式佈局示例

時間 2019-12-04

原文原文鏈接

「博客搬家」 原地址: 簡書原發表時間: 2017-05-21html

有一個項目，須要模擬數千臺設備的工做狀況，這數千個設備分爲若干組，每組 100 臺。故須要設計一款 GUI 程序，包含 100 個自定義控件，模擬一組設備的工做狀況，經過 ListView 對設備組進行選擇，便可成功模擬數千臺設備。java

因爲 Java 擁有豐富的第三方庫，便於項目的底層實現，故基於最新的 Java GUI 框架「JavaFX 8」實現該 GUI 界面，該應用程序需使用 100 個相同的自定義控件，故須要使用流面板 (FlowPane) 對這些自定義控件進行有效佈局。api

最終實現效果以下圖所示：oracle

FlowPane 佈局面板中包含的自定義控件會在水平方向上按行連續地平鋪放置，而且會在邊界處自動換行，點擊左側 ListView 中的 Item，右側的自定義控件組會顯示選定設備組的狀態信息。綜上，該設計可實現預約目標。框架

1. Java FX 8 基本說明

可使用這篇「JavaFX 8 教程」做爲 JavaFX 8 的入門使用，擁有 GUI 設計經驗的開發人員都可快速入門 Java FX 8，ide

1.1 界面生成方式

Java FX 8 與大多數現代 GUI 開發相同，用戶界面有兩種建立方式：佈局

XML文件定義
java代碼建立

本文爲了更加清晰直觀，採用兩種界面佈局方法相結合的方式。網站

1.2 問題說明

因爲 Java FX 8 並不主流，遇到問題很難在中文網站上找到解決方法，故有許多坑須要填補，因此本文遇到一些坑時不進行說明，而是在另外一篇文章中列出了這些坑的填補方法。ui

2. 界面根佈局的設計

使用「Scene Builder」打開 FXML 佈局文件，在如圖所示左下角，填入一個自定義 Class 做爲控制器類，激活須要操做的控件，在右側「fx:id」處填入 Class 的 Field，下方填入事件處理方法，以後經過 View -> Show Sample Controller skeleton 可查看填入 Controller 中的代碼示例。this

在程序的入口類中填入以下代碼：

public class Main extends Application {

    //入口方法已隱式實現，故可刪除
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {

        primaryStage.setTitle("bitkyApp");
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("sample.fxml"));
        AnchorPane anchorPane = fxmlLoader.load();           //返回類型設置爲佈局文件根節點類型
        Controller controller = fxmlLoader.getController();  //可獲取該佈局的 Controller 類

        BorderPane rootLayout = FXMLLoader.load(getClass().getResource("rootLayout.fxml"));
        rootLayout.setCenter(anchorPane);
        primaryStage.setScene(new Scene(rootLayout, 800, 650));
        primaryStage.show();
    }
}
複製代碼

該方法爲教程中的方法，爲了實現 Controller 和外部的交互，將 FXML 佈局文件和 Controller 均耦合在了外部類中，顯得較爲繁瑣。故可採用自定義控件的方式簡化外部的代碼調用。

3. 自定義控件的設計

JavaFX 2 版本以後，FXML 提供 fx:root/ 寫法，此時要求 Controller 必須繼承自 FXML 節點對象，使用 FXMLLoader 加載時，必須調用 setRoot() 方法。

不要在 FXML 中指定 Controller，一般狀況下一個 FXML 能夠對應多個 Controller，爲了靈活性，咱們應當在 FXMLLoader 中指定 Controller。

根據具體實踐，能夠採用以下方式：

Scene Builder 左下角的 Controller 面板中，勾選使用 fx:root 構造，而且不該該填入 Controller 類，如圖，此時 fx:root/ 做爲根節點，：

此時在 FXML 文件中的代碼例如：

<fx:root xmlns:fx="http://javafx.com/fxml/1"
         type="TabPane"
         xmlns="http://javafx.com/javafx/8.0.111">
    
......

</fx:root>
複製代碼

此時，Controller 類繼承根節點的類型，例如「TabPane」。可選實現「Initializable」接口進行控件生成以後的初始化操做，代碼示例以下：

//Controller 類繼承 FXML 佈局文件的根節點類型「TabPane」
public class DeviceView extends TabPane implements Initializable {

    public DeviceView() {
        loadFxml();
    }

    private void loadFxml() {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("device_view.fxml"));
        loader.setRoot(this);
        loader.setController(this);
        try {
            loader.load();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    //該方法在構造方法執行完畢後執行
    @Override
    public void initialize(URL location, ResourceBundle resources) {
    }
}
複製代碼

此時，在主佈局對應的 Controller 中，直接生成該類「DeviceView」的對象做爲自定義控件，經過 FlowPane 控件的引用添加該對象爲 FlowPane 的子控件，便可實現設計目的，具體代碼以下：

for (int i = 1; i <= 100; i++) {

    //在 FlowPane 中添加自定義控件「DeviceView」
    DeviceView deviceView = new DeviceView(i);
    deviceFlowPane.getChildren().add(deviceView);
	
	//使用觀察者模式添加子控件「DeviceView」的監聽器
    deviceView.setListener((status -> {
        if (listener != null) listener.btnChanged(status);
    }));
}
複製代碼

4. 使用自定義控件的方式簡化主界面的外部調用代碼

綜上所述，最終實現的主界面代碼示例以下：

public class MainView extends BorderPane implements Initializable {

    private static MainView mainView;

    private MainView() throws IOException {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("rootLayout.fxml"));
        loader.setRoot(this);
        loader.setController(this);
        loader.load();
    }

    public static MainView getInstance() {
        if (mainView == null) {
            try {
                mainView = new MainView();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return mainView;
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
    }
}
  
複製代碼

此段代碼使用了自定義控件的方式，而且使用了單例模式中的懶漢式方便外部調用，外部調用代碼以下：

public class MainLauncher extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
           startApp(primaryStage);
    }

    private void startApp(Stage primaryStage) {
        primaryStage.setTitle("設備模擬客戶端");
        primaryStage.setScene(new Scene(MainView.getInstance()));
        primaryStage.setMaximized(true);
        primaryStage.show();
    }
}


複製代碼