CODEWITHSUNDEEP
user-interfacejavafx-2scenebuilder
bbarker
bbarker

Reputation: 13078

How to make a resizable SplitPane within a Tab in JavaFX 2.0 (preferably using SceneBuilder and/or FXML)?

The question basically says it all, with the caveat that I'm a newbie to GUI design in general and JavaFX in particular. To reproduce in SceneBuilder, drag a TabPane onto the scene, and drag a SplitPane into the first tab's AnchorPane. Adjust (drag) the size of the SplitPane to match the the size of the tab. This is not a problem if the SplitPane is not a child (I only tested it as a (grand)child of a Tab so far). You'll have something like this:

enter image description here

Upon preview, if you try to expand the window size by dragging, the SplitPane won't resize:

enter image description here

Here is the FXML I get from SceneBuilder, using the process described at the top of this post with perhaps a few minor changes that didn't help:

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

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

<TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
  <tabs>
    <Tab text="Untitled Tab 1">
      <content>
        <AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="0.0" minWidth="0.0" prefHeight="386.0" prefWidth="613.0">
               <children>
                  <SplitPane dividerPositions="0.29797979797979796" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="358.0" prefWidth="600.0">
                    <items>
                      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" />
                      <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="158.0" prefWidth="277.0" />
                    </items>
                  </SplitPane>
               </children></AnchorPane>
      </content>
    </Tab>
    <Tab text="Untitled Tab 2">
      <content>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
      </content>
    </Tab>
  </tabs>
</TabPane>

Upvotes: 0

Views: 3023

Answers (1)

ItachiUchiha
ItachiUchiha

Reputation: 36722

The problem is that your SplitPane is a child of an AnchorPane. In case you have something under AnchorPane, it is anchored to specific co-ordinates. To allow the child to take up the whole are, you need to specify the AnchorPane's anchor to zero.

<TabPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" tabClosingPolicy="UNAVAILABLE" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
  <tabs>
   ....
    <SplitPane dividerPositions="0.29797979797979796" maxHeight="-Infinity" 
               maxWidth="-Infinity" prefHeight="358.0" prefWidth="600.0"
               AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0"
               AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
   ....
   </tabs>
</TabPane>

Using scene-builder, you can assign the AnchorPane Constraints by:

  1. Select the child under AnchorPane
  2. Move to Layout section on the right hand side panel
  3. You will see a section called AnchorPane constraints, just type in the four section values and save

enter image description here

Upvotes: 2

Related Questions