Align a Hbox to the bottom center inside a StakePanel - javafx

Question

I'm learning Javafx layouts and I would like to obtain the following result:
HBox in the bottom center fo a Pane I have tried with the following code but I'm not able to do that
Can you please explain what I'm doing wrong? and How to achieve that?
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class TestLayout extends Application {
#Override
public void start(Stage stage) {
initUI(stage);
}
private void initUI(Stage stage) {
Scene scene =null;
HBox hbox = new HBox();
hbox.setStyle("-fx-background-color: #FFFAAA;");
StackPane pane = new StackPane();
hbox.setStyle("-fx-background-color: #AAFAAA;");
hbox.prefWidthProperty().bind(pane.widthProperty().divide(4));
hbox.prefHeightProperty().bind(pane.heightProperty().divide(10));
pane.getChildren().add(hbox);
scene = new Scene(pane, 600, 600);
pane.prefWidthProperty().bind(scene.widthProperty());
pane.prefHeightProperty().bind(scene.heightProperty());
stage.setTitle("Test");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class AppLauncherTest {
public static void main(String[] args) {
TestLayout.main(args);
}
}

Answer 1

I would Use a VBox or BorderPane as the root node. In this example, I use a VBox. I am assuming more nodes will go into this so I used a StackPane as the top node. This may need to be changed out or some other Pane may need to be added to this. That depends on what you are trying to do with the end product. For the bottom, I used an HBox and I set it's Margins.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.layout.Priority;
import javafx.geometry.Insets;
/**
* JavaFX App
*/
public class App extends Application {
#Override
public void start(Stage stage) {
StackPane subRootTop = new StackPane();
VBox.setVgrow(subRootTop, Priority.ALWAYS);
//subRootTop.setStyle("-fx-background-color: yellow;");
HBox subRootBotton = new HBox();
VBox.setVgrow(subRootBotton, Priority.ALWAYS);
subRootBotton.setStyle("-fx-background-color: green;");
subRootBotton.setMaxHeight(150);
VBox.setMargin(subRootBotton, new Insets(40, 40, 40, 40));
VBox root = new VBox(subRootTop, subRootBotton);
root.setStyle("-fx-background-color: red;");
Scene scene = new Scene(root, 600, 600);;
stage.setTitle("Test");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}

Answer 2

The binding of the StackPane is not size shouldn't be done. The scene automatically resizes its root to fill the whole area available. Assuming you want relative sizes, using StackPane is not really a good choice.
If you want the child to have a fixed distance to left right and bottom of the StackPane, you can do so specifying margins and alignment. Make sure the child does not grow to fit the parent though by setting the maxHeight to use the preferred height:
private void initUI(Stage stage) {
HBox hbox = new HBox();
hbox.setStyle("-fx-background-color: #FFFAAA;");
hbox.setMaxHeight(Region.USE_PREF_SIZE);
// could be calculated based on children instead of assigning
// an absolute value
hbox.setPrefHeight(30);
StackPane.setAlignment(hbox, Pos.BOTTOM_CENTER);
StackPane.setMargin(hbox, new Insets(20));
StackPane pane = new StackPane(hbox);
pane.setStyle("-fx-background-color: #AAFAAA;");
Scene scene = new Scene(pane, 600, 600);
stage.setTitle("Test");
stage.setScene(scene);
stage.show();
}

Answer 3

Maybe you can use an AnchorPane as a base layout instead of the StacKPane. I made a small exmaple how it would look like. Of cause you could keep the StackPane as the base layout and just put the AnchorPane with the HBox onto it, but you should definitly use an AnchorPane for your plan.
package sample;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Main extends Application {
private void initUI(Stage stage) {
// Create an anchor pane as base layout and set a color:
AnchorPane root = new AnchorPane();
root.setStyle("-fx-background-color: #FFFAAA;");
// Create a second container and set a minimum height and a color;
HBox hbox = new HBox();
hbox.setMinHeight(100d);
hbox.setStyle("-fx-background-color: #AAFAAA;");
// Give the child container a fixed location:
AnchorPane.setBottomAnchor(hbox, 50d);
AnchorPane.setLeftAnchor(hbox, 75d);
AnchorPane.setRightAnchor(hbox, 75d);
// Add the horizontal box to the base anchor pane:
root.getChildren().add(hbox);
stage.setScene(new Scene(root, 600, 600));
stage.show();
}
#Override
public void start(Stage stage) throws Exception {
initUI(stage);
}
public static void main(String[] args) {
launch(args);
}
}
Preview: