How to respond to clicking on list items in a list view in qml, C++ qt, in Blackberry 10 Cascades

Question

I am trying to figure out how to be able to click on an item on a list in Blackberry. I'm using QML, C++, QT, and Blackberry 10 Cascades. I had the list view implemented, then I tried to make it so that you could click on an item on the list by looking at this Twitter Timeline example (btw - I was not able to run the example).

What I'm doing isn't working. When I call listView_->setListItemManager(new CustomerListItemManager(customerListContainer_)), it causes the list view to be blank (before I added that code, the list view showed up).

So basically how to get the ability to click on an item on the list and have it respond work.

Anyway - here is the relevant code of what I have tried so far:

Container {
    id: customersListContainer
    objectName: "customersListContainer"

    ListView {
        id: customersList
        objectName: "customersList"

        listItemComponents: [
            ListItemComponent {
        type: "item"

        Container {

        HeaderListItem {
            title: ListItemData.firstName + " " + ListItemData.lastName
        }

            StandardListItem {
            title: ListItemData.officePhone + "\t" + ListItemData.cellPhone
            description: ListItemData.email
        }
        ]                           
    }
}

CustomerListItemManager.cpp:

CustomerListItemManager::CustomerListItemManager() {}

CustomerListItemManager::~CustomerListItemManager() {}

VisualNode *CustomerListItemManager::createItem(ListView *list, const QString &type) 
{
    //the CustomerList::getInstance()->customerListContainer returns the customersListContainer (see the qml code above)
    //
    return new CustomerItem(CustomerList::getInstance()->customerListContainer());
}

void CustomerListItemManager::updateItem(ListView *list, VisualNode *control, const   QString &type, const QVariantList &indexPath, const QVariant &data)
{
    QObject* obj = qvariant_cast<QObject *>(data);
    CustomerData* customer = qobject_cast<CustomerData *>(obj);
}

CustomerItem.cpp:

CustomerItem::CustomerItem(Container *parent) : CustomControl(parent) {}

CustomerItem::~CustomerItem() {}

void CustomerItem::updateItem(const QString text, QDateTime date) {}

void CustomerItem::select(bool select) {

    // Is this where you handle the response to clicking on an item on the list???
    //
    if (select) qDebug() << "item selected";

else;
}

void CustomerItem::reset(bool selected, bool activated) {
select(selected);
}

void CustomerItem::activate(bool activate) { Q_UNUSED(activate); }

Populating a list in another file:

for (int i = 0; i < customers->length(); ++i) {
    groupDataModel_.insert(customers->at(i)
}
listView_->setDataModel(&groupDataModel_);

//the customerListContainer_ is the customersListContainer (see the qml code above)
// 
listView_->setListItemManager(new ListItemManager(customerListContainer_);

Answer 1

I've had this problem before. Basically, from a ListItemComponent, you cannot directly interact with external elements using their id for instance...

I don't know exactly what you want to do but here are the two solutions I have that may help you :

1) Using the signal "onTriggered" that is emitted when a element of you list is clicked. Here is a QML example :

onTriggered: {
    console.log("onTriggered");

    // Retrieve the selected item
    var chosenItem = dataModel.data(indexPath);

    // Bind with C++ using a Q_INVOQUABLE method
    controller.launchItem(chosenItem);
}

2) In the case of selecting an element within the ListItemComponent, you can use an intermediary function. For instance, from your ListItemComponent QML definition, you can call :

// Load additional comments
ListItem.view.launchAdditionalCommentButtonPressedAction();

And then add the function to your ListView in your QML file :

function launchAdditionalButtonPressedAction() {
    // Bind with C++ using a Q_INVOQUABLE method
    controller.additionalButtonPressed();
}

I'm not sure this is exactly what you are looking for but I hope this helps.

Answer 2

On the declaration of the ListView use the onTriggered event as the following

  onTriggered: {
                  var selectedItem = dataModel.data(indexPath);
                 // do something with the selected item
               }