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..?

score 0 · Accepted Answer · edited Apr 07 '18 at 18:34

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.

In the above code i am filling the postText,postDate and filePath from a webservice call.But since this webservice does not provide any image,i just put a dummy image in this position.I am only able to get the image after calling another webservice. After getting the image QVariant i need to set it in the image section of the StandardListItem. So is it possible to update the image like this..? — Varghese Kiran, Jul 31 '13 at 04:59
``StandardListItem`` has also an ``image`` property. You'll need to bind this property to one of your custom ones (like ``postText``, ``postDate`` and ``filePath``). It should be of type ``QVariant``, as you guessed. Before having the result from your second call to the webservice, you'll set your custom property value to your dummy image, then replace it when you receive the real one. — Marc Plano-Lesay, Jul 31 '13 at 11:45
Thanks for your reply...Will you please provide a sample code for this...? — Varghese Kiran, Aug 01 '13 at 04:41
How can i bind the image property to the custom ones...? Please help me...:( — Varghese Kiran, Aug 02 '13 at 05:40

To replace a dummy image in Listview Blackberry10

1 Answers1