Best way to create a flexible 3 box layout in JavaFX/FXML

Question

I want to create a flexible 3-box layout in JavaFX/FXML. A picture describes it the best, so just like in the following:

As you can see, the main part should consist of three resizable boxes. All of this boxes should have a preferred size.

So the code looks like the following (simplified code).

<BorderPane>
  <top>
    <VBox>
      <!-- menubar stuff -->
    </VBox>
  </top>
  <center>
    <!-- ACTUAL CONTENT HERE -->
  </center>
  <bottom>
    <!-- toolbar stuff -->
  </bottom>
</BorderPane>

What could be the best approach here? Two nested SplitPanes?

Answer 1

What could be the best approach here? Two nested SplitPanes?

Yep, I'd do that.

To get the mock layout above, try the opening the following fxml in SceneBuilder 1.1 early access.

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<BorderPane id="BorderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="400.0" xmlns:fx="http://javafx.com/fxml">
  <bottom>
    <Label alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-background-color: linear-gradient(to bottom, paleturquoise, azure, paleturquoise);&#10;" text="(56, 32)" textAlignment="LEFT" BorderPane.alignment="CENTER" />
  </bottom>
  <center>
    <SplitPane dividerPositions="0.3492462311557789" focusTraversable="true" prefHeight="160.0" prefWidth="200.0">
      <items>
        <SplitPane id="SplitPane" dividerPositions="0.6088328075709779" orientation="VERTICAL">
          <items>
            <TabPane prefHeight="200.0" prefWidth="200.0" side="BOTTOM" tabClosingPolicy="UNAVAILABLE">
              <tabs>
                <Tab text="A">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: lavender;&#10;" />
                  </content>
                </Tab>
                <Tab text="B">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
                <Tab text="C">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
                <Tab text="D">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
                <Tab text="E">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
              </tabs>
            </TabPane>
            <TreeView prefHeight="200.0" prefWidth="200.0" />
          </items>
        </SplitPane>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="80.0" prefWidth="50.0" style="-fx-background-color: palegreen;" />
      </items>
    </SplitPane>
  </center>
  <top>
    <VBox prefHeight="-1.0" prefWidth="-1.0">
      <children>
        <MenuBar>
          <menus>
            <Menu mnemonicParsing="false" text="File">
              <items>
                <MenuItem mnemonicParsing="false" text="Close" />
              </items>
            </Menu>
            <Menu mnemonicParsing="false" text="Edit">
              <items>
                <MenuItem mnemonicParsing="false" text="Delete" />
              </items>
            </Menu>
            <Menu mnemonicParsing="false" text="Help">
              <items>
                <MenuItem mnemonicParsing="false" text="About" />
              </items>
            </Menu>
          </menus>
        </MenuBar>
        <ToolBar>
          <items>
            <Button mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/24/open-file-icon.png');" text="" />
            <Button mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-7/24/Save-icon.png');" text="" />
          </items>
        </ToolBar>
      </children>
    </VBox>
  </top>
</BorderPane>