JavaFX: How to highlight certain Items in a TreeView

Question

I am trying to implement a search function for a TreeView in JavaFX. I want to highlight all the matches when the user hits the enter key. So I added a boolean isHighlighted to my TreeItem and in my TreeCells updateItem, I check whether the item isHighlighted and if so I apply a certain CSS. Everything works fine with the items/cells not visible at the moment of the search -- when I scroll to them, they are properly highlighted. The problem is: How can I "repaint" the TreeCells visible at search so that they reflect whether their item isHighlighted? My Controller does currently not have any reference to the TreeCells the TreeView creates.

Answer 1

This answer is based on this one, but adapted for TreeView instead of TableView, and updated to use JavaFX 8 functionality (greatly reducing the amount of code required).

One strategy for this is to maintain an ObservableSet of TreeItems that match the search (this is sometimes useful for other functionality you may want anyway). Use a CSS PseudoClass and an external CSS file to highlight the required cells. You can create a BooleanBinding in the cell factory that binds to the cell's treeItemProperty and the ObservableSet, evaluating to true if the set contains the cell's current tree item. Then just register a listener with the binding and update the pseudoclass state of the cell when it changes.

Here's a SSCCE. It contains a tree whose items are Integer-valued. It will update the search when you type in the search box, matching those whose value is a multiple of the value entered.

import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Random;
import java.util.Set;

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.beans.binding.BooleanBinding;
import javafx.collections.FXCollections;
import javafx.collections.ObservableSet;
import javafx.css.PseudoClass;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.control.TextFormatter;
import javafx.scene.control.TreeCell;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class TreeWithSearchAndHighlight extends Application {

    @Override
    public void start(Stage primaryStage) {
        TreeView<Integer> tree = new TreeView<>(createRandomTree(100));

        // keep track of items that match our search:
        ObservableSet<TreeItem<Integer>> searchMatches = FXCollections.observableSet(new HashSet<>());

        // cell factory returns an instance of TreeCell implementation defined below. 
        // pass the cell implementation a reference to the set of search matches
        tree.setCellFactory(tv -> new SearchHighlightingTreeCell(searchMatches));

        // search text field:
        TextField textField = new TextField();

        // allow only numeric input:
        textField.setTextFormatter(new TextFormatter<Integer>(change -> 
            change.getControlNewText().matches("\\d*") 
                ? change 
                : null));

        // when the text changes, update the search matches:
        textField.textProperty().addListener((obs, oldText, newText) -> {

            // clear search:
            searchMatches.clear();

            // if no text, or 0, just exit:
            if (newText.isEmpty()) {
                return ;
            }
            int searchValue = Integer.parseInt(newText);
            if (searchValue == 0) {
                return ;
            }

            // search for matching nodes and put them in searchMatches:
            Set<TreeItem<Integer>> matches = new HashSet<>();
            searchMatchingItems(tree.getRoot(), matches, searchValue);
            searchMatches.addAll(matches);
        });

        BorderPane root = new BorderPane(tree, textField, null, null, null);
        BorderPane.setMargin(textField, new Insets(5));
        BorderPane.setMargin(tree, new Insets(5));
        Scene scene = new Scene(root, 600, 600);

        // stylesheet sets style for cells matching search by using the selector 
        // .tree-cell:search-match
        // (specified in the initalization of the Pseudoclass at the top of the code)
        scene.getStylesheets().add("tree-highlight-search.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    // find all tree items whose value is a multiple of the search value:
    private void searchMatchingItems(TreeItem<Integer> searchNode, Set<TreeItem<Integer>> matches, int searchValue) {
        if (searchNode.getValue() % searchValue == 0) {
            matches.add(searchNode);
        }
        for (TreeItem<Integer> child : searchNode.getChildren()) {
            searchMatchingItems(child, matches, searchValue);
        }
    }

    // build a random tree with numNodes nodes (all nodes expanded):
    private TreeItem<Integer> createRandomTree(int numNodes) {
        List<TreeItem<Integer>> items = new ArrayList<>();
        TreeItem<Integer> root = new TreeItem<>(1);
        root.setExpanded(true);
        items.add(root);
        Random rng = new Random();
        for (int i = 2 ; i <= numNodes ; i++) {
            TreeItem<Integer> item = new TreeItem<>(i);
            item.setExpanded(true);
            TreeItem<Integer> parent = items.get(rng.nextInt(items.size()));
            parent.getChildren().add(item);
            items.add(item);
        }
        return root ;
    }

    public static class SearchHighlightingTreeCell extends TreeCell<Integer> {

        // must keep reference to binding to prevent premature garbage collection:
        private BooleanBinding matchesSearch ;

        public SearchHighlightingTreeCell(ObservableSet<TreeItem<Integer>> searchMatches) {

            // pseudoclass for highlighting state
            // css can set style with selector
            // .tree-cell:search-match { ... }
            PseudoClass searchMatch = PseudoClass.getPseudoClass("search-match");

            // initialize binding. Evaluates to true if searchMatches 
            // contains the current treeItem

            // note the binding observes both the treeItemProperty and searchMatches,
            // so it updates if either one changes:
            matchesSearch = Bindings.createBooleanBinding(() ->
                searchMatches.contains(getTreeItem()), 
                treeItemProperty(), searchMatches);

            // update the pseudoclass state if the binding value changes:
            matchesSearch.addListener((obs, didMatchSearch, nowMatchesSearch) -> 
                pseudoClassStateChanged(searchMatch, nowMatchesSearch));
        }


        // update the text when the item displayed changes:
        @Override
        protected void updateItem(Integer item, boolean empty) {
            super.updateItem(item, empty);
            setText(empty ? null : "Item "+item);
        }
    }

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

The CSS file tree-highlight-search.css just has to contain a style for the highlighted cells:

.tree-cell:search-match {
    -fx-background: yellow ;
}