Inserting Images into a TableView JavaFX - Images not displayed

Question

I'm currently trying to add some images from a decoded video to a TableView row and they are not appearing. Only empty TableColumns. The TableView has been designed in JavaFx Scene Builder along with the Label.

Here's what I got so far:

public class MainScreenController implements Initializable {

@FXML
private Label previewBoxLabel;

@FXML
private TableView tableView;

private ObservableList<ImageView> imageList = FXCollections.observableArrayList();

@FXML
public void AddClipBeta(){

    //Code which uses an external class in order to decode video (Variables Frames, width and height are not shown but are present in the actual code)
    VideoSegment clip = new VideoSegment(0, file.getPath(), 0, Frames, width, height);

//Opens the file in decoding class - ready to output frames        
    try{clip.openFile();} catch(Exception e){}

//First frame is updated on the preview box
    previewBoxLabel.setGraphic(new ImageView(convertToFxImage(clip.getThumbnail())));


    System.out.println(file.getPath());
    int i =0;

//While loop in test phase to see whether or not 10 frames will be visible in the table
    while(i != 10){

    //Creates and sets columns to tableView
        TableColumn<ImageView, ImageView> col = new TableColumn<ImageView, ImageView>();
        col.setPrefWidth(100); //Set width of column
        tableView.getColumns().add(col);

        col.setCellFactory(new Callback<TableColumn<ImageView, ImageView>, TableCell<ImageView, ImageView>>() {

            @Override
            public TableCell<ImageView, ImageView> call(TableColumn<ImageView, ImageView> p) {


                    TableCell<ImageView, ImageView> cell = new TableCell<ImageView, ImageView>(){
                    };

                    return cell;
            }


        });

    //Adds current frame to list
        imageList.add(new ImageView(convertToFxImage(clip.getThumbnail())));

    //Gets next video frame
        try{clip.getNextFrame();} catch(Exception e){}

    //Updates counter 
        i++;
    }

//Sets list of frames on the table 
    tableView.setItems(imageList);


}

// There is a problem with this implementation: transparent pixels on the BufferedImage aren't converted to transparent pixels on the fxImage.
public static javafx.scene.image.Image convertToFxImage(java.awt.image.BufferedImage awtImage) {
    if (Image.impl_isExternalFormatSupported(BufferedImage.class)) {
        return javafx.scene.image.Image.impl_fromExternalImage(awtImage);
    } else {
        return null;
    }
}

I've been struggling understanding how the TableView works the last couple of days and it would be a real breakthrough if we could get to the bottom of this.

Thanks for reading and any help in advance!

Answer 1

I managed to sort this out with the help of you guys. Basically, what I did was make a class with a bunch of setters and getters and a constructor that takes in ImageViews and sets it to a variable in the class via it's constructors. Then I went back to my code and added the following:

Class with Getters and Setters:

import javafx.scene.image.ImageView;


public class tableDataModel {

private ImageView image;  

public tableDataModel(ImageView image){
    this.image = image;
}

public ImageView getImage(){
    return image; 
}

public void setImage(ImageView image){
    this.image = image;
}

}

Code from MainScreenController:

    TableColumn<tableDataModel, ImageView> col = new TableColumn<>();
    tableView.getColumns().add(col);
    imageList.add(new tableDataModel(new ImageView(convertToFxImage(clip.getThumbnail()))));
col.setPrefWidth(50);
    col.setCellValueFactory(new PropertyValueFactory<tableDataModel, ImageView>("image"));

    int i = 0;
    while (i != 10) {



    try {
            imageList.add(new tableDataModel(new ImageView(convertToFxImage(clip.getNextFrame()))));
        } catch (Exception e) {
        }
        i++;
}
tableView.setItems(imageList);

Answer 2

When setting a CellFactory, you need to take in to account that it will override some default bevaiours such as setting text and images.

For example. I had to create a ListView of Applications that launched on double click. I had to set a CellFactory in order to add a listener to the mouse click of each individual cell.

applications.setCellFactory(new Callback<TreeView<Application>, TreeCell<Application>>() {

        @Override
        public TreeCell<Application> call(TreeView<Application> param) {
            return new TreeCell<Application>() {

                @Override
                protected void updateItem(Application item, boolean empty) {
                    //call the origional update first
                    super.updateItem(item, empty); 
                    //the root item in my list is null, this check is required to keep a null pointer from happening
                    if (item != null) {
                        // text and graphic are stored in the Application object and set.
                        this.setText(item.getApplicationListName());
                        this.setGraphic(item.getGraphic());

                        // registers the mouse event to the cell.
                        this.setOnMouseClicked((MouseEvent e) -> {
                            if (e.getClickCount() == 2) {
                                try {
                                    this.getItem().launch(tabBar);
                                } catch (UnsupportedOperationException ex) {
                                    Dialogs.create().nativeTitleBar().masthead("Comming Soon™").message("Application is still in development and will be available Soon™").nativeTitleBar().title("Unavailable").showInformation();
                                }
                            } else {
                                e.consume();
                            }

                        });
                    }else if(empty){
                        this.setText(null);
                        this.setGraphic(null);
                        this.setOnMouseClicked(null);
                    }
                }
            };
        }
    });

This was pieced together from some other code so if there is anything else you would like explained, let me know!