title: JavaFX custom listView
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/38LsQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/38LsQ.png" alt="enter image description here"></a></p>
  
  <p>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?</p>
  
  <p><strong>Here's my fmxl archive</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import javafx.scene.control.ListView?&gt;
  &lt;?import javafx.scene.control.Menu?&gt;
  &lt;?import javafx.scene.control.MenuBar?&gt;
  &lt;?import javafx.scene.control.MenuItem?&gt;
  &lt;?import javafx.scene.control.SplitPane?&gt;
  &lt;?import javafx.scene.layout.AnchorPane?&gt;
  
  &lt;AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="557.0" prefWidth="1012.0" style="-fx-background-color: #0288D1;" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="desktop_tasker.FXMLTaskerController"&gt;
     &lt;children&gt;
        &lt;SplitPane dividerPositions="0.5" layoutX="-8.0" layoutY="35.0" prefHeight="529.0" prefWidth="1027.0" style="-fx-background-color: #EEEEEE;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="28.0"&gt;
          &lt;items&gt;
            &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0"&gt;
                 &lt;children&gt;
                    &lt;ListView fx:id="list_todo" onEditStart="#handleButtonAction" prefHeight="527.0" prefWidth="502.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                 &lt;/children&gt;&lt;/AnchorPane&gt;
            &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="527.0" prefWidth="640.0"&gt;
                 &lt;children&gt;
                    &lt;ListView fx:id="list_done" onEditStart="#handleButtonAction" prefHeight="527.0" prefWidth="502.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                 &lt;/children&gt;&lt;/AnchorPane&gt;
          &lt;/items&gt;
        &lt;/SplitPane&gt;
        &lt;MenuBar prefHeight="30.0" prefWidth="1012.0"&gt;
          &lt;menus&gt;
            &lt;Menu mnemonicParsing="false" text="File"&gt;
              &lt;items&gt;
                &lt;MenuItem mnemonicParsing="false" text="Close" /&gt;
              &lt;/items&gt;
            &lt;/Menu&gt;
            &lt;Menu mnemonicParsing="false" text="Edit"&gt;
              &lt;items&gt;
                &lt;MenuItem mnemonicParsing="false" text="Delete" /&gt;
              &lt;/items&gt;
            &lt;/Menu&gt;
            &lt;Menu mnemonicParsing="false" text="Help"&gt;
              &lt;items&gt;
                &lt;MenuItem mnemonicParsing="false" text="About" /&gt;
              &lt;/items&gt;
            &lt;/Menu&gt;
          &lt;/menus&gt;
        &lt;/MenuBar&gt;
     &lt;/children&gt;
  &lt;/AnchorPane&gt;
  </code></pre>
  
  <p><strong>And here's my Object Task:</strong></p>
  
  <pre><code>import java.text.SimpleDateFormat;
  import java.util.Date;
  
  /**
   * Created by Usuario on 26/10/2017.
   */
  
  public class Task implements Comparable&lt;Task&gt; {
      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;
      }
  
  }
  </code></pre>
  
  <p>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?</p>