Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
alupimp
Posts: 22
Registered: ‎03-05-2011
My Device: Not Specified
Accepted Solution

Download Images Dynamically

Hi,

Is there any way to download images dynamically and add them to an ImageView?

Ive got a listView withcustom  ListItem Components, which are basically an imageView and a Label. After adding the List to a page i would like images from a dynamic list and set them to the ImageViews of my custom components displayed on my listView.

I allready download the image and create a bb::cascades::Image(QByteArray). But i cant find  a way to assign them to my custom components in the ListView. I got this console error:

Error: Accessing ListItem.indexInSection on a node that is not the root node in a list item visual.

 

P.S.:Any code would be great!!

Please use plain text.
Developer
kylefowler
Posts: 526
Registered: ‎05-17-2009
My Device: 9900

Re: Download Images Dynamically

Give your custom component list items an id at the root node, then where ever you need to refer to that list item, you refer to it with that ID first

Container {
   id: cont1
   Button {
      onClicked: { if(cont1.ListItem.indexInSection > 2 ) { //do something } }
   }
}

 

Like all of my posts
Please use plain text.
Developer
alupimp
Posts: 22
Registered: ‎03-05-2011
My Device: Not Specified

Re: Download Images Dynamically

[ Edited ]

Well what i really would like to have  is a code that would get me images like the appworld app does in the Demo for the Dev alpha..

 

Any way this is my Custom Component:

"articleField.qml"

import bb.cascades 1.0

Container {
    property string title
    id: genericField
    layout: DockLayout {
    }
    Container {
        id: containerID
        layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight
        }
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Top
        ImageView {
            //objectName: "image"+ListItem.indexInSection
            imageSource: "asset:///images/defaultarticlelist.png"
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
            scalingMethod: ScalingMethod.AspectFit
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
        Label {
            text: title
            layoutProperties: StackLayoutProperties {
                spaceQuota: 5.0
            }
            textStyle.fontWeight: FontWeight.Normal
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            textStyle.fontSizeValue: 10.0
            multiline: true
        }
    }
    Divider {
        horizontalAlignment: HorizontalAlignment.Center
        verticalAlignment: VerticalAlignment.Bottom
    }
}

 and this is how I add it:

 listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        articleField{
                         title: ListItemData.title
                      }
                    }
                ]

 Now i would like to access the ImageView within each articleField added in the listView, from the C++ part. i know y can getthe listView with its objectName but how can i access each articleField?

Please use plain text.
Developer
alupimp
Posts: 22
Registered: ‎03-05-2011
My Device: Not Specified

Re: Download Images Dynamically

So i developed this class that will allow you to display images downded from the internet dynamically without having to store them  in the device:

/*
 * RemoteImageView.h
 *
 *  Created on: Oct 2, 2012
 *      Author: aluialarid
 */

#ifndef REMOTEIMAGEVIEW_H_
#define REMOTEIMAGEVIEW_H_

#include <bb/cascades/CustomControl>
#include <bb/cascades/Container>
#include <bb/cascades/ImageView>
#include <bb/cascades/Container>
#include <QTNetwork>

namespace bb {
	namespace cascades {
		class Container;
	}
}
using namespace bb::cascades;

class RemoteImageView: public CustomControl {
	Q_OBJECT
	Q_PROPERTY(QString url READ URL WRITE seturl NOTIFY urlChanged)

public:
	RemoteImageView(Container *parent=0);
	virtual ~RemoteImageView();
	Container* mRootContainer;
	ImageView* imageView;
    Q_INVOKABLE void loadImage();
    void seturl(QString url);
    QString URL();

public	slots:
	void onImageLoaded(QNetworkReply* reply);
	void onurlChanged();
	signals:
			void imageUnavailable();
			void urlChanged(QString url);

private:
	QString murl;

};

#endif /* REMOTEIMAGEVIEW_H_ */

 

/*
 * RemoteImageView.cpp
 *
 *  Created on: Oct 2, 2012
 *      Author: aluialarid
 */

