Join the chat at https://gitter.im/qmlweb/qmlweb Build Status codecov
CSS and HTML are boring and lame. And they suck at designing cool, interactive interfaces. Qt came up with a much better answer for its renowned framework: QML, a declarative language perfect for designing UIs (and much more). 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 } }
This project aims at bringing the power of QML to the web browser.
Using one of the methods below, install the qmlweb JavaScript library:
-
npm:
npm install qmlweb -
bower install qmlweb -
GitHub releases:
tar -xzvf v0.0.4.tar.gz -
Manually using gulp (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>
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>
See gulp-qmlweb package.
When implementing new features, you may need to get away from QML and create your own QML components from scratch, using directly the engine's API.
registerQmlType({ module: 'MyModule', name: 'MyTypeName', baseClass: 'QtQuick.Item', versions: /^1(\.[0-3])?$/, // that regexp must match the version number for the import to work constructor: function(meta) { callSuper(this, meta); var self = this; // Managing properties createProperty("var", this, "data"); // creates a property 'data' of undefined type // creates a property 'name' of type string, with a default value createProperty("string", this, "name", { initialValue: 'default name' }); // Signals this.somethingHappened = Signal(); // creates a signal somethingHappened this.somethingHappened.connect(this, function() { console.log('You may also connect to signals in JavaScript'); }); // Using the DOM function updateText() { var text = ''; for (var i = 0 ; i < self.data.length ; ++i) text += '[' + data[i] + '] '; self.dom.textContent = text; // Updating the dom self.somethingHappened(); // triggers the 'somethingHappened' signal. } // Run updateText once, ensure it'll be executed whenever the 'data' property changes. updateText(); this.onDataChanged.connect(this, updateText); } });
And here's how you would use that component in a regular QML file:
import MyModule 1.3 MyTypeName { name: 'el nombre' data: [ 1, 2, 3 ] onSomethingHappened: console.log(data) }