Custom Runtime Example

Demonstrates how to create a Custom QML Live Runtime.

Screenshot of the Custom QML Live Runtime

Creating a custom runtime with QML Live features allows you to use your QML view setup, combined with additional C++ code and the QML Live system.

Start with the LiveNodeEngine class. We need to modify this class to be able to receive workspace changes and active document updates. By default, the IPC listens on port 49156.

The code snippet below shows a minimal custom QML Live runtime:

#include <QtGui>
#include <QtQuick>

// Use QML Live headers
#include "livenodeengine.h"
#include "remotereceiver.h"
#include "constants.h"

class MyQmlApplicationEngine : public QQmlApplicationEngine
{
    Q_OBJECT

public:
    MyQmlApplicationEngine(const QString &mainQml); // Perform some setup here

    QString mainQml() const;
    QQuickWindow *mainWindow();
    QList<QQmlError> warnings() const;

    // ...
};

int main(int argc, char **argv)
{
    QGuiApplication app(argc, argv);
    MyQmlApplicationEngine engine(QStringLiteral("qml/customruntime-window.qml"));

    if (!qEnvironmentVariableIsSet("MY_APP_ENABLE_QMLLIVE"))
        return app.exec();

#if defined(QT_NO_DEBUG)
    qWarning() << "QML Live support was disabled at compile time";
#else
    LiveNodeEngine node;

    // Let QML Live know your runtime
    node.setQmlEngine(&engine);

    // Allow it to display QML components with non-QQuickWindow root object
    QQuickView fallbackView(&engine, 0);
    node.setFallbackView(&fallbackView);

    // Tell it where file updates should be stored relative to
    node.setWorkspace(app.applicationDirPath(),
                      LiveNodeEngine::AllowUpdates | LiveNodeEngine::UpdatesAsOverlay);

    // Listen to IPC call from remote QML Live Bench
    RemoteReceiver receiver;
    receiver.registerNode(&node);
    receiver.listen(Constants::DEFAULT_PORT());

    // Advanced use: let it know the initially loaded QML component (do this
    // only after registering to receiver!)
    node.usePreloadedDocument(engine.mainQml(), engine.mainWindow(), engine.warnings());
#endif

    return app.exec();
}

To specify project depedencies on platforms that support pkg-config, add the following line to your project file. This is assuming QML Live is installed on your build host:

CONFIG += link_pkgconfig
PKGCONFIG += qmllive

In case if your system doesn't support pkg-config, to compile everything directly into your application, include file $(QMLLIVEPROJECT)/src/src.pri by adding the line into your project file:

include(src.pri)

Files:

Images:

© 2019 Luxoft Sweden AB. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.