How to call C + + code in a QML language in a Qmake project

In this article, we'll show you how to use C + + code in QML. In previous articles, "using C + + to expand QML Type and property binding!" , we can expand our QML functionality by using C + + plugin methods. That project is the CMake project. For the Qmake project, we can do the same thing. You can use a plugin and call it in QML.

Today, we will not use the plugin method, and we want to invoke the C + + code directly in the Qmake project. So what are we going to do about it? note here that Qmake is only available for 15.04 and above for Ubuntu Mobile target (simulator and mobile).

1) Create one of the most basic qmake applications
We use our SDK and use the QtQuick App with QML UI (qmake) template. The steps are as follows:




This allows us to create one of our most basic qml and C + + hybrid applications (qmake).

2) Add the documents we need
We downloaded the TrafficLight code we did last time to the directory we wanted:
git clone https://gitcafe.com/ubuntu/trafficlight.git

and the "Trafficlight.cpp" and "trafficlight.h" into the source code of our project directory (in the directory where Main.cpp is located). In order to be able to compile our newly added Trafficlight.cpp file, we need to make a write modification to the Trafficligth.pro file:

TEMPLATE = Apptarget = Trafficlightload (ubuntu-click) QT + + core QML quicksources + main.cpp trafficlight.cppheaders + = tr Afficlight.hresources + = trafficlight.qrcother_files + trafficlight.apparmor                trafficlight.desktop                trafficlight.png#specify where the config files are installed Toconfig_files.path =/trafficlightconfig_files.files + = $$ {other_files}message ($ $config _files.files) installs+=config_files# Default rules for Deployment.target.path = $${ Ubuntu_click_binary_path}installs+=target

Here we have added "core":

QT + + Core QML quick

This allows us to compile the Qobject class. At the same time we joined the "Trafficlight.cpp":

SOURCES + = Main.cpp trafficlight.cpp

This allows us to compile the file. In order to be able to display "trafficlight.h" in Qt Creator, we have added the following sentences:

HEADERS + = Trafficlight.h

Compile our project to make sure that our code does not have any problems.
3) Register our C + + code and enable it to be used in our QML
Open our Main.cpp file and we modify it to:

#include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQuickView> #include < Qqmlcontext> #include <trafficlight.h>int main (int argc, char *argv[]) {    qguiapplication app (argc, argv);    Qmlregistertype<trafficlight> ("Light", 1,0, "TrafficLight");    int count = 3;    Qquickview view;    View.setsource (Qurl (qstringliteral ("qrc:///main.qml"));        View.setresizemode (Qquickview::sizerootobjecttoview);    View.rootcontext ()->setcontextproperty ("Total", Qvariant::fromvalue (count));    View.show ();    return app.exec ();}

Here, we pass:

Qmlregistertype<trafficlight> ("Light", 1,0, "TrafficLight");

To register our trafficlight so that it can be used in the QML.
In addition, we use the following methods:

    int count = 3;   View.rootcontext ()->setcontextproperty ("Total", Qvariant::fromvalue (count));

To pass count to QML so that its value can be referenced in QML.
Finally, let's revise our MAIN.QML file:

Import QtQuick 2.0import ubuntu.components 1.1import Light 1.0/*! \brief MainView with a Label and Button Elements.*/mainview {//ObjectName for functional testing purposes (autopilot- QT5) ObjectName: "MainView"//note!    ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Trafficlight_new.liu-xiao-guo" /* The enables the application to change orientation when the device is rotated.    The default is False.    *///automaticorientation:true//Removes the old toolbar and enables new features of the new header.         Usedeprecatedtoolbar:false width:units.gu (height:units.gu) page {title:i18n.tr ("TrafficLight")                Column {anchors.centerIn:parent Spacing:units.gu (3) Repeater { Model:total delegate:trafficlight {anchors.centerIn:parent. Center Width:units.gu (20)                    Height:width color: "Red"}}}} 

In this file, we directly import our TrafficLight:

Import Light 1.0

In this way, trafficlight can be used directly:

                    TrafficLight {                    anchors.centerIn:parent. Center                    Width:units.gu (height:width)                    color: "Red"

To run our application:


All the source code in: Git clone https://gitcafe.com/ubuntu/trafficlight_new.git

How to call C + + code in a QML language in a Qmake project