JavaFX - FXML in Tab

Question

I try to display my "main.fxml" file into TapPane which connect with my other .fxml file. But unfortunately throw exception. What is wrong?

---

It is controller of tabs.fxml :

Tabs class

package View;

import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class Tabs implements Initializable {

    @FXML
    TabPane tabPane = null;

    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        try {
            tabPane.getTabs().addAll((Tab) FXMLLoader.load(this.getClass().getResource("main.fxml")));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

---

tabs.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<AnchorPane
    maxHeight="-Infinity"
    maxWidth="-Infinity"
    minHeight="-Infinity"
    minWidth="-Infinity"
    prefHeight="400.0"
    prefWidth="600.0"
    xmlns="http://javafx.com/javafx/8"
    xmlns:fx="http://javafx.com/fxml/1"
    fx:controller="View.Tabs">
   <children>
      <TabPane
        fx:id="tabPane"
        prefHeight="400.0"
        prefWidth="600.0"
        tabClosingPolicy="UNAVAILABLE">
        <tabs>
          <Tab text="Untitled Tab 1" >
            <content>

            </content>
          </Tab>
        </tabs>
      </TabPane>
   </children>
</AnchorPane>

It is main.fxml . It contain a form and a button. I try to display this form in my " tab.fxml " through Tab class

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane
    id="main"
    maxHeight="-Infinity"
    maxWidth="-Infinity"
    minHeight="-Infinity"
    minWidth="-Infinity"
    prefHeight="400.0"
    prefWidth="600.0"
    xmlns="http://javafx.com/javafx/8"
    xmlns:fx="http://javafx.com/fxml/1"
    fx:controller="View.Chat">
   <children>
  <AnchorPane
        minHeight="0.0"
        minWidth="0.0"
        prefHeight="180.0"
        prefWidth="200.0" />
      <TextArea
        fx:id="text"
        layoutX="14.0"
        layoutY="317.0"
        prefHeight="69.0"
        prefWidth="435.0" />
      <TextArea
        fx:id="chatField"
        editable="false"
        layoutX="14.0"
        layoutY="14.0"
        prefHeight="289.0"
        prefWidth="435.0" />
      <Button
        fx:id="send"
        layoutX="486.0"
        layoutY="334.0"
        mnemonicParsing="false"
        onAction="#sendMessage"
        prefHeight="30.0
        prefWidth="66.0"
        text="Send" />
   </children>
</AnchorPane>

But throw the exception:

javafx.scene.layout.AnchorPane cannot be cast to javafx.scene.control.Tab /E:/JavaFXTest/out/production/JavaFXTest/View/tabs.fxml at View.Tabs.initialize(Tabs.java:21) at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2193) at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2069) at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2830) at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2809) at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2795)

Answer 1

The error message tells you the problem:

javafx.scene.layout.AnchorPane cannot be cast to javafx.scene.control.Tab

The root element of your tab.fxml file is an AnchorPane , but you are trying to treat it as a Tab :

(Tab) FXMLLoader.load(this.getClass().getResource("main.fxml"))

You can either change the FXML file so the root element is a tab:

<Tab xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="View.Chat">

<AnchorPane> id="main" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" >
   <children>
  <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
      <TextArea fx:id="text" layoutX="14.0" layoutY="317.0" prefHeight="69.0" prefWidth="435.0" />
      <TextArea fx:id="chatField" editable="false" layoutX="14.0" layoutY="14.0" prefHeight="289.0" prefWidth="435.0" />
      <Button fx:id="send" layoutX="486.0" layoutY="334.0" mnemonicParsing="false" onAction="#sendMessage" prefHeight="30.0" prefWidth="66.0" text="Send" />
   </children>
</AnchorPane>
</Tab>

or

you can create the Tab in Java code in the controller:

@Override
public void initialize(URL url, ResourceBundle resourceBundle) {
    try {
        Tab tab = new Tab();
        tabPane.getTabs().add(tab);
        tab.setContent((Node) FXMLLoader.load(this.getClass().getResource("main.fxml")));
    } catch (IOException e) {
        e.printStackTrace();
    }
}