Multiple Layouts In JavaFX

Question

I wish to organize my components in my JavaFX program in the following order:

When I use a GridPane to layout a VBox that hold the menu bar and toolbar and the HBox that hold the file view, editor and console, the grid pane prohibites you from editing the width of cells on two different layout. The outcome:

Is there anyway of getting around this or maybe a different layout that would make this a bit easier? Thanks

Answer 1

I found it pretty straightforward to create a similar layout in Scene Builder.

The generated layout did not seem to have any obvious glitches to me.

The hierarchy used is:

FXML source, you can load it in Scene Builder to get the layout shown in the screenshot above. In Scene Builder, after loading the file, select View | Show Sample Data.

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

<?import javafx.scene.control.*?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.*?>
<VBox id="StackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <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 fx:id="saveAs" mnemonicParsing="false" text="">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons8.com/wp-content/uploads/2012/06/save_as.png" />
              </image>
            </ImageView>
          </graphic>
        </Button>
        <Button fx:id="profile" mnemonicParsing="false" text="">
          <graphic>
            <ImageView fitHeight="0.0" fitWidth="0.0" mouseTransparent="true" pickOnBounds="true" preserveRatio="true">
              <image>
                <Image url="http://icons8.com/wp-content/uploads/2011/12/bar.png" />
              </image>
            </ImageView>
          </graphic>
        </Button>
      </items>
    </ToolBar>
    <HBox fx:id="content" prefHeight="-1.0" prefWidth="-1.0" VBox.vgrow="ALWAYS">
      <children>
        <SplitPane fx:id="fileDivider" dividerPositions="0.27424749163879597" focusTraversable="true" maxWidth="-1.0" prefHeight="-1.0" prefWidth="-1.0" HBox.hgrow="ALWAYS">
          <items>
            <TreeView fx:id="fileView" prefHeight="200.0" prefWidth="200.0" />
            <SplitPane fx:id="consoleDivider" dividerPositions="0.6042296072507553" focusTraversable="true" orientation="VERTICAL" prefHeight="-1.0" prefWidth="-1.0">
              <items>
                <TabPane id="tabbedEditor" fx:id="tabbedEditors" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE">
                  <tabs>
                    <Tab fx:id="hello" text="Hello.java">
                      <content>
                        <TextArea prefWidth="200.0" text="public class Hello {&#10;&#10;}" wrapText="true" />
                      </content>
                    </Tab>
                    <Tab fx:id="untitled" text="Untitled">
                      <content>
                        <TextArea prefWidth="200.0" wrapText="true" />
                      </content>
                    </Tab>
                  </tabs>
                </TabPane>
                <TabPane fx:id="tabbedConsoles" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE">
                  <tabs>
                    <Tab fx:id="console" text="Console">
                      <content>
                        <TextArea prefWidth="200.0" text="java.lang.NullPointerException&#10;    at Maze.getNumRandOccupants(Maze.java:118)&#10;    at P4TestDriver.testMaze(P4TestDriver.java:995)&#10;    at P4TestDriver.main(P4TestDriver.java:116)" wrapText="true" />
                      </content>
                    </Tab>
                    <Tab fx:id="log" text="Log">
                      <content>
                        <TextArea prefWidth="200.0" wrapText="true" />
                      </content>
                    </Tab>
                  </tabs>
                </TabPane>
              </items>
            </SplitPane>
          </items>
        </SplitPane>
      </children>
    </HBox>
  </children>
</VBox>