« Bumpslide Library 0.9.4 Released
JSFL: Timeline to AS2 Class »

Paged Loading with XML-based Recordsets

One of the nicest things about Flash Remoting in Actionscript 2 is the pageable recordset functionality. This allows you to split the results of a large data set into chunks, or pages, that can be downloaded on an as-needed basis. This is a demonstration of how to use this paging functionality with XML-based web services. Specifically, I've created a sample application that uses the Flickr REST API (XML) to do a photo search.

Demo: Flickr Tag Search
Source: FlickrDemo.zip

Enter a tag in the search box, and hit 'go'. The results are loaded in batches of 100, and they fill in as you scroll. As you can see, we know how many records are available even before they are all loaded. We are

I've used this feature on a number of projects that included Flash remoting, and it is truly amazing. When in paged loading mode, a recordset instance is like an array that doesn't have all it's slots filled in. If I am a movie clip representing a datagrid row that needs record at slot 537 and that record is not loaded yet, the recordset gives me a little message, "in progress", instead of the actual data. The mx.remoting.Recordset class and it's friends take care of managing the server requests needed to load the missing data. Then, I simply listen for model change events until I get the data I need. As the definition above states, the List-based v2 UI components all understand this data provider API and can auto-fill themselves on an as-needed basis. This makes it possible to create things like scrolling lists that have thousands of records.

There are times when I've needed this same kind of paged loading functionality, but I didn't have access to Flash remoting. Instead, I needed to use an XML-based service that returned results based on GET method parameters that would either specify or range of records to return or simply a page number and the number of items per page. So, I have built a couple of classes that fetch data using XML and then use the built-in paging functionality provided with the mx.remoting code. This system has been set up in such a way that you can simply extend my XmlRecordsetService base class, implement a few key functions, and your result will be an instance of a class that extends mx.remoting.RecordSet. This recordset can be plugged in to any of the list-based components that come with Flash including the DataGrid that I have used in my demo.

Now, on to the code...

When you load a Flash Remoting service that returns a recordset, the recordset maintains a reference to the service class, and requests data when needed. I have created a class that extends the RecordSet class which allows me to do a couple of essential things. One is that I can reate a recordset from an array of objects using the static 'create' method. The second is that this class overrides a couple of methods that interface with the service layer.

com.bumpslide.services.CustomRecordset.as

I've done my best to implement the existing remoting service interface, but in the mx remoting classes, there is no formal interface here, and on top of that, there are a couple of bits of code in the original RecordSet class that needed fixing. So, this 'Custom' recordset class fixes those things.

Now, the other side of this recordset/service partnership is of course the service loading code. For this, I have an abstract class I call XmlRecordSetService. This class actually inherits functionality from the XmlService class which is itself an implementation of my Bumpslide service interface as defined in the abstract class com.bumpslide.services.Service. Now, this code is meant to be compiled, and not read, so we'll skip an analysis and jump into an implementation.

This is my Flickr Photo service class:

PLAIN TEXT
Actionscript:
  1. import com.bumpslide.util.Debug;
  2. import com.bumpslide.util.Sprintf;
  3.  
  4. /**
  5. *  XmlRecordSetservice to retrieve flickr photos
  6. *
  7. *  This class is an example of how to use the xml recordset functionality.
  8. *  Flickr photo search is a perfect example of an XML based service that
  9. *  returns data in pages.
  10. *
  11. *  We just need to tell our service how to interpret and fetch these pages,
  12. *  and it will return an mx.remoting.Recordset class with full paged
  13. *  data loading and model updates. 
  14. *
  15. *  @author David Knape
  16. *
  17. *  Copyright © 2006 David Knape (http://bumpslide.com)
  18. *  Released under the open-source MIT license.
  19. *  http://www.opensource.org/licenses/mit-license.php
  20. *  See LICENSE.txt for full license terms.
  21. */
  22. class com.bumpslide.services.FlickrPhotoService extends com.bumpslide.services.XmlRecordSetService
  23. {
  24.     //
  25.     var FLICKR_REST_ENDPOINT : String = "http://api.flickr.com/services/rest/";
  26.     var FLICKR_API_KEY : String = "xxxxxxxxxxxxxxxxxxxxxxxxxx";
  27.    
  28.     // auto read ahead...
  29.     var prefetchPages : Number = 2;
  30.     var pageSize : Number = 100;   
  31.    
  32.     // pass 'onServiceBusy' events without any delay
  33.     // so we can display messages related to behind the scenes loading
  34.     // of page requests
  35.     var busyMs = 1;
  36.    
  37.     // show debug messages
  38.     var debug = false;
  39.        
  40.     /**
  41.     * STEP 1 - Parse arguments into named variables using getters
  42.     */
  43.     function get tags () : String {
  44.         return args[0];
  45.     }
  46.    
  47.     /**
  48.     * STEP 2 - Build the URL
  49.     */
  50.     function buildUrl() {      
  51.        
  52.         var url:String = FLICKR_REST_ENDPOINT + '?';   
  53.         var params:Object = getUrlParameters();  
  54.         params['api_key'] = FLICKR_API_KEY;    
  55.         for(var p in params) {
  56.             if(params[p]!=undefined) {
  57.                 url += Sprintf.format( '%s=%s&', p, params[p] );
  58.             }
  59.         }      
  60.         return url;
  61.     }
  62.    
  63.     /**
  64.     * a little helper for our flickr service
  65.     *
  66.     * (we can easily override this later in a subclass if necessary)
  67.     */
  68.     private function getUrlParameters () {
  69.         return {
  70.             method: 'flickr.photos.search',
  71.             per_page: currentRequest.pageSize,
  72.             page: currentRequest.pageNum,
  73.             tags: tags 
  74.         }
  75.     }
  76.    
  77.     /**
  78.     * Step 3 - Get record total from XML result
  79.     *
  80.     * Recordset Services need to know how many records are in the recordset.
  81.     * The server-side code should include this somewhere, and here we
  82.     * determine where that is.
  83.     */
  84.     function getTotalCount() {
  85.         return parseInt( xml.firstChild.firstChild.attributes.total );
  86.     }
  87.    
  88.     /**
  89.     * Step 4 - Get page data
  90.     *
  91.     * Once XML Loads, this should return an array of objects corresponding to
  92.     * the current page request.
  93.     */
  94.     function getPageData() {
  95.        
  96.         var data:Array = nodesToObjects( xml.firstChild.firstChild.childNodes );       
  97.        
  98.         // we could just return data directly, but now that we have it,
  99.         // let's be nice, build the url's we need
  100.         for( var n in data ) {
  101.             var p = data[n];
  102.             var photoUrl = "http://farm1.static.flickr.com/"+p.server+"/"+p.id+"_"+p.secret;           
  103.             data[n].urlPhotoPage = "http://www.flickr.com/photos/"+p.owner+"/"+p.id+"/";           
  104.             data[n].urlThumb = photoUrl + '_s.jpg';
  105.             data[n].urlSmall = photoUrl + '_m.jpg';
  106.             data[n].urlMedium = photoUrl + '.jpg';
  107.             data[n].urlLarge = photoUrl + '_b.jpg';   
  108.         }
  109.         return data;       
  110.     }
  111.    
  112.     /**
  113.     * Step 5 - handle result
  114.     *
  115.     * At this point, we should have a full-featured recordset.
  116.     * Although, it may not be entirely loaded.
  117.     */
  118.     function handleResult( rs ) {
  119.        
  120.         // you may want to save data to model locator here   
  121.         Debug.warn( "RecordsetLoaded:");
  122.         Debug.warn( rs.items );
  123.        
  124.     }
  125. }

To explore this code in more detail, you may download the source. This an other examples can also be found in the Bumpslide SVN repository on SourceForge.

This entry was posted on Tuesday, February 13th, 2007 at 9:09 pm and is filed under Actionscript, Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply