Cascades Development

[rnickel]

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?

[peter9477]

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

[kylefowler]

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.

[markwilcox]

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?

[peter9477]

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.

[kylefowler]

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.

[rnickel]

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?

[kylefowler]

atEnd is only a variable in onAtEndChanged.

The only parameter available in onScrollingChanged is scrolling

[peter9477]

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.

[rnickel]

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?