title: Customizing Cells in ListView
body: <p>I have followed <a href="https://www.turais.de/how-to-custom-listview-cell-in-javafx/" rel="nofollow noreferrer">this</a> tutorial how to customize cells of listview which strucure is defined in FXML. I have defined cellFactory as usual:</p>
  
  <p>itemListView.setCellFactory((ListView studentListView) -> new SwatchCell());</p>
  
  <p>with SwatchCell class defined like this: </p>
  
  <pre><code>package ui;
  
  import java.io.*;
  import javafx.fxml.*;
  import javafx.scene.control.*;
  import javafx.scene.layout.*;
  import javafx.scene.shape.*;
  import logic.*;
  
  public class SwatchCell extends ListCell&lt;ColorSwatch&gt;{
  
  private FXMLLoader fxmlLoader;
  @FXML private Label name, tagLine;
  @FXML private Circle color1, color2, color3, color4, color5;
  @FXML private VBox cellRootNode;
  
  @Override
  protected void updateItem(ColorSwatch item, boolean empty) {
      super.updateItem(item, empty);
  
      if (empty || item == null) {
          setText(null);
          setGraphic(null);
      } else {
          if (fxmlLoader == null) {
              loadFXML();
          }
          name.setText(item.getName());
          String tl = "";
  
          for (Tag t : item.getTagLine()) {
              if ("".equals(tl)) {
                  tl += t.getDescription();
              } else {
                  tl += ", " + t.getDescription();
              }
          }
  
          this.tagLine.setText(tl);
  
          color1.setFill(item.getColors()[0]);
          color2.setFill(item.getColors()[1]);
          color3.setFill(item.getColors()[2]);
          color4.setFill(item.getColors()[3]);
          color5.setFill(item.getColors()[4]);
  
          setText(null);
          setGraphic(cellRootNode);
      }
  }
  
  private void loadFXML() {
      fxmlLoader = new FXMLLoader(getClass().getResource("SwatchCellGraph.fxml"));
      fxmlLoader.setController(this);
      try {
          cellRootNode = fxmlLoader.load();
      } catch (IOException e) {
          System.err.println("failed to load Cell FXML");
          System.exit(0);
      }
  }
  }
  </code></pre>
  
  <p>FXML is generated with scenebuilder and in NetBeans code pops no errors with syntax. For your imagination, FXML looks something like this: 
  <a href="https://i.stack.imgur.com/V561l.png" rel="nofollow noreferrer">screen</a>
  . For some reason program ends up in catch block of loadFXML method in SwatchCell class. This is stackTrace </p>
  
  <pre><code>        Aug 15, 2018 2:25:58 PM javafx.fxml.FXMLLoader$ValueElement processValue
      WARNING: Loading FXML document with JavaFX API of version 8.0.171 by JavaFX runtime of version 8.0.161
  Exception in Application start method
  java.lang.reflect.InvocationTargetException
      at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
      at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
      at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
      at java.lang.reflect.Method.invoke(Method.java:498)
      at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(LauncherImpl.java:389)
      at com.sun.javafx.application.LauncherImpl.launchApplication(LauncherImpl.java:328)
      at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
      at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
      at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
      at java.lang.reflect.Method.invoke(Method.java:498)
      at sun.launcher.LauncherHelper$FXHelper.main(LauncherHelper.java:767)
  Caused by: java.lang.RuntimeException: Exception in Application start method
      at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:917)
      at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$154(LauncherImpl.java:182)
      at java.lang.Thread.run(Thread.java:748)
  Caused by: java.lang.NullPointerException
      at ui.SwatchCell.updateItem(SwatchCell.java:29)
      at ui.SwatchCell.updateItem(SwatchCell.java:11)
      at javafx.scene.control.ListCell.updateItem(ListCell.java:471)
      at javafx.scene.control.ListCell.indexChanged(ListCell.java:330)
      at javafx.scene.control.IndexedCell.updateIndex(IndexedCell.java:116)
      at com.sun.javafx.scene.control.skin.VirtualFlow.setCellIndex(VirtualFlow.java:1957)
      at com.sun.javafx.scene.control.skin.VirtualFlow.getCell(VirtualFlow.java:1797)
      at com.sun.javafx.scene.control.skin.VirtualFlow.getCellLength(VirtualFlow.java:1879)
      at com.sun.javafx.scene.control.skin.VirtualFlow.computeViewportOffset(VirtualFlow.java:2528)
      at com.sun.javafx.scene.control.skin.VirtualFlow.layoutChildren(VirtualFlow.java:1189)
      at javafx.scene.Parent.layout(Parent.java:1087)
      at javafx.scene.Parent.layout(Parent.java:1093)
      at javafx.scene.Parent.layout(Parent.java:1093)
      at javafx.scene.Parent.layout(Parent.java:1093)
      at javafx.scene.Scene.doLayoutPass(Scene.java:552)
      at javafx.scene.Scene.preferredSize(Scene.java:1646)
      at javafx.scene.Scene.impl_preferredSize(Scene.java:1720)
      at javafx.stage.Window$9.invalidated(Window.java:864)
      at javafx.beans.property.BooleanPropertyBase.markInvalid(BooleanPropertyBase.java:109)
      at javafx.beans.property.BooleanPropertyBase.set(BooleanPropertyBase.java:144)
      at javafx.stage.Window.setShowing(Window.java:940)
      at javafx.stage.Window.show(Window.java:955)
      at javafx.stage.Stage.show(Stage.java:259)
      at ui.MainWindow.show(MainWindow.java:51)
      at ui.launcher.start(launcher.java:15)
      at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$161(LauncherImpl.java:863)
      at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$174(PlatformImpl.java:326)
      at com.sun.javafx.application.PlatformImpl.lambda$null$172(PlatformImpl.java:295)
      at java.security.AccessController.doPrivileged(Native Method)
      at com.sun.javafx.application.PlatformImpl.lambda$runLater$173(PlatformImpl.java:294)
      at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
      at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
      at com.sun.glass.ui.win.WinApplication.lambda$null$147(WinApplication.java:177)
      ... 1 more
  Exception running application ui.launcher
  C:\Users\Jan\AppData\Local\NetBeans\Cache\8.2\executor-snippets\run.xml:53: Java returned: 1
  BUILD FAILED (total time: 2 seconds)
  </code></pre>
  
  <p>. I hope I included all relevant code.</p>
  
  <p>I am gonna be honest and say that I do not fully understand how exactly CallBack and CellFactory works to detail and it is first time am altering List Cell to such extent and this way. Even though I know that I am not supposed to ask "solve this for me" best way for me how to learn something is by studying working example. I would like obviously to make listviews's cell to adopt appearence of FXML file. Thanks for any help.</p>
  
  <p>PS: all FXML code is generated in Scene Builder and does not pop any errors in NetBeans therefore should be syntactically fine. FX:IDs should be assigned correctly.</p>
  
  <p>FXML of mainWindow:</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import javafx.geometry.Insets?&gt;
  &lt;?import javafx.geometry.Rectangle2D?&gt;
  &lt;?import javafx.scene.control.Button?&gt;
  &lt;?import javafx.scene.control.ComboBox?&gt;
  &lt;?import javafx.scene.control.ListView?&gt;
  &lt;?import javafx.scene.control.Separator?&gt;
  &lt;?import javafx.scene.image.Image?&gt;
  &lt;?import javafx.scene.image.ImageView?&gt;
  &lt;?import javafx.scene.layout.HBox?&gt;
  &lt;?import javafx.scene.layout.StackPane?&gt;
  &lt;?import javafx.scene.layout.VBox?&gt;
  
  &lt;StackPane fx:id="background" maxHeight="1.7976931348623157E308" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="550.0" prefWidth="275.0" stylesheets="@MainWindowCSS.css" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ui.MainWindowGraphController"&gt;
     &lt;padding&gt;
        &lt;Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /&gt;
     &lt;/padding&gt;
     &lt;children&gt;
        &lt;VBox fx:id="content" alignment="TOP_CENTER" maxHeight="1.7976931348623157E308" maxWidth="-Infinity" prefWidth="265.0" spacing="5.0"&gt;
           &lt;children&gt;
              &lt;HBox prefHeight="32.0" prefWidth="200.0" spacing="5.0"&gt;
                 &lt;children&gt;
                    &lt;ImageView fitHeight="34.0" fitWidth="170.0" pickOnBounds="true" preserveRatio="true"&gt;
                       &lt;image&gt;
                          &lt;Image url="@../resources/header.png" /&gt;
                       &lt;/image&gt;
                       &lt;viewport&gt;
                          &lt;Rectangle2D height="32.0" width="170.0" /&gt;
                       &lt;/viewport&gt;
                    &lt;/ImageView&gt;
                    &lt;Button fx:id="miniButton" contentDisplay="GRAPHIC_ONLY" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#minimize" prefHeight="32.0" prefWidth="32.0" styleClass="util-button" text="_"&gt;
                       &lt;graphic&gt;
                          &lt;ImageView fitHeight="32.0" fitWidth="32.0" pickOnBounds="true" preserveRatio="true"&gt;
                             &lt;image&gt;
                                &lt;Image url="@../resources/minimize.png" /&gt;
                             &lt;/image&gt;
                          &lt;/ImageView&gt;
                       &lt;/graphic&gt;
                       &lt;padding&gt;
                          &lt;Insets bottom="-5.0" left="-5.0" right="-5.0" top="-5.0" /&gt;
                       &lt;/padding&gt;
                    &lt;/Button&gt;
                    &lt;Button fx:id="closeButton" contentDisplay="GRAPHIC_ONLY" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#kill" prefHeight="32.0" prefWidth="32.0" styleClass="util-button" text="x"&gt;
                       &lt;graphic&gt;
                          &lt;ImageView fitHeight="32.0" fitWidth="32.0" pickOnBounds="true" preserveRatio="true"&gt;
                             &lt;image&gt;
                                &lt;Image url="@../resources/cross.png" /&gt;
                             &lt;/image&gt;
                          &lt;/ImageView&gt;
                       &lt;/graphic&gt;
                       &lt;padding&gt;
                          &lt;Insets bottom="-5.0" left="-5.0" right="-5.0" top="-5.0" /&gt;
                       &lt;/padding&gt;
                    &lt;/Button&gt;
                 &lt;/children&gt;
              &lt;/HBox&gt;
              &lt;Separator maxHeight="0.0" minHeight="0.0" prefHeight="0.0" prefWidth="177.0" /&gt;
              &lt;ComboBox fx:id="comboBox" focusTraversable="false" maxWidth="1.7976931348623157E308" onAction="#repopulateListView" prefHeight="33.0" prefWidth="284.0" VBox.vgrow="ALWAYS" /&gt;
              &lt;HBox spacing="5.0"&gt;
                 &lt;children&gt;
                    &lt;Button fx:id="addButton" contentDisplay="RIGHT" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="33.0" prefWidth="59.0" text="Add" HBox.hgrow="ALWAYS"&gt;
                       &lt;graphic&gt;
                          &lt;ImageView fitHeight="14.0" fitWidth="14.0" pickOnBounds="true" preserveRatio="true"&gt;
                             &lt;image&gt;
                                &lt;Image url="@../resources/add.png" /&gt;
                             &lt;/image&gt;
                             &lt;viewport&gt;
                                &lt;Rectangle2D height="14.0" width="14.0" /&gt;
                             &lt;/viewport&gt;
                          &lt;/ImageView&gt;
                       &lt;/graphic&gt;
                    &lt;/Button&gt;
                    &lt;Button fx:id="editButton" contentDisplay="RIGHT" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="33.0" prefWidth="54.0" text="Edit" HBox.hgrow="ALWAYS"&gt;
                       &lt;graphic&gt;
                          &lt;ImageView fitHeight="14.0" fitWidth="14.0" pickOnBounds="true" preserveRatio="true"&gt;
                             &lt;image&gt;
                                &lt;Image url="@../resources/edit.png" /&gt;
                             &lt;/image&gt;
                             &lt;viewport&gt;
                                &lt;Rectangle2D height="14.0" width="14.0" /&gt;
                             &lt;/viewport&gt;
                          &lt;/ImageView&gt;
                       &lt;/graphic&gt;
                    &lt;/Button&gt;
                    &lt;Button fx:id="deleteButton" contentDisplay="RIGHT" maxWidth="1.7976931348623157E308" mnemonicParsing="false" prefHeight="33.0" prefWidth="73.0" text="Delete" HBox.hgrow="ALWAYS"&gt;
                       &lt;graphic&gt;
                          &lt;ImageView fitHeight="14.0" fitWidth="14.0" pickOnBounds="true" preserveRatio="true"&gt;
                             &lt;image&gt;
                                &lt;Image url="@../resources/remove.png" /&gt;
                             &lt;/image&gt;
                             &lt;viewport&gt;
                                &lt;Rectangle2D height="14.0" width="14.0" /&gt;
                             &lt;/viewport&gt;
                          &lt;/ImageView&gt;
                       &lt;/graphic&gt;
                    &lt;/Button&gt;
                 &lt;/children&gt;
              &lt;/HBox&gt;
              &lt;Separator maxHeight="0.0" minHeight="0.0" prefHeight="0.0" prefWidth="177.0" /&gt;
              &lt;ListView fx:id="itemListView" prefHeight="397.0" prefWidth="216.0" VBox.vgrow="ALWAYS" /&gt;
           &lt;/children&gt;
           &lt;padding&gt;
              &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
           &lt;/padding&gt;&lt;/VBox&gt;
     &lt;/children&gt;
  &lt;/StackPane&gt;
  </code></pre>
  
  <p>FXML of SwatchCell:</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import javafx.geometry.Insets?&gt;
  &lt;?import javafx.scene.control.Label?&gt;
  &lt;?import javafx.scene.image.Image?&gt;
  &lt;?import javafx.scene.image.ImageView?&gt;
  &lt;?import javafx.scene.layout.HBox?&gt;
  &lt;?import javafx.scene.layout.StackPane?&gt;
  &lt;?import javafx.scene.layout.VBox?&gt;
  &lt;?import javafx.scene.shape.Circle?&gt;
  &lt;?import javafx.scene.text.Font?&gt;
  
  &lt;VBox fx:id="cellRootNode" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="107.0" prefWidth="255.0" spacing="5.0" style="-fx-background-color: #191919;" stylesheets="@MainWindowCSS.css" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1"&gt;
     &lt;children&gt;
        &lt;Label fx:id="name" maxWidth="1.7976931348623157E308" text="ColorSwatch Name" textFill="WHITE" VBox.vgrow="ALWAYS" /&gt;
        &lt;Label fx:id="tagLine" maxWidth="1.7976931348623157E308" text="TagLine" textFill="#b3b3b3"&gt;
           &lt;graphic&gt;
              &lt;ImageView fitHeight="21.0" fitWidth="21.0" pickOnBounds="true" preserveRatio="true"&gt;
                 &lt;image&gt;
                    &lt;Image url="@../resources/tag.png" /&gt;
                 &lt;/image&gt;
              &lt;/ImageView&gt;
           &lt;/graphic&gt;
           &lt;font&gt;
              &lt;Font size="12.0" /&gt;
           &lt;/font&gt;
        &lt;/Label&gt;
        &lt;HBox prefHeight="12.0" prefWidth="64.0" spacing="5.0" VBox.vgrow="NEVER"&gt;
           &lt;children&gt;
              &lt;StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground" HBox.hgrow="NEVER"&gt;
                 &lt;children&gt;
                    &lt;Circle fx:id="color1" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" /&gt;
                 &lt;/children&gt;
              &lt;/StackPane&gt;
              &lt;StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground"&gt;
                 &lt;children&gt;
                    &lt;Circle fx:id="color2" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" /&gt;
                 &lt;/children&gt;
              &lt;/StackPane&gt;
              &lt;StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground"&gt;
                 &lt;children&gt;
                    &lt;Circle fx:id="color3" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" /&gt;
                 &lt;/children&gt;
              &lt;/StackPane&gt;
              &lt;StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground"&gt;
                 &lt;children&gt;
                    &lt;Circle fx:id="color4" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" /&gt;
                 &lt;/children&gt;
              &lt;/StackPane&gt;
              &lt;StackPane minHeight="-Infinity" minWidth="-Infinity" prefHeight="44.0" prefWidth="44.0" styleClass="swatchBackground"&gt;
                 &lt;children&gt;
                    &lt;Circle fx:id="color5" fill="DODGERBLUE" radius="15.0" stroke="#ffffff00" strokeType="INSIDE" /&gt;
                 &lt;/children&gt;
              &lt;/StackPane&gt;
           &lt;/children&gt;
        &lt;/HBox&gt;
     &lt;/children&gt;
     &lt;padding&gt;
        &lt;Insets bottom="5.0" left="5.0" right="5.0" top="5.0" /&gt;
     &lt;/padding&gt;
  &lt;/VBox&gt;
  </code></pre>