JavaFX custom listView

Question

I wanted to ask the best way to make a ListView with custom objects in JavaFX, I want a list that each item looks like this:

I searched and found that most people do it with the cell factory method. Is ther any other way? For example with a custome fxml?

Here's my fmxl archive

And here's my Object Task:

import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * Created by Usuario on 26/10/2017.
 */

public class Task implements Comparable {
    private String title;
    private String attendant;
    private String comment;
    private String description;
    private int priority;
    private String creationDate;
    private boolean state;
    private boolean visible;

    public Task(String title, String attendant, String comment, String description, int priority) {
        this.title = title;
        this.attendant = attendant;
        this.comment = comment;
        this.description = description;
        this.priority = priority;
        this.creationDate = setCreationDate();
        this.state = false;
        this.visible = true;
    }

    public Task(String title, String attendant, String comment, String description, int priority, String date, boolean state, boolean visible) {
        this.title = title;
        this.attendant = attendant;
        this.comment = comment;
        this.description = description;
        this.priority = priority;
        this.creationDate = date;
        this.state = state;
        this.visible = visible;
    }

    private static String setCreationDate() {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Date date = new Date();
        return sdf.format(date);
    }


    public boolean isVisible() {
        return visible;
    }

    public String getTitle() {
        return title;
    }

    public String getAttendant() {
        return attendant;
    }

    public String getComment() {
        return comment;
    }

    public String getDescription() {
        return description;
    }

    public int getPriority() {
        return priority;
    }

    public String getCreationDate() {
        return creationDate;
    }

    public boolean isState() {
        return state;
    }



    @Override
    public String toString() {
        return "Task{" +
                "title='" + title + '\'' +
                ", attendant='" + attendant + '\'' +
                ", comment='" + comment + '\'' +
                ", description='" + description + '\'' +
                ", priority=" + priority +
                ", creationDate='" + creationDate + '\'' +
                ", state=" + state +
                '}';
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;

        Task task = (Task) o;

        if (priority != task.priority) return false;
        if (state != task.state) return false;
        if (title != null ? !title.equals(task.title) : task.title != null) return false;
        if (attendant != null ? !attendant.equals(task.attendant) : task.attendant != null)
            return false;
        if (comment != null ? !comment.equals(task.comment) : task.comment != null) return false;
        if (description != null ? !description.equals(task.description) : task.description != null)
            return false;
        return creationDate != null ? creationDate.equals(task.creationDate) : task.creationDate == null;
    }

    @Override
    public int hashCode() {
        int result = title != null ? title.hashCode() : 0;
        result = 31 * result + (attendant != null ? attendant.hashCode() : 0);
        result = 31 * result + (comment != null ? comment.hashCode() : 0);
        result = 31 * result + (description != null ? description.hashCode() : 0);
        result = 31 * result + priority;
        result = 31 * result + (creationDate != null ? creationDate.hashCode() : 0);
        result = 31 * result + (state ? 1 : 0);
        return result;
    }


    @Override
    public int compareTo( Task task) {
        int comparePrior = this.getPriority() - (task.getPriority());
        return comparePrior == 0 ? this.getTitle().compareTo(task.getTitle()) : comparePrior;
    }

}

I want the items to look like individual containers, but I didn't find any way to do it. Any recommendations on what to use? And what's the best way to do it?

mr mcwolf · Accepted Answer

This is an example of using FXML to create custom ListCell

First, a controller is created to inherit ListCell. In the constructor of this controller we load the FXML statement on its view.

public class TaskCell extends ListCell {

    @FXML
    private Label titleLabel;

    @FXML
    private Label commentLabel;

    @FXML
    private Label descriptionLabel;

    public TaskCell() {
        loadFXML();
    }

    private void loadFXML() {
        try {
            FXMLLoader loader = new FXMLLoader(getClass().getResource("task_cell.fxml"));
            loader.setController(this);
            loader.setRoot(this);
            loader.load();
        }
        catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

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

        if(empty || item == null) {
            setText(null);
            setContentDisplay(ContentDisplay.TEXT_ONLY);
        }
        else {
            titleLabel.setText(item.getTitle());
            commentLabel.setText(item.getComment());
            descriptionLabel.setText(item.getDescription());

            setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
        }
    }
}

This is the view - task_cell.fxml

Then you need to create a cell factory that can be used to create cells.

public class TaskCellFactory implements Callback, ListCell> {

    @Override
    public ListCell call(ListView param) {
        return new TaskCell();
    }
}

Once we have the factory, we can manually submit it to ListView using the ListView#setCellFactory()

public class Controller {

    @FXML
    private ListView listView;

    @FXML
    private void initialize() {
        listView.setCellFactory(new TaskCellFactory());
    }
}

оr we can describe it in the FXML statement of the view that contains the ListView control

In the second version, the intellij idea marks the wrong line with but this is clearly an error in the xml parser.

JavaFX custom listView

Answers (1)

Related Questions