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.

<

Answer 1

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!

Answer 2

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.

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:""}
        }
    }