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

Question

I have a tree-view with costume TreeCell. tree cell is customized and it looks like below image.

On Right Side I selected the One Tree Cell or Tree item. as you can see there is image-view of hand on left side of each cell. By default it is in black color but i want to replace it with white color icon. as in above mock up.

How can i achieve this????

I want all text and image view icon on selection changed to white color. and last selected tree cell back to normal black color.

My Tree Cell Code is below.

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

        }
    }
}

problem is that new white icon properly selected and added but how to change back the last selected tree item's image view back to black color icon. actually I have two color images of same type. one is in black color and same image in white color. on selection i want the image and text changed to white colored and all other tree-items in to black color text and black color icon.

Answer 1

I'm not quite sure if the mouse handler is supposed to be changing the icon on selection: if so remove it. Don't use mouse handlers for detecting selection (what if the user navigates through the tree using the keyboard, for example?).

In your constructor, add a listener to the selectedProperty , and change the item accordingly:

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

In the updateItem(...) method, just check isSelected() and set the image accordingly there, but without the listener.