JavaFX 8 下简化自定义控件的外部调用以及流式布局示例

有一个项目，需要模拟数千台设备的工作情况，这数千个设备分为若干组，每组 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 中的代码示例。

Scene Builder

在程序的入口类中填入如下代码：

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 提供 写法，此时要求 Controller 必须继承自 FXML 节点对象，使用 FXMLLoader 加载时，必须调用 setRoot() 方法。

不要在 FXML 中指定 Controller，通常情况下一个 FXML 可以对应多个 Controller，为了灵活性，我们应当在 FXMLLoader 中指定 Controller。

根据具体实践，可以采用如下方式：

Scene Builder 左下角的 Controller 面板中，勾选使用 fx:root 构造，并且不应该填入 Controller 类，如图，此时 作为根节点，：

实现自定义控件的 Scene Builder 相关设置

此时在 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);
    }));
}

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 创建自定义控件