GWT – Loading like Facebook

In this post we will examine a simple yet powerful technique to load/render thousands or even millions of widgets on the browser without any noticeable delay.

The conventional technique to render considerable number of  widgets on the browser is by using Cell based widgets in GWT like CellTable, CellTree etc. CellTree, though quite powerful and elegant way of  handling large data sets, is not necessarily always the best option to layout UI and styling may not always be too easy.

For example, let’s assume that we have a simple form like
which we want to render on screen for every

screen-shot-2016-12-26-at-3-40-42-pm

file uploaded by the user. You can also think of it as a Facebook post. Now, this works fine if there are limited number of forms to be rendered on screen. It even works fine for couple hundred forms but you’ll start to notice the delay as soon as the number starts reaching millions.

The trick here is to load/render the forms/posts on demand. As soon as the user scrolls the page to view more results and hits the bottom, the next set of forms will be rendered. We keep this next set as low as only 10 records, so, the rendering happens so fast that it feels to the user that the data was always there.

So, without any delay let’s jump right into the code and see it in action.

Step 1: Create a Dumb form

First of all we will create a Form to be rendered on screen numerous time. In this example we will populate this form on client side itself using hardcoded values but in a live project all the values will, of course, be fetched from the Database.

UiBinder Template – DumbDetailsForm.ui.xml

 

See  for more details on GWT UiBinder.

Owning Java File – DumbDetailsForm.java

Step 2: Create Container for holding forms

Step 3: Update onModuleLoad method

 

Step 4: Run the completed example

This is how the finished project will look.

infinitescroll

Watch the video to notice how more documents get loaded as soon as the vertical scroll touches the bottom of scroll panel.

 

I hope you will find a use case for it in your current project instead of a Cell based widget.