Smart Scrolling with Bindows

Smart scrolling is the concept of navigating through a large data set (usually a list or grid) by using scroll bars rather than by pagination. The idea is that scroll bars are more "natural" at navigation because they're already there.

Yahoo!'s Bill Scott, most notable for his UI patterns work, blogs about it here ("Rico's LiveGrid"). You can see real life implementations of it as well. Live.com uses the concept for its image searching and the Google Reader uses it for long feed lists.

With Bindows, we can create our own "LiveGrid." We do this by using any of the Bindows trees or grids. To populate and then navigate the grid, we'll get data asynchronously and because our data source returns the JSON format, we'll use the JSON loader component.

Where will we get the data? We'll get it from Yahoo!. They have a great search API which conveniently returns results in JSON.

So, the three things we'll be focusing on are --

• Creation of the grid
• Asynchronously populating the grid (Ajax!)
• Handling scroll events

So, let's look closer at the details. Because "smart scrolling" deals with scrolling, it's obvious that we need to be able to listen for and handle scroll events.

In particular, we'll handle vertical and ignore horizontal scrolling. We'll asynchronously fetch a row (in our case, we'll fetch 15 rows) when we scroll down. When we scroll up, we just scroll the data up. No fetching is done.

The grid that we'll use is really a tree -- BiTree2. There's no particular reason why we chose that component. We could have easily chosen BiTree, BiGrid or even BiGrid2 (similar to BiTree2 but has table/grid properties). The functionality that you want will dictate which component you use. In our case, BiTree2 fits nicely.

So, here's how we create our grid. It's pretty straightforward --




Now, to populate the grid, we'll use data from the Yahoo! Search API. You can read more about the API here, but basically, it's a RESTful API.

We'll submit a asynchronous search request (we're using an proxy server based on Yahoo!'s Search example) and tell the API that we want our results back as JSON. Then, we'll go through that data and take out the pieces that we want and add them to the grid.

To do the Ajax part, we'll use BiJsonLoader. We'll first submit the request through BiJsonLoader and then listen for the load event. The load event fires when the data is all there --



Once we have the data, it's just a matter of parsing the JSON formatted data and extracting what we want. It's pretty easy --



The final piece is handling scrolling. Here's the code --



The first few lines of the event handler handleScrolling effectively ignores horizontal scrolling. When it happens, immediately return.

The rest of the handler deals with vertical scrolling. Basically, we're comparing the position of the previous scrollTop with the current scrollTop. If the current scrollTop is greater than the previous scrollTop, then we call the method searchForward which asynchronously requests the next search results. Otherwise, we do nothing or return.

You can see the example here (I'm using Bindows 2.5).

The code is found here.

Feel free to use it and if you have comments, let me know. I only ask that if you do use it, let them know where you got it from.

Have fun!