[FIXED] 2 different lists in one ListView in JavaFX divided by a header

Issue

I am trying to implement an events list in one page in JavaFX, and I would like to display 2 lists: one for UPCOMING events and one for PAST events, both relative to the current date.

A lot of searches online lead me to using an ArrayAdaptor, but I am not allowed to use any other libraries except for JavaFX.

I would also like to divide these 2 lists by a header. Right now I am working with a base code:

/**
 * Panel containing the list of persons.
 */
public class HomePage extends UiPart<Region> {
    private static final String FXML = "home/HomePage.fxml";
    private final Logger logger = LogsCenter.getLogger(HomePage.class);

    @FXML
    private ListView<Trip> tripListView;

    public HomePage(ObservableList<Trip> tripList) {
        super(FXML);

        tripListView.setItems(tripList);
        tripListView.setCellFactory(listView -> new TripListViewCell());
    }

    /**
     * Custom {@code ListCell} that displays the graphics of a {@code Trip} using a {@code TripCard}.
     */
    class TripListViewCell extends ListCell<Trip> {
        @Override
        protected void updateItem(Trip trip, boolean empty) {
            super.updateItem(trip, empty);
            if (empty || trip == null) {
                setGraphic(null);
                setText(null);
            } else {
                setGraphic(new HomePageTripCard(trip, getIndex() + 1).getRoot());
            }
        }
    }

}

This is the .fxml code:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<VBox xmlns="http://javafx.com/javafx/11" xmlns:fx="http://javafx.com/fxml/1">
   <StackPane prefHeight="30.0" prefWidth="200.0" styleClass="stack-welcome" VBox.vgrow="NEVER">
      <children>
         <Label styleClass="label-welcome" text="Welcome-Message-Here" />
      </children>
   </StackPane>
   <StackPane prefHeight="15.0" prefWidth="200.0" styleClass="stack-header" VBox.vgrow="NEVER">
      <children>
        <Label styleClass="label-header" text="TripList" />
      </children>
   </StackPane>
   <StackPane>
      <ListView fx:id="tripListView" prefWidth="247.0" VBox.vgrow="ALWAYS" />
      <ListView fx:id="tripListView" prefWidth="247.0" VBox.vgrow="ALWAYS" />
   </StackPane>
</VBox>

I tried using 2 different list views, for some reason it only shows up with one of the list views.

Does anyone have any tips on how to go about implementing 2 lists in one list view in JavaFX?

Solution

I just decided to use 2 list views instead, with each list view having their own list cells, both within a single VBox.

Implementation in the java file

        tripListViewUpcoming.setItems(upcoming);
        tripListViewUpcoming.setCellFactory(listViewUpcoming -> new TripListViewCellUpcoming());

        tripListViewPast.setItems(past);
        tripListViewPast.setCellFactory(listViewPast -> new TripListViewCellPast(upcoming.size()));

Implementation in the FXML file

   <StackPane prefHeight="15.0" prefWidth="200.0" styleClass="trip-list-header" style="-fx-border-width: 0px 0px 2px 0px" VBox.vgrow="NEVER">
      <children>
         <Label styleClass="label-header" text="UPCOMING TRIPS" />
      </children>
   </StackPane>
   <ListView fx:id="tripListViewUpcoming" prefWidth="247.0" style="-fx-background-color: #fff;" VBox.vgrow="ALWAYS" />

   <StackPane prefHeight="15.0" prefWidth="200.0" styleClass="trip-list-header" style="-fx-border-width: 2px 0px 2px 0px" VBox.vgrow="NEVER">
      <children>
         <Label styleClass="label-header" text="PAST TRIPS" />
      </children>
   </StackPane>
   <ListView fx:id="tripListViewPast" prefWidth="247.0" style="-fx-background-color: #fff;" VBox.vgrow="ALWAYS" />

The downside is that the second list view does not come immediately after the last cell in the first list view, and both list views scroll interdependently.

Answered By - Meowmi