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…

• As it is written on Oracle documentation for JavaFX, to make something like this with shapes, there are a few special properties to shapes:

When building GUI applications with JavaFX, you will notice that certain classes in the API already implement properties. For example, the javafx.scene.shape.Rectangle class contains properties for arcHeight, arcWidth, height, width, x, and y. For each of these properties there will be corresponding methods that match the conventions previously described. For example, getArcHeight(), setArcHeight(double), arcHeightProperty(), which together indicate (to both developers and tools) that the given property exists.*

• To add listener to a stage I have to do something like:

     stage.resizableProperty().addListener(new ChangeListener<Boolean>(){
      @Override
      public void changed(ObservableValue<? extends Boolean> arg0, Boolean arg1, Boolean arg2){
          throw new UnsupportedOperationException("Not supported yet.");
      }
  
  });
  

So there are two questions:

• To make some binding I have to get my stage in the controller class. So – how can I get a stage in a controller class?
• It looks like UI controls do not have any width\height properties, to be bound to something. Or perhaps I have not found them.

So, how can I solve my problem?

UPD. About Scene Builder to Sergey Grinev: When I use Ctrl+K on my component (tell it to occupy the whole area of its parent component) – everything is ok.

But what if I want to tell my component to occupy 50% of an area?
For exammple I have a tab with two VBoxes on it.
The tab’s width is 100px. The Vbox’s widths are 50px for each. VBox1 has x1=0, and x2=50, and VBox2 has x1=50, and x2=100.
Then I resize my window with JavaFX application.
Now I have tab’s Width = 200px.
But my VBoxes widths are still = 50px: VBox1 has x1=0, and x2=50, and VBox2 has x1=150, and x2=200.
And I need them to be VBox1 x1=0 and x2=100 and VBox2 x1=100 and x2=200.
Where x1 and x2 values are the coordinates of VBoxes corners.

How can Scene Builder help me in this situation?

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();
}