#include "RemoteImageView.h"
#include <bb/cascades/Container>
#include <bb/cascades/ImageView>
#include <bb/cascades/ScalingMethod>
#include <bb/cascades/DockLayout>

using namespace bb::cascades;

RemoteImageView::RemoteImageView(Container *parent) :
        CustomControl(parent) {
	//Q_UNUSED(parent);
	mRootContainer = new Container();
	mRootContainer->setLayout(new DockLayout);
	imageView = ImageView::create().image(
			QUrl("asset:///images/defaultarticlelist.png")).horizontal(
			HorizontalAlignment::Center).vertical(VerticalAlignment::Center);
	imageView->setScalingMethod(bb::cascades::ScalingMethod::AspectFit);
	mRootContainer->add(imageView);
	setRoot(mRootContainer);
	connect(this, SIGNAL(urlChanged(QString)), this, SLOT(onurlChanged()));
	//  connect(mRootContainer->layout(), SIGNAL(CreationCompleted()), this, SLOT(onurlChanged()));

}

RemoteImageView::~RemoteImageView() {
	//delete mRootContainer;
}

void RemoteImageView::loadImage() {
	qDebug() << murl;
	QNetworkRequest request = QNetworkRequest();
	request.setUrl(QUrl(murl));
	QNetworkAccessManager* nam = new QNetworkAccessManager(this);
	bool result = connect(nam, SIGNAL(finished(QNetworkReply*)), this,
			SLOT(onImageLoaded(QNetworkReply*)));
	Q_ASSERT(result);
	Q_UNUSED(result);

	nam->get(request);
}
void RemoteImageView::onurlChanged() {
	loadImage();

}
void RemoteImageView::onImageLoaded(QNetworkReply* reply) {
	if (reply->error() != QNetworkReply::NoError) {
		emit imageUnavailable();
		return;
	}
	Image image = Image(reply->readAll());
	imageView->setImage(image);

}
void RemoteImageView::seturl(QString url) {
	if (murl.compare(url) != 0) {
		murl = url;
		emit urlChanged(murl);
	}
}
QString RemoteImageView::URL() {
	return murl;
}

 Cheers!

Please use plain text.
New Developer
setiawand
Posts: 41
Registered: ‎07-12-2012
My Device: Orlando, Dev Alpha

Re: Download Images Dynamically

Cool, it works, perfectly !!!

 

add an ActivityIndicator to your code :smileyhappy:

 

/*
 * RemoteImageView.hpp
 *
 *  Created on: 30 Okt 2012
 *      Author: aluialarid
 *      ReWrite: Deni Setiawan
 */

#ifndef REMOTEIMAGEVIEW_HPP_
#define REMOTEIMAGEVIEW_HPP_

#include <bb/cascades/CustomControl>
#include <bb/cascades/Container>
#include <bb/cascades/ImageView>
#include <bb/cascades/Container>
#include <bb/cascades/controls/activityindicator.h>

namespace bb {
    namespace cascades {
        class Container;
    }
}
using namespace bb::cascades;

class RemoteImageView: public CustomControl {

Q_OBJECT

Q_PROPERTY(QString url READ URL WRITE setUrl NOTIFY urlChanged)

public:
    RemoteImageView(Container *parent = 0);
    virtual ~RemoteImageView();
    Container* mRootContainer;
    ImageView* imageView;
    ActivityIndicator* indicator;

    Q_INVOKABLE
    void loadImage();
    void setUrl(QString url);
    QString URL();

public slots:
    void onImageLoaded(QNetworkReply* reply);
    void onUrlChanged();signals:
    void imageUnavailable();
    void urlChanged(QString url);

private:
    QString mUrl;

};

#endif /* REMOTEIMAGEVIEW_HPP_ */

#include "RemoteImageView.hpp"
#include <bb/cascades/Container>
#include <bb/cascades/ImageView>
#include <bb/cascades/ScalingMethod>
#include <bb/cascades/DockLayout>
#include <bb/cascades/controls/activityindicator.h>

