Qt5 - QML: How to modify bindings to change Text after ProgressBar finishes loop

Question

I am trying to operate a change of text after a ProgressBar finishes its loop as shown below.

The actual result I have is the following:

The expected result would be the one below:

Below the code of the minimal verifiable example. I am handling the ProgressBar as an external C++ class. In case needed the small verifiable example can be found here in case needed:

main.qml

import QtQuick 2.4
import QtQuick.Controls 2.12
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.12
import QtQuick.Controls.impl 2.12  // for IconLabel

ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

//    property var changeText
//    color: changeText ? changeText.color : "green"

    function buttonClick(button)
    {
        button.text = qsTr(" YES Connecting").arg(button.text);
        button.enabled = false;
        if (button.background && button.background instanceof Rectangle) {
            button.background.color = "green";
            button.background.gradient = null;
            button.background.visible = true;
        }
        if (button.contentItem && button.contentItem instanceof IconLabel) {
            button.contentItem.color = "white";
            button.contentItem.font.bold = true;
            button.contentItem.font.pointSize = 20;
        }
    }
    function textConnectedChange(textChange1)
    {
        textChange1.text = qsTr("Connecting...");
        textChange1.color = "blue";
        textChange1.content = "Connected";
        textChange1.font.bold = true;
        textChange1.font.pointSize = 15;
    }

    QtObject {
            id: test
            property color color: "grey"
        }

    ColumnLayout {
        Button {
            id: dialogA
            text: pBar.running ? "Connecting..." : "Not - Connected"
            Layout.fillWidth: true
            font.pointSize: 20
            spacing: 10
            onClicked: {
                buttonClick(this)
                pBar.startComputation()
            }
        }
        ColumnLayout {
            id: layout
            Layout.fillWidth: true
            spacing: 10
            GroupBox {
                id: box1
                width: parent.width
                title: "Connection"
                font.pointSize: 20
                Layout.fillWidth: parent
                spacing: 10

                GridLayout {
                    width: parent.width
                    columns: 1
                    RowLayout {
                        id: row1
                        spacing: 200
                        Layout.fillWidth: true
                        Layout.fillHeight: false
                        Label {
                            id: textField
                            text: "Connection:"
                            font.pointSize: 15
                            Layout.fillWidth: true
                        }
                        Text {
                            id: connected
                            text: pBar.running ? textConnectedChange(this) : "Not-Connected"
                            color: "red"
                            font.pointSize: 15
                            horizontalAlignment: Text.AlignRight
                            Layout.fillWidth: true
                            onTextChanged: {
                                text: parent.changeText = test
                            }
                        }
                    }
                }
            }
            GroupBox {
                id: boxprogress
                title: "Connection Progress"
                font.pointSize: 20
                Layout.fillWidth: parent
                width: parent.width
                spacing: 10
                GridLayout {
                    width: parent.width
                    columns: 1
                    RowLayout {
                        Layout.fillWidth: true
                        Layout.fillHeight: false
                        ProgressBar {
                            id: progressbar_id
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            width: parent.width
                            from: 0
                            to: 40
                            value: pBar.progress
                        }
                    }
                }
            }
        }
    }
}

progressbar.h

#ifndef PROGRESSBAR_H
#define PROGRESSBAR_H
#include <QObject>
#include <QFutureWatcher>
class ProgressBar : public QObject
{
    Q_OBJECT
    Q_PROPERTY(float progress READ progress NOTIFY progressChanged)
    Q_PROPERTY(bool running READ running NOTIFY runningChanged)
    Q_PROPERTY(bool finished READ finished NOTIFY finishedChanged)
public:
    ProgressBar();
    float progress();
    bool running();
    bool finished();

public Q_SLOTS:
    void startComputation();
    void cancelComputation();
    void finishComputation();
private Q_SLOTS:
    void updateProgress(int value);
signals:
    void progressChanged();
    void runningChanged();
    void finishedChanged();
private:
    bool m_running = false;
    int m_progressValue = 0;
    int m_finished = true;
    QVector<int> vector;
    QObject m_Model;
    QFutureWatcher<void> m_futureWatcher;
};

#endif // PROGRESSBAR_H

main.cpp

#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "progressbar.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    ProgressBar pBar;
    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    engine.rootContext()->setContextProperty("pBar",   &pBar);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

What I have done so far:

1) The following source was useful in understanding the problem but didn't bring any beneficial correction.

2) this post I found to be useful in order to modify the necessary bindings to change a text but didn't work

3) I consulted the official documentation regarding the QML bindings and tried to apply directly from there but something is not correct.

4) You see QObject in the code and that is because from here I thought I had to use it. I left it in the code to show you what additional trials I was trying to do, but that didn't work.

Please point in the right direction to solve this problem.

Answer 1

QML has a State object, which is perfectly suited for handling this kind of problem, I mean, you want different bindings in different "states".

The following example should get you quite somewhere, however, I'm not 100% I extracted everything correctly from your example:

Text {
    id: connected
    text: qsTr("Not-Connected")
    color: "red"
    font.pointSize: 15
    horizontalAlignment: Text.AlignRight
    Layout.fillWidth: true

    states: [
        State {
            name: "connecting"
            when: pBar.running
            PropertyChanges {
                target: connected
                text: qsTr("Connecting...")
                color: "blue"
                font.bold: true
            }
        },
        State {
            name: "connected"
            when: pBar.finished
            PropertyChanges {
                target: connected
                text: qsTr("Yes! Connected...")
                color: "green"
                font.bold: true
            }
        }
    ]
}