Javafx更新对象属性上的ListCell

Question

I'm trying to update the style class of a List Cell depending on a field that can be edited in another panel.

I tried the following but after editing the filed it changes the style but as well it changes the style of other ListCells on the list.

private ListView<ProviderProduct> importProductsListView  = //Set items in list
importProductsListView.setCellFactory(
    new Callback<ListView<ProviderProduct>, ListCell<ProviderProduct>>() {
        public ListCell<ProviderProduct> call(ListView<ProviderProduct> param) {
            final ListCell<ProviderProduct> cell = new ListCell<ProviderProduct>(){

                public void updateItem(ProviderProduct providerProduct, boolean empty){
                    super.updateItem(providerProduct, empty);

                        if(!empty) {
                            setText(providerProduct.toString());

                            if(providerProduct.hasPriceWarning()){
                                getStyleClass().add(Consts.CSS_ALERT);
                            }else{
                                getStyleClass().remove(Consts.CSS_ALERT);
                            }

                            providerProduct.priceListinoProperty().addListener(
                                new ChangeListener<BigDecimal>() {
                                    @Override
                                    public void changed(ObservableValue<? extends BigDecimal> observable,BigDecimal oldValue, BigDecimal newValue) {

                                        if(providerProduct.hasPriceWarning()){
                                            if(!getStyleClass().contains(Consts.CSS_ALERT)){
                                                getStyleClass().add(Consts.CSS_ALERT);
                                            }
                                        }else{
                                            getStyleClass().removeAll(Collections.singleton(Consts.CSS_ALERT));
                                        }
                                    }
                                });
                        }else{ 
                            setText("");
                            getStyleClass().remove(Consts.CSS_ALERT);
                        }
                   }
            };
            return cell;
        }
});

Answer 1

There are two issues with your code that I can see:

First, the styleClass is represented by a List , which can of course hold duplicate entries. So if you are unlucky enough that the cell is reused from one item with a warning to another item with a warning, you will end up with the style class being added twice. The remove(...) method then only removes one copy, so as you scroll through your list you will start to see inconsistent behavior.

If you are stuck with JavaFX 2.2, you need to do the following:

if(providerProduct.hasPriceWarning() & ! getStyleClass().contains(Consts.CSS_ALERT){
    getStyleClass().add(Consts.CSS_ALERT);
}else{
    getStyleClass().remove(Consts.CSS_ALERT);
}

If you really want to bullet-proof it, the way to ensure you remove all occurrences is to use the following in place of your call to remove(...) :

getStyleClass().removeAll(Collections.singleton(CSS_ALERT));

If you can use JavaFX 8 (ie Java 8) you should probably consider using a `PseudoClass' instead, which is much easier, and allegedly more efficient. (Plus, using lambdas in place of all those anonymous inner classes will make your code much more manageable.)

Second, whenever the cell is updated, you register a listener with the appropriate property on the item. So when the cell is reused to represent a new item (for example, as the user scrolls through the list), it will be listening to properties from multiple items. You need to arrange to remove the listener as needed.

I prefer to approach this by creating a default ListCell and observing its itemProperty() , as this gives you clean access to the old item as well as the new one when it changes. So you can do something like this:

importProductsListView.setCellFactory(
    new Callback<ListView<ProviderProduct>, ListCell<ProviderProduct>>() {
        public ListCell<ProviderProduct> call(ListView<ProviderProduct> param) {
            final ListCell<ProviderProduct> cell = new ListCell<ProviderProduct>();

            final ChangeListener<BigDecimal> priceListener = new ChangeListener<BigDecimal>() {
                @Override
                public void changed(ObservableValue<? extends BigDecimal> observable,BigDecimal oldValue, BigDecimal newValue) {

                     if(providerProduct.hasPriceWarning()){
                         if(!getStyleClass().contains(Consts.CSS_ALERT)){
                              getStyleClass().add(Consts.CSS_ALERT);
                         }
                     }else{
                         getStyleClass().removeAll(Collections.singleton(Consts.CSS_ALERT));
                     }
                }
            });

            cell.itemProperty().addListener(new ChangeListener<ProviderProduct>() {
                @Override
                public void changed(ObservableValue<? extends ProviderProduct> obs, ProviderProduct oldProduct, ProviderProduct newProduct) {
                    if (oldProduct != null) {
                        oldProduct.priceListinoProperty().removeListener(priceListener);
                    }
                    if (newProduct == null) {
                        cell.setText(null);
                        cell.getStyleClass().removeAll(Collections.singleton(Consts.CSS_ALERT);
                    } else {
                        cell.setText(newProduct.toString());
                        if (newProduct.hasPriceWarning()) {
                            if (! cell.getStyleClass().contains(Consts.CSS_ALERT)) {
                                cell.getStyleClass().add(Consts.CSS_ALERT);
                            }
                        } else {
                            cell.getStyleClass().removeAll(Collections.singleton(Consts.CSS_ALERT));
                        }
                        newProduct.priceListinoProperty().addListener(priceListener);
                    }
                }
            });

            return cell ;
         }
});