Native Development

[bb10developer]

I'm new to Blackberry 10 development and I'm trying to load an image from the web into a ImageView control on a ListView.

My QML for the ListView looks like this:

ListView {
    id: titlesListView
    objectName: "titlesListView" 

    listItemComponents: [
        ListItemComponent {
            type: "item"
            Container {
                layout: StackLayout {
                    layoutDirection: LayoutDirection.LeftToRight
                }
                ImageView {
                    imageSource: ListItemData.boxArt
                }
                Label {
                    text: ListItemData.title
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                        fontWeight: FontWeight.Normal
                    }
                }
            }
        }
    ]
}

Then I use a GroupDataModel class to provide the data:

GroupDataModel *model = new GroupDataModel(QStringList() << "title" << "boxArt");
 
QVariantMap map;
map["title"] = "Test Title";
map["boxArt"] = "http://www.foo.com/bar.jpg";
model->insert(map);
 
ListView *listView = findControl<ListView>("titlesListView");
listView->setDataModel(model);

At runtime I am getting this error in the logs:

Unsupported scheme (http) used in url

Does this really mean that it's not possible to load an image from a URL or am I going about it in the wrong way?

[peter9477]

I started replying this morning, then realized I was merely speculating and should let someone who knows the answer respond.

Nobody has, so I'll speculate.

I think there's a good chance, assuming this is supposed to work (or does, for example, in the equivalent QtGui classes), that this is simply another unfinished feature in Cascades and you'll have to wait, or reimplement it in custom code with a background loader thread or something like that.

[ekke]

from my discussions at BB10Jam I know that this is work-in-progress and a sample app will follow soon.

It's important for me, too to get Images from URL. In my case a JSON of Conference-Speakers contains the Image URL's of the Speakers I want to display in a List.

[alarsson]

Ekke is right, Cascades currently does not support loading images from URL. It's a very reasonable feature but we just didn't have time to put it in yet.

It should be pretty simple to build your own class to do this for now, like Peter9477 suggests.

Cheers!

Anders

[jheron]

With standard qml you can use Qt.resolvedUrl ( ) http://doc-snapshot.qt-project.org/4.8/qml-qt.html#resolvedUrl-method

And in Qt c++ use QUrl http://qt-project.org/doc/qt-4.8/QUrl.html

Good Luck!

Jon

[evandempsey]

There is some nice code here that shows you how to download data from a URL and load it into a QPixmap. It should be easy enough to wrap it up in a class to do what you want.

http://qt-project.org/wiki/Download_Data_from_URL

[bb10developer · Accepted solution]

OK I was finally able to get this working.

Here's some sample code to show how it was done:

App::App()
{
    //QNetworkAccessManager m_manager;
    connect(&m_manager, SIGNAL(finished(QNetworkReply*)),
         this, SLOT(replyFinished(QNetworkReply*)));
}

void App::setImage(const QString &url)
{
	m_manager.get(QNetworkRequest(QUrl(url)));
}

void App::replyFinished(QNetworkReply* reply)
{
    QByteArray data = reply->readAll();

    QImage qimage;
    qimage.loadFromData(data);

    int width = qimage.width();
    int height = qimage.height();
    PixelBufferData pixelBuffer = PixelBufferData(PixelBufferData::RGBX, width, height, width, qimage.bits());

    Image image = Image(pixelBuffer);
    m_imageView->setImage(image);
}

[level32]

How did you bind the image to the ListItemComponent? 

[bigo132]

Hi,

I used same code, it can load image successful, but some surprised happened, when i load the below image by the follow code, it display the image which change blue to red, and the background change the black but actually it is black. please see the attches.

void CascadeImage::handleNetworkData(QNetworkReply *reply)
{
if (!reply->error()) {
// Let's get ALL the data
const QByteArray response(reply->readAll());
QImage QImg;
QImg.loadFromData(response);
if (!QImg.isNull())
{
PixelBufferData pbd(PixelBufferData::RGBX, QImg.width(), QImg.height(), QImg.width(), QImg.bits());
imageView->setImage(Image(pbd));
}
}
// Cleanup
reply->deleteLater();
}

Here is the image url:

http://img.sc115.com/uploads/png/110125/201101251220241969.png

 

[GaryHomewood]

I'd love to see how this is done. I'm new to C++/QML so at the moment I don't quite understand how retrieving the image in C++ and binding to the datamodel/QML works.

It would be a very good candidate for a sample application, because it is such a common requirement.