JavaFX - Multiple Grid Panes - Only One is connect

Question

In my JavaFX program I have multiple grid panes. The FXML code I have is here.

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

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

<AnchorPane id="AnchorPane" prefHeight="553.0" prefWidth="586.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="pkg3dtictactoe.FXMLDocumentController">
    <children>
      <VBox prefHeight="489.0" prefWidth="586.0">
         <children>
            <MenuBar>
              <menus>
                <Menu mnemonicParsing="false" text="File">
                  <items>
                        <MenuItem id="NewGame" mnemonicParsing="false" onAction="#handleNewGameAction" text="New Game" />
                        <MenuItem id="SaveGame" mnemonicParsing="false" onAction="#handleSaveGameAction" text="Save Game" />
                    <MenuItem id="Quit" mnemonicParsing="false" onAction="#handleQuitGameAction" text="Quit" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Help">
                  <items>
                    <MenuItem mnemonicParsing="false" text="About" />
                  </items>
                </Menu>
              </menus>
            </MenuBar>
            <GridPane fx:id="topGrid" alignment="CENTER" gridLinesVisible="true" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" onMouseClicked="#topGridClicked" prefHeight="175.0" prefWidth="175.0" rotate="-73.0" style="-fx-background-color: #FFFFFF;" VBox.vgrow="NEVER">
               <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 minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
               </rowConstraints>
               <rotationAxis>
                  <Point3D x="1.0" y="1.0" z="1.0" />
               </rotationAxis>
               <VBox.margin>
                  <Insets left="200.0" top="50.0" />
               </VBox.margin>
            </GridPane>
            <GridPane fx:id="middleGrid" gridLinesVisible="true" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" onMouseClicked="#middleGridClicked" prefHeight="175.0" prefWidth="175.0" rotate="-73.0" style="-fx-background-color: #FFFFFF;" VBox.vgrow="NEVER">
              <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 minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
              </rowConstraints>
               <rotationAxis>
                  <Point3D x="1.0" y="1.0" z="1.0" />
               </rotationAxis>
               <VBox.margin>
                  <Insets left="200.0" top="-45.0" />
               </VBox.margin>
            </GridPane>
            <GridPane fx:id="lowerGrid" gridLinesVisible="true" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" onMouseClicked="#lowerGridClicked" prefHeight="175.0" prefWidth="175.0" rotate="-73.0" style="-fx-background-color: #FFFFFF;" VBox.vgrow="NEVER">
               <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 minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                  <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
               </rowConstraints>
               <rotationAxis>
                  <Point3D x="1.0" y="1.0" z="1.0" />
               </rotationAxis>
               <VBox.margin>
                  <Insets left="200.0" top="-40.0" />
               </VBox.margin>
            </GridPane>
            <Label prefHeight="17.0" prefWidth="588.0" />
         </children>
      </VBox>
      <Line endX="172.0" endY="410.0" startX="172.0" startY="145.0" style="-fx-opacity: .2;" />
      <Line endX="403.0" endY="447.0" startX="403.0" startY="182.0" style="-fx-opacity: .2;" />
      <Line endX="265.0" endY="353.0" startX="265.0" startY="89.0" style="-fx-opacity: .2;" />
      <Line endX="310.0" endY="500.0" startX="310.0" startY="235.0" style="-fx-opacity: .2;" />
    </children>
</AnchorPane>

The FXML Controller code is the following

package pkg3dtictactoe;

import java.io.IOException;
import java.net.URL;
import java.util.Iterator;
import java.util.ResourceBundle;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;

/**
 *
 */
public class FXMLDocumentController implements Initializable {

    @FXML
    private GridPane topGrid;
    private GridPane middleGrid;
    private GridPane lowerGrid;
    private Image imageX = null;
    private Image imageO = null;
    private Image imageEmpty = null;

    public FXMLDocumentController(){

        imageEmpty = new Image("resources/empty.png");
        imageX = new Image("resources/x.png");
        imageO = new Image("resources/0.png");       
    }

    @FXML
    private void handleButtonAction(ActionEvent event) {

    }

    @FXML
    private void handleNewGameAction(ActionEvent event) throws IOException {

        for(int i=0; i<3; i++){
            for(int j=0; j<3; j++){

                resetNode(topGrid, i, j);
                resetNode(middleGrid, i, j);
                resetNode(lowerGrid, i, j);
            }
        }
    }

    private void resetNode(GridPane grid, int i, int j) {

        Node node = getNodeByRowColumnIndex(j, i, grid);
        grid.getChildren().remove(node);
        grid.add(new ImageView(imageEmpty), j, i);        
    }

    public Node getNodeByRowColumnIndex(final int row,final int column,GridPane gridPane) {

        Node result = null;
        ObservableList<Node> childrens = gridPane.getChildren();
        for(Node node : childrens) {
            if(node instanceof ImageView && gridPane.getRowIndex(node) == row && gridPane.getColumnIndex(node) == column) {
                result = node;
                break;
            }
        }
        return result;
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }    
}

When I run debug into the constructor, topGrid has information, however middleGrid and lowerGrid do not. There doesn't appear to be anything special when it comes to topGrid and it matches the code for the other GridPanes. Is it not possible to have multiple grid panes in JavaFX?

Answer 1

@FXML annotations apply to the Object declared directly after them. You need to write the annotation multiple times on the lines above every component with an fx:id to connect them.