QML Online - Can be everywhere!

A new feature of QML Online is already available, allows it to run in any site/blog with minimal js/html code!

Hopefully, our experience with QML examples, tutorials and documentation should change in the near future.

Ff you don't know what QML Online is, please take a look in my previous posts:

What are we talking about ?

QML Online now can be used in any blog or website without much work, like this:

import QtQuick 2.7
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.12
Rectangle {
    color: "#179AF3"
    anchors.fill: parent
     ColumnLayout{
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        CheckBox {
            checked: true
            text: "Check this!"
        }
        CheckBox {
            text: "Or this!"
        }
    }
    Text {
        text: "KDE"
        font.pixelSize: 80
        font.bold: true
        color: "#82CB38"
        anchors.centerIn: parent
        RotationAnimator on rotation {
            running: true
            loops: Animation.Infinite
            from: 0
            to: 360
            duration: 1500
        }
    }
}

And how can this new feature be used ?

It's quite simple, check this minimal HTML example:

<html>
<head>
    <title>Qml Online minimal example</title>
</head>
<body>
    <script type="text/javascript" src="https://qmlonline.kde.org/qtloader.js"></script>
    <script type="text/javascript" src="https://qmlonline.kde.org/qml.js"></script>

    <div id="qmlonline"></div>

    <script type='text/qml'>
    import QtQuick 2.7
    import QtQuick.Controls 2.3
    Rectangle {
        color: "#179AF3"
        anchors.fill: parent
        Text {
            text: "KDE"
            font.pixelSize: 80
            font.bold: true
            color: "#82CB38"
            anchors.centerIn: parent
            RotationAnimator on rotation {
                running: true
                loops: Animation.Infinite
                from: 0
                to: 360
                duration: 1500
            }
        }
    }
    </script>

    <script type='text/javascript'>
        const qml = new QmlOnline("qmlonline")
        qml.registerCall({
            qmlMessage: function(msg) {
                console.log(`qml message: ${msg}`)
            },
            qmlError: function(data) {
                console.log(`qml error: ${JSON.stringify(data)}`)
            },
            posInit: function() {
                qml.setCode(Array.prototype.slice.apply(document.getElementsByTagName('script')).find(e => e.type == 'text/qml').text)
            },
        })
        qml.init()
    </script>
</body>
</html>

As you can see, there is three steps, include both qtloader.js and qml.js, add a div DOM and create a QmlOnline object. Since I'm not a web expert, probably there is a better way to organize this approach for the user and bugs may exist. Be free to create Merge Requests, or get in touch with feature requests and issues.

What is next ?

From my planned objectives, sharing QML Online as library to be available for any website was one of the final points, the only one that's still missing is the Kirigami support, that's still in progress and hopefully will be finished until the end of the year (if everything goes fine).

There is also a small bug, where it's not possible to use multiple QML Online instances on the same webpage.