摘要：故可采用自定義控件的方式簡化外部的代碼調用。自定義控件的設計版本之后，提供寫法，此時要求必須繼承自節點對象，使用加載時，必須調用方法。

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

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

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

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

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

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

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

XML文件定義

java代碼創建

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

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

使用「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 均耦合在了外部類中，顯得較為繁瑣。故可采用自定義控件的方式簡化外部的代碼調用。

JavaFX 2 版本之后，FXML 提供  寫法，此時要求 Controller 必須繼承自 FXML 節點對象，使用 FXMLLoader 加載時，必須調用 setRoot() 方法。
不要在 FXML 中指定 Controller，通常情況下一個 FXML 可以對應多個 Controller，為了靈活性，我們應當在 FXMLLoader 中指定 Controller。

根據具體實踐，可以采用如下方式：

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

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

    
......

此時，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);
    }));
}

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

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

使用內置的布局面板

JavaFX 8 教程「中文」

JavaFX 8 API Document

Gluon Scene Builder

JavaFX 創建自定義控件