CODEWITHSUNDEEP
c++blackberry-10blackberry-cascades
user2054339
user2054339

Reputation: 495

Create a simple ListView Cascades

I want to create a simple ListView in Cascades (either in C++ or QML). The data of the ListView is simple, just strings that I want to pass to it (no XML or SQL etc.); Also the ListView may have sections, e.g., 

 - Green
        - Cucumber
        - Peas
        - Salad
 - Red
        - Tomato
        - Red Radish
        - Carrot

Also, I want to be able to customize the appearance of items of the list view and possibly the ListView itself (e.g., set background color, set list item text color etc.).

Any tutorial or simple sample app which achieves what I wrote above would be greatly appreciated!!

Thank you.

Upvotes: 0

Views: 1559

Answers (2)

Ajeet47
Ajeet47

Reputation: 1879

if i understand correctly you want like ExpandableListView in android you can achieve it using implementing bb::cascades::DataModel example is here

Upvotes: 0

Dielson Sales
Dielson Sales

Reputation: 1737

The simplest way, if you're going to use just a static list (I mean, you don't want to change it in runtime) is to load it from a XML file (ex: a model.xml in your assets folder), like this:

<model>
    <header title="Green"/>
    <item title="Cucumber"/>
    <item title="Peas"/>
    <item title="Salad"/>
    <header title="Red"/>
    <item title="Tomato"/>
    <item title="Red Radish"/>
    <item title="Carrot"/>
</model>

Your ListView just needs to load it:

ListView {
    dataModel: XmlDataModel {
        source: "model.xml"
    }
}

Now, if you want to customize the appearence, you just have to put in the listItemComponents how you want them to be shown:

ListView {
    dataModel: XmlDataModel {
        source: "model.xml"
    }
    listItemComponents: [
        ListItemComponent {
            type: "header"
            Container {
                // your personal code
            }
        },
        ListItemComponent {
            type: "item"
            Container {
                // your personal code
            }
        }
    ]
}

These containers allow you to define your own layout. For example, supposing you want to just show the header with a matching background color, you could just do:

ListView {
    dataModel: XmlDataModel {
        source: "model.xml"
    }
    listItemComponents: [
        ListItemComponent {
            type: "header"
            Container {
                background: {
                    if (ListItemData.title == "Green") {
                        return Color.Green
                    } else {
                        return Color.Red
                    }
                }
                Header {
                    title: ListItemData.title
                }
            }
        },
        ListItemComponent {
            type: "item"
            Container {
                preferredHeight: 100
                Label {
                    text: ListItemData.title
                    verticalAlignment: VerticalAlignment.Center
                }
                Divider {}
            }
        }
    ]
}

Hope this gave you an idea of how this works.

Upvotes: 2

Related Questions