This project aims at bringing the power of QML to the web browser. Here's a sample of how QML looks like:
import QtQuick 2.0
Rectangle {
width: 500; height: 200
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: 24; font.bold: true
}
}Using one of the methods below, install the qmlweb JavaScript library:
- npm —
npm install qmlweb - Bower —
bower install qmlweb - GitHub releases —
tar -xaf v0.2.0.tar.gz - Manually (recommended if you cloned from git) —
npm install && npm run build
Next, simply add lib/qt.js to the list of other JavaScript files in your app's
HTML file:
<script type="text/javascript" src="/lib/qt.js"></script>See the examples directory for more details and complete usage examples.
You can use DOM elements as the base for QML components:
var div = document.getElementById('embed'); // this is your DOM element
var engine = new QmlWeb.QMLEngine(div);
engine.loadFile('qml/main.qml');
engine.start();See also
engine.loadQML
for constructing a QML element from a source string.
You can modify the <body> element to specify what QML file to load when
the page is opened. The loaded QML element will fill the whole page.
<!DOCTYPE html>
<html>
<head>
<title>QML Auto-load Example</title>
<script type="text/javascript" src="/lib/qt.js"></script>
</head>
<body style="margin: 0" data-qml="qml/main.qml">
</body>
</html>You can register QML files as Custom Elements.
Note: browser support for Custom Elements v1 is limited, and QmlWeb does not include a polyfill. You might want to load a polyfill manually.
Registering the element:
QmlWeb.registerElement('qml-main', 'qml/main.qml');Using the element:
<qml-main height="300" color="red" firstName="World"></qml-main>Top-level properties get exported as HTML attributes and are binded to them, real-time updates are possible.
Approximate modules support status for the git version could be viewed on the Projects page.
You can click on the module cards for per-class details.
See gulp-qmlweb package.
See Extending.