How to determine percent width in JavaFX 2 using FXML?

Question

I am looking for a way to say that the value of maxWidth is 80% in FXML.

As in web development.

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

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

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

Thanks!

Riley

Answer 1

I'm not sure you can. You need to use the GridPane layout GridPane . In this component you can specify the row and column restrictions, and in these restrictions you can specify the width in percent. 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 the first column 80% wide. TitledPane set in the first cell of the first column of this GridPane and can (because you need to be sure that the TitledPane width TitledPane appropriate for your needs) occupy 80% of the GridPane width.

Please note that I have deleted all information not relevant to your question. By the way, the Oracle Scene Builder tool is very useful for defining a complex FXML layout.

Answer 2

It seems that 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 will help you determine the size of the current screen on which the application is displayed. Now that we have the dimensions of the display, 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> 

Please note that I use visualBounds , as this will provide me with available space on the screen, since I do not want to overlap the taskbar in Windows, for example. For full-screen applications, you just use the "borders".

Now, to understand how to use percentages, you can play with the values ​​of prefheight and prefWidth. You can do the calculations inside $ {} .

Not necessary:

If you want all your elements to use relative sizes, just refer to them using their identifier, 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 3

You can simulate it - a basic example that simulates 50% for two columns in an HBox. You can add dummy panels 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:""} } }