Exposing QML Object Pointer to C/C++

Sometimes, for whatever reason, we want to modify the properties of a QML object through C/C++ scripting. Qt’s QML engine actually supports this and it allows you to register your QML objects as C/C++ types, however, this is often not well-explained.

For example, I created a label in QML and I want to change its text occasionally. In order for me to expose the label object to C/C++, I created a C/C++ class called MyClass which extended from QObject class.

myclass.h:

class MyClass : public QObject
{
    Q_OBJECT
public:
    // Object pointer
    QObject* myObject;
    
    explicit MyClass(QObject *parent = 0);
    
    // Must call Q_INVOKABLE so that this function can be used in QML
    Q_INVOKABLE void SetMyObject(QObject* obj);
}

In myclass.cpp source file, I defined a function called SetMyObject() to save the object pointer. This function will later be called in QML.

myclass.cpp:

void MyClass::SetMyObject(QObject* obj)
{
     // Set the object pointer
     myObject = obj;
}

After that, in main.cpp, include MyClass header and register it to QML engine using the function qmlRegisterType():

main.cpp:

#include "myclass.h"

int main(int argc, char *argv[])
{
     // Register your class to QML
     qmlRegisterType("MyClassLib", 1, 0, "MyClass");
}

Notice there are 4 parameters you need to declare in qmlRegisterType(). Besides declaring your class name (i.e. MyClass), you also need to declare your library name (i.e. MyClassLib) and its version (i.e. version 1.0), which will be used for importing your class to QML later on.

Now that QML engine is fully aware of my custom class, I can then map it to my label object in QML. First off, in my QML file, I imported my class library by calling import MyClassLib 1.0. Notice that the library name and its version number have to be matching with the one you declared in main.cpp, otherwise it will throw you an error.

After declaring MyClass in QML (and set its id as myclass), I then call myclass.SetMyObject(myLabel) to expose the label’s pointer to C/C++ right after the label is being initialized:

import MyClassLib 1.0

ApplicationWindow
{
     id: mainWindow
     width: 480
     height: 640
     
     MyClass
     {
          id: myclass
     }

     Label
     {
          id: myLabel
          text: qsTr("Hello World!")
          Component.onCompleted:
          {
               myclass.SetMyObject(myLabel);
          }
     }
}

Please be aware that you need to wait until the label is fully initiated before exposing its pointer to C/C++, otherwise you may cause the program to crash. To make sure it’s fully initiated, call SetMyObject() within Component.onCompleted and not other places.

Now that the QML label is being exposed to C/C++, I can do whatever I want to the label. For instance, I can set its visibility to true and change its text to “Bye bye world!”:

// QVariant automatically detects your data type
myObject->setProperty("visible", QVariant(true));
myObject->setProperty("text", QVariant("Bye bye world!"));

Besides changing the properties, I can also call its functions by calling QMetaObject::invokeMethod():

QVariant returnedValue;
QVariant message = "Hello world!";

QMetaObject::invokeMethod(myObject, "myQMLFunction",
    Q_RETURN_ARG(QVariant, returnedValue),
    Q_ARG(QVariant, message));

qDebug() << "QML function returned:" << returnedValue.toString();

...or simply:

QMetaObject::invokeMethod(myObject, "myQMLFunction");

That's all for this tutorial. If you have any problem please feel free to leave a comment below. Happy coding!

Application Development with Qt Creator Second Edition

Application Development with Qt Creator Second Edition” is the 3rd book I reviewed for Packt Publishing. Although it’s the second edition, the contents of the book are greatly varied from its predecessor.

First off, it has more chapters compare to the first edition, bringing more contents to the readers especially topics related to Qt Quick. The book also included some pretty fun projects for readers to work on such as media player and simple paint program.

The book also covers some of the fundamental and important topics such as localization, software optimization, and debugging which are needed to develop industry-standard applications.

Let’s take a look at the chapter outline:

