如何将图像添加到 JavaFx TableView 列中

How to add an Image into a JavaFx TableView column

提问by ILikeProgramming

I'm trying to find a way to add an image to a JavaFx TableView column that has data in other columns populated from a H2 database via hibernate. The TableView has been designed in JavaFx Scene Builder.

我试图找到一种方法将图像添加到 JavaFx TableView 列中，该列的其他列中的数据是通过休眠从 H2 数据库填充的。TableView 是在 JavaFx Scene Builder 中设计的。

This is what I've managed to put together so far:

到目前为止，这是我设法整理的内容：

The Controller Class:

控制器类：

public class HomeController implements Initializable {

    @FXML
    private TableView<NewBeautifulKiwi> KIWI_TABLE;

    @FXML
    private TableColumn<NewBeautifulKiwi, Image> KiwiId;

    @FXML
    private TableColumn<NewBeautifulKiwi, String> Kiwi;

    public ObservableList<NewBeautifulKiwi> data;

    // Initializes the controller class.
    @Override
    public void initialize(URL url, ResourceBundle rb) {

        KiwiId.setCellFactory(new Callback<TableColumn<NewBeautifulKiwi, Image>, TableCell<NewBeautifulKiwi, Image>>() {
            @Override
            public TableCell<NewBeautifulKiwi, Image> call(TableColumn<NewBeautifulKiwi, Image> param) {
                //Set up the ImageView
                final ImageView imageview = new ImageView();
                imageview.setFitHeight(50);
                imageview.setFitWidth(50);

                //Set up the Table
                TableCell<NewBeautifulKiwi, Image> cell = new TableCell<NewBeautifulKiwi, Image>() {
                    public void updateItem(NewBeautifulKiwi item, boolean empty) {
                        if (item != null) {
                            imageview.setImage("arrow.png");
                        }
                    }
                };

                // Attach the imageview to the cell
                cell.setGraphic(imageview);
                return cell;
            }

        });

        Kiwi.setCellValueFactory(new PropertyValueFactory<NewBeautifulKiwi, String>("Kiwi"));
        KIWI_TABLE.setItems(gobbledyGook());
    }

    private ObservableList<NewBeautifulKiwi> gobbledyGook() {
        data = FXCollections.observableArrayList();
        Session session = HibernateUtil.getSessionFactory().openSession();
        Transaction transaction = null;
        try {
            transaction = session.beginTransaction();
            List courses = session.createQuery("from KIWI_TABLE").list();
            for (Iterator iterator = courses.iterator(); iterator.hasNext();) {
                NewBeautifulKiwi course = (NewBeautifulKiwi) iterator.next();
                System.out.println(course.getKiwi());

                data.add(course);
            }
            transaction.commit();
        } catch (HibernateException e) {
            transaction.rollback();
            e.printStackTrace();
        } finally {
            session.close();
        }
        return data;
    }
}

I get an error at imageview.setImage("arrow.png");that says Incopatibletypes: String cannot be converted to Image.

我得到一个错误imageview.setImage("arrow.png");说Incopatibletypes: String cannot be converted to Image。

This is my very first time trying to add an image into a TableView.

这是我第一次尝试将图像添加到 TableView 中。

I've looked around since yesterday, but I now seem to be stuck. I was hoping for some help. I would really appreciate some help.

我从昨天开始环顾四周，但我现在似乎被卡住了。我希望得到一些帮助。我真的很感激一些帮助。

This is the class that creates the database pojos:

这是创建数据库 pojo 的类：

@Entity(name = "KIWI_TABLE")
public class NewBeautifulKiwi implements Serializable {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int KiwiId;
    private String Kiwi;

    public int getKiwiId() {
        return KiwiId;
    }

    public void setKiwiId(int KiwiId) {
        this.KiwiId = KiwiId;
    }

    public String getKiwi() {
        return Kiwi;
    }

    public void setKiwi(String Kiwi) {
        this.Kiwi = Kiwi;
    }
}

Thank you all in advance.

谢谢大家。

采纳答案by ItachiUchiha

Update

更新

Since the link doesn't work and I had multiple requests to update it, I am updating this with a new answer.

由于链接不起作用，并且我有多个更新请求，因此我将使用新答案进行更新。

From the question, I am unsure if OP wants the image to be loaded from some field in NewBeautifulKiwior does he wants to show the same image for all the data. So, I will answer for both the approaches.

从这个问题来看，我不确定 OP 是否希望从某个字段加载图像，NewBeautifulKiwi或者他是否希望为所有数据显示相同的图像。所以，我将回答这两种方法。

