使用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和上面链接的表教程对此进行了讨论。