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
varghesekiran
Posts: 38
Registered: ‎09-27-2012
My Device: 9930
My Carrier: airtel
Accepted Solution

Access a QML component from a custom cpp file

Hi guys.,

Please help me.I am stuck with this for more than a week.I have a qml file with a listview in it.I need to access the imageSource in that listview through my cpp file to set the image.I also attaching my code snippet with this.

QML file 

ListView {
                id: listView
                objectName: "listView"

                dataModel: ArrayDataModel {
                    id: myListModel
                    
                }
                // Override default GroupDataModel::itemType() behaviour, which is to return item type "header"
                listItemComponents: [
                    // define delegates for different item types here
                    ListItemComponent {
                        
                        // StandardListItem is a convivience component for lists with default cascades look and feel
                        StandardListItem {
                        	id:stdlst
                            title: ListItemData.postText
                            description: ListItemData.postDate
                            status: ListItemData.filePath
                            imageSource: "asset:///images/2.png"
                        }
                    }
                ]
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1.0
                }
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill

            }

 I need to change the imageSource inside the StandardListItem from the below cpp file.

cpp file

PostHttp::PostHttp(QObject* parent) :
QObject(parent), m_networkAccessManager(new QNetworkAccessManager(this)) {
	QDeclarativeView *view = new QDeclarativeView;
	 view->setSource(QUrl::fromLocalFile("myqmlfile.qml"));
	 view->show();
	 QDeclarativeItem *item = view.rootObject()->findChild<QDeclarativeItem*>("stdlst");
	 if (item)
	     item->setProperty("imageSource", "asset:///images/2.png");
}

 Currently i am doing like this.,but the app crashes when i am doing this.Please help me....

Please use plain text.
Developer
simon_hain
Posts: 15,849
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: Access a QML component from a custom cpp file

i would suggest to do that with a signal, makes it a bit easier and more tidy.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
Developer
varghesekiran
Posts: 38
Registered: ‎09-27-2012
My Device: 9930
My Carrier: airtel

Re: Access a QML component from a custom cpp file

Thanks for your reply Simon.,

 

I tried to do that by emitting a signal with an image from cpp .But i couldnt access it from QML.How can i access a custom signal in QML...???

Please use plain text.
Developer
simon_hain
Posts: 15,849
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: Access a QML component from a custom cpp file

i usually create a matching function in qml (which acts like a slot automatically), then use c++name.signalname.connect(functionname) in qml.
c++name would be the name the c++ class was registered with setContextProperty.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
Developer
varghesekiran
Posts: 38
Registered: ‎09-27-2012
My Device: 9930
My Carrier: airtel

Re: Access a QML component from a custom cpp file

Thanks Simon again,

 

Actually i am new to the cascades development.And the signals ans slots mechanism is bit confusing.Will you please provide me with a sample code snippet for this scenario..?

 

Please use plain text.
Developer
simon_hain
Posts: 15,849
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: Access a QML component from a custom cpp file

here we go.

for example, i created an uiService that wraps my interaction from c++ to qml.

 

I register it before creating the root object:

qml->setContextProperty("uiService", UiService::instance());

 In the UiService.hpp i defined a signal:

signals:
void showPreferences();

 in my qml i created a function:

function onShowPreferences() {
  console.log("onShowPreferences");
  if (top.objectName != "preferences") {
      navigationPane.push(preferences.createObject(this));
  }
}

 and in the final step i use onCreationCompleted to connect the signal to the function:

uiService.showPreferences.connect(onShowPreferences); 

 

----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
Developer
varghesekiran
Posts: 38
Registered: ‎09-27-2012
My Device: 9930
My Carrier: airtel

Re: Access a QML component from a custom cpp file

Thanks for you patience Simon,

 

This is what i am tryin to do after your reply. But i couldnt accomplish my task.

QML file

