JavaFX: как выделить определенные элементы в TreeView

Question

Я пытаюсь реализовать функцию поиска для TreeView в JavaFX. Я хочу выделить все совпадения, когда пользователь нажимает клавишу ввода. Поэтому я добавил boolean isHighlighted к моему TreeItem и в моем TreeCells updateItemПроверяю, есть ли товар isHighlighted и если это так, я применяю определенный CSS. Все отлично работает с элементами / ячейками, не видимыми в момент поиска - когда я прокручиваю их, они правильно подсвечиваются. Проблема заключается в следующем: как я могу "перекрасить" TreeCells, видимые при поиске, чтобы они отражали, является ли их элемент isHighlighted? Мой контроллер в настоящее время не имеет никаких ссылок на TreeCells TreeView создает.

Answer 1

Этот ответ основан на этом, но адаптирован для TreeView вместо TableViewи обновлен для использования функциональности JavaFX 8 (значительно сокращая объем требуемого кода).

Одна стратегия для этого состоит в том, чтобы поддерживать ObservableSet из TreeItems которые соответствуют поисковому запросу (это иногда полезно для других функций, которые вам могут понадобиться в любом случае). Используйте CSSPseudoClass и внешний файл CSS, чтобы выделить необходимые ячейки. Вы можете создать BooleanBinding в клеточной фабрике, которая связывается с клеткой treeItemProperty и ObservableSet, оценивая true если набор содержит текущий элемент дерева ячейки. Затем просто зарегистрируйте прослушиватель с помощью привязки и обновите состояние псевдокласса ячейки при ее изменении.

Вот SSCCE. Содержит дерево, предметы которого Integerзначный. Он будет обновлять результаты поиска при вводе в поле поиска, сопоставляя те, чье значение кратно введенному значению.

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);
    }
}

Файл CSS tree-highlight-search.css просто должен содержать стиль для выделенных ячеек:

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