Catching Qt/C++ signal from QML custom Item/code - howto

[MarkoSan]

I am working on QML app with Qt/C++ "back" logic. Now, I've created class named UeStatus, which resemble the state of app (which users are logged in, database connection succesfull or not, ...):

#ifndef UESTATUS_H
#define UESTATUS_H
 
#include <QObject>
#include <QList>
 
#include "../core/uetypes.h"
#include "../core/uedatabaseconnectionstatus.h"
 
class UeStatus : public QObject
{
    Q_OBJECT
 
    Q_PROPERTY(UeTypeLoggedUsers* m_ueLoginCandidates
               READ ueLoginCandidates
               WRITE ueSetLoginCandidates
               NOTIFY ueSignalLoginCandidatesChanged)
    Q_PROPERTY(UeTypeLoggedUsers* m_ueLoggedUsers
               READ ueLoggedUsers
               WRITE ueSetLoggedUsers
               NOTIFY ueSignalLoggedUsersChanged)
    Q_PROPERTY(UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus m_ueDatabaseConnectionStatus
               READ ueDbConnectionStatus
               WRITE ueSetDbConnectionStatus
               NOTIFY ueSignalDatabaseConnectionChanged)
 
private:
    UeTypeLoggedUsers* m_ueLoginCandidates;
    UeTypeLoggedUsers* m_ueLoggedUsers;
    UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus m_ueDatabaseConnectionStatus;
 
public:
    explicit UeStatus(QObject *parent = 0);
    ~UeStatus();
 
    inline UeTypeLoggedUsers* ueLoginCandidates() const
        { return this->m_ueLoginCandidates; }
    inline UeTypeLoggedUsers* ueLoggedUsers() const
        { return this->m_ueLoggedUsers; }
    inline UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus ueDbConnectionStatus() const
        { return this->m_ueDatabaseConnectionStatus; }
 
    inline void ueSetLoginCandidates(UeTypeLoggedUsers* const m_ueLoginCandidates)
        { this->m_ueLoginCandidates=m_ueLoginCandidates; }
    inline void ueSetLoggedUsers(UeTypeLoggedUsers* const loggedUsers)
        { this->m_ueLoggedUsers=loggedUsers; }
    inline void ueSetDbConnectionStatus(const UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus& status)
        { this->m_ueDatabaseConnectionStatus=status; }
 
signals:
    void ueSignalLoginCandidatesChanged();
    void ueSignalLoggedUsersChanged();
    void ueSignalDatabaseConnectionChanged(const UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus& newStatus);
 
public slots:
    void ueSlotDatabaseConnectionChanged(const UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus& newStatus);
};
 
#endif // UESTATUS_H

#ifndef UESTATUS_H
#define UESTATUS_H

#include <QObject>
#include <QList>

#include "../core/uetypes.h"
#include "../core/uedatabaseconnectionstatus.h"

class UeStatus : public QObject
{
    Q_OBJECT

    Q_PROPERTY(UeTypeLoggedUsers* m_ueLoginCandidates
               READ ueLoginCandidates
               WRITE ueSetLoginCandidates
               NOTIFY ueSignalLoginCandidatesChanged)
    Q_PROPERTY(UeTypeLoggedUsers* m_ueLoggedUsers
               READ ueLoggedUsers
               WRITE ueSetLoggedUsers
               NOTIFY ueSignalLoggedUsersChanged)
    Q_PROPERTY(UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus m_ueDatabaseConnectionStatus
               READ ueDbConnectionStatus
               WRITE ueSetDbConnectionStatus
               NOTIFY ueSignalDatabaseConnectionChanged)

private:
    UeTypeLoggedUsers* m_ueLoginCandidates;
    UeTypeLoggedUsers* m_ueLoggedUsers;
    UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus m_ueDatabaseConnectionStatus;

public:
    explicit UeStatus(QObject *parent = 0);
    ~UeStatus();

    inline UeTypeLoggedUsers* ueLoginCandidates() const
        { return this->m_ueLoginCandidates; }
    inline UeTypeLoggedUsers* ueLoggedUsers() const
        { return this->m_ueLoggedUsers; }
    inline UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus ueDbConnectionStatus() const
        { return this->m_ueDatabaseConnectionStatus; }

    inline void ueSetLoginCandidates(UeTypeLoggedUsers* const m_ueLoginCandidates)
        { this->m_ueLoginCandidates=m_ueLoginCandidates; }
    inline void ueSetLoggedUsers(UeTypeLoggedUsers* const loggedUsers)
        { this->m_ueLoggedUsers=loggedUsers; }
    inline void ueSetDbConnectionStatus(const UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus& status)
        { this->m_ueDatabaseConnectionStatus=status; }

signals:
    void ueSignalLoginCandidatesChanged();
    void ueSignalLoggedUsersChanged();
    void ueSignalDatabaseConnectionChanged(const UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus& newStatus);

public slots:
    void ueSlotDatabaseConnectionChanged(const UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus& newStatus);
};

