JavaFX Binding, Events & Styling

Observable Collections

18 min Lesson 4 of 12

Observable Collections

In the previous lessons you saw how individual JavaFX properties notify listeners when their value changes. The same principle extends to collections: JavaFX ships a parallel set of observable wrappers for List, Map, and Set that fire granular change events whenever elements are added, removed, or replaced. This is the plumbing behind every ListView, TableView, and ComboBox in a real application — they watch an ObservableList and refresh automatically, so you never have to manually tell the UI to redraw.

Creating an ObservableList

The factory class FXCollections is your starting point for all observable collections. You almost never instantiate the concrete classes directly; you go through the factory so the implementation can evolve without breaking your code.

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

// Wraps an ArrayList internally
ObservableList<String> names = FXCollections.observableArrayList();
names.addAll("Alice", "Bob", "Carol");

// From an existing list
List<String> raw = List.of("X", "Y", "Z");
ObservableList<String> copy = FXCollections.observableArrayList(raw);

ObservableList<E> extends java.util.List<E>, so every standard collection operation — add, remove, sort, subList — works exactly as you expect. The only difference is that mutations also fire events.

Listening to Changes with ListChangeListener

Attach a ListChangeListener to receive a detailed description of every mutation. The listener receives a Change object that you must iterate, because a single logical operation (for example, setAll) can produce multiple disjoint sub-changes.

import javafx.collections.ListChangeListener;

ObservableList<String> items = FXCollections.observableArrayList("A", "B", "C");

items.addListener((ListChangeListener<String>) change -> {
    while (change.next()) {
        if (change.wasAdded()) {
            System.out.println("Added: " + change.getAddedSubList());
        }
        if (change.wasRemoved()) {
            System.out.println("Removed: " + change.getRemoved());
        }
        if (change.wasReplaced()) {
            System.out.println("Replaced at index " + change.getFrom());
        }
        if (change.wasPermutated()) {
            // Elements were reordered, e.g. after a sort
            for (int i = change.getFrom(); i < change.getTo(); i++) {
                System.out.println("Index " + i + " moved to " + change.getPermutation(i));
            }
        }
    }
});

items.add("D");          // fires: Added [D]
items.remove("B");       // fires: Removed [B]
items.set(0, "Alpha");   // fires: Replaced at index 0
FXCollections.sort(items); // fires: Permutated

Always call change.next() in a loop. A Change object is a cursor that may describe several sub-ranges of the list. Reading only the first one — or forgetting the loop entirely — silently drops information about multi-element operations like addAll or removeIf.

Wiring an ObservableList to a UI Control