Container { ActivityIndicator { id: progressIndicator horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill onStarted: { } onCreationCompleted: { progressIndicator.running = true; } } ListView { id: listView objectName: "listView" dataModel: ArrayDataModel { id: myListModel } // Override default GroupDataModel::itemType() behaviour, which is to return item type "header" listItemComponents: [ // define delegates for different item types here ListItemComponent { // StandardListItem is a convivience component for lists with default cascades look and feel StandardListItem { id: stdlst title: ListItemData.postText description: ListItemData.postDate status: ListItemData.filePath imageSource: "asset:///images/2.png" } } ] layoutProperties: StackLayoutProperties { spaceQuota: 1.0 } horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill } Container { id: root layout: StackLayout { } Label { text: ListItemData.postText horizontalAlignment: HorizontalAlignment.Left verticalAlignment: VerticalAlignment.Bottom } Label { text: ListItemData.postDate // textStyle.fontSize: 5 horizontalAlignment: HorizontalAlignment.Right verticalAlignment: VerticalAlignment.Bottom } attachedObjects: [ QTimer { id: timer property int f: 0 interval: 5000 onTimeout: { progressIndicator.running = false; netpost.imageFetcher(); netpost.newsFeedWebService("10"); } }, PostHttp { id: netpost onComplete: { progressIndicator.running = false; progressIndicator.visible = false; myListModel.append(info); console.log("value" + myListModel) console.log("fdsafdsfdsfdsfsdfdsfdsfd" + image) // postResponseBody.visible = true; // postResponseLabel.visible = true; timer.stop(); } function onShowImageLoaded() { stdlst.imageSource("asset:///images/4.png") } // onImageLoaded:{ // stdlst.imageSource(image); // } } ] } onCreationCompleted: { // this slot is called when declarative scene is created // write post creation initialization here console.log("Page - onCreationCompleted()") // enable layout to adapt to the device rotation // don't forget to enable screen rotation in bar-bescriptor.xml (Application->Orientation->Auto-orient) OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All; // populate list view model with the sample data timer.start(); // myListModel.load("app/native/assets/mydata.json") console.log("Page - onCreationCompleted()") PostHttp.imageLoaded.connect(onShowImageLoaded); } }

 

hpp file

Q_SIGNALS: void imageLoaded(const QImage &image);
cpp file

void PostHttp::get(const QUrl &url){
	QNetworkRequest request(*(&url));
	QNetworkReply* reply = m_networkAccessManager->get(request);
	connect(reply, SIGNAL(finished()), this, SLOT(onImageReply()));
}

void PostHttp::onImageReply(){
	QNetworkReply* reply = qobject_cast<QNetworkReply*>(sender());
	QString response;
	QImage img;
	if (reply) {
			if (reply->error() == QNetworkReply::NoError) {
				const int available = reply->bytesAvailable();
							if (available > 0) {
								const QByteArray buffer(reply->readAll());
								response = QString::fromUtf8(buffer);
								img.loadFromData(buffer);
								emit imageLoaded(img);
							}
			}
	}

}

 

This is what i am tryin to accomplish.Pleas help me...

 
Please use plain text.
Developer
simon_hain
Posts: 15,849
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: Access a QML component from a custom cpp file

[ Edited ]

please check if the function is called using console.log.

the listview could cause an issue, listitemcomponents are in a different context, read the API docs regarding this issue.

I suggest that you leave out the ListView as a first step and see if the signal comes through correctly.

 

 

If you want to display remote pictures: I used a CustomComponent for that, extending ImageView and adding the download part. The initial code was posted on this forum, so maybe that would also be an option.

----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
Developer
varghesekiran
Posts: 38
Registered: ‎09-27-2012
My Device: 9930
My Carrier: airtel

Re: Access a QML component from a custom cpp file

[ Edited ]

Thanks Simon,

 

Yes i need to display the images fetching from the url.Will u please provide me that  CustomComponent you used.I couldnt find it from the forum.

Please use plain text.
Developer
simon_hain
Posts: 15,849
Registered: ‎07-29-2008
My Device: Z10 LE
My Carrier: O2 Germany

Re: Access a QML component from a custom cpp file

i based it on this:
http://supportforums.blackberry.com/t5/Cascades-Development/Download-Images-Dynamically/m-p/1927137#...

i am not allowed to share the code i actually use, but this post should give you a good starting point.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.