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)

Answer 1

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 2

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 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>