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

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

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

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

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

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

1. Java FX 8 基本說明

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

1.1 界面生成方式

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

• XML文件定義
• java代碼建立

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

1.2 問題說明

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

2. 界面根佈局的設計

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

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

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();
    }
}

5. 參考資料

1. 使用內置的佈局面板
2. JavaFX 8 教程「中文」
3. JavaFX 8 API Document
4. Gluon Scene Builder
5. JavaFX 建立自定義控件