Cascades Development

[rock_win]

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.

[raj_jyani]

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

[rock_win]

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

[raj_jyani]

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

[rock_win]

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?

[jan_macura]

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

[rock_win]

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.

[raj_jyani · Accepted solution]

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) .
 

[babcow]

Thank you, raj_jyani, you helped me.