Qt Quick Publication

Use Qt Quick Controls to create an application that can publish on MQTT topics.

MQTT publishing interface with Hostname, Port, Topic, Message, QoS, and Retain fields

Qt Quick Publication demonstrates how to register QMqttClient as a QML type and use it in a Qt Quick application.

Qt MQTT does not provide a QML API in its current version. However, you can make the C++ classes of the module available to QML.

Creating a Client

Create the wrapper class QmlMqttClient that has QMqttClient as a member:

 private:
     Q_DISABLE_COPY(QmlMqttClient)
     QMqttClient m_client;
 };

Connect the wrapper methods to the methods of QMqttClient in the constructor:

 QmlMqttClient::QmlMqttClient(QObject *parent)
     : QObject(parent)
 {
     connect(&m_client, &QMqttClient::hostnameChanged, this, &QmlMqttClient::hostnameChanged);
     connect(&m_client, &QMqttClient::portChanged, this, &QmlMqttClient::portChanged);
     connect(&m_client, &QMqttClient::stateChanged, this, &QmlMqttClient::stateChanged);
 }

A wrapper method has the same name as the wrapped method. In the simplest case, it is just a single method call:

 void QmlMqttClient::connectToHost()
 {
     m_client.connectToHost();
 }

It is also possible to customize a wrapper method by extending it with some additional functionality:

 void QmlMqttClient::setPort(int newPort)
 {
     if (newPort < 0 || newPort > std::numeric_limits<quint16>::max()) {
         qWarning() << "Trying to set invalid port number";
         return;
     }
     m_client.setPort(static_cast<quint16>(newPort));

Registering Classes in QML

In the main.cpp file, load the QML type Main from the module publication:

     QGuiApplication app(argc, argv);
     QQmlApplicationEngine engine;

     QObject::connect(
             &engine, &QQmlApplicationEngine::objectCreationFailed, &app,
             []() { QCoreApplication::exit(EXIT_FAILURE); }, Qt::QueuedConnection);

     engine.loadFromModule(u"publication"_s, u"Main"_s);

Now use the MqttClient type in the Main.qml file to create an MQTT client:

     MqttClient {
         id: client
         hostname: hostnameField.text
         port: portField.text
     }

Files:

Contents

Qt Quick Publication

Creating a Client

Registering Classes in QML