How do specify a width percentage in JavaFX 2 using FXML?

Question

I am looking for a way to say set a maxWidth size to 80% in FXML.

Much like in web development.

<VBox fx:id="testVB" prefWidth="600">

But this does not:
<VBox fx:id="testVB" prefWidth="80%">

I know that in Straight JavaFX2 non-fxml you can create insets? What is the best way to do this outside of code in FMXL?

Thanks!

Riley

Osvaldooswal

Answer 1

I'm not sure you can. You need to use the GridPane layout component. In this component, you can specify rows and columns constraints, and in these constraints you can specify a width as a percentage. For example:

<GridPane>
    <children>
        <TitledPane text="testGridPane" GridPane.columnIndex="0" GridPane.rowIndex="0" />
    </children>
    <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="80.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="100.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
    </rowConstraints>
</GridPane>

This code defines a GridPane with a first column with a width of 80%. The TitledPane is set in the first cell of the first column of this GridPane, and can (because you need to be sure that the width constraints of the TitledPane match your needs) occupy 80% of the width of the GridPane.

Please note that I removed all information not relevant to your question. By the way, Oracle's Scene Builder tool is very useful to define complex FXML layout.

Hardman

How do you set the column constraints inside SceneBuilder? I'm using SceneBuilder 8.1.1, I have a GridPane with two columns, and I can't find column constraints or percentWidth anywhere. – Debenture

@Debenture In SceneBuilder's Content Panel, click inside the GridPane. Tab thingies will appear above and below each column and to the left and right of each row. In the Inspector Panel at right, with Layout expanded, you will see ColumnConstraints info. – Recreate

Answer 2

It seems like many answers have already been provided and they should work. However, there is a way to set percentages:

<fx:define>
    <Screen fx:factory="getPrimary" fx:id="screen" />
</fx:define>

This would help you detect the dimensions of the current screen, the application is being displayed on. Now that we have the display dimensions, we can play with it in FXML as follows:

<HBox fx:id="hroot" prefHeight="${screen.visualBounds.height}" prefWidth="${screen.visualBounds.width}"> Your FXML elements inside the root... </HBox>

Note that I use visualBounds, since this would get me the available space on the screen, since I don't want an overlap with the taskbar in Windows for example. For fullscreen applications, you would just use 'bounds'.

Now, to come to your point of using percentages, you can actually play with the value of the prefheight and prefWidth. You can put calculations inside the ${}.

Optionally:

If you want to have all your elements use relative sizes, just refer to them, using their ID and width or height property, and make your calculation.

<VBox fx:id="VBSidebar" prefWidth="${hroot.width*0.15}" prefHeight="${hroot.height}"> more elements.. </VBox>

Hope this helps!

Twannatwattle

Answer 3

You can simulate it - basic example that simulates 50% for two cols in an HBox. You can add dummy panes to get thirds, etc.

    HBox {
        VBox {
            static hgrow : "ALWAYS",
            Label {
                text : "Privacy",
                alignment : "CENTER",
                styleClass : ["h2", "heading"]
            }
        },
        VBox {
            static hgrow : "ALWAYS",
            Label {
                text : "Messages",
                alignment : "CENTER",
                styleClass : ["h2", "heading"]
            },
            Label {text:""}
        }
    }

Technology

I should note that use of "SOMETIMES" and futzing with the pref/min/max width values can be of help, too. I'd still love % values for real though. – Technology