How to right align a button in Java FX toolbar

I am building a UI using Java FX scene builder and I want a button in a toolbar to float towards the right side of the toolbar. I have tried changing the node orientation of the parent(toolbar) and also the button but both seem to be ignored.


Solution 1:

Add a pane with no content which always grows to fit available space between the left aligned tools in the bar and right aligned ones.

tool

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<ToolBar prefHeight="40.0" prefWidth="318.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
   <Button text="Apples" />
   <Button text="Oranges" />
   <Pane HBox.hgrow="ALWAYS" />
   <Button text="Help" />
</ToolBar>

Solution 2:

(Verified in Scene Builder 11.0.0)

One option: Use two ToolBar containers wrapped with an HBox container. Put the Help button in the right ToolBar. Put the left-aligned buttons in the left toolbar. For the left ToolBar, set the HGrow to ALWAYS. For the Right ToolBar, set HGrow to NEVER. For each ToolBar, set all Sizes to USE_COMPUTED_SIZE.

Here is the relevant fxml:

<HBox VBox.vgrow="NEVER">
  <children>
    <ToolBar HBox.hgrow="ALWAYS">
      <items>
        <Button text="Apples" />
        <Button text="Oranges" />
      </items>
    </ToolBar>
    <ToolBar HBox.hgrow="NEVER">
      <items>
        <Button text="Help" />
      </items>
    </ToolBar>
  </children>
</HBox>

This is the hierarchy as displayed in Scene Builder:

Scene Builder Hierarchy

This is the display within Scene Builder:

Result in Scene Builder