Verbindingslogica naar uw QML gebruikersinterface

Om logica in de toepassing te integreren, hebben we C++ backend-classes nodig die de belangrijke berekeningen kan doen. Logica schrijven in de QML-bestanden wordt ontraden, probeer het dus zoveel als mogelijk naar de backend te verplaatsen, QML wordt dus puur gebruikt voor het tonen van de gebruikersinterface, waarvoor het het best geschikt is.

Voor uw nieuwe backend klasse, maak twee nieuwe bestanden genaamd backend.cpp en backend.h. Vergeet niet om het nieuwe cpp-bestand aan het uitvoerbare bestand in src/CMakeLists.txt toe te voegen, naast main.cpp.

Voeg de volgende inhoud toe aan het nieuwe header-bestand (backend.h):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

public:
    explicit Backend(QObject *parent = nullptr);
};

Het bestand backend.cpp met de definities is nu evenzo leeg, het zou zoiets als het volgende moeten bevatten:

#include "backend.h"

Backend::Backend(QObject *parent)
    : QObject(parent)
{

}

Op dit moment weet het gebruikersinterface niets van uw backend klasse. Om dat te wijzigen moeten we het nieuwe type registreren in main.cpp. De backend zal aangemaakt worden als een singleton, dat betekent dat het slechts één keer aangemaakt wordt en bestaat tijdens de gehele tijd vanaf het begin van de toepassing tot het sluiten ervan.

Direct na maken van de QQmlApplicationEngine, voeg de type registratie toe aan main.cpp als volgt:

    Backend backend;
    qmlRegisterSingletonInstance<Backend>("org.kde.example", 1, 0, "Backend", &backend);

Vergeet niet om het nieuwe headerbestand bovenaan main.cpp in te voegen.

Vanaf nu zal de backend aan QML bekend zijn als Backend. Het zit in een module genaamd org.kde.example. Omdat de module onderdeel is van de toepassing, hoeft u zich geen zorgen te maken over versies, blijf bij 1.0 en gebruik het consistent in de toepassing.

Importeer in main.qml de nieuwe module:

import org.kde.example 1.0

We hebben nu de klasse die de toekomstige logica bevat van de toepassing, maar het doet nog steeds niets. Om dat te wijzigen, voegen we een eigenschap toe aan de klasse. Eigenschappen zijn heel wat meer dan een eenvoudige variabele. Ze kunnen ed UI informeren over wijzigingen, dus kan het de juiste gebieden bijwerken.

Direct onder de macro Q_OBJECT, voeg een nieuwe Q_PROPERTY.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

Dit lijkt misschien heel wat code om enige code uit de backend te lezen. Maar een nadere beschouwing laat zien dat lezen van de eigenschap uit de UI al enige logic-same kan uitvoeren wanneer er naar geschreven is. In dat geval zal automatisch de frontend en backend informeren over wijzigingen.

Het lezen en schrijven is gebaseerd op het concept van getter en setter-functies. Ga verder en voeg een nieuw privé attribuut toe aan uw klasse die de gegevens bevat, evenals de relevante getter en setter-functies.

private:
    QString m_introductionText = "Hello World!";

Voeg aan de sectie publiek toe

public:
    QString introductionText() const;
    void setIntroductionText(const QString &introductionText);
    Q_SIGNAL void introductionTextChanged();

De eerste functie is de getter, de tweede de setter en de derde een signaal dat is uitgezonden wanneer de eigenschap is gewijzigd. Het signaal behoeft geen enkele implementatie in het bestand backend.cpp, omdat het niet veel meer doet dan uitgezonden worden, maar de getter en setter moeten geïmplementeerd worden lijkend op het volgende:

QString Backend::introductionText() const
{
    return m_introductionText;
}

void Backend::setIntroductionText(const QString &introductionText)
{
    m_introductionText = introductionText;
    Q_EMIT introductionTextChanged();
}

Zoals u kunt zien, wanneer de setter wordt aangeroepen, zal het signaal worden uitgezonden en wordt de ui (gebruikersinterface) en de backend van de wijziging geïnformeerd.

Om de tekst te tonen, voeg een kop toe aan main.qml onder de eigenschap title van het element Kirigami.Page dat al in het sjabloon zit.

De resulterende code in dat gedeelte van het bestand zou er uit moeten zien als dit:

// ...
Kirigami.Page {
    title: i18n("develop.kde.org tutorial")

    Kirigami.Heading {
        anchors.centerIn: parent
        text: Backend.introductionText
    }

    actions: [
        Kirigami.Action {
            // ...
        }
    ]
}

Nu kunt u uw programma opnieuw compileren en starten.

Gefeliciteerd, u hebt geleerd:

• Hoe backend-typen to QML te registreren
• Nieuwe elementen aan het QML-bestand toevoegen
• Nieuwe QObject-subklassen aanmaken
• Hoe eigenschappen toe te voegen en wat ze doen
• Wat signalen zijn

Als u meer wilt weten over de integratie tussen QML en C++, dan bevelen we het lezen van de officiële Qt documentatie aan.