Search code examples
javafxgroupinggridpane

Group nodes in gridpane in JavaFx

is it possible to cluster cells of a gridpane in group nodes in javafx? The reason why I want to do this, is to apply different css selectors on subsets in the gridpane.

I have these cells in a gridpane (2 rows, 4 columns):

a1 | a2 | b1| b2
c1 | c2 | d1| d2

Where I have 4 subsets (a1, a2) (b1, b2) (c1, c2) and (d1, d2). I tried nested grids, However, this gives not a nice layout if the content of each cell has a different size (e.g. I get different column sizes for a1 and c1).

Solution

  • The reason why I want to do this, is to apply different css selectors on subsets in the gridpane.

    You can simply give the nodes appropriate style classes:

    a1.getStyleClass().add("a");
a2.getStyleClass().add("a");
b1.getStyleClass().add("b");
b2.getStyleClass().add("b");
c1.getStyleClass().add("c");
c2.getStyleClass().add("c");
d1.getStyleClass().add("d");
d2.getStyleClass().add("d");

    Or in FXML

    <Node fx:id="a1" styleClass="a"><!-- ... --></Node>
<Node fx:id="a2" styleClass="a"><!-- ... --></Node>
<Node fx:id="b1" styleClass="b"><!-- ... --></Node>
<Node fx:id="b2" styleClass="b"><!-- ... --></Node>

<!-- etc -->

    Then you can select them and apply styles in the CSS:

    .a {
    /* style rules for a1 and a2 */
}
.b {
    /* style rules for b1 and b2 */
}

    Then, of course, just lay them out any way you need (e.g. in a single grid pane).