Conecte a lógica à sua interface de usuário QML

Para integrar a lógica ao aplicativo, precisamos de classes de backend em C++ que possam realizar os cálculos importantes. Escrever lógica em arquivos QML é desencorajado, portanto, tente migrar o máximo possível para o backend, para que o QML seja usado exclusivamente para exibir a interface do usuário, que é o que ele faz de melhor.

Para sua nova classe de backend, crie dois novos arquivos chamados backend.cpp e backend.h. Não se esqueça de adicionar o novo arquivo cpp ao executável em src/CMakeLists.txt, ao lado de main.cpp.

Adicione o seguinte conteúdo ao novo arquivo de cabeçalho (backend.h):

#pragma once

#include <QObject>

class Backend : public QObject
{
    Q_OBJECT

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

O arquivo backend.cpp contendo as definições está igualmente vazio no momento, mas deve conter algo como o seguinte:

#include "backend.h"

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

}

Atualmente, a interface do usuário não conhece sua classe de backend. Para alterar isso, precisamos registrar o novo tipo em main.cpp. O backend será criado como um singleton, o que significa que será criado apenas uma vez e existirá durante todo o tempo, desde o início do aplicativo até o seu fechamento.

Logo após criar o QQmlApplicationEngine, adicione o registro de tipo ao main.cpp da seguinte forma:

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

Não se esqueça de incluir o novo arquivo de cabeçalho no topo de main.cpp.

A partir de agora, o backend será conhecido no QML como Backend. Ele está contido em um módulo chamado org.kde.example. Como o módulo faz parte do aplicativo, você não precisa se preocupar com versionamento, basta manter 1.0 e usá-lo consistentemente em todo o aplicativo.

Em main.qml, importe o novo módulo:

import org.kde.example 1.0

Agora conectamos a classe que contém a lógica futura à aplicação, mas ela ainda não faz nada. Para mudar isso, vamos adicionar uma propriedade à classe. Propriedades são muito mais do que uma simples variável. Elas podem informar a IU sobre alterações para que ela possa atualizar as áreas corretas.

Logo abaixo da macro Q_OBJECT, adicione uma nova Q_PROPERTY.

Q_PROPERTY(QString introductionText READ introductionText WRITE setIntroductionText NOTIFY introductionTextChanged)

Pode parecer muito código para apenas ler e escrever código no backend. No entanto, uma análise mais aprofundada revela que ler a propriedade na interface do usuário já pode executar alguma lógica — o mesmo quando ela é escrita. Nesse caso, ele informará automaticamente o frontend e o backend sobre as alterações.

A leitura e a escrita são baseadas no conceito de funções getter e setter. Vá em frente e adicione um novo atributo privado à sua classe que contenha os dados, bem como as funções getter e setter relevantes.

private:
    QString m_introductionText = "Hello World!";

Na seção pública, adicione

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

A primeira função é o getter, a segunda, o setter, e a terceira, um sinal emitido quando a propriedade é alterada. O sinal não precisa de nenhuma implementação no arquivo backend.cpp, pois não faz muito mais do que ser emitido, mas o getter e o setter precisam ser implementados de forma semelhante ao seguinte:

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

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

Como você pode ver, quando o setter é chamado, o sinal será emitido e informará a interface do usuário e o backend sobre a alteração.

Para exibir o texto, adicione um título a main.qml sob a propriedade title do elemento Kirigami.Page já contido no modelo.

O código resultante nessa parte do arquivo deve ficar assim:

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

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

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

Agora compile e inicie seu programa novamente.

Parabéns, você aprendeu:

• Como registrar tipos de backend no QML
• Adicionar novos elementos ao arquivo QML
• Criar novas subclasses de QObject
• Como adicionar propriedades e o que elas fazem
• O que são sinais

Se você quiser saber mais sobre a integração entre QML e C++, recomendamos a leitura da documentação oficial do Qt.