logo

Lazy-Loading Large Domino Views in Flex

Love or loath data-grids they're a quick and useful way to show a view on the web. They have to be used with caution though and whether you use them at all or not is down to the requirements of each application.

One shortcoming of data-grids is in dealing with really big views of data. Say, like 40,000 documents, as in the Fake Names address book. Here we wouldn't want to load all that data in one go.

One option for large datasets is to use paging - where the user see a "Page X of Y" message and navigational buttons. Solves the problem but not particularly user-friendly are they.

A much better option is to use "lazy loading", which is what the following Flex DataGrid demo does. As you can see from the scrollbar it's a large view (it's feeding off the 40,000 docs in the NAB I mentioned earlier). However, it has only actually loaded the first 100 documents.

Either scripts and active content are not permitted to run or Adobe Flash Player version 10.0.0 or greater is not installed.

Get Adobe Flash Player

If you use the scroll-bar arrow (avoid dragging the scrollbar for best results) to move to the end of the first 100 documents you should then see a flicker as the next set of 100 documents loads from the server. Then drag the scrollbar right down to the very bottom and see the very last set load (all those in-between won't load - until needed).

Cool, no?

It uses Flex 4's new AsyncListView, which James Ward talked about here. What you see above is his code re-worked to adapt to use with Domino's URL rules and using XML rather than AMF, which is something I'd like to look in to using with Domino at some point if I get the chance.

Shortcomings

As with any paged set of data it all falls down when you try and sort a column or filter the data. In both cases you'd need to over-ride the defaults for these events to force a trip back to the server. Probably possible, but I don't have time to look in to it.

The Code

The Flex code used is exactly the same as on James Wards' site but I replaced the RemoteObject with an HTTPService, like this one:

<s:HTTPService url="http://www.codestore.net/fakenames.nsf/PeopleXML?OpenView" 
        resultFormat="e4x" id="ro" method="GET"/>

And I modified the code that handle sending/processing date requests to look like this:

var asyncToken:AsyncToken = ro.send({'start':startIndex+1, 'count':numItemsToFetch});

asyncToken.addResponder(new AsyncResponder(function result(event:ResultEvent, token:Object = null):void {
        var people:XMLList = event.result.person as XMLList;
                                                
        for (var i:uint = 0; i < people.length(); i++){
                items.setItemAt(peoplei, token + i);
        }
        }, 
        function fault(event:FaultEvent, token:Object = null):void {
                trace(event.fault.faultString);
        },
        startIndex)
);

The rest of the code you can get from James' site. Enjoy.

Comments

  1. nice find, i have a use for that straight away

      • avatar
      • Jake Howlett
      • Wed 13 Oct 2010 12:06 PM

      Mind me asking what? Just out of curiosity.

      Show the rest of this thread

    • avatar
    • Mark Barton
    • Thu 14 Oct 2010 02:32 AM

    Nice one Jake.

    Did you manually set the total record count in the component?

    Mark

      • avatar
      • Jake Howlett
      • Thu 14 Oct 2010 02:34 AM

      Yeah, sorry, forgot to mention that. I know exactly how many docs are in that DB and it won't ever change so I hard-coded it. In real life you'd need to "init" the app with a call to a data URL that tells you things like this total before kicking off a request for the first set of docs.

  2. Great technique. Although you're right that pagination is not very user-friendly, it does have its charm: it does not break the back button and it is better for SEO. I think both issues are less relevant in a Flex web app, just saying...

      • avatar
      • Jake Howlett
      • Thu 14 Oct 2010 03:24 PM

      But, with Flex the back button should never really be an issue. Flex apps never normally leave the web page from which they were loaded.

      Same with SEO. If SEO is important, Flex probably isn't the right tool.

      Show the rest of this thread

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Wed 13 Oct 2010

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content