#endif // UESTATUS_H

To copy to clipboard, switch view to plain text mode 

As you can see, I've also created dedicated class/enum for describing database connection state:

#ifndef UEDATABASECONNECTIONSTATUS
#define UEDATABASECONNECTIONSTATUS
 
#include <QObject>
 
class UeDatabaseConnectionStatus : public QObject
{
    Q_OBJECT
 
public:
    enum UeTypeDatabaseConnectionStatus
    {
        NOT_CONNECTED=false,
        CONNECTED=true
    };
 
    Q_ENUM(UeTypeDatabaseConnectionStatus)
};
 
#endif // UEDATABASECONNECTIONSTATUS

#ifndef UEDATABASECONNECTIONSTATUS
#define UEDATABASECONNECTIONSTATUS

#include <QObject>

class UeDatabaseConnectionStatus : public QObject
{
    Q_OBJECT

public:
    enum UeTypeDatabaseConnectionStatus
    {
        NOT_CONNECTED=false,
        CONNECTED=true
    };

    Q_ENUM(UeTypeDatabaseConnectionStatus)
};

#endif // UEDATABASECONNECTIONSTATUS

To copy to clipboard, switch view to plain text mode 

Now, I register class UeDatabaseConnectionStatus inside main.cpp:

#include <QtQml>
#include <QApplication>
#include <QQmlApplicationEngine>
 
#include "database/uepeoplemodel.h"
#include "core/uestatus.h"
#include "core/uedatabaseconnectionstatus.h"
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QQmlApplicationEngine engine;
 
    UeStatus* ueApplicationStatus=new UeStatus(qApp);
    UePeopleModel* uePeopleModel=new UePeopleModel(qApp);
 
    QObject::connect(uePeopleModel,
                     SIGNAL(ueSignalDatabaseConnectionChanged(UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus)),
                     ueApplicationStatus,
                     SLOT(ueSlotDatabaseConnectionChanged(UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus)));
 
    uePeopleModel->ueConnectToDatabase();
 
    engine.rootContext()->setContextProperty("uePeopleModel",
                                             uePeopleModel);
    engine.rootContext()->setContextProperty("ueApplicationStatus",
                                             ueApplicationStatus);
    engine.addImageProvider(QLatin1String("uePeopleModel"),
                            uePeopleModel);
 
    qmlRegisterUncreatableType<UeDatabaseConnectionStatus>("si.test",
                                                           1,
                                                           0,
                                                           "UeTypeDatabaseConnectionStatus",
                                                           "Database Connection Status");
 
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
 
    return app.exec();
}

#include <QtQml>
#include <QApplication>
#include <QQmlApplicationEngine>

#include "database/uepeoplemodel.h"
#include "core/uestatus.h"
#include "core/uedatabaseconnectionstatus.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QQmlApplicationEngine engine;

    UeStatus* ueApplicationStatus=new UeStatus(qApp);
    UePeopleModel* uePeopleModel=new UePeopleModel(qApp);

    QObject::connect(uePeopleModel,
                     SIGNAL(ueSignalDatabaseConnectionChanged(UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus)),
                     ueApplicationStatus,
                     SLOT(ueSlotDatabaseConnectionChanged(UeDatabaseConnectionStatus::UeTypeDatabaseConnectionStatus)));

    uePeopleModel->ueConnectToDatabase();

    engine.rootContext()->setContextProperty("uePeopleModel",
                                             uePeopleModel);
    engine.rootContext()->setContextProperty("ueApplicationStatus",
                                             ueApplicationStatus);
    engine.addImageProvider(QLatin1String("uePeopleModel"),
                            uePeopleModel);

    qmlRegisterUncreatableType<UeDatabaseConnectionStatus>("si.test",
                                                           1,
                                                           0,
                                                           "UeTypeDatabaseConnectionStatus",
                                                           "Database Connection Status");

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

    return app.exec();
}

To copy to clipboard, switch view to plain text mode 

and the GUI (QML) is defined in main.qml:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.0
import QtQuick.Controls.Styles 1.4
 
import "gui/windows"
import "gui/items"
 
import si.mikroelektronika 1.0
 
