JavaFX layout that scales with parent

Question

I use JavaFX in the project instead of Swing due to improved multimedia, web browsing and the ability to use visual effects. However, what I learned from what I found on the Internet ( http://docs.oracle.com/javafx/2/layout/jfxpub-layout.htm and others) is that JavaFX layout managers focus on scaling the parent size based on the size of the content , while Swing focuses on scaling the content according to the parent > at least based on Layout .

Right now I'm using Accordion with some TitledPane . One of them contains a GridPane for the simple reason that I emulate GridLayout best (as I learned from my previous question here: JavaFX layout equivalent to GridLayout ). I want the content of the TitledPane split into 2 rows and 1 column, each row with 50% of the height of the available space in the TitledPane (scaling with Stage or Scene ), which is equivalent to having GridLayout(2,1) inside a BorderLayout.CENTER . For this, I added a GridPane with 2 RowConstraint using setPercentHeight(50) and 1 ColumnConstraint with setPercentWidth(100) . However, I noticed that the content is scaled correctly using the grid, but the grid does not occupy all the free space in the TitledPane (because, apparently, it does not act as the center of the BorderPane ). I also tried with setMaxWidth to scale the content with the parent, but it doesn't seem to work (as said here: JavaFX: how to make my custom component use all available space from the parent layout? ). And even if it were, do I need to set the maximum width for EVERY descendant in my user interface element tree so that they all scale?

Anyway, does anyone know how to make a TitledPane with two equal spaces in it under each other that scale with the size of the header?

Answer 1

In fact, your gridpane is growing to fill all of its parent. Consider the code below, I added a background color (red) to the gridpane for debugging purposes.

 Accordion accordion = new Accordion(); TitledPane titledPane = new TitledPane(); titledPane.setText("Title"); GridPane gridPane = new GridPane(); gridPane.setStyle("-fx-background-color:red"); gridPane.add(new TextArea("Hello"), 0, 0); gridPane.add(new TextArea("World"), 0, 1); titledPane.setContent(gridPane); accordion.getPanes().add(titledPane); 

If you execute this code, gridpane will fill its entire parent (check that the red color covers the entire contents of titledpane).

However, the contents of the grid will not fill the entire column. If you try to resize the window, you will see that the text areas do not change in width with the grid. To fix this, you need to say that the first gridpane column will grow with the grid itself. The way to do this is to add the following restriction:

 ColumnConstraints columnConstraints = new ColumnConstraints(); columnConstraints.setFillWidth(true); columnConstraints.setHgrow(Priority.ALWAYS); gridPane.getColumnConstraints().add(columnConstraints);