javafx 8：如何在SlectedItemProperty更改時更新TreeView中的TreeCell

Question

我有服裝TreeCell的樹視圖。 樹單元是自定義的，看起來像下面的圖像。

在右側，我選擇了一個樹單元格或樹項。 如您所見，每個單元格的左側都有手的圖像視圖。 默認情況下它是黑色的，但是我想用白色圖標代替它。 如上面的模擬。

我怎樣才能做到這一點？

我希望所有選中的文本和圖像視圖圖標都變為白色。 最后選擇的樹單元恢復為正常的黑色。

我的樹單元代碼如下。

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);

        }
    }
}

問題是正確選擇並添加了新的白色圖標，但是如何將最后選擇的樹項目的圖像視圖改回黑色圖標。 實際上我有兩個相同類型的彩色圖像。 一個是黑色，同一張圖片是白色。 在選擇時，我希望將圖像和文本更改為白色，並將所有其他樹項目更改為黑色文本和黑色圖標。

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()並在此處相應地設置圖像，但沒有偵聽器。