using namespace bb::cascades;

RemoteImageView::RemoteImageView(Container *parent) :
        CustomControl(parent) {
    mRootContainer = new Container();
    mRootContainer->setLayout(new DockLayout);
    imageView = ImageView::create().image(
            QUrl("asset:///images/feed_manga_text.jpg")).horizontal(
            HorizontalAlignment::Center).vertical(VerticalAlignment::Center);
    imageView->setScalingMethod(bb::cascades::smileyfrustrated:calingMethod::AspectFit);
    mRootContainer->add(imageView);
    indicator = new ActivityIndicator();
    indicator->setHorizontalAlignment(HorizontalAlignment::Center);
    indicator->setVerticalAlignment(VerticalAlignment::Center);
    indicator->setPreferredSize(400.0, 400.0);
    mRootContainer->add(indicator);
    setRoot(mRootContainer);
    connect(this, SIGNAL(urlChanged(QString)), this, SLOT(onUrlChanged()));
    //  connect(mRootContainer->layout(), SIGNAL(CreationCompleted()), this, SLOT(onurlChanged()));

}

RemoteImageView::~RemoteImageView() {
    //delete mRootContainer;
}

void RemoteImageView::loadImage() {
    indicator->start();
    qDebug() << mUrl;
    QNetworkRequest request = QNetworkRequest();
    request.setUrl(QUrl(mUrl));
    QNetworkAccessManager* nam = new QNetworkAccessManager(this);
    bool result = connect(nam, SIGNAL(finished(QNetworkReply*)), this,
            SLOT(onImageLoaded(QNetworkReply*)));
    Q_ASSERT(result);
    Q_UNUSED(result);

    nam->get(request);
}

void RemoteImageView::smileysurprised:nUrlChanged() {
    loadImage();

}

void RemoteImageView::smileysurprised:nImageLoaded(QNetworkReply* reply) {
    if (reply->error() != QNetworkReply::NoError) {
        emit imageUnavailable();
        indicator->stop();
        return;
    }
    Image image = Image(reply->readAll());
    imageView->setImage(image);
    indicator->stop();
}

void RemoteImageView::setUrl(QString url) {
    if (mUrl.compare(url) != 0) {
        mUrl = url;
        emit urlChanged(mUrl);
    }
}

QString RemoteImageView::URL() {
    return mUrl;
}

Please use plain text.
Contributor
abang_adit
Posts: 27
Registered: ‎07-26-2012
My Device: i dont have a blackberry device

Re: Download Images Dynamically

hey, sorry im a newbie

how to use those function ?? :smileysad:

best regards,
aditya eka putra (@abang_adit)
Please use plain text.
New Developer
setiawand
Posts: 41
Registered: ‎07-12-2012
My Device: Orlando, Dev Alpha

Re: Download Images Dynamically

im using it to view image from URL, just use it on QML file and point the url property to your image :smileyhappy: dont forget to register the component so QML will know it :smileyhappy:

 

thank you


Deni.S (@setiawand81)

Please use plain text.
Contributor
abang_adit
Posts: 27
Registered: ‎07-26-2012
My Device: i dont have a blackberry device

Re: Download Images Dynamically

sorry again , can you give me some examples code to do that ? :smileysad:

and is that code can be used for me to create a custom list that include any image on it ?

best regards,
aditya eka putra (@abang_adit)
Please use plain text.
New Developer
setiawand
Posts: 41
Registered: ‎07-12-2012
My Device: Orlando, Dev Alpha

Re: Download Images Dynamically

yes, of course :smileyhappy: My PhotoWall and Feed Manga is implementing this component :smileywink: I'm going to upload my photowall into github, but so busy lately, maybe next month :smileyvery-happy:
Please use plain text.
Developer
SumiGhosh
Posts: 435
Registered: ‎09-20-2011
My Device: Z10 LE, Playbook, DevAlpha C, 9900, 9380

Re: Download Images Dynamically

Please use plain text.