JavaFX需要多个ImageView节点而不是一个引用？

Question

Note: Some of the code in here is not how I would do it in practice, but is just for demonstration. We'll assume resources are always present and no errors are thrown.

In a quest to get images to display in a TableView, I got a prototype working from a testing POJO in a test MVC application like so:

public Data(String name) {
    this.nameProperty = new SimpleStringProperty(name);
    this.imageProperty = new SimpleObjectProperty<ImageView>(new ImageView(new Image(Data.class.getResourceAsStream("img.png"))));
}

Obviously this is not efficient because every single cell will need to stream the resource, make an object...etc. Therefore I figured the next logical option was to move this out and make it a static object that is invoked only once.

private static final Image img = new Image(Data.class.getResourceAsStream("img.png"));

public Data(String name) {
    this.nameProperty = new SimpleStringProperty(name);
    this.imageProperty = new SimpleObjectProperty<ImageView>(new ImageView(img));
}

Great! Still works and I only had to read the image once. The image loads into the cells as well and all is great. I am still creating a ton of ImageView objects, so I try to move it outside as well.

private static final Image img = new Image(Data.class.getResourceAsStream("img.png"));

private static final ImageView imgView = new ImageView(img); // Assume loaded 2nd and properly always

public Data(String name) {
    this.nameProperty = new SimpleStringProperty(name);
    this.imageProperty = new SimpleObjectProperty<ImageView>(imgView);
}

The above is where it stops working as I expected it to. Out of all the cells, only the last cell has the image now and the preceding ones are empty . I don't understand why.

• Is an ImageView node supposed to be referenced only once? Why can't I have the node referenced in multiple cells?

• Is there some optimization under the hood that only renders a node once?

• Is there a way for me to do this with only making one ImageView object?

• Would using the SimpleObjectProperty have any effect on why I need multiple instantiations of an ImageView for the same Image?

I'd rather only instantiate one object, especially since my application only needs to just put a single static image into a cell (it will not be changed).

Answer 1

A Node can only appear once in the scene graph. From the Javadocs :

A node may occur at most once anywhere in the scene graph. Specifically, a node must appear no more than once in all of the following: as the root node of a Scene, the children ObservableList of a Parent, or as the clip of a Node.

Usually, almost all the memory consumption of an ImageView is down to the Image ; so if you share the same image among all the image views, you will be making things pretty efficient.

Moreover, in general, different cells may be different sizes, or have different CSS applied to them, so sharing a single ImageView among all the cells simply wouldn't work. (And what would you expect imgView.getParent() to return if it were displayed in multiple cells?)

You should instantiate one ImageView for each cell you create (not one for each item in the table). You can then share the image among all the ImageView s. Relatively few cells are created - they are reused as needed to display different items.

So where I think your problem is actually coming from is that you're putting the ImageView into the model (the Data class), instead of keeping it in the view (the cell).

I would do something like:

public class Data {
    private final StringProperty name ;
    public Data(String name) {
        this.name = new SimpleStringProperty(name);
    }
    // getName/setName/nameProperty methods....
}

You haven't shown in the question how you are using the image, but you would do something like this:

final Image img = new Image(Data.class.getResourceAsStream("img.png"));

// ...

TableView<Data> table = new TableView<>();
TableColumn<Data, String> column = new TableColumn<>("Name");
column.setCellValueFactory(cellData -> cellData.getValue().nameProperty());

column.setCellFactory(col -> new TableCell<Data, String>() {
    private final ImageView imageView = new ImageView(img);

    @Override
    public void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);
        if (empty) {
            setText(null);
            setGraphic(null);
        } else {
            setText(item);
            setGraphic(imageView);
        }
    }
});

This solution creates just one Image , and just one ImageView for each cell, instead of the working version you have that creates an ImageView for every value in the table's items list.