Search code examples
javauser-interfacejavafxfxml

Java FX-FXML: Binding an fxml width to a different fxml width

I have an TabPane FXML file, and when you press a button, it adds a new tab which gets it's content from a different fxml file. How do I bind the width of the tab to the width of the tab pane?

@FXML
private void makeNewTab(ActionEvent event) {

    int totalTabs = selectTab.getTabs().size() - 1; // this is the TabPane

    Tab newTab = new Tab();
    newTab.setText("New tab" + totalTabs);
    newTab.setClosable(false);

    try{
    newTab.setContent(FXMLLoader.load(getClass().getResource("CoreScenes/NewTabSceneFXML.fxml")));
    }
    catch(IOException e){
    System.out.println("Failed to Load 'NewTabSceneFXML.fxml'. Unknown Error.");
    }


    selectTab.getTabs().add(newTab);
}

This as it is adds the tab fine, but it doesn't fit it to the width, which is what I need.

Edit 1:

Here is an example from scratch, it might be because i'm using scene building, but I don't know. Setting the size of everything to computed size isn't what I need. What I need is to find out how to bind a sub-fxml file's node to it's parent fxml file's node. So when I resize the screen everything gets resized, but it doesn't seem possible in Scene Builder.

Does not bind, the stage is too small

When I expand the screen, more of the subtab is revealed

Primary FXML:

<TabPane fx:id="mainTab" prefHeight="453.0" prefWidth="499.0" tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1"  fx:controller="testtabs.FXMLDocumentController">
   <tabs>
      <Tab fx:id="ranTab" text="Untitled Tab 1">
         <content>
            <Button fx:id="button" mnemonicParsing="false" onAction="#handleButtonAction" prefHeight="100.0" prefWidth="115.0" text="Button" />
         </content>
      </Tab>
   </tabs>
</TabPane>

Secondary FXML:

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="testtabs.FXMLTab2Controller">
   <children>
      <TabPane prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE">
        <tabs>
          <Tab text="Untitled Tab 1">
               <content>
                  <HBox prefHeight="100.0" prefWidth="200.0">
                     <children>
                        <SplitPane prefHeight="200.0" prefWidth="200.0" />
                        <ScrollPane prefHeight="200.0" prefWidth="200.0">
                          <content>
                            <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="200.0" prefWidth="200.0" />
                          </content>
                        </ScrollPane>
                        <ScrollPane prefHeight="200.0" prefWidth="200.0" />
                     </children>
                  </HBox>
               </content></Tab>
          <Tab text="Untitled Tab 2" />
        </tabs>
      </TabPane>
   </children>
</AnchorPane>
Solution

  • The issue is the secondary fxml:

    Without specifying the anchors for children, AnchorPane just behaves like a Pane, i.e. the children are resized to their preferred size and keep this size regardless of the AnchorPane size.

    To change this behavior, specify those constraints on the TabPane in the secondary fxml:

    <TabPane prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE" AnchorPane.leftAnchor="0" AnchorPane.rightAnchor="0" AnchorPane.topAnchor="0" AnchorPane.bottomAnchor="0">
    ...
</TabPane>

    Or simpler use <TabPane> as root element of the fxml:

    <TabPane prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="testtabs.FXMLTab2Controller">
    ...
</TabPane>

    Note: The HBox used as content of this TabPane won't resize the children to greater widths than the preferred widths, since you didn't use hgrow properties other than the default value (NEVER). You could also fix this to e.g. always grow the ScrollPane like this:

    <HBox prefHeight="100.0" prefWidth="200.0">
   <children>
      <SplitPane prefHeight="200.0" prefWidth="200.0" />
      <ScrollPane prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS">
        <content>
          <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="200.0" prefWidth="200.0" />
        </content>
      </ScrollPane>
      <ScrollPane prefHeight="200.0" prefWidth="200.0" />
   </children>
</HBox>