qmlweb:Web 版本的 QML 引擎
qmlweb 是一个 Web 版本的 QML 引擎,是个 JavaScript 驱动的 QML 引擎。CSS 和 HTML 都不擅长于界面设计和交互接口,Qt 提供了一个很好的解决方案:QML。QML 是个声明性语言,非常适用于 UI 设计。qmlweb 的目标是把 QML 的特性应用到 Web 浏览器。
代码示例:
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
}
}
扩展 API:
registerQmlType({
module: 'MyModule',
name: 'MyTypeName',
versions: /^1(.[0-3])?$/, // that regexp must match the version number for the import to work
constructor: function(meta) {
QMLItem.call(this, meta);
var self = this;
// Managing properties
createSimpleProperty("string", this, "name"); // creates a property 'name' of type string
createSimpleProperty("var", this, "data"); // creates a property 'data' of undefined type
this.name = 'default name'; // sets a default value for the property '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);
}
});
qmlweb 遵循 BSD 开源授权协议。
GitHub 地址:https://github.com/qmlweb/qmlweb
发表回复