JavaFX using a custom listcell

Question

I have trying to figure out how to use a CustomListCell with a ListView in JavaFX but no luck, I have looked up and all I can find are incomplete tutorials and questions. Below is my CustomListCell FXML

  <AnchorPane id="AnchorPane" styleClass="backPane" 
       stylesheets="@../css/mainwindow.css" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1">
  <children>
  <HBox alignment="CENTER_LEFT" styleClass="backPane">
     <children>
        <HBox styleClass="card" HBox.hgrow="ALWAYS">
           <children>
              <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
                 <image>
                    <Image url="@../images/picture_placeholder.png" />
                 </image>
              </ImageView>
              <VBox HBox.hgrow="ALWAYS">
                 <children>
                    <Label fx:id="lbTitle" styleClass="fixture-title" stylesheets="@../css/mainwindow.css" text=" Livingston 19:45 Falkirk" />
                    <Label fx:id="lbDescription" styleClass="fixture-description" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at turpis nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum laoreet elementum velit. Curabitur tincidunt finibus malesuada. Aliquam dapibus semper scelerisque. Sed tristique tellus eget sem ornare cursus." />
                 </children></VBox>
           </children>
           <HBox.margin>
              <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
           </HBox.margin>
        </HBox>
       </children>
      </HBox>
      </children>
    </AnchorPane>

And my model

public class Ticket {


private long id;
private String imageUrl;
private String title;
private String description;

public Ticket(long id, String imageUrl, String title, String description) {
    this.id = id;
    this.imageUrl = imageUrl;
    this.title = title;
    this.description = description;
}

public long getId() {
    return id;
}

public void setId(long id) {
    this.id = id;
}

public String getImageUrl() {
    return imageUrl;
}

public void setImageUrl(String imageUrl) {
    this.imageUrl = imageUrl;
}

public String getTitle() {
    return title;
}

public void setTitle(String title) {
    this.title = title;
}

public String getDescription() {
    return description;
}

public void setDescription(String description) {
    this.description = description;
}

}

And my incomplete CustomListCell

public class TicketCell <Ticket> extends ListCell<Ticket> { 

private final TicketCellController ticketCellController = new TicketCellController();
private final Node view = ticketCellController.getView();

@Override
protected void updateItem(Ticket item, boolean empty) {
    super.updateItem(item, empty);
    if (empty) {
        setGraphic(null);
    } else {
        ticketCellController.setTicket(item);
        setGraphic(view);
    }
} 
}

And my controller

public class TicketCellController implements Initializable{

private static final String TAG = MainWindowController.class.getSimpleName();
private Logger logger;
private Ticket ticket;
@FXML
private Label lbTitle;
@FXML
private Label lbDescription;
@FXML
private AnchorPane anchorPane;



@Override
public void initialize(URL url, ResourceBundle rb) {
  logger = Logger.getLogger(MainWindowController.class);
    BasicConfigurator.configure();  
}

Please not that ticketCellController.getView() is not being found. Am lost at this point, I donnot know the right way of updating the imageview and labels on in my CustomListCell FXML. Anyone to help or with a link to a tutorial I can follow, I will appreciate.

If the problem is with `TicketCellController`, you should post the code for that class... — James_D, Dec 19 '17 at 22:50
Also, surely just `TicketCell extends ListCell` (not `TicketCell ...`) — James_D, Dec 19 '17 at 22:57
Ok, but it doesn't have a `getView()` method, so surely the error message is no surprise. Presumably it's supposed to load the FXML, with the result being the view? — James_D, Dec 19 '17 at 23:00

James_D · Answer 1 · 2017-12-20T04:02:14.377

The way you have things set up, where you are instantiating the controller and getting the view from it, your controller needs to load the fxml and be able to return the view it creates. So something like:

public class TicketCellController {

    private Ticket ticket;
    @FXML
    private Label lbTitle;
    @FXML
    private Label lbDescription;

    private AnchorPane anchorPane;

    public TicketCellController() {

        try {
            // assumes FXML file is in same package as this controller
            // (also make sure name of FXML resource is correct)
            FXMLLoader loader = new FXMLLoader(getClass().getResource("CustomListCell.fxml"));
            loader.setController(this);
            anchorPane = loader.load();
        } catch (IOException exc) {
            // pretty much fatal here...
            throw new UncheckedIOException(exc);
        }
    }

    public void setTicket(Ticket ticket) {
        lbTitle.setText(ticket.getTitle());
        lbDescription.setText(ticket.getDescription());
    }

    public Node getView() {
        return anchorPane ;
    }

    // ...

}

Here is a test class; this works with the controller class above and with your FXML, CustomListCell class, and model class as-is (with the caveat that I removed the stylesheets and images from the FXML, as I do not have access to those):

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.stage.Stage;

public class Test extends Application {

    @Override
    public void start(Stage primaryStage) {
        ListView<Ticket> ticketList = new ListView<Ticket>();
        ticketList.setCellFactory(lv -> new TicketCell());
        for (int i = 1 ; i <= 50 ; i++) {
            ticketList.getItems().add(new Ticket(i, "", "Ticket "+i, "This is a description of ticket "+i));
        }
        primaryStage.setScene(new Scene(ticketList, 600, 400));
        primaryStage.show();
    }

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

score 0 · Answer 2 · answered Dec 19 '17 at 23:44

After hours this solved everything

public class TicketCell extends ListCell<Ticket> { 
private static final String TAG = TicketCell.class.getSimpleName();
private Logger logger;
private Ticket ticket;
@FXML
private Label lbTitle;
@FXML
private Label lbDescription;
@FXML
private AnchorPane anchorPane;  
private FXMLLoader mLLoader;

public TicketCell(){
    logger = Logger.getLogger(MainWindowController.class);
    BasicConfigurator.configure(); 
}


public void updateItem(Ticket pos,boolean empty){
super.updateItem(pos, empty);

if(pos == null){
setText(null);
setGraphic(null);
}else{

    if (mLLoader == null) {
            mLLoader = new FXMLLoader(getClass().getResource("/resources/fxml/TicketDesignCell.fxml"));
            mLLoader.setController(this);

            try {
                mLLoader.load();
            } catch (IOException e) {
                logger.error(TAG, e);
            }
logger.error(TAG + " Loading content: "+pos.getTitle());
}


    this.lbTitle.setText(pos.getTitle());
    this.lbDescription.setText(pos.getDescription());


    setText(null);
    setGraphic(anchorPane);


}

}

}

Everything had to be in the cell class even

This is not a good solution: you are loading and parsing the FXML every time `updateItem(...)` method is called. You should load it once only, and just update what needs to be updated in that method. There is no reason to put everything in the cell class. — James_D, Dec 20 '17 at 03:57
Thank you. I Althought it is not a good code, it helped me solve my problem.I was unable to clear the listView. Even calling the clear method did not work. But now with setGraphic null in the updateItem method, it works perfectly. — wilmerlpr, Apr 29 '18 at 21:31

JavaFX using a custom listcell

2 Answers2

Linked