Loading multiple images on a page for Blackberry 10

Question

I am working on BB10 cascades. I am trying to load multiple images from network. I have referred following example and I have modified it to load a single image. Sample code is as follows:

main.qml

import bb.cascades 1.2

Page {
    Container {
        id: outer

        Container {
            preferredHeight: 500
            preferredWidth: 768

            layout: DockLayout {}
            onCreationCompleted: {}

            // The ActivityIndicator that is only active and visible while the image is loading
            ActivityIndicator {
                id: activity
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                preferredHeight: 300

                visible: _loader.loading
                running: _loader.loading
            }

            // The ImageView that shows the loaded image after loading has finished without error
            ImageView {
                id: image
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill

                image: _loader.image
                visible: !_loader.loading && _loader.label == ""
            }

            // The Label that shows a possible error message after loading has finished
            Label {
                id: lable
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                preferredWidth: 500

                visible: !_loader.loading && !_loader.label == ""
                text: _loader.label
                multiline: true
            }
        }
         Button {
            text: "load Image"
            onClicked: {
                _loader.load();
                console.log("loading:::"+_loader.loading);
            }
        }
    }
}

applicatioui.hpp

#ifndef ApplicationUI_HPP_
#define ApplicationUI_HPP_
#include "imageloader.hpp"
#include 

namespace bb
{
    namespace cascades
    {
        class LocaleHandler;
    }
}

class QTranslator;

class ApplicationUI : public QObject
{
    Q_OBJECT
public:
    ApplicationUI();
    virtual ~ApplicationUI() {}
    Q_INVOKABLE void prepareImage();
    Q_INVOKABLE void loadImage();
    Q_INVOKABLE ImageLoader* getImageloadderInstance();
private slots:
    void onSystemLanguageChanged();
private:
    ImageLoader* image;

    QTranslator* m_pTranslator;
    bb::cascades::LocaleHandler* m_pLocaleHandler;
};

#endif /* ApplicationUI_HPP_ */

applicatioui.cpp

#include "applicationui.hpp"

#include 
#include 
#include 
#include 

using namespace bb::cascades;

ApplicationUI::ApplicationUI() :
        QObject()
{
    // prepare the localization
    m_pTranslator = new QTranslator(this);
    m_pLocaleHandler = new LocaleHandler(this);
    image =new ImageLoader("http://uat2.thomascook.in/bpmapp-upload/download/fstore/7f00000105a3d7bf_eb1af9_1485f184f7b_-52f0/GIT_banner.jpg",this);
    bool res = QObject::connect(m_pLocaleHandler, SIGNAL(systemLanguageChanged()), this, SLOT(onSystemLanguageChanged()));
    // This is only available in Debug builds
    Q_ASSERT(res);
    // Since the variable is not used in the app, this is added to avoid a
    // compiler warning
    Q_UNUSED(res);

    // initial load
    onSystemLanguageChanged();

    // Create scene document from main.qml asset, the parent is set
    // to ensure the document gets destroyed properly at shut down.
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
    qml->setContextProperty("_loader",this);
    // Create root object for the UI
    AbstractPane *root = qml->createRootObject();
    if(root)
    {

    }
    // Set created root object as the application scene
    Application::instance()->setScene(root);
}

void ApplicationUI::onSystemLanguageChanged()
{
    QCoreApplication::instance()->removeTranslator(m_pTranslator);
    // Initiate, load and install the application translation files.
    QString locale_string = QLocale().name();
    QString file_name = QString("loading_Image_%1").arg(locale_string);
    if (m_pTranslator->load(file_name, "app/native/qm")) {
        QCoreApplication::instance()->installTranslator(m_pTranslator);
    }
}
ImageLoader* ApplicationUI::getImageloadderInstance()
{
    image =new ImageLoader("http://uat2.thomascook.in/bpmapp-upload/download/fstore/7f00000105a3d7bf_eb1af9_1485f184f7b_-52f0/GIT_banner.jpg",this);
    return (image);
}
void ApplicationUI::prepareImage()
{
    image =new ImageLoader("http://uat2.thomascook.in/bpmapp-upload/download/fstore/7f00000105a3d7bf_eb1af9_1485f184f7b_-52f0/GIT_banner.jpg",this);

}
void ApplicationUI::loadImage()
{
    image->load();
}

Now I want to load multiple images. I tried to create QList<QObject*>* image; and add instances of the ImageLoader class, but I don't know how to access it in main.qml. Any ideas how to do so?

Answer 1

https://github.com/RileyGB/BlackBerry10-Samples/tree/master/WebImageViewSample

follow this link there is a control called "WebImageView". you just have to set the url of image and its done. int main.qml coder have shown user friendly UI. thanks to @Bojan Kogoj