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).