Create and bind DoubleProperty in user control with FXML - javafx

Question

I create a user control that represents a NumPad keyboard. The width and height of the individual buttons I want to be realized as DoubleProperty so it can be configured later.
The problem I'm encountering is that I can not bind the property to the prefWidth and prefHeight of the GridPane columns and rows in the FXML file. The only way I manage to do this is by making the connection in the control controller. But I want to avoid it if possible.
This is the problematic FXML file.
<fx:root type="javafx.scene.layout.GridPane" xmlns="http://javafx.com/javafx/" xmlns:fx="http://javafx.com/fxml/1">
<fx:define>
<SimpleDoubleProperty fx:id="size">
<value>
<Double fx:value="50"/>
</value>
</SimpleDoubleProperty>
</fx:define>
<gridLinesVisible>false</gridLinesVisible>
<hgap>5</hgap>
<vgap>5</vgap>
<Button text="C" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="0" GridPane.rowIndex="0" focusTraversable="false"/>
<Button text="Backspace" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="2" GridPane.rowIndex="0" GridPane.columnSpan="2" focusTraversable="false"/>
<Button text="7" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="0" GridPane.rowIndex="1" focusTraversable="false"/>
<Button text="8" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="1" GridPane.rowIndex="1" focusTraversable="false"/>
<Button text="9" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="2" GridPane.rowIndex="1" focusTraversable="false"/>
<Button text="4" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="0" GridPane.rowIndex="2" focusTraversable="false"/>
<Button text="5" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="1" GridPane.rowIndex="2" focusTraversable="false"/>
<Button text="6" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="2" GridPane.rowIndex="2" focusTraversable="false"/>
<Button text="1" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="0" GridPane.rowIndex="3" focusTraversable="false"/>
<Button text="2" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="1" GridPane.rowIndex="3" focusTraversable="false"/>
<Button text="3" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="2" GridPane.rowIndex="3" focusTraversable="false"/>
<Button text="0" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="0" GridPane.rowIndex="4" GridPane.columnSpan="2" focusTraversable="false"/>
<Button text="." maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="2" GridPane.rowIndex="4" focusTraversable="false"/>
<Button text="E" onAction="#f" maxWidth="Infinity" maxHeight="Infinity" GridPane.columnIndex="3" GridPane.rowIndex="2" GridPane.rowSpan="3" focusTraversable="false"/>
<columnConstraints>
<ColumnConstraints fx:id="col1" prefWidth="${size.value}"/>
<ColumnConstraints fx:id="col2" prefWidth="${size.value}"/>
<ColumnConstraints fx:id="col3" prefWidth="${size.value}"/>
<ColumnConstraints fx:id="col4" prefWidth="${size.value}"/>
</columnConstraints>
<rowConstraints>
<RowConstraints fx:id="row1" prefHeight="${size.value}"/>
<RowConstraints fx:id="row2" prefHeight="${size.value}"/>
<RowConstraints fx:id="row3" prefHeight="${size.value}"/>
<RowConstraints fx:id="row4" prefHeight="${size.value}"/>
<RowConstraints fx:id="row5" prefHeight="${size.value}"/>
</rowConstraints>
</fx:root>
${size.value} initializes the control correctly, but there is no bind between size and ColumnConstraints#prefWidthProperty / RowConstraints#prefHeightProperty.
If I do the binding manually, everything works. But as I said, I want to avoid it if possible.
#FXML
private void initialize() {
col1.prefWidthProperty().bind(size);
// ...
row1.prefHeightProperty().bind(size);
// ...
}
if I use ${size} I get NumberFormatException: For input string: "DoubleProperty [value: 50.0]"

Answer 1

Direct access to properties does not seem possible via expression binding.
If you provide access to the property through the controller however, you could use ${controller.size} instead to create the binding:
#FXML
private DoubleProperty size;
public final double getSize() {
return size.get();
}
public final void setSize(double value) {
size.set(value);
}
public final DoubleProperty sizeProperty() {
return size;
}
...
<columnConstraints>
<ColumnConstraints fx:id="col1" prefWidth="${controller.size}"/>
<ColumnConstraints fx:id="col2" prefWidth="${controller.size}"/>
<ColumnConstraints fx:id="col3" prefWidth="${controller.size}"/>
<ColumnConstraints fx:id="col4" prefWidth="${controller.size}"/>
</columnConstraints>
<rowConstraints>
<RowConstraints fx:id="row1" prefHeight="${controller.size}"/>
<RowConstraints fx:id="row2" prefHeight="${controller.size}"/>
<RowConstraints fx:id="row3" prefHeight="${controller.size}"/>
<RowConstraints fx:id="row4" prefHeight="${controller.size}"/>
<RowConstraints fx:id="row5" prefHeight="${controller.size}"/>
</rowConstraints>
...