How to merge cells in JavaFX Scene builder?

Question

I have a gridpane looks like a KeyBoard, and I need to merge some cells to put a "Space" button.. But I cant find any option in the settings of the gridpane which would solve my problem.. Does anyone have an idea how I could achieve it?

Answer 1

Setup your Grid with items in it

1. Create a GridPane.
2. Place nodes in the grid.
3. Select a node in the grid.

It is very, very important that a node in the grid be selected at this stage . . .

After that either:

A. Use the Menu Items

1. Choose Modify | GridPane

2. Choose any of

   Increase Row Span
   Decrease Row Span
   Increase Column Span
   Decrease Column Span
   

B. Use the Layout Panel

1. Modify the Row Span or the Column Span values.

Layout Notes

To really get something to fill up the grid and span rows or columns in the way you want, you may need to modify other layout parameters of the node or it's grid constraints in the layout panel. For example a Button won't normally grow beyond it's preferred size, so set it's max height and width to MAX_VALUE. Another example is to have a Label centered across two columns, set its Hgrow to ALWAYS and its Halignment to CENTER.

Sample Screenshot

There are menu items for setting the Row and Column Span and there are also layout text fields for the same on the far right. Unfortunately, StackOverflow compresses the pic and makes it a little blurry.

Sample FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <GridPane layoutX="116.0" layoutY="155.0">
      <children>
        <Button maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button" GridPane.columnIndex="0" GridPane.columnSpan="2147483647" GridPane.hgrow="ALWAYS" GridPane.rowIndex="1" GridPane.vgrow="ALWAYS" />
        <Label text="Label" GridPane.columnIndex="0" GridPane.rowIndex="0" />
        <Label maxWidth="-1.0" text="Label" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.halignment="CENTER" GridPane.hgrow="ALWAYS" GridPane.rowIndex="0" />
        <Label text="Label" GridPane.columnIndex="0" GridPane.rowIndex="2" />
        <Label text="Label" GridPane.columnIndex="1" GridPane.rowIndex="2" GridPane.rowSpan="2" />
        <Label text="Label" GridPane.columnIndex="2" GridPane.rowIndex="2" />
        <Label text="Label" GridPane.columnIndex="2" GridPane.rowIndex="3" />
      </children>
      <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
      </columnConstraints>
      <rowConstraints>
        <RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
      </rowConstraints>
    </GridPane>
  </children>
</AnchorPane>