qmlweb
v0.2.0
Published
QML port to Javascript
Downloads
16
Readme
JavaScript powered QML Engine
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
}
}How to use
Add the library to your web page
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>Auto-load
You may then modify the <body> element to specify what QML file to load when
the page is opened.
<!DOCTYPE html>
<html>
<head>
<title>QML Auto-load Example</title>
</head>
<body style="margin: 0;" data-qml="qml/main.qml">
<script type="text/javascript" src="/lib/qt.js"></script>
</body>
</html>How to use with Gulp
See gulp-qmlweb package.
How to extend
See Extending.