ApplicationWindow
{
    id: ueWindowMain
 
    signal ueSignalDatabaseConnectionChanged()
 
    title: qsTr("uBlagajna Mobile Client ver 1.00")
 
    width: Screen.desktopAvailableWidth
    height: Screen.desktopAvailableWidth
 
    visible: true
 
    opacity: 1.0
 
    contentOrientation: Qt.LandscapeOrientation
 
    color: "black"
 
    UeKeypad
    {
        id: ueLoginKeypad
    }   // ueLoginKeypad
 
    statusBar:
    StatusBar
    {
        id: ueStatusBar
 
        height: 96
 
        clip: true
 
        antialiasing: true
 
 
        style:
        StatusBarStyle
        {
            background:
            Rectangle
            {
                color: "black"
            }   // Rectangle
 
            panel:
            Rectangle
            {
                color: "grey"
            }
        }   // StatusBarStyle
 
        RowLayout
        {
            spacing: 8
 
            UeStatusIndicator
            {
                id: ueStatusIndicatorDatabaseConnected
 
                ueParamImageStatusOn: "qrc:///ueIcons/icons/ueDbConnectionOk.png"
                ueParamImageStatusOff: "qrc:///ueIcons/icons/ueDbConnectionError.png"
            }   // ueStatusIndicatorDatabaseConnected
        }   // RowLayout
    }   // ueStatusBar
}   // ueWindowMain

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.0
import QtQuick.Controls.Styles 1.4

import "gui/windows"
import "gui/items"

import si.mikroelektronika 1.0

ApplicationWindow
{
    id: ueWindowMain

    signal ueSignalDatabaseConnectionChanged()

    title: qsTr("uBlagajna Mobile Client ver 1.00")

    width: Screen.desktopAvailableWidth
    height: Screen.desktopAvailableWidth

    visible: true

    opacity: 1.0

    contentOrientation: Qt.LandscapeOrientation

    color: "black"

    UeKeypad
    {
        id: ueLoginKeypad
    }   // ueLoginKeypad

    statusBar:
    StatusBar
    {
        id: ueStatusBar

        height: 96

        clip: true

        antialiasing: true


        style:
        StatusBarStyle
        {
            background:
            Rectangle
            {
                color: "black"
            }   // Rectangle

            panel:
            Rectangle
            {
                color: "grey"
            }
        }   // StatusBarStyle

        RowLayout
        {
            spacing: 8

            UeStatusIndicator
            {
                id: ueStatusIndicatorDatabaseConnected

                ueParamImageStatusOn: "qrc:///ueIcons/icons/ueDbConnectionOk.png"
                ueParamImageStatusOff: "qrc:///ueIcons/icons/ueDbConnectionError.png"
            }   // ueStatusIndicatorDatabaseConnected
        }   // RowLayout
    }   // ueStatusBar
}   // ueWindowMain

To copy to clipboard, switch view to plain text mode 

UeStatusIndicator.qml is item that containts two images according to its state:

import QtQuick 2.0
 
Item
{
    id: ueStatusIndicator
 
    property string ueParamImageStatusOn
    property string ueParamImageStatusOff
 
    state: "ueStatusIndicatorDabaseNotConnected"
 
    Image
    {
        id: ueStatusIndicatorCurrentImage
 
        smooth: true
 
        fillMode: Image.PreserveAspectFit
 
        width: 96
        height: 96
 
        sourceSize.width: 96
        sourceSize.height: 96
    }   // Image
 
    Connections
    {
    }   // Connections
 
    states:
    [
        State
        {
            name: "ueStatusIndicatorDabaseConnected"
 
            PropertyChanges
            {
                target: ueStatusIndicatorCurrentImage
                source: ueParamImageStatusOn
            }   // PropertyChanges
        },  // State
 
        State
        {
            name: "ueStatusIndicatorDabaseNotConnected"
 
            PropertyChanges
            {
                target: ueStatusIndicatorCurrentImage
                source: ueParamImageStatusOff
            }   // PropertyChanges
        }   // State
    ]   // states
}   // Item

import QtQuick 2.0

Item
{
    id: ueStatusIndicator

    property string ueParamImageStatusOn
    property string ueParamImageStatusOff

    state: "ueStatusIndicatorDabaseNotConnected"

    Image
    {
        id: ueStatusIndicatorCurrentImage

        smooth: true

        fillMode: Image.PreserveAspectFit

        width: 96
        height: 96

        sourceSize.width: 96
        sourceSize.height: 96
    }   // Image

    Connections
    {
    }   // Connections

    states:
    [
        State
        {
            name: "ueStatusIndicatorDabaseConnected"

            PropertyChanges
            {
                target: ueStatusIndicatorCurrentImage
                source: ueParamImageStatusOn
            }   // PropertyChanges
        },  // State

        State
        {
            name: "ueStatusIndicatorDabaseNotConnected"

            PropertyChanges
            {
                target: ueStatusIndicatorCurrentImage
                source: ueParamImageStatusOff
            }   // PropertyChanges
        }   // State
    ]   // states
}   // Item

To copy to clipboard, switch view to plain text mode 

Now, how do I catch signal void ueSignalDatabaseConnectionChanged(const UeDatabaseConnectionStatus::UeTypeDatabaseConnecti onStatus& newStatus); or slot void ueSlotDatabaseConnectionChanged(const UeDatabaseConnectionStatus::UeTypeDatabaseConnecti onStatus& newStatus); inside ueStatusIndicator?
Sincerely,
Marko