Konektu logikon al via uzantinterfaco de QML

Por integri logikon en la aplikaĵon, ni bezonas klasojn de backend C++, kiuj povas fari la gravajn kalkulojn. Skribi logikon en la QML-dosieroj estas malinstigita, do provu movi kiel eble plej multe al la backend, do QML estas pure uzata por montri la uzantinterfacon, kio estas tio, kion ĝi plej taŭgas.

Por via nova backend klaso, kreu du novajn dosierojn nomitajn backend.cpp kaj backend.h. Ne forgesu aldoni la novan cpp-dosieron al la plenumebla en src/CMakeLists.txt, apud main.cpp.

Aldonu la sekvan enhavon al la nova kapdosiero (backend.h):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

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

La dosiero backend.cpp enhavanta la difinojn estas simile malplena nun, ĝi devus enhavi ion kiel la jenon:

#include "backend.h"

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

}

Nuntempe la uzantinterfaco ne scias pri via backend klaso. Por ŝanĝi tion, ni devas registri la novan tipon en main.cpp. La backend estos kreita kiel unuopaĵo, tio signifas, ke ĝi estos kreita nur unufoje kaj ekzistos dum la tuta tempo de ekfunkciado de la aplikaĵo ĝis fermo de ĝi.

Tuj post kreado de la QQmlApplicationEngine, aldonu la tipregistradon al main.cpp jene:

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

Ne forgesu enmeti la novan kapdosieron ĉe la supro de main.cpp.

De nun, la backend estos konata al QML kiel Backend. Ĝi estas enhavita en modulo nomita org.kde.example. Ĉar la modulo estas parto de la aplikaĵo, vi ne bezonas zorgi pri versio de ĝi, simple restu kun 1.0 kaj uzu ĝin konstante tra la aplikaĵo.

En main.qml, importu la novan modulon:

import org.kde.example 1.0

Nun ni konektis la klason tenantan la estontan logikon al la aplikaĵo, sed ĝi ankoraŭ nenion faras. Por ŝanĝi tion, ni aldonu proprecon al la klaso. Propraĵoj estas multe pli ol simpla variablo. Ili povas informi la UI pri ŝanĝoj, por ke ĝi povu ĝisdatigi la ĝustajn areojn.

Ĝuste sub la makroo Q_OBJECT, aldonu novan Q_PROPERTY.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

Ĉi tio povas ŝajni kiel multe da kodo por simple legi kaj skribi iom da kodo de la malantaŭo. Tamen, pli proksima rigardo rivelas, ke legado de la propreco el la UI jam povas funkcii iun logikon—same kiam ĝi estas skribita al ĝi. En ĉi tiu kazo, ĝi aŭtomate informos la fasadon kaj backend pri ŝanĝoj.

La legado kaj skribo baziĝas sur la koncepto de [funkcioj de ricevilo kaj agordilo] (https://www.w3schools.com/cpp/cpp_encapsulation.asp). Antaŭeniru kaj aldonu novan privatan atributon al via klaso, kiu enhavas la datumojn, kaj ankaŭ la koncernajn ricevilo- kaj setter-funkciojn.

private:
    QString m_introductionText = "Hello World!";

Al la publika sekcio, aldonu

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

La unua funkcio estas la ricevilo, la dua la agordilo, kaj la tria signalo kiu estas elsendita kiam la propreco estas ŝanĝita. La signalo ne bezonas ajnan efektivigon en backend.cpp dosiero, ĉar ĝi ne faras multe pli ol esti elsendita, sed la ricevilo kaj agordilo devas esti efektivigitaj simile al la sekvanta:

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

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

Kiel vi povas vidi, kiam la setter estas vokita, la signalo estos elsendita, kaj informos la ui kaj backend pri la ŝanĝo.

Por montri la tekston, aldonu titolon al main.qml sub la titolo propreco de la elemento Kirigami.Page jam enhavita en la ŝablono.

La rezulta kodo en tiu parto de la dosiero devus aspekti jene:

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

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

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

Nun kompilu kaj rekomencu vian programon.

Gratulon, vi lernis:

• Kiel registri backend tipojn al QML
• Aldonu novajn elementojn al la QML-dosiero
• Kreu novajn QObject-subklasojn
• Kiel aldoni proprietojn kaj kion ili faras
• Kiaj signaloj estas

Se vi volas scii pli pri la integriĝo inter QML kaj C++, ni rekomendas legi la oficialan Qt-dokumentadon.