listviewqmlblackberry-10blackberry-cascades

To replace a dummy image in Listview Blackberry10


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


Solution

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