JSF PrimeFaces DataScroller with Lazy Loading and no pagination (infinite scroll)

datascrollerjsf-2lazy-loadingprimefacesprimefaces-extensions

Since it's a new component, it might not be as stable.

Has anyone managed to implement this data scroller with lazy loading using an actual data source (e.g. DB)?

index.xhtml

<p:dataScroller value="#{postLoader.lazyModel}" var="post" lazy="true" chunkSize="5">

    <article>
        <h:outputText value="#{post.title}" />
        <br />
        <p:graphicImage value="/files/#{post.blobPath}" />
    </article>

    <hr />
</p:dataScroller>

PostLoaderBacking

@ManagedBean(name = "postLoader")
@ViewScoped
public class PostLoaderBacking implements Serializable
{

    // ==================== 1. Static Fields ==============================

    private static final long serialVersionUID = 2732106678777694908L;

    private static final int CHUNK_SIZE = 5;


    // ==================== 2. Instance Fields ============================

    @EJB
    private PostEJB postEJB;

    private int postCount;

    private LazyDataModel<PostEntity> lazyModel;


    // ==================== 4. Constructors ===============================

    @PostConstruct
    public void init()
    {
        postCount = postEJB.getPostCount();

        lazyModel = new LazyDataModel<PostEntity>() {

            private static final long serialVersionUID = -4742720028771554420L;

            @Override public List<PostEntity> load(final int first, final int pageSize,
                    final String sortField, final SortOrder sortOrder,
                    final Map<String, Object> filters) { 


                final int startingFrom = postCount - first; 

                return postEJB.loadLatestPosts(startingFrom, CHUNK_SIZE);
            }
        };
    }


    // ==================== 7. Getters & Setters ======================

    public LazyDataModel<PostEntity> getLazyModel()
    {
        return lazyModel;
    }

}

My solution works fine up to a point. It only loads two chunks. For example, if my chunk size is 2 (no pun intended), then it will load 4 posts in total, although I have much more where those came from.

Why does it stop loading at some point? I scroll down the page and nothing happens. On which criteria does the primefaces implementation decide if it should load?

Best Answer

I had the same problem.

My problem was that I used setRowCount(currentNumberOfRows) in the LazyDataModel. This resulted in loading content exactly twice - as your problem also was.

Try setting the rowCount to the total number of rows that are available in the database.

The basic idea is to have a LoadMoreView which invokes the loadMore method on the controller every time the view is visible on the current viewport. I'm using the jQuery plugin inview for this. It allows you to register for an inview event, which is fired when the element of the specified selector is visible on screen and when it disappears.

The controller also has properties which indicate whether there are more items to load and if there are currently items fetched. These properties are called canLoadMore and isLoading.

The LoadMoreView basically looks like this:

App.LoadMoreView = Ember.View.extend({
  templateName: 'loadMore',
  didInsertElement: function() {
    var view = this;
    this.$().bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
      if (isInView) Ember.tryInvoke(view.get('controller'), 'loadMore');
    });
  }
});

where the loadMore template is defined as follows:

{{#if isLoading}}
    fetching some more stuff <img width="10" src="img/ajax-loader.gif" >
{{else}}
    {{#if canLoadMore}}
        <a {{action "loadMore" target="controller" }}>click to load more items</a>
    {{else}}
        <i>no more items</i>
    {{/if}}
{{/if}}

The controller which handles the fetching of more items is then implemented as follows. Note that in the loadMore method a query on the store is performed, which loads a specific page of of entries for a model.

App.EventsController = Ember.ArrayController.extend({
  currentPage: 1,

  canLoadMore: function() {
    // can we load more entries? In this example only 10 pages are possible to fetch ...
    return this.get('currentPage') < 10;
  }.property('currentPage'),

  loadMore: function() {
    if (this.get('canLoadMore')) {
      this.set('isLoading', true);
      var page = this.incrementProperty('currentPage');

      // findQuery triggers somehing like /events?page=6 and this
      // will load more models of type App.Event into the store
      this.get('store').findQuery(App.Event, { page: page });
    } else {
      this.set('isLoading', false);
    }
  }
});

The only thing left is to initially set the content of the controller to the result of a filter function, so the content is updated when new models are loaded into the store (which happens due to the findQuery method in the loadMore of the controller). Also, a query hash is added when the filter is invoked. This ensures that an initial query to the server is made.

App.eventsController = App.EventsController.create({
    content: []
});

var events = App.store.filter(App.Event, { page: 1 }, function(data) {
    // show all events; return false if a specific model - for example a specific
    // type of event - shall not be included
    return true;
});

Best Answer

Related Solutions

@ViewScoped creating new instance on every postback

See also

Infinite scroll with ember.js (lazy loading)

Related Topic