JavaFx Multiple Layouts - javafx

Question

I'm currently trying to create this Layout.
I've tried to use:
StackPane rootPane = new StackPane();
Scene scene = new Scene(rootPane,...);
Pane pane1 = new Pane();
Pane pane2 = new Pane();
rootPane.getChildren().addAll(pane1,pane2);
To let me create a menubar as well as a text field directly underneath it but it does not let me as the text field gets hidden by the menuBar.
I'm not sure which ones are needed in my case. I had a look at vbox - this is similar to what i what I need but I'm unsure how to add 2 tables in the last row with a gap
Would be a great help if you could point me in the direction needed.

Answer 1

StackPane is not a good choice here: it simply stacks child nodes on top of each other in z-order. I recommend you read the tutorial on layouts to get a full description of all the built-in layout panes, but one option is to use a VBox. To place the items in the bottom row, you could use an AnchorPane with one item anchored to the left and one to the right.
Here's an SSCCE using this approach:
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.control.TextArea;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class LayoutExample extends Application {
#Override
public void start(Stage primaryStage) {
VBox root = new VBox(5);
root.setPadding(new Insets(5));
MenuBar menuBar = new MenuBar();
menuBar.getMenus().add(new Menu("File"));
TextArea textArea = new TextArea();
VBox.setVgrow(textArea, Priority.ALWAYS);
AnchorPane bottomRow = new AnchorPane();
Label table1 = new Label("Table 1");
table1.setStyle("-fx-background-color: gray");
table1.setMinSize(200, 200);
Label table2 = new Label("Table 2");
table2.setStyle("-fx-background-color: gray");
table2.setMinSize(200, 200);
AnchorPane.setLeftAnchor(table1, 0.0);
AnchorPane.setRightAnchor(table2, 0.0);
bottomRow.getChildren().addAll(table1, table2);
root.getChildren().addAll(menuBar, textArea, bottomRow);
Scene scene = new Scene(root, 800, 800);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Another, similar, approach would be to use a BorderPane as the root, with the menu bar in the top, text area in the center, and anchor pane in the bottom.