Baxtex Baxtex - 5 months ago 34
Java Question

Java FX how to span rows?

So I'm totalty new to using Java FX though I have worked with Android Studio before so there are some similarities. I'm having some trouble making elements span serveral columns though. I've seen some threads were people hav spanned it programaticly in Javam, but I don't create any grids with java, only in the fxml file. Here is the fxml code for a simple calculator I'm doing:

<GridPane fx:controller="sample.Controller"
xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"
>

<GridPane GridPane.columnIndex="0" GridPane.rowIndex="0" >
<TextField fx:id="display" id="displayCSS" GridPane.columnSpan="3" ></TextField>
</GridPane>

<GridPane GridPane.columnIndex="0" GridPane.rowIndex="1">
<Button text="+" GridPane.rowIndex="1" GridPane.columnIndex="0" fx:id="btnadd" onAction="#btnAdd" />
<Button text="-" GridPane.rowIndex="1" GridPane.columnIndex="1" fx:id="btnSub" onAction="#btnSub" />
<Button text="/" GridPane.rowIndex="2" GridPane.columnIndex="0" fx:id="btnDiv" onAction="#btnDiv" />
<Button text="*" GridPane.rowIndex="2" GridPane.columnIndex="1" fx:id="btnMult" onAction="#btnMulti" />
<Button text="Del" GridPane.rowIndex="3" GridPane.columnIndex="0" fx:id="btnDel" onAction="#btnDel" />
<Button text="CA" GridPane.rowIndex="3" GridPane.columnIndex="1" fx:id="btnCA" onAction="#btnCA" />
<Button text="=" GridPane.rowIndex="4" GridPane.columnIndex="0" fx:id="btnEqual" id="equals" onAction="#btnEqual" />
</GridPane>

<GridPane GridPane.columnIndex="1" GridPane.rowIndex="1">
<Button text="9" GridPane.columnIndex="2" GridPane.rowIndex="1" onAction="#btn9" />
<Button text="8" GridPane.columnIndex="1" GridPane.rowIndex="1" onAction="#btn8"/>
<Button text="7" GridPane.columnIndex="0" GridPane.rowIndex="1" onAction="#btn7" />
<Button text="6" GridPane.columnIndex="2" GridPane.rowIndex="2" onAction="#btn6" />
<Button text="5" GridPane.columnIndex="1" GridPane.rowIndex="2" onAction="#btn5" />
<Button text="4" GridPane.columnIndex="0" GridPane.rowIndex="2" onAction="#btn4"/>
<Button text="3" GridPane.columnIndex="2" GridPane.rowIndex="3" onAction="#btn3"/>
<Button text="2" GridPane.columnIndex="1" GridPane.rowIndex="3" onAction="#btn2"/>
<Button text="1" GridPane.columnIndex="0" GridPane.rowIndex="3" onAction="#btn1"/>
<Button text="0" GridPane.columnIndex="1" GridPane.rowIndex="4" onAction="#btn0" GridPane.columnSpan="50" />
</GridPane>
</GridPane>


My app

I want the = and 0 button to to span 2 and 3 columns so they also become wider.

Answer

You can do

    <Button text="="  GridPane.rowIndex="4" GridPane.columnIndex="0" 
          GridPane.columnSpan="2" fx:id="btnEqual" id="equals" 
          onAction="#btnEqual" GridPane.fillWidth="true" maxWidth="Infinity" />

and

    <Button text="0" GridPane.columnIndex="0" GridPane.rowIndex="4" 
        onAction="#btn0" GridPane.columnSpan="3" GridPane.fillWidth="true" 
        maxWidth="Infinity" />
Comments