使用FXML（JavaFX）的帶有按鈕的表

Question

我正在學習JavaFX和FXML。 我正在使用Oracle網站上的教程。

特別是，我正在使用FXML通訊簿的Oracle示例作為起點來開發應用程序（ https://docs.oracle.com/javafx/2/fxml_get_started/fxml_tutorial_intermediate.htm#CACFEHBI ）。 我現在想做的是添加一列帶有與電話簿中每個條目相關聯的按鈕的按鈕。 例如，單擊一個按鈕會在另一個表上顯示有關該名稱條目的更多數據。 我想使用FXML做到這一點。 在網絡上搜索時，我發現了一些有關如何創建按鈕列的資源，但是它們看上去有點令人困惑，並且似乎他們沒有使用FXML，這正是我所需要的。

有人可以建議我一些教程或提示嗎？

編輯：我按照本教程（ https://docs.oracle.com/javafx/2/fxml_get_started/fxml_tutorial_intermediate.htm#CACFEHBI ）開始工作。 我要做的部分工作在此處進行了描述： JavaFX表-如何添加組件？ 。 但是，此示例未使用fxml。 我正在嘗試混合代碼。 因此，我有一個fxml文件（取自上面鏈接的oracle教程），用這種方法在其中聲明了表：

    <TableView fx:id="tableView" GridPane.columnIndex="0" 
    GridPane.rowIndex="0">
    <columns>
        <TableColumn fx:id="Names_column" text="Table" prefWidth="100">
            <cellValueFactory><PropertyValueFactory property="name" />
            </cellValueFactory>
            <cellFactory>
                <FormattedTableCellFactory alignment="center">                        
                </FormattedTableCellFactory>
            </cellFactory>
        </TableColumn>

        <TableColumn text="Color" prefWidth="100">
            <cellValueFactory><PropertyValueFactory property="color" />
            </cellValueFactory>                
        </TableColumn>  

        <TableColumn text="Button" prefWidth="100">          
        </TableColumn>                                  
    </columns>

    <items>
        <FXCollections fx:factory="observableArrayList">
            <ColTab name="Table 1" color="1"   />  
            <ColTab name="Table 2" color="2"   />
            <ColTab name="Table 3" color"1"   />
        </FXCollections>
    </items>

</TableView>

然后，我看了另一個示例（ JavaFX表-如何添加組件？ ）。 在此示例中，一切都僅使用Java進行，但是出於我的目的，我需要使用fxml。 在我的.java主文件中，我這樣做：

       TableColumn<ColTab, ColTab> btnCol = new TableColumn<>("pulsanti");
   btnCol.setMinWidth(150);
   btnCol.setCellValueFactory(new Callback<CellDataFeatures<ColTab, ColTab>, ObservableValue<ColTab>>() {
      @Override public ObservableValue<ColTab> call(CellDataFeatures<ColTab, ColTab> features) {
          return new ReadOnlyObjectWrapper(features.getValue());     
      }
    });

    btnCol.setCellFactory(new Callback<TableColumn<ColTab, ColTab>, TableCell<ColTab, ColTab>>() {
      @Override public TableCell<ColTab, ColTab> call(TableColumn<ColTab, ColTab> btnCol) {
        return new TableCell<ColTab, ColTab>() {              
          final Button button = new Button(); {              
            button.setMinWidth(130);
          }
          @Override public void updateItem(final ColTab ColTab, boolean empty) {
            super.updateItem(ColTab, empty);
            if (ColTab != null) {
                  button.setText("Do something");

              button.setOnAction(new EventHandler<ActionEvent>() {
                @Override public void handle(ActionEvent event) {
                  //do something
                }
              });
            }
          }
        };
      }
    });

    //table.getColumns().addAll(firstNameCol, lastNameCol, emailCol, btnCol);

這段代碼是從我鏈接的第二個示例復制而來的，實際上對我來說不太清楚。 我看到的是它將創建一個新列並設置一些屬性。 代碼的最后一行（注釋掉）將此列和其他一些列添加到表中，該表先前已在原始.java文件中聲明，但由於我已經在fxml文件中聲明了該表，所以未聲明。 現在，我正在尋找一種方法，以將在.java文件中定義的此列集成到在.fxml文件中聲明的表中。 我知道我說的話看起來很凌亂，但是我對JavaFX和fxml確實很陌生，並不是所有細節都對我很清楚。

Edit2：我的控制器代碼如下所示：

public class FXMLDocumentController implements Initializable {

@FXML
private TableView<ColTab> tableView;    
tableView.getColumns().add(btnCol); 


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

}

現在我收到一個錯誤消息：

包tableView不存在

預期的標識符

';' 預期

我使用Netbeasn作為ide。

Answer 1

您可以將復制的代碼放入控制器的initialize方法中。 您已經在表上定義了fx:id=tableView屬性，所以我認為您已經

@FXML
private TableView<ColTab> tableView ;

在控制器中。 只需添加額外的列到表視圖中

tableView.getColumns().add(btnCol);

要了解如何配置此列，您需要了解表中顯示的數據與數據 視圖 （即，向用戶呈現數據）之間存在分隔。 在JavaFX中，對於復雜的UI控件（例如表，樹和列表），數據視圖由單元格表示。 您設置列的單元格工廠告訴JavaFX的如何創建一個TableCell從單元格中顯示的數據-這是本質上創建了一個函數TableCell需要時秒。 首次創建單元格時以及數據更改時，將調用該單元格的updateItem(..)方法。

您的updateItem(...)方法中的邏輯不太正確。 首先，您需要通過調用單元格的setGraphic(...)方法在單元格中實際顯示按鈕。 其次，您確實需要處理單元格為空（即項目為null）的情況。 所以我會做這樣的事情：

btnCol.setCellFactory(new Callback<TableColumn<ColTab, ColTab>, TableCell<ColTab, ColTab>>() {
  @Override public TableCell<ColTab, ColTab> call(TableColumn<ColTab, ColTab> btnCol) {
    final Button button = new Button();
    button.setMinWidth(130);
    TableCell<ColTab, ColTab> cell = new TableCell<ColTab, ColTab>() {              
      @Override public void updateItem(final ColTab ColTab, boolean empty) {
        super.updateItem(ColTab, empty);
        if (ColTab == null) {
            setGraphic(null);
        } else {
            button.setText("Do something");
            setGraphic(button);
        }

      }
    };

    button.setOnAction(new EventHandler<ActionEvent>() {
        @Override public void handle(ActionEvent event) {
          ColTab currentItem = cell.getItem();
          //do something with current item...
        }
    });

    return cell ;
  }
});

您可以在Cell Javadocs和TableView Javadocs中閱讀一般有關單元機制的更多信息。 ListView和TableView的教程也可能會有所幫助。

單元格的值工廠告訴表格如何讓數據從該行的數據中的特定細胞。 在這種情況下，這有點微妙。 該按鈕取決於整個行的數據（因為它將在其動作處理程序中需要這些數據），因此它僅返回圍繞行數據對象的包裝器。 TableColumn Javadocs和上面鏈接的表教程對此進行了討論。