Create a simple ListView Cascades

Question

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.

score 2 · Accepted Answer · answered Mar 06 '13 at 20:32

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.

Thanks, I have used a similar approach already -- actually, using XML. But now I may need to revert to a situation, where the data may come dynamically (change it on run time?), which data model to use in this case? or what to do in such a case? thanks. — user2054339, Mar 09 '13 at 22:35
Hello can you please tell me why I can't use the XML as a data model if the data comes on run time??? thank you. — user2054339, Mar 11 '13 at 22:29
If you intend to load a file on runtime, you shall load it using C++ code, so you can use XMLDataAccess (http://developer.blackberry.com/cascades/reference/bb__data__xmldataaccess.html) to convert its content to a DataModel. — Dielson Sales, Mar 11 '13 at 23:28
Hi, thanks I will check your reference. Just when you suggested I thought I could not use XML as a data model if the data was NOT static (came on run time). Is it true? — user2054339, Mar 12 '13 at 06:51
I could use XMLDataAccess to get, for example, a file that came from a HTTP request. If you want, you can just pass a QList to a DataModel and use the method insertList (each item shall be a QMap like explained here: http://developer.blackberry.com/cascades/documentation/device_platform/data_access/working_with_xml.html). — Dielson Sales, Mar 12 '13 at 17:41
Let say you use an XML model. Could you support translation for the entries in some way? — Marc Plano-Lesay, Apr 08 '13 at 21:07
I guess not. But you could still load different XML files depending on the language... — Dielson Sales, Apr 10 '13 at 19:12

score 0 · Answer 2 · answered Mar 09 '13 at 19:28

0

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

answered Mar 09 '13 at 19:28

Ajeet47

1,849
3
14
18

Create a simple ListView Cascades

2 Answers2