JavaFx TabPane 每个选项卡一个视图，但数据不同

Question

我是 TabPane 的新手，直到现在才真正与他们合作过，我需要一个 TabPane 有很多 Tab 但视图相同（外观相同）对于每个 Tab，改变的只是选项卡中的数据。

我已阅读JavaFX TabPane - One controller for each tab 但这不是我想要的，为每个选项卡分配一个控制器。我不想重复我的代码，所以我需要初始化包含我的视图的 .fxml 一次，并在每次在选项卡之间切换并向其加载适当的数据时重复使用它。

如何实现？

我的解决方案是：

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.Tab?>
<AnchorPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="tabpane.Controller">
    <TabPane>
        <Tab>
            <fx:include source="CommonUI.fxml" fx:id="first"/>
        </Tab>
        <Tab>
            <fx:include source="CommonUI.fxml" fx:id="second"/>
        </Tab>
        <Tab>
            <fx:include source="CommonUI.fxml" fx:id="third"/>
        </Tab>
        <Tab>
            <fx:include source="CommonUI.fxml" fx:id="forth"/>
        </Tab>
        <Tab>
            <fx:include source="CommonUI.fxml" fx:id="fifth"/>
        </Tab>
    </TabPane>
</AnchorPane>


public class Controller implements Initializable {

    MyService setrvice = MyServiceProvider.getService(MyService.class);

    @FXML
    private CommonUIController firstController;
    @FXML
    private CommonUIController secondController;
    @FXML
    private CommonUIController thirdController;
    @FXML
    private CommonUIController forthController;
    @FXML
    private CommonUIController fifthController;



    @Override
    public void initialize(URL location, ResourceBundle resources) {
      // some code.
    }

    private void load() {
        firstController.load(service.firstData());
        secondController.load(service.secondData());
        thirdController.load(service.thirdData());
        forthController.load(service.forthData());
        fifthController.load(service.fifthData());
    }
}

Answer 1

创建控制器实例并获取视图组件。然后在选项卡更改时替换视图并更新数据。

//pseudoCode
Node controllerView  = controller.getView();

TabPane tabPane = new TabPane();
tabPane.getSelectionModel().selectedItemProperty().addListener((observable, oldTab, tab) -> {
    if(oldTab != null) {
        oldTab.setContent(null);
    }
    if(tab != null) {
        tab.setContent(controllerView);
        //pseudoCode
        controller.updateData();
    }
});

JavaFx TabPane 每个选项卡一个视图，但数据不同

JavaFx TabPane One view for each tab but different data

javafx

tabs

javafx-8

fxml