What Layout to use for JavaFx

Question

I've been experimenting with different layouts in order to recreate Brandi's Bagel House

However I just can't figure out what layout is being used here. So far I've tried BorderPane, FlowPane, GridPane, HBox and VBox but I still don't get the correct layout. I'm not allowed to implement any Swing or AWT. It has to be pure JavaFX and I'm not allowed to use any GUI builder like WindowBuilder. Any tip, hints or advice to recreate this [Swing] GUI layout in JavaFX?

Download [SceneBuilder](https://gluonhq.com/products/scene-builder/). Design your GUI in it using whatever layouts you want. When you get it looking like you like (and it won't look exactly like the screenshot because that is a Swing UI, not a JavaFX UI), export the FXML file. Then (if your requirement is not to use FXML for some weird reason), just take the FXML and write it up in Java, which is a pretty simple conversion, because all FXML does is instantiate Java types and set values. — jewelsea, Nov 06 '21 at 11:02
You can do groups using TitledPanes and setting collapsible to false, but it will look different in JavaFX than Swing, unless you do something tricky with the styling (which I wouldn't advise for this). — jewelsea, Nov 06 '21 at 11:04

Abra · Answer 1 · 2021-11-06T11:46:08.040

You have [an image of] a Swing GUI and you want to convert it to JavaFX.

You need a combination of layouts. For the root of the node graph, use a BorderPane.

The top node is a Label but since you want that Label centered, you need to place it in a HBox.
The left node is the Bagel pane. The RadioButtons are placed in a VBox.
The center node is the Toppings pane. The CheckBoxes are placed in a VBox.
The right node is the Coffee pane. The RadioButtons are placed in a VBox.
The bottom node contains the Buttons. Since you want the Buttons centered, you need to place them in a HBox.

The below code demonstrates. Note that the code for class BorderedTitledPane comes from the accepted answer to this question: GroupBox / TitledBorder in JavaFX 2?
(Since JavaFX does not have a TitledBorder as Swing does.)

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class OrdaCalc extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        BorderPane root = new BorderPane();
        Label label = new Label("Welcome to Brandi's Bagel House");
        HBox labelHBox = new HBox(label);
        labelHBox.setAlignment(Pos.CENTER);
        root.setTop(labelHBox);
        root.setLeft(createLeftPane());
        root.setCenter(createCenterPane());
        root.setRight(createRightPane());
        root.setBottom(createBottomPane());
        Scene scene = new Scene(root);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private HBox createBottomPane() {
        Button calculate = new Button("Calculate");
        Button exit = new Button("Exit");
        HBox buttonsHBox = new HBox(10.0d, calculate, exit);
        buttonsHBox.setAlignment(Pos.CENTER);
        return buttonsHBox;
    }

    private BorderedTitledPane createCenterPane() {
        CheckBox creamCheese = new CheckBox("Cream Cheese");
        CheckBox butter = new CheckBox("Butter");
        CheckBox peachJelly = new CheckBox("Peach Jelly");
        CheckBox blueberryJam = new CheckBox("Blueberry Jam");
        VBox vBox = new VBox(5.0d, creamCheese, butter, peachJelly, blueberryJam);
        BorderedTitledPane center = new BorderedTitledPane("Toppings", vBox);
        return center;
    }

    private BorderedTitledPane createLeftPane() {
        RadioButton white = new RadioButton("White");
        RadioButton wheat = new RadioButton("Wheat");
        ToggleGroup group = new ToggleGroup();
        group.getToggles().addAll(white, wheat);
        VBox vBox = new VBox(30.0d, white, wheat);
        BorderedTitledPane left = new BorderedTitledPane("Bagel", vBox);
        return left;
    }

    private BorderedTitledPane createRightPane() {
        RadioButton none = new RadioButton("None");
        RadioButton regular = new RadioButton("Regular");
        RadioButton decaf = new RadioButton("Decaf");
        RadioButton cappuccino = new RadioButton("Cappuccino");
        ToggleGroup group = new ToggleGroup();
        group.getToggles().addAll(none, regular, decaf, cappuccino);
        VBox vBox = new VBox(5.0d, none, regular, decaf, cappuccino);
        BorderedTitledPane right = new BorderedTitledPane("Coffee", vBox);
        return right;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

class BorderedTitledPane extends StackPane {
    BorderedTitledPane(String titleString, Node content) {
        Label title = new Label(" " + titleString + " ");
        title.getStyleClass().add("bordered-titled-title");
        StackPane.setAlignment(title, Pos.TOP_CENTER);

        StackPane contentPane = new StackPane();
        content.getStyleClass().add("bordered-titled-content");
        contentPane.getChildren().add(content);

        getStyleClass().add("bordered-titled-border");
        getChildren().addAll(title, contentPane);
    }
}

Here is file application.css which is located in the same package as class OrdaCalc.

.bordered-titled-title {
  -fx-background-color: white;
  -fx-translate-y: -16;
}

.bordered-titled-border {
  -fx-content-display: top;
  -fx-border-insets: 20 15 15 15;
  -fx-background-color: white;
  -fx-border-color: black;
  -fx-border-width: 2;
}

.bordered-titled-content {
  -fx-padding: 26 10 10 10;
}

Here is a screen capture.

What Layout to use for JavaFx

1 Answers1