How do I get a web view in a list view in Blackberry Cascades, QML & C++, QT

Question

I am trying to get a list of images from the internet to show up in a list view in QML. I have code that looks like this:

ListView {

    objectName: "imageListView"

    listItemComponents: [

        ListItemComponent {

            type: "item"

            Container {
                WebView {
                     url: ListItemData.imageSource
                }    
            }                           
        }
    ]
}

The problem is this just causes the following error: "Unable to assign [undefined] to QUrl url"

I know the ListItemData.imageSource contains the correct data, because I tested it using, Label { text: ListItemData.imageSource }, in place of the WebView, and it showed all the image urls that are needed.

Answer 1

I would suggest you to use ImageView only even if you are loading images from internet.

First of all, make a network request using QNetworkRequest, QNetworkAccessManager, and QNetworkReply classes & on getting reply load that QByteArray in ImageView.

QNetworkAccessManager* netManager = new QNetworkAccessManager();
if (netManager) {

QUrl url(ImageUrl);
QNetworkRequest networkRequest(url);
QNetworkReply* networkReply = netManager->get(networkRequest);
connect(networkReply, SIGNAL(finished()), this, SLOT(onReply()));
}

& in onReply() slot you can load image like this:

void App::onReply(QNetworkReply* reply) {
if (reply->error() != QNetworkReply::NoError) {
    qDebug() << "Image not available or any error";
    return;
}

Image image = Image(reply->readAll());
imageView->setImage(image);

}

Do note that if the image is too large, you may have to ImageData class & its method to load image in cascade ImageView. It won't load image directly by using setImage method. & to make this work with ListView, you have to create your own CustomItem & ListItemProvider & also have to override update item method of that. Hope this helps.

Answer 2

Ok - so I found another solution. I upgraded from the Beta 2 SDK to the Beta 3 SDK. Then I simply did something like this:

#include <QObject>
#include <bb/cascades/Image>

class MyImageClass : public QObject, public bb::cascades::Image
{
    Q_OBJECT

    Q_PROPERTY(bb::cascades::Image image READ image WRITE setImage NOTIFY imageChanged FINAL)

    //...
    bb::cascades::Image image_;
public:
    //...
    bb::cascades::Image image() const {return image_;}

    void setImage(bb::cascades::Image image {
         image_ = image;
         emit imageChanged();
    }

signals:
    //...
    void imageSourceChanged();
}

Then when inserting an image into the list, I simply used:

groupDataModel_.insert(myImageObject);

and in my qml I have:

ListView {
    id: imageListView
objectName: "ImageListView"         

    listItemComponents: [
    ListItemComponent {
        type: "item"

        Container {
            id: imagesRoot
            objectName: "ImagesRoot"

                ImageView {
                image: ListItemData.image
            }
        }
    }
    ]
}