Le but du présent document est d’expliquer comment utiliser une fonction C++ depuis un fichier QML et inversement. Pour utiliser ce tutoriel, nous estimerons que vous avez Qt d’installé et fonctionnel sur votre ordinateur.

Utiliser du C++ depuis QML

La première étape pour utiliser du c++ depuis un fichier QML est de créer une classe accessible. On va donc créer une classe « passerelle » qui hérite de QObject. On a donc le code suivant :

#ifndef PASSERELLE_H
#define PASSERELLE_H

#include <QObject>

class passerelle : public QObject
{
    Q_OBJECT
public:
    explicit passerelle(QObject *parent = 0);

signals:

public slots:
};

#endif // PASSERELLE_H

passerelle.h

#include "passerelle.h"

passerelle::passerelle(QObject *parent) : QObject(parent)
{

}

passerelle.cpp

Maintenant, il ne nous reste plus qu’à écrire une fonction qui s’exécutera quand le QML va le lui demander. Rien de plus simple, il suffit de déclarer celle-ci comme étant un « public slots ». Créons donc la fonction toStringCpp() qui affiche un message (Attention à l’inclusion de QDebug) :

#ifndef PASSERELLE_H
#define PASSERELLE_H

#include <QObject>
#include <QDebug>

class passerelle : public QObject
{
    Q_OBJECT
public:
    explicit passerelle(QObject *parent = 0);

signals:

public slots:
    void toStringCpp();
};

#endif // PASSERELLE_H

passerelle.h

#include "passerelle.h"

passerelle::passerelle(QObject *parent) : QObject(parent)
{

}

void passerelle::toStringCpp()
{
    qDebug()<<"Hello C++ world ";
}

passerelle.cpp

Et voilà, c’est terminé pour la classe ! Il faut maintenant indiquer au QML comment l’appeler, cela se passe dans le main ! C’est parti.

Si vous êtes sur Qt5.7, alors votre main devrait ressembler à ça :

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));

    return app.exec();
}

main.cpp

C’est bien … mais il faut le modifier si on veut accéder à notre classe. Voici à quoi doit ressembler votre main si vous voulez accéder à la classe passerelle depuis le QML :

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtQuick/QQuickView>
#include <QQmlContext>
#include "passerelle.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    QQuickView view;

    passerelle p;
    view.rootContext()->setContextProperty("passerelle", &p);

    view.setSource(QUrl(QLatin1String("qrc:/main.qml")));
    

    return app.exec();
}

main.cpp

En fait, tout se passe avec le QQuickView, plus particulièrement avec la méthode setContextProperty, on voit deux arguments : le premier sera le nom à utiliser dans le QML pour accéder à l’instance de la classe passé en second argument. Ainsi, ici on peut voir que pour accéder à l’instance p de la classe passerelle il faudra utiliser le nom passerelle dans le fichier QML.

Et voilà, on en a terminé avec le main ! Il ne reste plus qu’à faire un tour dans le fichier QML !

Si vous avec généré un projet avec l’éditeur Qt, vous devriez déjà avoir quelque chose … Effaçons tout et repartons de zéro !

Voici une fenêtre avec tout le nécessaire !

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.4

ApplicationWindow {
    visible:true
    width: 640
    height: 480

    Button {
        id: button1
        x: 256
        y: 193
        text: qsTr("Accès c++ !")
    }


}

main.qml

C’est presque terminé ! Il suffit d’appeler notre méthode toStringCpp sur l’appui du bouton. Voilà le code final :

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.4

ApplicationWindow {
    visible:true
    width: 640
    height: 480

    Button {
        id: button1
        x: 256
        y: 193
        text: qsTr("Accès c++ !")
        onClicked:
        {
            passerelle.toStringCpp();
        }
    }


}

main.qml

Comme vous pouvez le voir, à chaque appui sur le bouton, la fonction toStringCpp est appelée !

Bravo, vous savez maintenant comment appeler des fonctions C++ depuis le QML.

Exécuter des fonctions QML depuis un code C++

