JavaFX - GridPaneの中をクリックするとTextFieldではなくPaneが表示されます

Question

私はJavaFXで数独ゲームを作ろうとしています。 GridPaneとTextFieldを使って9x9グリッドを作った。

ここで、ユーザーがその内部をクリックすると、TextFieldの背景色を変更します。すべてがうまくいることを確認するために、私はMouseEventのターゲットをプルニングしています。

私の問題は、TextFieldの中央をクリックするとターゲットがペインになり、他の場所をクリックするとターゲットが私のGridPaneになり、背景色が変わってしまうということです。

どうすればよいですか？私はそれを行う方法を理解することはできません！

public class SudokuGrid { 

public static final int GRID_SIZE = 9; 

private TextField[][] sudokuCells; 
private GridPane sudokuGrid; 

public SudokuGrid() { 
    sudokuCells = new TextField[GRID_SIZE][GRID_SIZE]; 
    createSudokuGrid(); 
    for (int row = 0; row < GRID_SIZE; row++) { 
     for(int col = 0; col < GRID_SIZE; col++) { 
      sudokuCells[row][col] = new TextField() { 
        @Override 
        public void replaceText(int start, int end, String text) { 
         // If the replaced text would end up being invalid, then simply 
         // ignore this call! 
         if (text.matches("[1-9]|\\s")) { 
          super.setText(text); 
         } 
        } 
       }; 
      sudokuCells[row][col].setPrefSize(60, 60); 
      sudokuCells[row][col].setStyle("-fx-background-color: yellow;"); 
      sudokuGrid.add(sudokuCells[row][col], col, row); 
      sudokuGrid.addEventFilter(MouseEvent.MOUSE_PRESSED, new EventHandler<MouseEvent>() { 
       @Override 
       public void handle(MouseEvent e) { 
        Object source = e.getTarget(); 
        System.out.println(source); 
        if(source instanceof TextField) { 
         ((TextField) source).setStyle("-fx-background-color: green;"); 
        } 
       } 
       }); 
     } 
    } 
    sudokuGrid.setPrefSize(270, 270); // 30 * 9 
    sudokuGrid.setGridLinesVisible(true); 
} 

private void createSudokuGrid() { 
    sudokuGrid = new GridPane(); 
    for (int i = 0; i < GRID_SIZE; i++) { 
     RowConstraints rc = new RowConstraints(); 
     rc.setVgrow(Priority.ALWAYS) ; // allow row to grow 
     rc.setFillHeight(true); // ask nodes to fill height for row 
     // other settings as needed... 
     sudokuGrid.getRowConstraints().add(rc); 

     ColumnConstraints cc = new ColumnConstraints(); 
     cc.setHgrow(Priority.ALWAYS) ; // allow column to grow 
     cc.setFillWidth(true); // ask nodes to fill space for column 
     // other settings as needed... 
     sudokuGrid.getColumnConstraints().add(cc); 
    } 

} 

Answer 1

イベントのsourceを使用すると、イベントフィルタを設定しているオブジェクトです。すなわち、この場合、それはsudokuGridである。あなたのハンドラ内の条件

if (source instanceof TextField) 

は、唯一可能なソースがsudokuGridであるため、決して真ではありません。

テキストフィールドの背景色を変更したい場合は、テキストフィールド自体にイベントフィルタを追加することができます。

TextField sudokuCell = sudokuCells[row][col]; 
sudokuCell.addEventFilter(MouseEvent.MOUSE_PRESSED, e -> 
    sudokuCell.setStyle("-fx-background-color: green;")); 

良いが、まだテキストフィールドの集中性質の変化に対応することです

TextField sudokuCell = sudokuCells[row][col]; 
sudokuCell.focusedProperty().addListener((obs, wasFocused, isNowFocused) -> { 
    if (isNowFocused) { 
     sudokuCell.setStyle("-fx-background-color: green;"); 
    } else { 
     sudokuCell.setStyle(""); 
    } 
}); 

をさらに良いだけでこれを行うために、外部CSSファイルを使用することです：（ユーザーが別のテキストフィールドに移動するには、Tabキーを使用している場合、背景を変更しませんマウスリスナーを使用しているため）

数独-grid.css：グリッドを使用してJavaコードの仲間で

.text-field:focused { 
    -fx-background-color: green ; 
} 

、その後、CSSファイル：

sudokuGrid.getStyleSheets().add("sudoku-grid.css"); 

と完全にハンドラを削除します。