How to add an Image into a JavaFx TableView column
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 NewBeautifulKiwi
or does he wants to show the same image for all the data. So, I will answer for both the approaches.
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.
- Load the same
arrow.png
for all the rows
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"));
- Load the Image from the a property in
NewBeautifulKiwi
. Since the columnTableColumn<NewBeautifulKiwi, Image> KiwiId;
seems like it should bind itself to a property image which is missing fromNewBeautifulKiwi
. I will introduce it and later use it to bind to this column's (renamed to 'kiwiImageCol') cell value factory.
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
...
@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
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 !
ILikeProgramming
Updated on July 12, 2022Comments
-
ILikeProgramming almost 2 years
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.
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 saysIncopatibletypes: String cannot be converted to Image
.This is my very first time trying to add an image into a 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:
@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.
-
Brian Stallter about 8 yearsI appreciate the blog example a lot. It got me almost to where I need to be, but I'd like to see your model for the example. I'm trying to add a tableColumn<colorLegend, Circle> and I cannot figure out how to add the Circle "property" in the colorLegend class. Thanks!
-
Brian Stallter about 8 yearsNevermind I found it. It needs to be an ObjectProperty. but I really appreciate the nice blog, that helped out a lot.
-
shinzou over 7 yearsWhy Oracle post images of code and not copyable code? What is wrong with them?
-
shinzou over 7 years@BrianStallter if you still remember, can you post what fix this please?
-
Brian Stallter over 7 yearswell there is no circle property, but in order to make the cell factory you need a property in your model that corresponds to the column you are creating. I was looking at how to get a "circle property", there is no circle property, but object properties do exist so I used that.
-
Brian Stallter over 7 yearsI hope that answers your question. I'm not sure what part you were stuck on exactly.
-
ItachiUchiha over 6 yearsUpdated answer as per request