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.
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.
nice find, i have a use for that straight away
Reply
Mind me asking what? Just out of curiosity.
Reply
Show the rest of this thread
Nice one Jake.
Did you manually set the total record count in the component?
Mark
Reply
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.
Reply
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...
Reply
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.
Reply
Show the rest of this thread