Cascades Development

[nanyaran]

I am making an app and currently the qml file contain noly images and texts. I have another C++ file that can grab sensor information and process the information. I am wondering how can I use those infromation that got from cpp file at qml file? (Or how can i do print sensor information on the display?) Thanks.

[thubalek]

Absolutely it is possible. You can freely mix C++ code and QML. 

Look at this - https://developer.blackberry.com/cascades/documentation/dev/integrating_cpp_qml/index.html

Tom

[nanyaran]

Thank you for your replying, and I wnt throught the page. I am still confused about how to do it at my program.

Basically, I have my own implemented object that in a cpp file and hpp file. Based on what that page said, if i want to pass an object to qml, I have to impelment another header file that contains what the page said. I dont clearly know what is necessary for me to include in my project and what is the portion that I am going to impelment by myself? If you could explain me more, it will be really appreciate. Thank you very much.

[thubalek]

If you want to expose your C++ objects into QML then they need to implement some stuff. 

• extend QObject
• add Q_OBJECT macro
• add Q_PROPERTY macro if you want to expose properties of the object
• add Q_INVOKABLE macro if you wan to call objects methods from QML
• you need to register them into QML in your apps' CPP file

Please note that QML is interpretted so it needs some interface to your C++ objects.

Please look at linked web page it is quite easy to implement.
 

[simon_hain]

this was also helpful for me to understand the Q_PROPERTY mechanism:
http://www.developer.nokia.com/Community/Wiki/How_to_use_Q_PROPERTY

[nanyaran]

I tried that method, but it doesnt work for me. I may did something wrong or it may not work at my situation. If I have a cpp file that contains with objects. Currently, it can print variables on the console. Instead of that, i want to use cpp or qml (either one of them) to print variable changing on the display. Would this method work as well?

[doug1010]

I am having a similar problem. So Hopefully it is ok to post it here.  I've been trying for a few days now after reading a few different examples.  I tried to make a simple example but just couldn't get it to work the way I want. I am clearly missing something

Any help would be greatly appreciated.  I am quite stuck. 

I read these.But I can't get it to work the way I'd like.  See my comments in the code below. Hopefully it's readable on here.

https://developer.blackberry.com/cascades/documentation/dev/integrating_cpp_qml/index.html

http://blog.tediscript.com/how-to-bind-imageview-in-qml-from-c-in-bb10-cascades/

http://apidocs.meego.com/1.2/qt4/qtbinding.html

http://upadhyayjiteshbb10.blogspot.ca/2012/12/blackberry-10-c-and-qml-integration.html

main.qml

import bb.cascades 1.0

Page {
    property alias labelText: label.text
    Container {
        Label {
            id: label
            text: "Label"
            objectName: "mLabel"
        }
        Button {
            
            text: "Button"
            onClicked: {
                MyApp.chgText("snarf");
            }
        }
    }
}

MyApp.cpp

#include "MyApp.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>
#include <QObject>

using namespace bb::cascades;

//~~~It works for me when I do it here~~~
MyApp::MyApp(bb::cascades::Application *app)
: QObject(app)
{
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
    AbstractPane *root = qml->createRootObject<AbstractPane>();
    
    //This works fine in here.
    root->setProperty("labelText", "New text");

    app->setScene(root);
}

//~~~But I would like to do it here. I'm not sure if it "worked" for me but it just wasn't updating the screen? I must be missing something...
void MyApp::chgText(QString myString)
{
    //should something like this go here?  I tried it but it didn't work
    /*
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
    AbstractPane *root = qml->createRootObject<AbstractPane>();
    app->setScene(root);
    */

    //so that this will work here?
    root->setProperty("labelText", myString);

        //Then there was an example like this with findChild.  It didn't seem to work either.  Not sure if "QDeclarativeView" works for cascades.  But I think I tried another way with findchild and it still would not work.
/*	
        QDeclarativeView view(QUrl("main.qml"));
	view.show();

	// get root object
	QObject *rootObject = dynamic_cast<QObject *>(view.rootObject());

	// find element by name
	QObject *mLabel = rootObject->findChild<QObject *>(QString("mLabel"));

	if (mLabel) { // element found
		mLabel->setProperty("text", QString(myString));
	} else {
	    qDebug() << "'mLabel' not found";
	}
*/
}

 MyApp.hpp

#ifndef MyApp_HPP_
#define MyApp_HPP_

#include <QObject>

namespace bb { namespace cascades { class Application; }}


class MyApp : public QObject
{
    Q_OBJECT
public:
    MyApp(bb::cascades::Application *app);
    Q_INVOKABLE void chgText(QString myString);
};


#endif /* MyApp_HPP_ */

[kylefowler]

Where are you trying to call chgText from? You probably need to set the context property to be able to call it.

qml->setContextProperty("app",this)

and then call chgText from your qml. app.chgText("what ever")

You dont want to create a new root when that method is called, you can just do app->scene()->setProperty("myprop",text)

[thubalek]

This is IMHO simples way how to expose your business logic to QML:

BusinessLogic.h

#include <qobject.h>

class BusinessLogic: public QObject {

	Q_OBJECT
	Q_PROPERTY (int firstNumber READ firstNumber WRITE setFirstNumber NOTIFY firstNumberChanged)
	Q_PROPERTY (int secondNumber READ secondNumber WRITE setSecondNumber NOTIFY secondNumberChanged)
	Q_PROPERTY (int result READ result NOTIFY resultChanged)

public:
	BusinessLogic();
	virtual ~BusinessLogic();

	Q_INVOKABLE
	void calc() { mResult = mFirstNumber + mSecondNumber; emit resultChanged(); }

	int firstNumber() { return mFirstNumber; }
	int secondNumber() { return mSecondNumber; }

	int result() { return mResult; }

	void setFirstNumber(int n ) { mFirstNumber = n; }
	void setSecondNumber(int n ) { mSecondNumber = n; }

signals:
	void firstNumberChanged();
	void secondNumberChanged();
	void resultChanged();

private:
	int mFirstNumber;
	int mSecondNumber;
	int mResult;
};

 main.cpp

#include "BusinessLogic.h"

using namespace bb::cascades;

ExposingBizLogicSample::ExposingBizLogicSample(bb::cascades::Application *app)
: QObject(app)
{

	qmlRegisterType<BusinessLogic>("com.example", 1, 0, "BusinessLogic");

    // create scene document from main.qml asset
    // set parent to created document to ensure it exists for the whole application lifetime
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    // create root object for the UI
    AbstractPane *root = qml->createRootObject<AbstractPane>();
    // set created root object as a scene
    app->setScene(root);
}

 main.qml

// Default empty project template
import bb.cascades 1.0
import com.example 1.0

// creates one page with a label
Page {
    Container {
        TextField {
            id: firstNumberTextField
            hintText: "First Number"
            inputMode: TextFieldInputMode.NumbersAndPunctuation
        }
        TextField {
            id: secondNumberTextField
            hintText: "Second Number"
            inputMode: TextFieldInputMode.NumbersAndPunctuation
        }
        Label {
            id: resultLabel
            text: "No result at the moment"
        }
        Button {
            text: "Calc"
            onClicked: {
                businessLogic.firstNumber = firstNumberTextField.text
                businessLogic.secondNumber = secondNumberTextField.text
                businessLogic.calc();
                resultLabel.text = "Result is: " + businessLogic.result.toString();
            }
        }
    }
    attachedObjects: [
        BusinessLogic {
            id: businessLogic
        }
    ]
}

I'll put my working project on my GitHub later.

[thubalek]

Here is working project https://github.com/thubalek/bb10-exposing-business-logic-sample