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.

volatile piggybacking

Volatilty piggybacking is the (dubious ?) technique which attributes volatile-like semantics to non-volatile variables.

The new memory model , from java 5, states that "a write to a volatile field (§8.3.1.4) happens-before every subsequent read of that field".

i.e writing to a volatile field creates a memory fence, which will flush the data held in memory cache, so that anything visible to the thread writing to a volatile field becomes visible to any other thread reading that same field. 

The "anything" in the sentence above might be a non-volatile variable - which will end up being visible to all threads in the same way the volatile which initially triggered the memory fence is. Thus the former piggybacks on the memory flush triggered by the later.

Examples of this technique in core jdk classes are hard to come by (ie. I havent found any...) . Possibly a reflection on how fragile that technique is. 

First steps with GWT Bootstrap

Gwt-Bootstrap is the port for Gwt of the Twitter Bootstrap framework. Twitter Bootstrap  defines a set of javascript and css components which are used to kickstart the development of websites (at least on the client-side).

The idea is to make it easy to develop a reasonably-good looking website without too much effort. Although of course a truly polished result will require additional customisation work on top of the framework. Twitter bootstrap also provides advanced features out-of-the-box, eg. responsive design (the components size is automatically adjusted function of the resolution of the device they're being drawn on to). 

How to use.

The best way to learn is to download the Gwt-bootstrap sources from Github and study the examples provided... but to sum up:

- Grab the GWT-bootstrap jar , version 2.0.3.0-SNAPSHOT at the time of writing.

- Add the jar to your project build path (menu File->Properties->Java Build Path in Eclipse)

- In the gwt.xml config file add a reference to the gwt-bootstrap library.

 <inherits name ="com.github.gwtbootstrap.Bootstrap"/>

- Assuming you're using UI binder then add the following namespace to the <ui:UiBinder> element.

xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"

- the bootstrap components are now ready to be used:

<b:heading size="2">Hello World</b:heading>

    

Downsides.

- Gwt-Bootstrap it's still a work in progress. Not all Gwt widgets have been ported yet, eg.CellTable is missing at the time of writing.

- Most sites built with bootstrap tend to look a little bit similar. Greyish tones, the top navigation bar and the "Hero" unit underneath are the usual dead giveaways.

Examples.

Builtwithbootstrap has an extensive collection of websites leveraging Twitter bootstrap.

For Gwt-bootstrap specific websites - the main reference is the gwt-bootstrap showcase.


Edit 1: my side-project also runs gwt-bootstrap. Check it out.

Edit 2: one of the GWT-bootstrap committer copies most of the above post, without attribution. Now - as the saying goes imitation is the most sincere form of flattery but still that's another point in the downsides section - dubious ethics from (some) of the developers on this project.