Infinite scroll with GWT

The classical pagination pattern leads the user to click on numbered icons to navigate in a long list, each icon being associated with a different page in the list. This is how you browse google search results for instance. This is optimal when moving from page 1 to page 999, but not so much when moving from page to page in sequential order, which is the most frequent use case.

The alternative is the "infinite scroll" technique. Here the application detects when the user scrolls down to the bottom of the list, and automatically adds the result of the next page to the list. Scrolling can go on this way for as long as results are available to be added to the list, hence the term "infinite scroll". Obviously it's infinite in theory only... but I guess "very long scroll" doesnt have quite the same ring to it.

Building an infinite scroll component withb GWT is easy.... because it's already been done. Check out the GWT showcase  for an example. Or have a look at my side-project javadevjobs.com .

The key is in the ShowMorePagerPanel class (source code available from the showcase page) which listens for scroll events and  increases the display range when the it detects that the scrollbar has nearly reached its bottom position. This triggers in turn a rangeChangeEvent which acts as cue for the dataProvider to go and fetch more records from the database.











2 comments:

  1. Great, I saw your side-project!

    I've got a couple of questions:

    1) Did you use CellTable, DataGrid or whatelse for displaying the data rows ?

    2) How could you made ShowMorePagerPanel access the scrollpanel inside the structures reported in 1) ?

    For example if I use DataGrid and ShowMorePagerPanel the scrolling events are caught by the scrollpanel inside the DataGrid and not by the one inside ShowMorePagerPanel.

    thank you

    ReplyDelete
  2. 1) I used CellTable

    2) The ShowMorePagerPanel constructor registers a scroll handler hook. When triggered this handler refreshes the display... see lines 58-78 in the ShowMorePagerPanel code at:
    https://code.google.com/p/google-web-toolkit/source/browse/trunk/samples/showcase/src/com/google/gwt/sample/showcase/client/content/cell/ShowMorePagerPanel.java?r=8511

    ReplyDelete