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

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

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

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

最終實(shí)現(xiàn)效果如下圖所示：

FlowPane 布局面板中包含的自定義控件會在水平方向上按行連續(xù)地平鋪放置，并且會在邊界處自動換行，點(diǎn)擊左側(cè) ListView 中的 Item，右側(cè)的自定義控件組會顯示選定設(shè)備組的狀態(tài)信息。綜上，該設(shè)計可實(shí)現(xiàn)預(yù)定目標(biāo)。

可以使用這篇「JavaFX 8 教程」作為 JavaFX 8 的入門使用，擁有 GUI 設(shè)計經(jīng)驗(yàn)的開發(fā)人員均可快速入門 Java FX 8，

Java FX 8 與大多數(shù)現(xiàn)代 GUI 開發(fā)相同，用戶界面有兩種創(chuàng)建方式：

XML文件定義

java代碼創(chuàng)建

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

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

使用「Scene Builder」打開 FXML 布局文件，在如圖所示左下角，填入一個自定義 Class 作為控制器類，激活需要操作的控件，在右側(cè)「fx:id」處填入 Class 的 Field，下方填入事件處理方法，之后通過 View -> Show Sample Controller skeleton 可查看填入 Controller 中的代碼示例。

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

public class Main extends Application {

    //入口方法已隱式實(shí)現(xiàn)，故可刪除
    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();           //返回類型設(shè)置為布局文件根節(jié)點(diǎn)類型
        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();
    }
}

該方法為教程中的方法，為了實(shí)現(xiàn) Controller 和外部的交互，將 FXML 布局文件和 Controller 均耦合在了外部類中，顯得較為繁瑣。故可采用自定義控件的方式簡化外部的代碼調(diào)用。

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

根據(jù)具體實(shí)踐，可以采用如下方式：

Scene Builder 左下角的 Controller 面板中，勾選使用 fx:root 構(gòu)造，并且不應(yīng)該填入 Controller 類，如圖，此時 作為根節(jié)點(diǎn)，：

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

    
......

此時，Controller 類繼承根節(jié)點(diǎn)的類型，例如「TabPane」。可選實(shí)現(xiàn)「Initializable」接口進(jìn)行控件生成之后的初始化操作，代碼示例如下：

//Controller 類繼承 FXML 布局文件的根節(jié)點(diǎn)類型「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();
        }
    }

    //該方法在構(gòu)造方法執(zhí)行完畢后執(zhí)行
    @Override
    public void initialize(URL location, ResourceBundle resources) {
    }
}

此時，在主布局對應(yīng)的 Controller 中，直接生成該類「DeviceView」的對象作為自定義控件，通過 FlowPane 控件的引用添加該對象為 FlowPane 的子控件，即可實(shí)現(xiàn)設(shè)計目的，具體代碼如下：

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

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

綜上所述，最終實(shí)現(xiàn)的主界面代碼示例如下：

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) {
    }
}
  

此段代碼使用了自定義控件的方式，并且使用了單例模式中的懶漢式方便外部調(diào)用，外部調(diào)用代碼如下：

public class MainLauncher extends Application {

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

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

使用內(nèi)置的布局面板

JavaFX 8 教程「中文」

JavaFX 8 API Document

Gluon Scene Builder

JavaFX 創(chuàng)建自定義控件