How to create toolbar with left, center and right sections in javaFX?

Question

I'm trying to create a customized toolbar in javafx. This toolbar should be able to display controls in the center, in the left side and in the right side (three sections) of its surface. The problem is that I have no idea to achive this. I read many hints related to this problem, but they dont work for me or I'm doing something wrong...

Anyway I wrote several methods, which represent different ways to implement my toolbar but no of them works properly. Here you have my attempts:

1. Using HBox Hgrow property as spring. Didn't work.

   public ToolBar createToolBar()
   {
       ToolBar toolBar = new ToolBar();
       Pane emptyPane = new Pane();
       HBox spring = new HBox(emptyPane);
       spring.setHgrow(emptyPane, Priority.ALWAYS);
       toolBar.getItems().addAll(spring, new Label("LABEL"));
       return toolBar;
   }
   

2.It works for the left and right section, but how to define the center one?

    public AnchorPane createToolBar2()
    {
        AnchorPane toolBar = new AnchorPane();
        Label leftLabel = new Label("left");
        Label rightLabel = new Label("right");
        toolBar.getChildren().addAll(leftLabel, rightLabel);
        toolBar.setLeftAnchor(leftLabel, 0.0);
        toolBar.setRightAnchor(rightLabel, 0.0);
        return toolBar;
    }

3. This approach works well for the layout, but I cannot listen for events from left and center section because those are covered by the right section (StackPane is the reason), so this solution is also useless.

   public StackPane createToolBar3()
   {
       StackPane toolBar = new StackPane();
       Button left = new Button("left button");
       Button right = new Button("right button");
       Button center = new Button("center button");
       HBox leftSection = new HBox(left);
       leftSection.setAlignment(Pos.CENTER_LEFT);
       HBox centerSection = new HBox(center);
       centerSection.setAlignment(Pos.CENTER);
       HBox rightSection = new HBox(right);
       rightSection.setAlignment(Pos.CENTER_RIGHT);
       toolBar.getChildren().addAll(leftSection, centerSection, rightSection);
   
       left.setOnAction(event -> System.out.println("left"));
       right.setOnAction(event -> System.out.println("right"));
       center.setOnAction(event -> System.out.println("center"));
       return toolBar;
   }
   

Above methods I'm invoking in that code block:

   @Override
    public void start(Stage stage) {

        BorderPane borderPane = new BorderPane();
        borderPane.setPrefWidth(500);
        borderPane.setPrefHeight(300);
        borderPane.setTop(createToolBar4());
        stage.setScene(new Scene(borderPane));
        stage.show();
    }

I will be grateful for any help in that matter.

Answer 1

Spring method for ToolBar section alignment works fine for me.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class SectionalToolbar extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        final Pane leftSpacer = new Pane();
        HBox.setHgrow(
                leftSpacer,
                Priority.SOMETIMES
        );

        final Pane rightSpacer = new Pane();
        HBox.setHgrow(
                rightSpacer,
                Priority.SOMETIMES
        );

        final ToolBar toolBar = new ToolBar(
                new Button("Good"),
                new Button("Boys"),
                leftSpacer,
                new Button("Deserve"),
                new Button("Fruit"),
                rightSpacer,
                new Button("Always")
        );
        toolBar.setPrefWidth(400);

        BorderPane layout = new BorderPane();
        layout.setTop(toolBar);

        stage.setScene(
                new Scene(
                        layout
                )
        );
        stage.show();
    }
    public static void main(String[] args) { launch(); }
}  

A ToolBar (at least in the standard modena.css stylesheet for Java 8), is already internally implemented as a HBox container, so you can just use the HBox.setHgrow method to adjust the internal layout constraints of items you place in a toolbar.

The left and right spacers in this example are implemented as blank panes which will just grow and shrink to fit available space.

If you wanted a spacer which was a fixed size, instead of HBox.setHgrow, you could use something like:

leftSpacer.setPrefSize(20); 
leftSpacer.setMinSize(HBox.USE_PREF_SIZE); 
leftSpacer.setMaxSize(HBox.USE_PREF_SIZE);

Answer 2

Simply use a HBox instead of a StackPane. A StackPane puts Nodes on top of each other.

See a modified example of your third attempt.

Another option would be to use the FX ToolBar, similar to how jewelsea already mentioned:

See an example using a ToolBar.

Both attempts should be flexible enough for your needs. They differ in how much control you get over the layout and how many features you can inherit from the standard ToolBar.

Answer 3

Using FXML in conjunction with @jewelsea answer.

<ToolBar prefHeight="40.0" prefWidth="200.0">
    <items>
        <Button mnemonicParsing="false" text="Good" />
        <Button mnemonicParsing="false" text="Boys" />
        <Pane prefWidth="20.0" HBox.hgrow="SOMETIMES" />
        <Button mnemonicParsing="false" text="Deserve" />
        <Button mnemonicParsing="false" text="Fruit" />
        <Pane prefWidth="20.0" HBox.hgrow="SOMETIMES" />
        <Button mnemonicParsing="false" text="Always" />
        <Pane prefWidth="20.0" HBox.hgrow="SOMETIMES" />
    </items>
</ToolBar>