Verbindingslogica naar uw QML gebruikersinterface

Een backend verbinden om berekeningen te doen en uw gebruikersinterface te leveren met te tonen gegevens

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 (die met de extensie .h):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

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

Het cpp-bestand 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.

Voeg aan main.cpp, direct na aanmaken van de QQmlApplicationEngine, het type registratie toe 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.

Precies onder de Q_OBJECT macro, voeg een nieuwe Q_PROPERTY toe.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

Dat lijkt heel wat voor een eenvoudige eigenschap die we zullen gebruiken om enige tekst uit de backend te tonen, ok? Maar een nadere beschouwing laat zien dat dit al logica kan uitvoeren wanneer de eigenschap gelezen wordt door het gebruikersinterface en wanneer er in geschreven wordt. Het zal automatisch frontend en backend informeren over wijzigingen.

Het lezen en schrijven is gebaseerd op functies getter en setter, voeg dus een nieuw privé attribuut toe aan uw klasse, zoals deze, en voeg functies getter en setter toe.

private:
    QString m_introductionText = "Hello World!";

Voeg aan de sectie publiek toe

    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 cpp-bestand, 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 in main.qml te tonen, voeg een kop toe die getoond wordt recht onder de teksteigenschap 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 {
                main: 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.