How to populate a tableview cell with an image from Sqlite database in JavaFX?

Question

I am trying to populate a tableView cell with an image stored on a Sqlite database using JavaFX. I have found some really good information on here and feel like I am getting pretty close. If there is no image I would like it to keep the constraints to make the cells the same size always. The images stored on the database are 300x300, but the rows will be much smaller. So far the code I have is :

public void buildDataAseptic(){
    listNum = 1;        
    data = FXCollections.observableArrayList();
    try{   

        String SQL = "Select * from aseptic_parts_list";             //Order By id
        ResultSet rs = con.createStatement().executeQuery(SQL);  
        while(rs.next()){
            Part cm = new Part();
            cm.id.set(listNum++);


            if (rs.getBlob("image") != null ) {
            Blob blob = rs.getBlob("image");
            byte[] ndata = blob.getBytes(1, (int) blob.length());
            image = new Image(new ByteArrayInputStream(ndata));
            ImageView imageView = new ImageView();
            imageView.setImage(image);
            imageView.setFitWidth(70);
            imageView.setFitHeight(80);
            cm.image.set(image);
            }


            cm.vendor_part_number.set(rs.getString("vendor_part_number"));
            cm.description.set(rs.getString("description"));
            cm.quantity.set(rs.getInt("quantity"));
            cm.vendor_name.set(rs.getString("vendor_name"));
            cm.model_number.set(rs.getString("model_number"));
            cm.equipment_id.set(rs.getString("equipment_id"));
            data.add(cm);                  
        }
        tableView.setItems(data);

    }
    catch(Exception e){
          e.printStackTrace();
          System.out.println("Error on Building Data" + e.getMessage());            
    }
    filterData();
    //filterEquipIDData();
}

this is just one particular method that is called from a comboBox. All of the other data is populating fine in the table except the image. In the initialize() method I have the columns set up as:

assert tableView != null;
     idCol.setCellValueFactory(
            new PropertyValueFactory<Part, Integer>("id"));
     imgCol.setCellValueFactory(
            new PropertyValueFactory<Object,ImageView>("image"));
     pnCol.setCellValueFactory(
            new PropertyValueFactory<Part,String>("vendor_part_number"));
     descCol.setCellValueFactory(
            new PropertyValueFactory<Part,String>("description"));  
     quantityCol.setCellValueFactory(                
        new PropertyValueFactory<Part,Integer>("quantity"));
     venCol.setCellValueFactory(
            new PropertyValueFactory<Part,String>("vendor_name"));
     mnCol.setCellValueFactory(
                new PropertyValueFactory<Part,String>("model_number"));
     equipmentIDCol.setCellValueFactory(                
            new PropertyValueFactory<Part,String>("equipment_id"));

The Part class where the image object is stored is:

public SimpleObjectProperty<Image> image = new SimpleObjectProperty<>();
public Object getImage() {
    return image.get();
}

I have been fiddling with this for a few days now and feel pretty close, just no cigar, please help and thanks!

Answer 1

Here is an example for populating TableView cells with images.

The key to the solution is to set the cell value factory and the cell factory appropriately:

TableColumn<Fish, Image> imageColumn = new TableColumn<>("Picture");
imageColumn.setCellValueFactory(new PropertyValueFactory<>("image"));
imageColumn.setCellFactory(param -> new ImageTableCell<>());

Where the ImageTableCell class contains an ImageView as the graphic for the cell and updates the ImageView as the underlying image data changes:

private class ImageTableCell<S> extends TableCell<S, Image> {
    final ImageView imageView = new ImageView();

    ImageTableCell() {
        setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
    }

    @Override
    protected void updateItem(Image item, boolean empty) {
        super.updateItem(item, empty);

        if (empty || item == null) {
            imageView.setImage(null);
            setText(null);
            setGraphic(null);
        }

        imageView.setImage(item);
        setGraphic(imageView);
    }
}

One thing to note about this implementation is that it assumes that all images are loaded up into the underlying data structure for the table. This means that if you had a lot of rows in the table, you would be consuming massive amounts of data as all images would be loaded into memory. An alternate solution would be for the underlying data structure just to store the address (url) of the image rather than the image data itself, then load up the image in the cell factory (possibly via an LRU cache mechanism). The trade-off between the different approaches, is speed of operation of the GUI and resources consumed as the user interacts (which is what the all in-memory approach here optimizes for), versus a slower GUI but reduced memory footprint (which is what dymanically loading images in the updateItem call would optimize for). In general, I feel it is best to try to keep the speed of the updateItem call very quick, which is why the solution is presented as is.

I won't supply a sample which also integrates SQLLite as I have no knowledge of that technology, so further integration of the solution with a database system is left up to the reader.

Complete Code

import javafx.application.Application;
import javafx.beans.property.*;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.image.*;
import javafx.stage.Stage;

import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;

public class ImageTable extends Application {

    @Override
    public void start(Stage stage) {
        List<Fish> fish = Arrays.stream(fishData)
                .map(data -> new Fish(data[0], new Image(data[1])))
                .collect(Collectors.toList());

        TableView<Fish> tableView = new TableView<>(FXCollections.observableList(fish));

        TableColumn<Fish, String> nameColumn = new TableColumn<>("Name");
        nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));
        tableView.getColumns().add(nameColumn);
        TableColumn<Fish, Image> imageColumn = new TableColumn<>("Picture");
        imageColumn.setCellValueFactory(new PropertyValueFactory<>("image"));
        imageColumn.setCellFactory(param -> new ImageTableCell<>());
        tableView.getColumns().add(imageColumn);

        stage.setScene(new Scene(tableView));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    // image license: linkware - backlink to http://www.fasticon.com
    private static final String[][] fishData = {
            { "Blue Fish", "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Blue-Fish-icon.png" },
            { "Red Fish", "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Red-Fish-icon.png" },
            { "Yellow Fish", "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Yellow-Fish-icon.png" },
            { "Green FIsh", "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Green-Fish-icon.png" }
    };

    private class ImageTableCell<S> extends TableCell<S, Image> {
        final ImageView imageView = new ImageView();

        ImageTableCell() {
            setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
        }

        @Override
        protected void updateItem(Image item, boolean empty) {
            super.updateItem(item, empty);

            if (empty || item == null) {
                imageView.setImage(null);
                setText(null);
                setGraphic(null);
            }

            imageView.setImage(item);
            setGraphic(imageView);
        }
    }

    public static final class Fish {
        private ReadOnlyStringWrapper name;
        private ReadOnlyObjectWrapper<Image> image;

        public Fish(String name, Image image) {
            this.name = new ReadOnlyStringWrapper(name);
            this.image = new ReadOnlyObjectWrapper<>(image);
        }

        public String getName() {
            return name.get();
        }

        public ReadOnlyStringProperty nameProperty() {
            return name.getReadOnlyProperty();
        }

        public Image getImage() {
            return image.get();
        }

        public ReadOnlyObjectProperty<Image> imageProperty() {
            return image.getReadOnlyProperty();
        }
    }
}

Answer 2

Thank you very much jewelsea! I ended up doing what you said, creating another folder to hold the images and using a url to reference the pictures in the folder. The code I used is:

 if(rs.getString("image") != null) {
            Image img = new Image(rs.getString("image"));
            ImageView imageView = new ImageView();
            imageView.setImage(img);
            cm.image.set(imageView);
            imageView.setFitWidth(130);
            imageView.setFitHeight(100);
            } else {
                Image img = new Image("/img/NoImageFound.png");
                ImageView imageView = new ImageView();
                imageView.setImage(img);
                cm.image.set(imageView);
                imageView.setFitWidth(130);
                imageView.setFitHeight(100);
            }

This code queries the database for the image and if there is none there it uses an image i created for image not found. I did this because it was shortening my database results to only queries that had an image, the else shows all results from the database now. It is good to know that this will make it faster. I am building a parts database for my work with listeners for filtering parts, and that might have been too slow once the database gets really big to have all the parts directly stored on the database. Your help has sent me in the right direction, thanks a million!