javafx 8 : How to update TreeCell in TreeView on SlectedItemProperty Change

Question

我有一个带有服装 TreeCell 的 TreeView 。树单元是定制的，如下图所示。

在右侧，我选择了“一个树单元”或“树”项目。正如您所看到的，每个单元格的左侧都有手的 ImageView 。默认情况下它是黑色的，但我想用白色图标替换它。如上面的模型所示。

我怎样才能做到这一点？？？

我希望选择的所有文本和 ImageView 图标都更改为白色。最后选择的树单元恢复为正常的黑色。

我的树单元代码如下。

private final class AlertTreeCell extends TreeCell<AlertListItem> {

    private Node cell;
    private Rectangle rectSeverity;
    private Label mIncedentname;
    private Label mAlertTitle;
    private Label mSentTime;
    private Label mSender;
    private ImageView ivCategory;
    public AlertTreeCell() {

        FXMLLoader fxmlLoader = new FXMLLoader(
                MainController.class
                        .getResource("/fxml/alert_list_item.fxml"));
        try {
            cell = (Node) fxmlLoader.load();
            rectSeverity = (Rectangle) cell.lookup("#rectSeverity");
            mIncedentname = (Label) cell.lookup("#lblIncidentName");
            mAlertTitle = (Label) cell.lookup("#lblAlertTitle");
            mSentTime = (Label) cell.lookup("#lblSentTime");
            mSender = (Label) cell.lookup("#lblSender");
            ivCategory = (ImageView) cell.lookup("#ivCategory");
        } catch (IOException ex) {
            mLogger.error(ex.getLocalizedMessage(),ex);
        }           
    }

    @Override
    public void updateItem(AlertListItem item, boolean empty) {
        super.updateItem(item, empty);
        if (empty) {
            setText(null);
            setGraphic(null);
        } else {
            setText(null);
             mAlertTitle.setText(item.getEvent());
             mIncedentname.setText(item.getHeadline());                                   
             mSentTime.setText(MyUtils.getListDateFormattedString(item.getReceivedTime()));
             mSender.setText(item.getSenderName());
             Image image = new Image("/images/ic_cat_" + item.getCategoryIcon().toLowerCase() + "_black.png");
             if(image != null){
                ivCategory.setImage(image);
             }
             if(item.getSeverity() != null){
                 String severityColor = item.getSeverity().toString();
                 String severityColorCode = null;
                 if(severityColor != null) {
                     SeverityColorHelper severityColorHelper = new SeverityColorHelper();
                     severityColorCode = severityColorHelper.getColorBySeverity(AlertInfo.Severity.fromValue(severityColor));
                 }
                 rectSeverity.setFill(Color.web(severityColorCode,1.0) );
             }
             final AlertTreeCell this$=this;
             setOnMouseClicked(new EventHandler<MouseEvent>() {
                @Override
                public void handle(MouseEvent event) {
                     if(event.getClickCount()==1){                                
                            Node cell$ = this$.getGraphic();
                            ImageView ivCategory$ = (ImageView) cell.lookup("#ivCategory");
                            Image image = new Image("/images/ic_cat_" + item.getCategoryIcon().toLowerCase() + "_white.png");
                            if(image != null){
                                ivCategory$.setImage(image);
                            }                                                           
                     }

                }
             });
             this$.
             setGraphic(cell);

        }
    }
}

问题是正确选择并添加了新的白色图标，但如何将最后选定的树项目的 ImageView 改回黑色图标。实际上我有两张相同类型的彩色图像。一张是黑色的，同一张图像是白色的。选择时，我希望图像和文本更改为白色，所有其他树项更改为黑色文本和黑色图标。

Answer 1

我不太确定鼠标处理程序是否应该更改选择时的图标:如果是，请将其删除。不要使用鼠标处理程序来检测选择(例如，如果用户使用键盘在树中导航怎么办？)。

在构造函数中，向 selectedProperty 添加监听器，并相应地更改项目:

public AlertTreeCell() {

    FXMLLoader fxmlLoader = new FXMLLoader(
            MainController.class
                    .getResource("/fxml/alert_list_item.fxml"));
    try {
        cell = (Node) fxmlLoader.load();
        rectSeverity = (Rectangle) cell.lookup("#rectSeverity");
        mIncedentname = (Label) cell.lookup("#lblIncidentName");
        mAlertTitle = (Label) cell.lookup("#lblAlertTitle");
        mSentTime = (Label) cell.lookup("#lblSentTime");
        mSender = (Label) cell.lookup("#lblSender");
        ivCategory = (ImageView) cell.lookup("#ivCategory");

        this.selectedProperty().addListener((obs, wasSelected, isNowSelected) -> {
            String col ;
            if (isNowSelected) {
                col = "_black.png" ;
            } else {
                col = "_white.png" ;
            }
            if (getItem() != null) {
                Image img = new Image("/images/ic_cat_" + item.getCategoryIcon().toLowerCase() + col);
                ivCategory.setImage(img);
            }
        });

    } catch (IOException ex) {
        mLogger.error(ex.getLocalizedMessage(),ex);
    }           
}

在 updateItem(...) 方法中，只需检查 isSelected() 并相应地设置图像，但无需监听器。