JavaFX controls that display collections accept an ObservableList as their model. The control subscribes internally; you never need to write a listener yourself just to refresh the view.

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ListView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TaskListApp extends Application {

    private final ObservableList<String> tasks =
            FXCollections.observableArrayList("Write tests", "Fix bug #42", "Deploy");

    @Override
    public void start(Stage stage) {
        ListView<String> listView = new ListView<>(tasks); // model wired here

        Button addBtn = new Button("Add Task");
        addBtn.setOnAction(e -> tasks.add("New task " + (tasks.size() + 1)));

        Button removeBtn = new Button("Remove Last");
        removeBtn.setOnAction(e -> {
            if (!tasks.isEmpty()) tasks.remove(tasks.size() - 1);
        });

        VBox root = new VBox(10, listView, addBtn, removeBtn);
        stage.setScene(new Scene(root, 300, 250));
        stage.setTitle("Observable Task List");
        stage.show();
    }

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

Notice what is absent: there is no call to listView.refresh() or listView.getItems().clear() followed by a re-add. You mutate tasks and the ListView reacts on its own. This is the observable pattern paying off in practice.

Keep the ObservableList as a field, not a local variable. Controls hold only a reference to the same list object. If you reassign the field to a new list the control still watches the old one and goes stale. Mutate the existing list in-place, or call listView.setItems(newList) explicitly to swap the model.

ObservableMap and ObservableSet

The same pattern exists for maps and sets:

import javafx.collections.FXCollections;
import javafx.collections.ObservableMap;
import javafx.collections.MapChangeListener;

ObservableMap<String, Integer> scores = FXCollections.observableHashMap();

scores.addListener((MapChangeListener<String, Integer>) change -> {
    if (change.wasAdded()) {
        System.out.printf("PUT  %s = %d%n", change.getKey(), change.getValueAdded());
    }
    if (change.wasRemoved()) {
        System.out.printf("REMOVED  %s (was %d)%n", change.getKey(), change.getValueRemoved());
    }
});

scores.put("Alice", 95);   // PUT  Alice = 95
scores.put("Alice", 97);   // REMOVED Alice (was 95)  +  PUT Alice = 97
scores.remove("Alice");    // REMOVED Alice (was 97)

For a map, a put that replaces an existing key fires both a removed event (old value) and an added event (new value) in one listener call — the same Change object carries both wasAdded() and wasRemoved() as true.

Filtered and Sorted Views

Rather than managing a second collection in sync with the first, JavaFX gives you live view wrappers that automatically stay consistent:

import javafx.collections.transformation.FilteredList;
import javafx.collections.transformation.SortedList;
import javafx.scene.control.TextField;

ObservableList<String> allItems = FXCollections.observableArrayList(
        "apple", "banana", "apricot", "cherry", "avocado");

// FilteredList wraps allItems; predicate can be changed at runtime
FilteredList<String> filtered = new FilteredList<>(allItems, s -> true);

// SortedList wraps the FilteredList for a complete pipeline
SortedList<String> sorted = new SortedList<>(filtered,
        Comparator.naturalOrder());

ListView<String> listView = new ListView<>(sorted);

// Wire a search field to the filter predicate
TextField search = new TextField();
search.textProperty().addListener((obs, old, text) ->
        filtered.setPredicate(s -> s.startsWith(text.toLowerCase())));

The pipeline is allItems → FilteredList → SortedList → ListView. Mutating allItems (adds, removes) propagates through automatically. Changing the predicate or comparator re-evaluates immediately — no boilerplate loop needed.

Bind the SortedList comparator to a TableView's sort order when you pair them: sorted.comparatorProperty().bind(tableView.comparatorProperty()). Without this binding, clicking a column header sorts the visual order but not the backing SortedList, and the table will appear to sort but then "snap back" inconsistently.

Extractor — Reacting to Element Property Changes

By default, an ObservableList only fires events when the set membership changes (add/remove/replace). If your elements are JavaFX beans and you need the list to also fire events when a property inside an element changes, use an extractor:

import javafx.beans.Observable;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

public class Employee {
    private final javafx.beans.property.StringProperty name =
            new javafx.beans.property.SimpleStringProperty(this, "name");

    public Employee(String n) { name.set(n); }
    public javafx.beans.property.StringProperty nameProperty() { return name; }
    public String getName() { return name.get(); }
}

// The extractor tells the list WHICH properties to watch per element
ObservableList<Employee> employees = FXCollections.observableArrayList(
        emp -> new Observable[]{ emp.nameProperty() }
);

employees.add(new Employee("Alice"));
employees.addListener((ListChangeListener<Employee>) change -> {
    while (change.next()) {
        if (change.wasUpdated()) {
            System.out.println("Employee updated in range ["
                    + change.getFrom() + ", " + change.getTo() + ")");
        }
    }
});

// This now fires a wasUpdated() event
employees.get(0).nameProperty().set("Alicia");

Without the extractor, renaming an employee updates the object in memory but the list remains silent — the ListView never repaints the row. With the extractor, a wasUpdated() change event is fired and any bound control re-renders automatically.

Summary

ObservableList, ObservableMap, and ObservableSet are standard Java collections augmented with change notification. You create them through FXCollections, attach ListChangeListener or MapChangeListener to react to mutations, and wire them directly to controls like ListView and TableView. FilteredList and SortedList give you live pipeline views with zero manual synchronisation. When your elements are JavaFX beans, use an extractor to also catch intra-element property changes. Together these tools make the data layer of a reactive UI both declarative and reliable.