How to bind stage resizing with resizing of components?

Question

I have a JavaFX 2.0 application with FXML. I want the components (TextFields, ComboBoxes, layouts, and so on) to be resized when a window with an application is resized. So

Answer 1

Another easy option is to use JavaFX Scene Builder (recently become available as public beta: http://www.oracle.com/technetwork/java/javafx/tools/index.html)

It allows to create UI by drag-and-drop and anchor UI elements to borders (by anchor tool), so they move/resize with the window borders.

UPDATE:

To achieve autoresizing percentage layout you can use GridPane with ColumnConstraint:

public void start(Stage stage) {

    VBox box1 = new VBox(1);
    VBox box2 = new VBox(1);

    //random content
    RectangleBuilder builder = RectangleBuilder.create().width(20).height(20);
    box1.getChildren().addAll(builder.build(), builder.build(), builder.build());
    builder.fill(Color.RED);
    box2.getChildren().addAll(builder.build(), builder.build(), builder.build());

    //half by half screen
    GridPane grid = new GridPane();
    grid.addRow(0, box1, box2);

    ColumnConstraints halfConstraint = ColumnConstraintsBuilder.create().percentWidth(50).build();
    grid.getColumnConstraints().addAll(halfConstraint, halfConstraint);

    stage.setScene(new Scene(grid, 300, 250));
    stage.show();
}

Answer 2

Some suggestions for building resizable guis =>

• Make sure the root of your app is a Pane subclass, rather than a Group.
• Unclamp the max size of buttons (e.g button.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE).
• Most of the time the layout panes can handle the resizing for you and you don't need bindings and listeners => i.e. only bind when you really need to.
• UI controls and layout panes are Regions => all Regions have read-only height and width properties you can listen to and bind to.
• You can not directly bind the height and width properties of a control to another value. Instead use the minWidth/Height, prefWidth/Height, maxWidth/Height properties.
• The scene has height and width properties you can bind to if needed. If you do this, when the stage is resized, the scene will be resized, then your bound components will be resized. If the root of your scene is a layout pane rather than a group, this binding is usually unnecessary.
• If you don't set a height and width on the scene, for a stand-alone app, the scene (and stage) will be sized to fit the preferred size of the scene's root node (which is usually what you want).
• If all else fails you can start overriding Parent's layoutchildren method.

Here is an example of a resizable JavaFX UI which implements some of the principles above.

Answer 3

Suggestions:

1. If you have only one main stage then store it in a static field/variable while the app start and access it in all controller classes.
2. You can put all controls/components into a layout/pane that manages its children layout automatically. For different layouts check the api doc. After that, bind the stage scene's width and height properties to this layout's properties accordingly. More on binding look at Using JavaFX Properties and Binding.
   Example of unidirectional binding