Monday, July 02, 2007

Pagination with Flex 2 (tilelist example)

So I you want to paginate a tilelist? Piece of cake. The best way to accomplish this is with an ArrayCollection as a dataprovider. But we won't actually use it as a dataprovider, instead we'll use a dummy arrayCollection as the dataprovider which will only be populated with the current page. So let's set up some variables.
[Bindable]
private var myDataProvider:ArrayCollection;
private var pagedDataProvider:ArrayCollection;
[Bindable]
private var curPage:int=1;
[Bindable]
private var pageCount:int=0;

private static PERPAGE:int=8;
Now let's assume your myDataProvider variable is populated by about 30 objects. You only want to see 8 at a time. So let's set a static, PERPAGE as the number of items per page. The other vars are obvious here except pagedDataProvider which is going to be used to store the current dataset. Let's setup an init function to get our first page of results and set everything up.
public function init():void{
    pagedDataProvider=new ArrayCollection();
    pageCount=(myDataProvider.length/PERPAGE)+1;
    curPage=1;
    if(pageCount > 1){  
        btnNext.enabled=true;
    }
    if(myDataProvider.length >= PERPAGE){
        for(var i:int=0;i<PERPAGE;i++){
            pagedDataProvider.addItem(myDataProvider.getItemAt(i));
        }
    }else{
        pagedDataProvider=myDataProvider;
    }
}
now assume that btnNext and btnPrevious are buttons to control the paging. This function will set up pagedDataProvider nicely. Let's go ahead and tie it to an component, in this case a tilelist.
<mx:TileList rowHeight="108" columnWidth="108" left="3" columnCount="4" id="tilelistPagedExample" rowCount="2" dataProvider="{pagedDataProvider}">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Image width="100" height="100" source="{data.thumbnail}" toolTip="{data.caption}" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
All we have left is the forward and back functions. These functions will repopulate the pagedDataProvider with the next pages worth of stuff.
private function getNextPage():void{
    var start:int=PERPAGE*curPage;//for example, click from page 1, start would then be 8*1=8. start at index 8.
    var end:int=0;
    //do we have enough items in this set?
    if((myDataProvider.length-start)>PERPAGE){
        end=start+PERPAGE;//count it
    }else{
        end=myDataProvider.length;
    }
    pagedDataProvider=new ArrayCollection();
    for(var i:int=start;i<end;i++){
        pagedDataProvider.addItem(myDataProvider.getItemAt(i));
    }
    curPage++;//incriment the page!
    btnPrevious.enabled=true;
    if(curPage==pageCount){
        btnNext.enabled=false;
    }
}
Pretty self explanatory. Calculate the start and end, loop through adding those items. Now the previous button function.
private function getPreviousPage():void{
    curPage--;//decriment the page!
    btnNext.enabled=true;
    if(curPage==1){
        btnPrevious.enabled=false;
    }
    var start:int=PERPAGE*(curPage-1);//for example, click from page 1, start would then be 8*1=8. start at index 8.
    var end:int=start+PERPAGE;//count it
    pagedDataProvider=new ArrayCollection();
    for(var i:int=start;i<end;i++){
        pagedDataProvider.addItem(myDataProvider.getItemAt(i));
    }    
}
That last function is pretty simple since we can assume a lot of things based on the fact that we're going back. We don't need to worry about checking if end is greater than the overall length because if we're going backwards, we know it already got that far! Pretty simple eh? Don't forget to add the btnNext and btnPrevious controls and to run init after you've populated your dataprovider. I'll publish an example of this code in action later.

7 Comments:

Anonymous Anonymous said...

Is it possible to do it with an XML data received from a server ?

11:52 AM  
Blogger Jonathan Rowny said...

I don't see why not. Are you having trouble doing that?

4:25 PM  
Anonymous Anonymous said...

Did you have a chance to have sample running.

Thank you for your help

12:23 PM  
Blogger Olumide said...

nice real nifty, I can see how I can use this for pagination with Flash CS3, will post code here once done

http://oroede.org

7:54 AM  
Blogger csmaller said...

is it possible to do this with an array of buttons on a canvas and paginating loads your other buttons? very coolhypi

1:27 PM  
Blogger mudunuri said...

could you plese send me source code of this example ?

Thanks,
srinivas

2:46 AM  
Blogger mudunuri said...

Hi
plese send the source code of this next priveous example.
srinu.in@gmail.com
thanks
srinivas

6:23 AM  

Post a Comment

<< Home

Feed (RSS/Atom)

Contact Me

Don't put anything here: