Modify cell in TableView with its contents

Question

I have just started using JavaFX so its all very new and I am trying either insert one of 4 icons that will relate to what is actually in the cell.

Aka if the cell contains 'OFFLINE' then it will render offline.png, etc. Or alternatively change the cells background color. But from what I attempted I cannot figure out how it works or how I can adapt example code to work for me.

Here is my project so far if it helps;

import com.skype.User;
import javafx.application.Application;
import javafx.beans.property.SimpleObjectProperty;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.util.Callback;

import javax.swing.*;
import java.time.LocalDate;
import java.time.Month;

public class SkypeFX extends Application {

    private TableView<Contacts> table = new TableView<Contacts>();
    private final ObservableList<Contacts> data = Functions.returnContacts();

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

    @Override
    public void start(Stage stage) {
        Scene scene = new Scene(new Group());
        stage.setTitle("SkypeFX");
        stage.setWidth(600);
        stage.setHeight(500);
        Image imageIcon = new Image("/SKYPEMAX.png");
        stage.getIcons().add(imageIcon);

        final Label label = new Label("Contacts");
        label.setFont(new Font("Arial", 20));

        table.setEditable(true);

        TableColumn statusCol = new TableColumn("Status");
        statusCol.setCellFactory(column -> {
            return new TableCell<Contacts, Contacts>() {
                @Override
                protected void updateItem(Contacts item, boolean empty) {
                   //Cant figure out how to get the current cell info/Modify it/etc
                }
            };
        });
        statusCol.setCellValueFactory(
                new PropertyValueFactory<Contacts, String>("status"));
        TableColumn idCol = new TableColumn("Username");
        idCol.setCellValueFactory(
                new PropertyValueFactory<Contacts, String>("id"));
        TableColumn nameCol = new TableColumn("Name");
        TableColumn subNameFull = new TableColumn("Current");
        subNameFull.setCellValueFactory(
                new PropertyValueFactory<Contacts, String>("full"));
        TableColumn subNameDisplay = new TableColumn("Given");
        subNameDisplay.setCellValueFactory(
                new PropertyValueFactory<Contacts, String>("display"));
        nameCol.getColumns().addAll(subNameDisplay,subNameFull);
        table.setItems(data);
        //table.setItems(Functions.returnContacts());

        statusCol.prefWidthProperty().bind(table.widthProperty().multiply(0.2));
        idCol.prefWidthProperty().bind(table.widthProperty().multiply(0.2));
        nameCol.prefWidthProperty().bind(table.widthProperty().multiply(0.3));

        //col1.setResizable(false);
        //col2.setResizable(false);

        table.getColumns().addAll(statusCol, idCol, nameCol);

        final VBox vbox = new VBox();
        vbox.setSpacing(10);
        vbox.setPrefWidth(570);
        vbox.setPadding(new Insets(10, 0, 0, 10));//X1,y1,x2,Y2
        vbox.getChildren().addAll(label, table);

        ((Group) scene.getRoot()).getChildren().addAll(vbox);

        stage.setScene(scene);
        stage.show();
    }
}

Answer 1

Instead of using Contacts as value type in the TableColumn, use a custom one or a existing one that you can map to Image

public enum Status {

    STATUS0(...),
    STATUS1(...);

    private final Image image;

    private Status(String imageURL) {
        this.image = new Image(imageURL);
    }

    public Image getImage() {
        return image;
    }

}

public class Contact {

    private final ObjectProperty<Status> status = new SimpleObjectProperty<>();

    public Contact(Status status) {
        this.status.set(status);
    }

    public final Status getStatus() {
        return this.status.get();
    }

    public final void setStatus(Status value) {
        this.status.set(value);
    }

    public final ObjectProperty<Status> statusProperty() {
        return this.status;
    }

}

Use this to display the appropriate graphic in the TableCell

TableColumn<Contact, Status> statusCol = new TableColumn("Status");
statusCol.setCellFactory(column -> {
    return new TableCell<Contact, Status>() {

        private final ImageView image;

        {
            this.image = new ImageView();
            setGraphic(this.image);
        }

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

            // set image to display
            image.setImage(empty || item == null ? null : item.getImage());
        }
    };
});
statusCol.setCellValueFactory(new PropertyValueFactory<>("status"));