Fundamentals Brief: Calling C++ functions from QML

This tutorial is the first in a series of very brief and concise tutorials covering some basic fundamentals needed to develop BlackBerry apps using Cascades.

There comes a time when a Cascades developer may need to utilize C++ in conjunction with his or her QML. Many developers use JavaScript for app logic and sidestep using extra C++ logic entirely. Having the ability to use JavaScript  and/or C++ in conjunction with QML is one of the strenghts of Cascades development, so pick your poison. That being said, this tutorial is meant to be a brief and very basic introduction to the "how" when it comes to calling C++ functions from QML and returning the result of the function back to your QML.

So, to get started open up the native IDE (Momentics) and create a new, blank cascades project. This short and brief example will be very basic and is meant to demonstrate the basic concept. For this example we will take a basic string of text and strip out some characters in C++ and return the stripped string to our QML document.

Demonstration of Concept 

add the following bolded code to your applicationui.cpp

QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
	//ADD: Set context property hereqml->setContextProperty("_app", this);
	// Create root object for the UI
	AbstractPane *root = qml->createRootObject();

Add the function below to end of your application.cpp

QString ApplicationUI::stripIt(const QString normalString) {
	// Remove defined characters and return the stripped string.
	QString strippedString = normalString;
	strippedString.replace("a", "i");
	return strippedString;

Add the following bolded code to you applicationui.hpp

    ApplicationUI(bb::cascades::Application *app);
    virtual ~ApplicationUI() { }
    Q_INVOKABLE QString stripIt(const QString normalString);

Okay, so now let's create some UI in QML. Open up the main.qml and format it as follows

import bb.cascades 1.0
Page {
    Container {
        verticalAlignment: VerticalAlignment.Fill
        horizontalAlignment: HorizontalAlignment.Fill
        layout: DockLayout {
        Container {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            Label {
                id: stripLabel
                text: "Bananas are radioactive!"
                horizontalAlignment: HorizontalAlignment.Center
                textStyle.base: SystemDefaults.TextStyles.TitleText
            Divider {
            Button {
                id: stripString
                text: "Strip!"
                onClicked: {
                horizontalAlignment: HorizontalAlignment.Center
            Button {
                id: resetIt
                text: "Reset"
                onClicked: {
                    stripLabel.setText("Bananas are radioactive!")
                horizontalAlignment: HorizontalAlignment.Center


The resulting UI

Compile and deploy this to your device or simulator, and give it a try.  What you will find is that when you click the 'Strip!' button, your clothes will magically fall off. Okay, that won't happen, but what will happen is that all the 'a' characters in the label will be replaced with 'i' characters.  Pretty cool? Meh. It may not be cool, but it does demonstrate the most basic concept.

Full source and a signed bar are attached below!

Happy coding!


Leave your comments

Post comment as a guest


People in this conversation

  • Guest (Nolan)

    mine has main.cpp< you say application.cpp, so I thought those where the same, but if I download your source files you function is added to applicationui.cpp??? where is the function supposed to be written?

    Like 0 Short URL:
  • Guest (Sawyer)

    C++ is a Fundamental language, in other hand, it's also called object oriented language. I have been writing C++ programs for in the last month. Now I have full commend on c++ functions.

    Like 0 Short URL:
Subscribe to the official OSBB BBM Channel!



Back to top