title: Loading multiple images on a page for Blackberry 10
body: <p>I am working on BB10 cascades. I am trying to load multiple images from network. I have referred <a href="http://blackberry.github.io/Cascades-Samples/imageloader.html" rel="nofollow">following example</a> and I have modified it to load a single image. Sample code is as follows:</p>
  
  <p><strong>main.qml</strong></p>
  
  <pre><code>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);
              }
          }
      }
  }</code></pre>
  
  <p><strong>applicatioui.hpp</strong></p>
  
  <pre><code>#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_ */</code></pre>
  
  <p><strong>applicatioui.cpp</strong></p>
  
  <pre><code>#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();
  }</code></pre>
  
  <p>Now I want to load multiple images. I tried to create <code>QList&lt;QObject*&gt;* image;</code>
  and add instances of the <code>ImageLoader</code> class, but I don't know how to access it in main.qml.
  Any ideas how to do so?</p>