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
rock_win
Posts: 136
Registered: ‎02-01-2009
My Device: Not Specified
Accepted Solution

Unable to render the ListComponent ImageView - image from data folder

I have downloaded an image in the data folder and want to show it in the listView.

 

In Listcomponent, i'm using an ImageView,

if i set its imagesource:"../../../data/files/images/123.png"

 

The image is rendered properly.

But, if i try to set the same path from the C++ code in the GroupDataModel, the image doesn't renders.

 

 

Please use plain text.
Developer
raj_jyani
Posts: 107
Registered: ‎05-11-2011
My Device: BlackBerry Z10 LE
My Carrier: AirTel

Re: Unable to render the ListComponent ImageView - image from data folder

[ Edited ]

Hi,

 

write like :   "../../data/files/images/123.png"

 

C++ :  imageView->setImage(QUrl("../../data/files/images/123.png"));

 

only two times double dot.

 

Link :   https://developer.blackberry.com/cascades/documentation/device_platform/filesystem/index.html

 

 

Please use plain text.
Developer
rock_win
Posts: 136
Registered: ‎02-01-2009
My Device: Not Specified

Re: Unable to render the ListComponent ImageView - image from data folder

Well that doesnt help, since as I mentioned the data is being set by GroupDataModel - and not the ImageView directly.

So, if I use the query string of QUrl to the ListItemData -- it doesnt shows the image

If possible, please share a working example of it
Please use plain text.
Developer
raj_jyani
Posts: 107
Registered: ‎05-11-2011
My Device: BlackBerry Z10 LE
My Carrier: AirTel

Re: Unable to render the ListComponent ImageView - image from data folder

[ Edited ]

Hi,

 

First Make sure is image in your data folder ? . for check you can use Target File System Navigator

 

CPP

#include "app.hpp"

#include <QObject>
#include <QIODevice>

//#include <QXmlStreamReader>
#include <QtXml/QDomDocument>
#include <bb/cascades/QListDataModel>

#include <bb/cascades/Application>
#include <bb/cascades/ListView>
#include <bb/cascades/GroupDataModel>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>

using namespace bb::cascades;

App::App() {
    QmlDocument *qml = QmlDocument::create("main.qml");
    AbstractPane *root = qml->createRootNode<AbstractPane>();

    GroupDataModel *model = new GroupDataModel(
            QStringList() << "firstname" << "surname" << "imagepath");
    model->setGrouping(ItemGrouping::ByFirstChar);

    ListView *listView = root->findChild<ListView *>("listView");

    QVariantMap person;
    person["firstname"] = "John";
    person["suername"] = "Mark";
    person["imagepath"] = "../../../data/icon.png";
    model->insert(person);
    person["firstname"] = "Mark";
    person["suername"] = "Russie";
    person["imagepath"] = "../../../data/icon.png";
    model->insert(person);

    listView->setDataModel(model);

    // Set the scene using the root node
    Application::setScene(root);
}

 

QML

 import bb.cascades 1.0

Page {
    content: Container {
        ListView {
            id: contactList
            objectName: "listView"
            listItemComponents: [
                ListItemComponent {
                    type: "header"
                    HeaderListItem {
                        title: ListItemData
                    }
                },
                ListItemComponent {
                    type: "item"
                    Container {
                        Label {
                            text: ListItemData.firstname
                        }
                        Label {
                            text: ListItemData.surname
                        }
                        ImageView {
                            imageSource: ListItemData.imagepath
                        }
                    }
                }
            ]
        }
    }
}

 

For More Example :

https://github.com/blackberry/Cascades-Samples    

refer Internationalization Sample

 

Please use plain text.
Developer
rock_win
Posts: 136
Registered: ‎02-01-2009
My Device: Not Specified

Re: Unable to render the ListComponent ImageView - image from data folder

Raj , i think what you are missing from both of my posts is that these images are loaded at a later stage than initialization itself.

 

However, I have resolved half of the issue by using absolute path.

 

But the images are not showing, probably it need a screen refresh.

 

How can i refresh the UI of list view to use the ammended GroupDataModel of the ListView?

