Framework: Infinite scrolling generic component

[heruan]

With the new data provider and query callbacks, Grid and ComboBox had become very powerful components when dealing with a backend datasource with a huge number of items.

It would be really great then to have an extendable generic component to extend which provides an easy interface to the infinite scrolling behavior, without dealing with design context and connectors.

Something to use like this:

public class ListComponent<T> extends InfiniteScrolling<T> {

    public ListComponent(ComponentContainer root) {
        this.setDesignRoot(root);
        this.addNewItemsListener(event -> {
            event.getItems().forEach(item -> {
               root.addComponent(this.itemComponentGenerator.apply(item));
            });
        });
    }

}

ListComponent<Issue> issueList = new ListComponent<>(new VerticalLayout());
issueList.setDataProvider(issueBackendDataProvider);
issueList.setItemComponentGenerator(issue -> {
    HorizontalLayout issueLayout = new HorizontalLayout();
    // ...
    return issueLayout;
});

and have the InfiniteScrolling handle data provider querying and sorting and filtering when necessary.

This would permit to build list views like GitHub's issues:

or StackOverflow's tag list:

(I know they use pagination, so the component might have the user choose if use pagination or infinite scrolling).

[pleku]

Would require #8492

[stevebor1]

Simply put, Vaadin needs a Repeater Component/Layout that can have a DataProvider. Let the developer decide what the need repeated and rendered; CustomComponent, Text, HTML. Maybe Layouts should support a dataprovider? Since v6, I've been hacking the Table and now Grid to display data backed by a "Lazy Loading DataProvider" that allows the use to scroll through whatever. Cards, News, Search Results, Article.

[Legioth]

I did a prototype for something similar based on Container from Vaadin 7. https://github.com/Legioth/Listing/blob/master/listing-demo/src/main/java/org/vaadin/listing/demo/Demo.java#L51

It's quite straightforward right now since it doesn't do any lazy loading. Things do however get really complicated if you want to have something that automatically does client-side lazy loading without any custom client-side code.

[neerup]

Any news on this?

[hesara]

Does the add-on https://vaadin.com/directory#!addon/lazylayouts do more or less what you want?

[heruan]

That's specific to layouts, I think @stevebor1 put it very simply: Vaadin needs a repeater, i.e. a wrapper of any component which repeats the component given a data-provider, fetching and endering the needed elements as Grid does. The idea is the same as Polymer's dom-repeat element.

[hesara]

Vaadin components are somewhat heavy-weight for this with their lifecycle, listeners, matching client and server side parts etc. On the other hand, renderers were designed for this kind of "stamping" use cases, so if you want this for Vaadin Framework 8, I'd recommend creating an add-on based on renderers. #8492 is still a potential issue for this.

[stevebor1]

To achieve the repeater-like functionality (supports paging), I've relied on Table and now Grid along with a generated column using the component. the downside to this is that those components heavily rely on a tabled layout, with generally fixed row height and unwanted column behavior (resizing etc). I just upgraded to 8.1.1 so not sure if Grid has height restriction or require all rows to be the same height (for scrolling to work properly).
I did end up creating my own LazyLayout component that takes a datasource and renders the components, however you have to manual click to page for now. - and it is not as abstract, but gets the job done. I use it to display search results, newspaper-ish results, and many more that do not conform to a fixed height or even a pure vertical layout.

A simple, dumb, table-less, and limited default styling, 'repeater' component that supports data/dataprovider with a renderer using the component of choice would be lovely. ✌

re: #8492 I think I might have triggered that issue to be created as I have a back end source that does not provide a count (solr and some post-processing). Any count provided is only an estimate and changes with each request.

-sorry for repeating myself

[Artur-]

This will be implemented in Vaadin 10, through https://github.com/vaadin/vaadin-iron-list-flow and/or through DOM repeats in templates. Please check those out to see if your specs/requirements are fulfilled by them