Connectar la lògica amb la vostra interfície d'usuari en QML

Per a integrar la lògica dins de l'aplicació, necessitem que les classes del dorsal estiguin en C++ perquè puguin fer els càlculs importants. Es desaconsella escriure la lògica en els fitxers QML, així que intenteu moure tant com sigui possible cap al dorsal, de manera que el QML s'empri exclusivament per a mostrar la interfície d'usuari, el qual és el que millor fa.

Per a la vostra classe nova de dorsal, creeu dos fitxers anomenats backend.cpp i backend.h. No oblideu afegir el nou fitxer cpp a l'executable en el src/CMakeLists.txt, al costat del main.cpp.

Afegiu el contingut següent al fitxer de capçalera nou (backend.h):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

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

El fitxer backend.cpp que conté les definicions en aquest moment està igualment buit, hauria de contenir quelcom com el següent:

#include "backend.h"

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

}

Actualment, la interfície d'usuari no coneix la vostra classe de dorsal. Per a canviar això, necessitem registrar el tipus nou en el main.cpp. El dorsal es crearà com un producte únic, el qual vol dir que només es crearà un cop i estarà durant tot el temps, des que s'inicia l'aplicació fins que es tanca.

Just després de crear el QQmlApplicationEngine, afegiu el registre de tipus a main.cpp de la manera següent:

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

No oblideu incloure el fitxer nou de capçalera a la part superior del main.cpp.

A partir d'ara, el QML coneixerà el dorsal com a Backend. Està contingut en un mòdul anomenat org.kde.example. Atès que el mòdul forma part de l'aplicació, no us haureu de preocupar pel control de versions, només empreu 1.0 i utilitzeu-ho coherentment en tota l'aplicació.

En el main.qml, s'importa el mòdul nou:

import org.kde.example 1.0

Ara hem connectat la classe que conté la lògica futura amb l'aplicació, però encara no fa res. Per a canviar això, afegirem una propietat a la classe. Les propietats són molt més que una simple variable. Poden informar a la interfície d'usuari sobre els canvis perquè pugui actualitzar les àrees correctes.

Just a sota de la macro Q_OBJECT, afegiu una Q_PROPERTY nova.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

Això sembla molt codi per a només llegir i escriure codi des del dorsal. Però una mirada més atenta revela que llegir la propietat des de la IU pot executar una lògica, i el mateix quan s'escriu. En aquest cas, informarà automàticament el frontal i el dorsal dels canvis.

La lectura i escriptura es basen en les funcions capturadora i establidora. Continueu i afegiu un atribut privat nou a la vostra classe que contingui les dades, així com les funcions capturadora i establidora rellevants.

private:
    QString m_introductionText = "Hello World!";

A la secció pública, afegiu

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

La primera funció és la capturadora, la segona l'establidora i la tercera un senyal que s'emet quan es canvia la propietat. El senyal no necessita cap implementació en el fitxer backend.cpp, ja que no fa gaire més que ser emès, però la capturadora i l'establidora s'han d'implementar de manera similar a la següent:

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

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

Com podeu veure, quan es crida al configurador, s'emetrà el senyal i informarà la interfície d'usuari i al dorsal del canvi.

Per a mostrar el text, afegiu una capçalera en el main.qml sota la propietat de l'element Kirigami.Page que ja està contingut a la plantilla.

El codi resultant en aquesta part del fitxer s'hauria de veure així:

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

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

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

Ara compileu i torneu a iniciar el vostre programa.

Felicitacions, heu après:

• Com registrar els tipus de dorsal en QML
• Afegir elements nous al fitxer en QML
• Crear subclasses noves de QObject
• Com afegir propietats i què fan
• Quins són els senyals

Si voleu saber més sobre la integració entre QML i C++, us recomanem llegir la documentació oficial de les Qt.