Chapter 1
Getting Started with Qt Creator, shows you how to download and install Qt Creator as well as edit simple applications to test your installation.

Chapter 2
Building Applications with Qt Creator, shows you how to compile, run, and debug your application using Qt Creator. You will learn how Qt Creator integrates with both the GNU debugger and the Microsoft console debugger to provide breakpoints, memory inspection, and other debugging help.

Chapter 3
Designing Your Application with Qt Designer, shows you how to use the drag-and-drop GUI designer that is a part of Qt Creator to build both Qt Widget-based applications and Qt Quick applications.

Chapter 4
Qt Foundations, takes you through the foundations of software development using Qt and also covers its support for platform-agnostic application development.

Chapter 5
Developing Applications with Qt Widgets, shows you how to build applications using Qt Widgets that look and act like native desktop applications on the platform of your choice.

Chapter 6
Drawing with Qt, shows the various ways you can move beyond the built-in controls in Qt and make your own drawing on the screen and other drawable entities such as image files in PNG or JPEG.

Chapter 7
Doing More with Qt Quick, expands on what you learned about Qt Quick in the introductory chapters.

Chapter 8
Multimedia and Qt Quick, introduces you to Qt Quick’s support for multimedia, such as audio and video playback as well as how to use a camera if it is connected.

Chapter 9
Sensors and Qt Quick, shows you how to use the various sensors on many of the devices available today using Qt Quick.

Chapter 10
Localizing Your Application with Qt Linguist, shows you how to manage resource strings for different locales, letting you build your application with different languages in different locales.

Chapter 11
Optimizing Performance with Qt Creator, shows you how to use Qt Creator to examine your Qt Quick application’s runtime performance, as well as how to perform the memory profiling of your application with Valgrind, an open source diagnostic tool.

Chapter 12
Developing Mobile Applications with Qt Creator, gives you a glimpse of the exciting arena of mobile software development and shows you how you can use what you’ve learned in this book about Qt and Qt Creator to write applications for platforms such as Google Android.

Chapter 13
Qt Tips and Tricks, is packed with tricks for using Qt and Qt Creator that will help you use the Qt framework and the Qt Creator IDE efficiently.

You can get the book from here.

Call Javascript Functions from C/C++

If you have ever wondered how to control QWebView’s contents using C/C++, it’s actually pretty easy to accomplish using Qt. All you need to do is to write a Javascript function in your HTML page that does whatever that you need, and evaluate the Javascript function from C/C++.

For example, you wrote a Javascript function in your HTML page, like so:






Then, in C/C++ you can simply call:

myWebView->page()->mainFrame()->evaluateJavaScript("MyFunction();");

That’s all! Once you called evaluateJavaScript() function, Qt will handle the rest for you.

If you want to learn how to call C/C++ functions from Javascript, read this.

Call C/C++ Functions from Javascript

It’s possible to call a C/C++ functions from Javascript through web view. At the moment it will only work in Qt Form and doesn’t work well in QML yet. This will probably change in the future versions.

The first thing you need to do is to add your Qt object to the web view as a Javascript object. Then, connect the main frame’s javaScriptWindowObjectCleared() signal to a custom function which adds your Qt object to Javascript:

connect(ui->webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()), this, SLOT(addMyObjectToJavascript()));

This step is very important because you don’t want to lose your object when the page is refreshed. This will ensure that the web view re-adds your object if the page ever gets refreshed.

Next, define the function that gets called when the page is loaded or refreshed:

void MainWindow::addMyObjectToJavascript()
{
    ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("mainWindow", this);
}

In this example, I added the main window to the web view. You can add anything to the web view as long as it’s a class that inherits from QObject.

Before you start calling your C/C++ function from Javascript, you have to make sure the C/C++ function is set to invokable in your header file:

Q_INVOKABLE void doSomething();

Now, you can call the function from Javascript by simply calling:

mainWindow.doSomething();

It’s all that simple.

You can also call Javascript functions from C/C++. Click here to learn how.