Note:Approach 1 doesn't make much sense to me and exists only because I am confused about OP's requirement. The question is ~4 years old and I don't think clarifying from OP will have any impact. The suggested approach to handle these kinds of problem is 2.

注意：方法 1 对我来说没有多大意义，存在只是因为我对 OP 的要求感到困惑。问题是大约 4 岁，我认为从 OP 澄清不会有任何影响。处理此类问题的建议方法是 2。

---

---

1. Load the same arrow.pngfor all the rows

1. arrow.png为所有行加载相同的内容

Code:

代码：

KiwiId.setCellFactory(new Callback<TableColumn<NewBeautifulKiwi, Integer>, TableCell<NewBeautifulKiwi, Integer>>() {
    @Override
    public TableCell<NewBeautifulKiwi, Integer> call(TableColumn<NewBeautifulKiwi, Integer> param) {
      ...
      TableCell<NewBeautifulKiwi, Integer> cell = new TableCell<NewBeautifulKiwi, Integer>() {
         public void updateItem(Integer item, boolean empty) {
            if (item != null) {
              imageview.setImage(new Image("arrow.png"));
            }
         }
      };
      // Attach the imageview to the cell
      cell.setGraphic(imageview);
      return cell;
    }
 });
 KiwiId.setCellValueFactory(new PropertyValueFactory<NewBeautifulKiwi, Integer>("KiwiId"));

---

---

1. Load the Image from the a property in NewBeautifulKiwi. Since the column TableColumn<NewBeautifulKiwi, Image> KiwiId;seems like it should bind itself to a property image which is missing from NewBeautifulKiwi. I will introduce it and later use it to bind to this column's (renamed to 'kiwiImageCol') cell value factory.

2. 从 中的 a 属性加载图像NewBeautifulKiwi。由于该列TableColumn<NewBeautifulKiwi, Image> KiwiId;似乎应该将自身绑定到NewBeautifulKiwi. 我将介绍它，稍后使用它来绑定到此列的（重命名为 'kiwiImageCol'）单元格值工厂。

Code:

代码：

@Entity(name = "KIWI_TABLE")
public class NewBeautifulKiwi implements Serializable {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private int KiwiId;
    private String Kiwi;
    private Image kiwiImage;

    public int getKiwiId() {
        return KiwiId;
    }

    public void setKiwiId(int KiwiId) {
        this.KiwiId = KiwiId;
    }

    public String getKiwi() {
        return Kiwi;
    }

    public void setKiwi(String Kiwi) {
        this.Kiwi = Kiwi;
    }

    public Image getKiwiImage() {
        return kiwiImage;
    }

    public void setKiwiImage(Image kiwiImage) {
        this.kiwiImage = kiwiImage;
    }
}

In the table, I will bind the TableColumn to this new property

在表中，我将 TableColumn 绑定到这个新属性

...
@FXML
private TableColumn<NewBeautifulKiwi, Image> KiwiImageCol;
...
@Override
public void initialize(URL url, ResourceBundle rb) {
    KiwiImageCol.setCellFactory(param -> {
       //Set up the ImageView
       final ImageView imageview = new ImageView();
       imageview.setFitHeight(50);
       imageview.setFitWidth(50);

       //Set up the Table
       TableCell<NewBeautifulKiwi, Image> cell = new TableCell<NewBeautifulKiwi, Image>() {
           public void updateItem(Image item, boolean empty) {
             if (item != null) {
                  imageview.setImage(item);
             }
           }
        };
        // Attach the imageview to the cell
        cell.setGraphic(imageview);
        return cell;
   });
   KiwiImageCol.setCellValueFactory(new PropertyValueFactory<NewBeautifulKiwi, Image>("kiwiImage"));
}

---

---

Outdated Answer

过时的答案

You forgot to bind the KiwiId with a CellValueFactory. Please go through the following example which uses a VBox in a column as it needs Image and a label. You may directly use a ImageView

您忘记将 KiwiId 与CellValueFactory. 请查看以下示例，该示例在列中使用 VBox，因为它需要图像和标签。你可以直接使用 ImageView

https://blogs.oracle.com/javajungle/entry/how_to_pretty_up_your

https://blogs.oracle.com/javajungle/entry/how_to_pretty_up_your

Everything is described very nicely. Incase you still have doubts feel free to comment !

一切都描述得非常好。如果您仍有疑问，请随时发表评论！

回答by Rahil Kazi

Your present error can be removed if you use following statement

如果您使用以下语句，您当前的错误可以被删除

imageview.setImage(new Image("arrow.png"));