Vaadin Connect布局和数据提供程序

Question

我想根据几个过滤器在布局中显示组件。布局不支持添加DataProvider。如何将FilterablePageableDataProvider映射到布局？

@PageTitle(VIEW_RECIPES_TITLE)
@UIScope
@Route(value = PAGE_RECIPES, layout = MainView.class)
public class RecipesView extends VerticalLayout implements DataProviderListener<Cookbook> {

    private final CookbookService cookbookService;
    private final TextField nameFilter;
    private final VerticalLayout layout;
    private final FilterablePageableDataProvider<Cookbook, Void> dataProvider;

    @Autowired
    public RecipesView(CookbookService cookbookService) {
        this.cookbookService = cookbookService;

        layout = new VerticalLayout();
        layout.setSizeFull();
        setSizeFull();

        dataProvider = new FilterablePageableDataProvider<Cookbook, Void>() {
            @Override
            protected Page<Cookbook> fetchFromBackEnd(Query<Cookbook, Void> query, Pageable pageable) {
                return cookbookService.findByNameLikeWithEagerRelationships(getRepoFilter(), pageable);
            }

            @Override
            protected int sizeInBackEnd(Query<Cookbook, Void> query) {
                return cookbookService.findByNameLikeWithEagerRelationships(getRepoFilter(), PageRequest.of(query.getOffset(), query.getLimit())).getNumberOfElements();
            }

            private String getRepoFilter() {
                String filter = nameFilter.getValue();
                return "%" + filter + "%";
            }

            @Override
            protected List<QuerySortOrder> getDefaultSortOrders() {
                return new QuerySortOrderBuilder().thenAsc("name").build();
            }

        };

        nameFilter = new TextField();
        nameFilter.setPlaceholder("Name...");
        nameFilter.addValueChangeListener(e -> dataProvider.refreshAll());

        dataProvider.addDataProviderListener(this);

        for (int i = 0; i < 7; i++) {
            layout.add(createCard(i));
        }

        add(nameFilter, layout);

    }

    private Component createCard(int i) {
        return new Div(new Text("Hello world " + i));
    }

    @Override
    public void onDataChange(DataChangeEvent<Cookbook> event) {
        if (layout != null) {
            layout.removeAll();
            for (int i = 0; i < 7; i++) {
                layout.add(createCard(i));
            }
        }
    }
}

代码包含用于服务的dataProvider，我尝试使用addDataProviderListener，但它无法正常工作。我的想法是从布局中添加一个ChangeEvent（相应地删除），但是该事件不包含此信息。 Layouts和DataProvider是否有某种映射器？