48

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.

Community
  • 1
  • 1
Japheth Ongeri - inkalimeva
  • 4,909
  • 6
  • 29
  • 46
  • 1
    Why the down vote!? It would really help if you left the reason for your down vote in a comment. I've articulated my problem pretty clearly and succinctly. Is it not a valid question? Or do you want screenshots of me ticking the node orientation check-box :-) – Japheth Ongeri - inkalimeva Jul 22 '14 at 21:05
  • Your original question asked how to left align in a toolbar, which is what happens by default, so it pointless until it was edited. [Node Orientation](https://wiki.openjdk.java.net/display/OpenJFX/Node+Orientation+in+JavaFX) is a different concept than [alignment](http://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/HBox.html#alignmentProperty), so mixing the two in the question was confusing to me without further context, code or graphics (not of checking the check box, but of what the desired toolbar would look like and what your current code generated). – jewelsea Jul 23 '14 at 08:14

5 Answers5

100

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>
jewelsea
  • 150,031
  • 14
  • 366
  • 406
  • Thanks I was expecting some property of the nodes involved but if adding another node gets the desired result then it's fine too. – Japheth Ongeri - inkalimeva Jul 23 '14 at 15:29
  • 3
    I'm guessing this doesn't work in FX8? HBox.hgrow isn't applicable to the Pane in my code. It's not recognized from the namespace, and doesnt really do anything – Robin Jonsson Jul 07 '16 at 07:05
  • @jewelsea Have you had any luck using this in JavaFX8? Cus i can't get it to work.... Seems like ToolBar doesn't inherit from HBox anymore? – Robin Jonsson Jul 07 '16 at 07:38
  • @Robin it works fine for me in Java 8. I loaded the FXML from the answer up into the latest [SceneBuilder](http://gluonhq.com/labs/scene-builder/), which I downloaded from gluon and runs on 1.8.0_65-b17. The toolbar displayed exactly as the screenshot provided in this answer. – jewelsea Jul 07 '16 at 16:41
  • @jewelsea That's the strangest.... oh well it works for me now too. Not sure what the problem was, i swear i copy pasted the solution to test out. Thanks for the help anyway! – Robin Jonsson Jul 11 '16 at 07:08
  • 1
    @RobinJonsson I think your problem was related to missing `` directive. Seems like in this case the Scene Builder just ignore `HBox.hgrow="ALWAYS"` attribute and doesn't show warning or error. – Maxim Jul 15 '16 at 10:23
  • simple, yet elegant. @jewelsea, if you know of any layout guides for the inexperienced, please kindly share! – sbsatter Aug 08 '17 at 09:16
  • 1
    @sbs for some info on JavaFX layout try this: [JavaFX2.0 Layout: A Class Tour](https://amyfowlersblog.wordpress.com/2011/06/02/javafx2-0-layout-a-class-tour/) by Amy Fowler. Of course also see the Oracle doc: [Working With Layouts in JavaFX](http://docs.oracle.com/javafx/2/layout/jfxpub-layout.htm). Also try this [layout bounds demo](https://gist.github.com/jewelsea/1441960). – jewelsea Sep 22 '17 at 19:19
  • This works well for me, but for some reason SceneBuilder insists on overwriting `` with ``. – Gary Jul 25 '18 at 22:07
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

MichaelShimniok
  • 71
  • 5
0

If you could place ur button inside a stack pane then u could make use of Stackpane's alignment property that takes javafx.geometry.Pos - The alignment of the child within the stackpane.For example in ur case: 

<StackPane >
<Button translateY="-15" translateX="15"  StackPane.alignment="TOP_RIGHT"/>
</StackPane>
sushmitha shenoy
  • 301
  • 3
  • 8
  • please write _real_ English - ur or u aren't existing words ;) And no, using a stackpane here is not a good option, actually a stackpane rarely is the appropriate layout – kleopatra Jun 14 '19 at 07:06
0
BorderPane mainBorderPane = new BorderPane();     
BorderPane ToolBorderPane = new BorderPane();     
ToolBar tBarLeft=new ToolBar();      
ToolBar tBarRight=new ToolBar();     
ToolBorderPane.setLeft(tBarLeft);      
ToolBorderPane.setRight(tBarRight);      
mainBorderPane.setTop(ToolBorderPane);

... ... for your left aligment items add tBarLeft and your right aligment items add tBarRight

YALCIN
  • 1
  • 2
0

It can be done with some hack: apply 180 degree rotation around Y-axis for the toolbar and all its buttons.

<ToolBar rotate="-180.0" HBox.hgrow="ALWAYS">
  <items>
    <Button mnemonicParsing="false" rotate="180.0" text="Button">
      <rotationAxis>
        <Point3D y="1.0" />
      </rotationAxis>
    </Button>
  </items>
  <rotationAxis>
    <Point3D y="1.0" />
  </rotationAxis>
</ToolBar>
RoK
  • 960
  • 1
  • 7
  • 6