Please use plain text.
Developer
jan_macura
Posts: 20
Registered: ‎08-02-2012
My Device: -
My Carrier: SW Developer

Re: Unable to render the ListComponent ImageView - image from data folder

Hi,

 

I have a same problem. When the image is downloaded to data folder I m setting the imageSource of ListItemComponent ImageView. ImageSource is changed, but the image is not rendered in ListView.

 

Did you solve this problem already?

 

Thanks,

Jan

Please use plain text.
Developer
rock_win
Posts: 136
Registered: ‎02-01-2009
My Device: Not Specified

Re: Unable to render the ListComponent ImageView - image from data folder

If you are updating a row 1 by 1 and wait, then refreshes take place, if you do as a bulk, the whole list refresh collapses.

Hoping this would get resolved with new SDK and its QUrl support.
Please use plain text.
Developer
raj_jyani
Posts: 107
Registered: ‎05-11-2011
My Device: BlackBerry Z10 LE
My Carrier: AirTel

Re: Unable to render the ListComponent ImageView - image from data folder

Hi Friends,

 

I got solution . i hope it's helpful you.

 

.HPP

 

#include <QObject>
#include <bb/cascades/ListView>
#include <bb/cascades/QListDataModel>

using namespace bb::cascades;

class App: public QObject {
Q_OBJECT

public:
	App();

public slots:
	void onSelectionChanged(const QVariantList indexPath, bool selected);

private:
	ListView *listView;

};

 

.CPP

#include "app.hpp"

#include <QObject>
#include <QIODevice>

#include <QtXml/QDomDocument>

#include <bb/cascades/Application>
#include <bb/cascades/GroupDataModel>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>
#include <bb/cascades/controls/standardlistitem.h>

using namespace bb::cascades;

App::App() {
	QmlDocument *qml = QmlDocument::create("main.qml");
	AbstractPane *root = qml->createRootNode<AbstractPane>();

	GroupDataModel *model = new GroupDataModel(
			QStringList() << "firstname" << "surname" << "imagepath");
	model->setGrouping(ItemGrouping::ByFirstChar);

	listView = root->findChild<ListView *>("listView");

	QVariantMap person;
	person["firstname"] = "John";
	person["surname"] = "Mark";
	person["imagepath"] = "I will set on click.";
	model->insert(person);
	person["firstname"] = "Mark";
	person["surname"] = "Russie";
	person["imagepath"] = "asset:///icon.png";
	model->insert(person);

	listView->setDataModel(model);

	QObject::connect(listView,
			SIGNAL(selectionChanged(const QVariantList, bool)), this,
			SLOT(onSelectionChanged(const QVariantList, bool)));

	Application::setScene(root);
}

void App::onSelectionChanged(const QVariantList indexPath, bool selected) {
    if (selected) {
        if (sender()) {
            GroupDataModel *stampModel =
                    (GroupDataModel *) listView->dataModel();
            QVariantMap map = stampModel->data(indexPath).toMap();
            //map["imagepath"] = "asset:///icon.png";
            map["imagepath"] = "../../../data/icon.png";
            stampModel->updateItem(indexPath, map);
            fprintf(stderr, "\nSelection Called");
        }
    }
}

 

.QML

 

import bb.cascades 1.0

Page {
    content: Container {
        ListView {
            objectName: "listView"
            listItemComponents: [
                ListItemComponent {
                    type: "header"
                    HeaderListItem {
                        title: ListItemData
                    }
                },
                ListItemComponent {
                    type: "item"
                    StandardListItem {
                        id: root
                        title: ListItemData.firstname
                        description: ListItemData.surname
                        imageSource: ListItemData.imagepath
                    }
                }
            ]
        }
    }
}

 

Currently i have set one image static and one remain black . it will be set on click on black image list row (Dynamically) .
 

Please use plain text.
Developer
babcow
Posts: 28
Registered: ‎06-25-2009
My Device: 9930
My Carrier: China Telecom

Re: Unable to render the ListComponent ImageView - image from data folder

Thank you, raj_jyani, you helped me.

Please use plain text.