3 Replies Latest reply: Aug 20, 2013 6:20 PM by user13665758 RSS

    Node size in scenebuilder.


      Hi everybody,

      can someone explain me how to set the pref size of a container using percent values relative to another parent container?

      I have to share a VBox container space between a webview component and a vertical tableview, but i wish to assign a 70% of the vertical space available to the webview and the remaining one to the tableview.

      How can i manage sizes this way in a fixed percent?

      When i try to write percent values inside scenebuilder or expressions like:




      it doesn't save the expressions.

      Pheraps is there another way to manage sizes?


      Thanks in advance!

        • 1. Re: Node size in scenebuilder.

          I don't know of a way to do this in SceneBuilder (or in FXML in general); the Introduction to FXML document states

          Only simple expressions that resolve to property values or page variables are currently supported. Support for more complex expressions involving boolean or other operators may be added in the future.

          In your controller, however, you can do


          • 2. Re: Node size in scenebuilder.

            Here is an fxml for a static reference.

            The expressions work for values which don't change.


            As James points out, if you want to have dynamic binding to an expression such as {$parentBox.height * 0.7}, then, with JavaFX 2.2 (and the forthcoming Java 8), you need to do that in code as only bindings for simple values such as {$parentBox.height} work.


            <?xml version="1.0" encoding="UTF-8"?>
            <?import java.lang.*?>
            <?import java.util.*?>
            <?import javafx.scene.layout.*?>
            <?import javafx.scene.paint.*?>
            <?import javafx.scene.shape.*?>
            <StackPane id="StackPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
                <Rectangle fx:id="parentSize" height="400.0" width="400.0"/>
              <VBox fx:id="parentBox" prefHeight="${parentSize.height}" prefWidth="${parentSize.width}">
                <StackPane fx:id="child1" prefHeight="${parentSize.height * 0.7}" style="-fx-background-color: mistyrose;" />
                <StackPane fx:id="child2" prefHeight="${parentSize.height * 0.3}" style="-fx-background-color: cornsilk;" />


            An alternate if you want to use percentage values from fxml is to use a layout which supports dynamic percentage constraints (such as a GridView).


            <?xml version="1.0" encoding="UTF-8"?>
            <?import java.lang.*?>
            <?import java.util.*?>
            <?import javafx.scene.layout.*?>
            <?import javafx.scene.paint.*?>
            <StackPane id="StackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="400.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
                <GridPane style="">
                    <StackPane style="-fx-background-color: cornsilk;" GridPane.columnIndex="0" GridPane.rowIndex="0" />
                    <StackPane style="-fx-background-color: mistyrose;" GridPane.columnIndex="0" GridPane.rowIndex="1" />
                    <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                    <RowConstraints minHeight="-1.0" percentHeight="70.0" prefHeight="-1.0" vgrow="SOMETIMES" />
                    <RowConstraints minHeight="-1.0" percentHeight="30.0" prefHeight="-1.0" vgrow="SOMETIMES" />


            Using a GridView for this kind of layout seems like a better option in any case.



            • 3. Re: Node size in scenebuilder.


              I have noticed gridview container supports percent values that are relative to its parent, it seems.

              However i'm happy to know now the chance to set manually in the fxml the sizes using binding.

              For now i'm using gridview however because it seems a more elegant solution.

              Thanks alot!