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)
}