Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
rnickel
Posts: 62
Registered: ‎10-29-2008
My Device: 9800

infiniscroll on listview?

Is it possible to trap when a listview has scrolled to it's last item and emit a signal?

 

my content is loaded from a webservice that only ever returns 10 items at a time, and I'd rather not load the content if the user doesn't require it.

 

Ideas?

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: infiniscroll on listview?

You may be in luck... The new beta just added this: https://developer.blackberry.com/cascades/reference/bb__cascades__listscrollstatehandler.html

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
kylefowler
Posts: 526
Registered: ‎05-17-2009
My Device: 9900

Re: infiniscroll on listview?

wish it gave you a threshold for when it fired. Like you may want to start loading more when you hit 80% of the list so it can be seamless loading.
Like all of my posts
Developer
markwilcox
Posts: 51
Registered: ‎11-23-2012
My Device: BB10 Dev Alpha

Re: infiniscroll on listview?

Hmmm, it's very coarse-grained indeed - scrolling, at beginning and at end.

 

Are there any other ways of looking at the state of the ListView?

 

I'd really like to implement a pull-to-refresh style mechanism - has anyone else tried that or got any ideas how best to go about it?

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: infiniscroll on listview?

You still have the option of sticking a LayoutUpdateHandler onto the list item components, and monitoring that.

To implement a pull-to-refresh at the bottom of the list, I'd probably put a magic last component in the list, and monitor its position relative to the entire ListView. When I saw that the user had pulled it up from the final position, I'd consider that the required "pull" and do the refresh.

I'm not sure whether it would be a full-sized visible component in that case, or something like a transparent 1-pixel "stub" thing that the user never even realizes is there until they pull (and maybe at that point it morphs into something larger and visible). I haven't looked at the appearance of existing pull-to-refresh implementations in other environments to know how I'd want it to look.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
kylefowler
Posts: 526
Registered: ‎05-17-2009
My Device: 9900

Re: infiniscroll on listview?

You can also monitor the listitemfactory or its qml equivalent for when its trying to get the listiem for a specific index path. If you have just a single list you can compare the value of the index to the size of the list and figure out whether or not you are nearing the bottom.
Like all of my posts
Developer
rnickel
Posts: 62
Registered: ‎10-29-2008
My Device: 9800

Re: infiniscroll on listview?

I'm trying to use this, however when I do the following within the QML I get the error:

 

ListView {
                    id: newsList                                                       
                    listItemComponents: [
                        NewsItem {
                            type: "News"
                        },
                        MoreItem {
                            type: "more"
                        }                        
                    ]
                           
                    layout: StackListLayout {
                        headerMode: ListHeaderMode.None
                    }
                    
                    function itemType(data, indexPath) {
                        if (data.type == "News") {
                            return "News";
                        } else {                             
                             return "more";
                        }                        
                    }
                    
			        attachedObjects: [
			            // This handler is tracking the scroll state of the ListView.
			            ListScrollStateHandler {
			            id: scrollStateHandler			 
			                onScrollingChanged: {
			                    console.log("scollingggggg wheeee");
			                    if (scrolling) {
			                        console.log("Scrollinggggg wheeee");
			                    } else {
			                        console.log("Not scrolling");
			                    }
			                    if (atEnd) {
			                         console.log("At the end");   
			                    }
			                }
                            objectName: "scrollListener"
                        }
			        ]
            
                }      

 

 

ReferenceError: Can't find variable: atEnd

 

Thoughts?

Developer
kylefowler
Posts: 526
Registered: ‎05-17-2009
My Device: 9900

Re: infiniscroll on listview?

[ Edited ]

atEnd is only a variable in onAtEndChanged.

The only parameter available in onScrollingChanged is scrolling

Like all of my posts
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: infiniscroll on listview?

In other words, you need to reference it from the object, with scrollStateHandler.atEnd. It's not a local variable in that particular handler function.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
rnickel
Posts: 62
Registered: ‎10-29-2008
My Device: 9800

Re: infiniscroll on listview?

I tried adding in the onAtEnd signal handler via QML and it's saying the signal is unknown...

 

ListView {
    id: newsList
    objectName: "newsList"
    
    layoutProperties: StackLayoutProperties {
        spaceQuota: 1
    }
    
    listItemComponents: [
        NewsItem {
            type: "News"
        },
        MoreItem {
            type: "more"
        }                        
    ]   
           
    layout: StackListLayout {
        headerMode: ListHeaderMode.None
    }
    
    function itemType(data, indexPath) {
        if (data.type == "News") {
            return "News";
        } else {                             
             return "more";
        }                        
    }
    
    attachedObjects: [
        // This handler is tracking the scroll state of the ListView.
        ListScrollStateHandler {
        id: scrollStateHandler			 
            onScrollingChanged: {
                console.log("scollingggggg wheeee");
                if (scrolling) {
                    console.log("Scrollinggggg wheeee");
                } else {
                    console.log("Not scrolling");
                }
                
                if(scrollStateHandler.atEnd) {
                    console.log("end");   
                }	                    
            }
            
            onAtEnd: {
                if (atEnd) {
                    console.log("We're at the end");
                }   
            }

            objectName: "scrollListener"
        }
    ]

}  

 

as you can see I also tried to access the atEnd property within the onScrollingChanged signal but it's never reached either.

 

Do any of you happen to have a working example?