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
Posts: 55
Registered: ‎12-04-2012
My Device: Q10

Show a limited amount of List items?

Hi there,

 

    I have a simple .xml list model and I am trying to only show 10 items at a time. Is there a way to do this? I assume there is, but if someone could enlighten me I would appreciate it.

 

 

Thanks!

-Ali

 

ListView {
                    
                    dataModel: XmlDataModel {
                        source: "models/list.xml"
                    }
                    
                    listItemComponents: [
                        ListItemComponent {
                            type: "item"
                            MyListItem {
                            }
                        }
                    ]
                   
 }// ListView

 

 

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

Re: Show a limited amount of List items?

There is no API to limit the number of list items shown, what is shown all depends on whats in your datamodel, so you might have to partially fill it to control what is shown
Like all of my posts
Developer
Posts: 43
Registered: ‎07-23-2013
My Device: Z10

Re: Show a limited amount of List items?

Surely there must be a solution to this programmatically without limiting the data in the xml file.. some sort of array definition?

 

I'm looking to do the same, except my data comes from RSS feeds. I need to limit my listview with only 10 items. Is this done in the groupdatamodel? datasource?

 

Thanks.

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

Re: Show a limited amount of List items?

You can add as many items to your datamodel as you want, just 10 or whatever you want. Doing it that way you just need to create an arraydatamodel and then add 10 items to it. Thats different than loading the xml file directly into the data model.

Like all of my posts
Developer
Posts: 43
Registered: ‎07-23-2013
My Device: Z10

Re: Show a limited amount of List items?

thanks Kyle, so the key here is the arraydatamodel in the datasource. I'll give it a try.
Retired
Posts: 418
Registered: ‎07-18-2012
My Device: Q10

Re: Show a limited amount of List items?

Hi,

 

If you make some assumptions about the appearance of your list items (like they're all the same size) - then you can use code like this:

 

import bb.cascades 1.2

Page {
    Container {
        Label {
            text: "Before List"
        }
        ListView {
            // Set the number you want to see here.
            property int count: 3
            
            property int knownSize: -1
            
            // Tune these...
            property int paddingPerItem: 4
            property int padding: 10

            onCountChanged: {
                calcSize();
            }
            onKnownSizeChanged: {
                calcSize();
            }
            onPaddingPerItemChanged: {
                calcSize();
            }
            onPaddingChanged: {
                calcSize();
            }

            function reportItemHeight(height) {
                if (height > knownSize) {
                    knownSize = height;
                }
            }

            dataModel: XmlDataModel {
                source: "test.xml"
            }

            function calcSize() {
                if (knownSize < 0) {
                    return;
                }
                var totalSize = count * knownSize + (count - 1) * paddingPerItem + padding;
                if (totalSize != preferredHeight) {
                    var max = maxHeight;
                    if (maxHeight == undefined) {
                        max = totalSize;
                    }
                    if (totalSize <= max) {
                        preferredHeight = totalSize;
                    } else if (preferredHeight != max) {
                        preferredHeight = max;
                    }
                }
            }

            listItemComponents: [
                ListItemComponent {
                    type: "item"
                    Container {
                        id: container
                        Label {
                            text: ListItemData.name
                        }
                        attachedObjects: [
                            LayoutUpdateHandler {
                                onLayoutFrameChanged: {
                                    container.ListItem.view.reportItemHeight(layoutFrame.height);
                                }
                            }
                        ]
                    }
                }
            ]
        }
        Label {
            text: "After List"
        }
    }
}

 If you show exactly 3 or 10 or n items - how is your user supposed to know it's a scrollable list?

 

I think you should tune the padding properties so that 3.1 or 3.5 are shown so that the user has a visual queue...

--
Rob is no longer associated with BlackBerry.
Developer
Posts: 43
Registered: ‎07-23-2013
My Device: Z10

Re: Show a limited amount of List items?

[ Edited ]

Thanks Robbie, but the items are not the same size. I tried your code and it didn't work.. any other ideas?

 

This is the datasource I'm using: http://iol.co.za/cmlink/1.640

Retired
Posts: 418
Registered: ‎07-18-2012
My Device: Q10

Re: Show a limited amount of List items?

In what way didn't it work?

 

With variable size items - you could total their heights...

--
Rob is no longer associated with BlackBerry.
Developer
Posts: 43
Registered: ‎07-23-2013
My Device: Z10

Re: Show a limited amount of List items?

I thought it would be easier to place an extract of my code in here, on whether it should work with my set up, or not. Appreciate your assistance..

 

 

	Page {

	
            ListView {
                id: myListView

                dataModel: myDataModel

                listItemComponents: [
                    ListItemComponent {
                        type: "header"
                        Container {
                            Label {
                                text: ""
                            }
                        }
                    },
                    ListItemComponent {
                        type: "item"

                        Container {
                            Label {
                                id: title
                                text: ListItemData.title
                                textStyle.fontSize: FontSize.Large
                                multiline: true
                                textStyle.color: Color.DarkBlue
                            }
                            Label {
                                id: pubdate
                                text: ListItemData.pubDate
                                textStyle.fontSize: FontSize.XSmall
                            }
                            Label {
                                id: description
                                text: "<html><div>" + ListItemData.description + "</div></html>"
                                textStyle.fontSize: FontSize.Small
                                multiline: true
                            }
                            Divider {

                            }
                        }
                    }
                ]
            }
            }
        }
        attachedObjects: [
            GroupDataModel {
                id: myDataModel
                sortingKeys: [ "pubDate" ]
                sortedAscending: false
            },
            DataSource {
                id: myDataSource
                source: "http://iol.co.za/cmlink/1.640"
                query: "/rss/channel/item"
                type: DataSourceType.Xml
                onDataLoaded: {
                    myDataModel.clear();
                    myDataModel.insertList(data)
                }
            }
        ]
	}