To replace a dummy image in Listview Blackberry10

Question

Please help me with this.

I have created a ListView in QML file and filled it with data received from a webservice.Since this web service does not provide any images, i have to place a dummy image in that place. Then i used another method to fetch the images from the url.Now i got the image in my cpp file.But i couldn't update my listview. I have tried out many methods.But failed. Here is my code snippet.

      ListView {
            id: listView
            objectName: "listView"

            dataModel: ArrayDataModel {
                id: myListModel

            }


            // Override default GroupDataModel::itemType() behaviour, which is to return item type "header"
            listItemComponents: ListItemComponent {
                id: listcomponent
                // StandardListItem is a convivience component for lists with default cascades look and feel
                StandardListItem {
                    id: stdlst
                    title: ListItemData.postText
                    description: ListItemData.postDate
                    status: ListItemData.filePath
                    imageSource: assets:///image.png
                }

            }
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Fill

        }

I need to replace the imagSource in this listview with other image.How can i do it..?

Answer 1

What you need to do is: instead of affecting assets:///image.png to your StandardListItem, you should affect a property of ListItemData, which you initialize by default to assets:///image.png. Once done, when you fetch your image, you just have to modify the property on your data item.

Let's say your displayed class is called DataElement:

    class DataElement: public QObject {

        Q_OBJECT

        Q_PROPERTY(QString postText READ getPostText CONSTANT);
        Q_PROPERTY(QVariant image READ getImage WRITE setImage NOTIFY imageChanged);
        // Other properties here...

    public:
        DataElement() {
            _postText = "Default text";
            _image = QVariant::fromValue
                (bb::cascades::Image(QUrl("file://" + QDir::homePath() + "/image.png")));
        }

        QVariant image() const {
            return _image;
        }

        void setImage(QVariant image) {
            if (image != _image) {
                _image = image;
                emit imageChanged();
            }
        }

        // Missing methods for other properties etc

    signals:
        void imageChanged();

    private:
        QString     _postText;
        QVariant    _image;
    };

Your ListItem will look like this:

    StandardListItem {
        id: stdlst
        title: ListItemData.postText
        description: ListItemData.postDate
        status: ListItemData.filePath
        image: ListItemData.image
    }

Now when you load your image, you call setImage with it on your DataElement, and the view will be refreshed accordingly.