Et si maintenant, lorsque vous appuyez sur le bouton, vous voulez afficher un texte définit dans le code C++ ? Comment faire ? Il existe plusieurs solutions, la première consiste à utiliser le retour de la fonction C++ et d’utiliser des getters / setters. La solution qui sera présentée ici sera une modification automatique d’un texte lors d’un changement du côté du C++, sans appeler de fonction.

Reprenons le code précédant et modifions un peu notre fonction C++ :

#ifndef PASSERELLE_H
#define PASSERELLE_H

#include <QObject>
#include <QDebug>

class passerelle : public QObject
{
    Q_OBJECT
public:
    explicit passerelle(QObject *parent = 0);

signals:
    void changementCPP(QString text);

public slots:
    void toStringCpp();

private:
    QString text;
    int compteur = 0;
};

#endif // PASSERELLE_H

passerelle.h

#include "passerelle.h"

passerelle::passerelle(QObject *parent) : QObject(parent)
{

}

void passerelle::toStringCpp()
{
    compteur++;
    text = "Vous avez appuyé : "+QString::number(compteur,'f',0)+" fois sur le bouton";
    emit changementCPP(text);
}

passerelle.cpp

Expliquons un peu ce code ! Tout d’abord, regardons le .h, on peut voir l’apparition d’un signal, qu’est-ce que c’est que ça ? En appelant cette fonction, on pourra notifier à toute classe ou objet écoutant la classe passerelle que quelque chose s’est passé. On peut, en exagérant, appeler cela un élément générateur d’interruption logiciel, et ce serai pas si faux que ça …

On peut voir également que nous avons créer un objet text et un objet compteur.

Regardons maintenant le code C++, nous avons modifié la fonction toStringCpp afin d’incrémenter le compteur et de changer le contenu de la variable text. Enfin, on émet le signal changementCPP en passant comme argument le text.

Si la notion de signal n’est pas clair pour vous, son intérêt va être présenté au paragraphe suivant !

En effet, celui-ci prend toute son importance si on regarde le nouveau code QML ! Allons-y !

Commençons d’abord par ajouter un élément Text qui va nous permettre d’afficher des informations :

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.4

ApplicationWindow {
    visible:true
    width: 640
    height: 480
    

    Button {
        id: button1
        x: 256
        y: 193
        text: qsTr("Accès c++ !")
        onClicked:
        {
            passerelle.toStringCpp();
        }
    }

    Text {
        id: affichageCpp
        x: 177
        y: 245
        text: qsTr("Text")
        font.pixelSize: 12
    }


}

main.qml

Pour l’instant, pas de gros changement, mais si on regarde, à l’appui sur le bouton, rien ne se passe, et ce n’est pas ça qu’on voulait !!!

On y est presque ! On va se servir de l’élément Connections du langage QML ! A quoi ça sert ? A écouter les signaux générés aussi bien par un autre composant QML que par une classe C++. Et là vous voyez où je veux en venir, écoutons le signal de notre classe passerelle !

Voici le code final :

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.4

ApplicationWindow {
    visible:true
    width: 640
    height: 480
    Connections
    {
        target:passerelle
        onChangementCPP:
        {
            affichageCpp.text = text;
        }
    }

    Button {
        id: button1
        x: 256
        y: 193
        text: qsTr("Accès c++ !")
        onClicked:
        {
            passerelle.toStringCpp();
        }
    }

    Text {
        id: affichageCpp
        x: 177
        y: 245
        text: qsTr("Text")
        font.pixelSize: 12
    }


}

main.qml

Maintenant, si vous appuyez sur le bouton, vous devriez voir un texte intéressant s’afficher ! En effet, c’est le contenu de l’instance text de la classe passerelle qui s’affiche ! Sympa n’est-ce pas ?

Comment ça marche ? On peut passer des paramètres dans un signal, autant qu’on veut, ici nous avons passé une string qui est recopié dans la valeur text de l’élément affichageCpp du QML, mais on peut passer toute sorte de paramètres : des doubles, des entiers, des graphiques …

[TUTORIEL] Faire le lien entre C++ et QML

Utiliser du C++ depuis QML

Exécuter des fonctions QML depuis un code C++

1 Commentaire

Répondre à jack Annuler la réponse