GitHub - stephenmdangelo/qmlweb: A QML engine in a web browser. Current state: merging the numerous out-of-date forks.

JavaScript powered QML Engine

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:

importQtQuick2.0Rectangle {
width:500; height:200
color:"lightgray"Text {
id: helloText
text:"Hello world!"anchors.verticalCenter:parent.verticalCenteranchors.horizontalCenter:parent.horizontalCenterfont.pointSize:24; font.bold:true
}
}

This project aims at bringing the power of QML to the web browser.

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 -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:

<scripttype="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><bodystyle="margin: 0;" data-qml="qml/main.qml"><scripttype="text/javascript" src="/lib/qt.js"></script></body></html>

How to use with Gulp

See gulp-qmlweb package.

How to extend

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 workconstructor: function(meta){callSuper(this,meta);varself=this;// Managing propertiescreateProperty("var",this,"data");// creates a property 'data' of undefined type// creates a property 'name' of type string, with a default valuecreateProperty("string",this,"name",{initialValue: 'default name'});// Signalsthis.somethingHappened=Signal();// creates a signal somethingHappenedthis.somethingHappened.connect(this,function(){console.log('You may also connect to signals in JavaScript');});// Using the DOMfunctionupdateText(){vartext='';for(vari=0;i<self.data.length;++i)text+='['+data[i]+'] ';self.dom.textContent=text;// Updating the domself.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:

importMyModule1.3MyTypeName {
name:'el nombre'
data: [ 1, 2, 3 ]
onSomethingHappened:console.log(data)
}

History

JavaScript powered QML Engine

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:

importQtQuick2.0Rectangle {
width:500; height:200
color:"lightgray"Text {
id: helloText
text:"Hello world!"anchors.verticalCenter:parent.verticalCenteranchors.horizontalCenter:parent.horizontalCenterfont.pointSize:24; font.bold:true
}
}

This project aims at bringing the power of QML to the web browser.

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 -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:

<scripttype="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><bodystyle="margin: 0;" data-qml="qml/main.qml"><scripttype="text/javascript" src="/lib/qt.js"></script></body></html>

How to use with Gulp

See gulp-qmlweb package.

How to extend

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 workconstructor: function(meta){callSuper(this,meta);varself=this;// Managing propertiescreateProperty("var",this,"data");// creates a property 'data' of undefined type// creates a property 'name' of type string, with a default valuecreateProperty("string",this,"name",{initialValue: 'default name'});// Signalsthis.somethingHappened=Signal();// creates a signal somethingHappenedthis.somethingHappened.connect(this,function(){console.log('You may also connect to signals in JavaScript');});// Using the DOMfunctionupdateText(){vartext='';for(vari=0;i<self.data.length;++i)text+='['+data[i]+'] ';self.dom.textContent=text;// Updating the domself.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:

importMyModule1.3MyTypeName {
name:'el nombre'
data: [ 1, 2, 3 ]
onSomethingHappened:console.log(data)
}

History

JavaScript powered QML Engine

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:

importQtQuick2.0Rectangle {
width:500; height:200
color:"lightgray"Text {
id: helloText
text:"Hello world!"anchors.verticalCenter:parent.verticalCenteranchors.horizontalCenter:parent.horizontalCenterfont.pointSize:24; font.bold:true
}
}

This project aims at bringing the power of QML to the web browser.

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 -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:

<scripttype="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><bodystyle="margin: 0;" data-qml="qml/main.qml"><scripttype="text/javascript" src="/lib/qt.js"></script></body></html>

How to use with Gulp

See gulp-qmlweb package.

How to extend

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 workconstructor: function(meta){callSuper(this,meta);varself=this;// Managing propertiescreateProperty("var",this,"data");// creates a property 'data' of undefined type// creates a property 'name' of type string, with a default valuecreateProperty("string",this,"name",{initialValue: 'default name'});// Signalsthis.somethingHappened=Signal();// creates a signal somethingHappenedthis.somethingHappened.connect(this,function(){console.log('You may also connect to signals in JavaScript');});// Using the DOMfunctionupdateText(){vartext='';for(vari=0;i<self.data.length;++i)text+='['+data[i]+'] ';self.dom.textContent=text;// Updating the domself.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:

importMyModule1.3MyTypeName {
name:'el nombre'
data: [ 1, 2, 3 ]
onSomethingHappened:console.log(data)
}

History

JavaScript powered QML Engine

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:

importQtQuick2.0Rectangle {
width:500; height:200
color:"lightgray"Text {
id: helloText
text:"Hello world!"anchors.verticalCenter:parent.verticalCenteranchors.horizontalCenter:parent.horizontalCenterfont.pointSize:24; font.bold:true
}
}

This project aims at bringing the power of QML to the web browser.

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 -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:

<scripttype="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><bodystyle="margin: 0;" data-qml="qml/main.qml"><scripttype="text/javascript" src="/lib/qt.js"></script></body></html>

How to use with Gulp

See gulp-qmlweb package.

How to extend

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 workconstructor: function(meta){callSuper(this,meta);varself=this;// Managing propertiescreateProperty("var",this,"data");// creates a property 'data' of undefined type// creates a property 'name' of type string, with a default valuecreateProperty("string",this,"name",{initialValue: 'default name'});// Signalsthis.somethingHappened=Signal();// creates a signal somethingHappenedthis.somethingHappened.connect(this,function(){console.log('You may also connect to signals in JavaScript');});// Using the DOMfunctionupdateText(){vartext='';for(vari=0;i<self.data.length;++i)text+='['+data[i]+'] ';self.dom.textContent=text;// Updating the domself.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:

importMyModule1.3MyTypeName {
name:'el nombre'
data: [ 1, 2, 3 ]
onSomethingHappened:console.log(data)
}

History

JavaScript powered QML Engine

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:

importQtQuick2.0Rectangle {
width:500; height:200
color:"lightgray"Text {
id: helloText
text:"Hello world!"anchors.verticalCenter:parent.verticalCenteranchors.horizontalCenter:parent.horizontalCenterfont.pointSize:24; font.bold:true
}
}

This project aims at bringing the power of QML to the web browser.

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 -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:

<scripttype="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><bodystyle="margin: 0;" data-qml="qml/main.qml"><scripttype="text/javascript" src="/lib/qt.js"></script></body></html>

How to use with Gulp

See gulp-qmlweb package.

How to extend

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 workconstructor: function(meta){callSuper(this,meta);varself=this;// Managing propertiescreateProperty("var",this,"data");// creates a property 'data' of undefined type// creates a property 'name' of type string, with a default valuecreateProperty("string",this,"name",{initialValue: 'default name'});// Signalsthis.somethingHappened=Signal();// creates a signal somethingHappenedthis.somethingHappened.connect(this,function(){console.log('You may also connect to signals in JavaScript');});// Using the DOMfunctionupdateText(){vartext='';for(vari=0;i<self.data.length;++i)text+='['+data[i]+'] ';self.dom.textContent=text;// Updating the domself.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:

importMyModule1.3MyTypeName {
name:'el nombre'
data: [ 1, 2, 3 ]
onSomethingHappened:console.log(data)
}

History

JavaScript powered QML Engine

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:

importQtQuick2.0Rectangle {
width:500; height:200
color:"lightgray"Text {
id: helloText
text:"Hello world!"anchors.verticalCenter:parent.verticalCenteranchors.horizontalCenter:parent.horizontalCenterfont.pointSize:24; font.bold:true
}
}

This project aims at bringing the power of QML to the web browser.

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 -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:

<scripttype="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><bodystyle="margin: 0;" data-qml="qml/main.qml"><scripttype="text/javascript" src="/lib/qt.js"></script></body></html>

How to use with Gulp

See gulp-qmlweb package.

How to extend

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 workconstructor: function(meta){callSuper(this,meta);varself=this;// Managing propertiescreateProperty("var",this,"data");// creates a property 'data' of undefined type// creates a property 'name' of type string, with a default valuecreateProperty("string",this,"name",{initialValue: 'default name'});// Signalsthis.somethingHappened=Signal();// creates a signal somethingHappenedthis.somethingHappened.connect(this,function(){console.log('You may also connect to signals in JavaScript');});// Using the DOMfunctionupdateText(){vartext='';for(vari=0;i<self.data.length;++i)text+='['+data[i]+'] ';self.dom.textContent=text;// Updating the domself.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:

importMyModule1.3MyTypeName {
name:'el nombre'
data: [ 1, 2, 3 ]
onSomethingHappened:console.log(data)
}

History

JavaScript powered QML Engine

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:

importQtQuick2.0Rectangle {
width:500; height:200
color:"lightgray"Text {
id: helloText
text:"Hello world!"anchors.verticalCenter:parent.verticalCenteranchors.horizontalCenter:parent.horizontalCenterfont.pointSize:24; font.bold:true
}
}

This project aims at bringing the power of QML to the web browser.

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 -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:

<scripttype="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><bodystyle="margin: 0;" data-qml="qml/main.qml"><scripttype="text/javascript" src="/lib/qt.js"></script></body></html>

How to use with Gulp

See gulp-qmlweb package.

How to extend

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 workconstructor: function(meta){callSuper(this,meta);varself=this;// Managing propertiescreateProperty("var",this,"data");// creates a property 'data' of undefined type// creates a property 'name' of type string, with a default valuecreateProperty("string",this,"name",{initialValue: 'default name'});// Signalsthis.somethingHappened=Signal();// creates a signal somethingHappenedthis.somethingHappened.connect(this,function(){console.log('You may also connect to signals in JavaScript');});// Using the DOMfunctionupdateText(){vartext='';for(vari=0;i<self.data.length;++i)text+='['+data[i]+'] ';self.dom.textContent=text;// Updating the domself.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:

importMyModule1.3MyTypeName {
name:'el nombre'
data: [ 1, 2, 3 ]
onSomethingHappened:console.log(data)
}

History

JavaScript powered QML Engine

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:

importQtQuick2.0Rectangle {
width:500; height:200
color:"lightgray"Text {
id: helloText
text:"Hello world!"anchors.verticalCenter:parent.verticalCenteranchors.horizontalCenter:parent.horizontalCenterfont.pointSize:24; font.bold:true
}
}

This project aims at bringing the power of QML to the web browser.

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 -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:

<scripttype="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><bodystyle="margin: 0;" data-qml="qml/main.qml"><scripttype="text/javascript" src="/lib/qt.js"></script></body></html>

How to use with Gulp

See gulp-qmlweb package.

How to extend

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 workconstructor: function(meta){callSuper(this,meta);varself=this;// Managing propertiescreateProperty("var",this,"data");// creates a property 'data' of undefined type// creates a property 'name' of type string, with a default valuecreateProperty("string",this,"name",{initialValue: 'default name'});// Signalsthis.somethingHappened=Signal();// creates a signal somethingHappenedthis.somethingHappened.connect(this,function(){console.log('You may also connect to signals in JavaScript');});// Using the DOMfunctionupdateText(){vartext='';for(vari=0;i<self.data.length;++i)text+='['+data[i]+'] ';self.dom.textContent=text;// Updating the domself.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:

importMyModule1.3MyTypeName {
name:'el nombre'
data: [ 1, 2, 3 ]
onSomethingHappened:console.log(data)
}

Name		Name	Last commit message	Last commit date
misc		misc
src		src
tests		tests
.babelrc		.babelrc
.eslintrc		.eslintrc
.gitignore		.gitignore
.travis.yml		.travis.yml
AUTHORS		AUTHORS
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
codecov.yml		codecov.yml
gulpfile.js		gulpfile.js
karma.conf.js		karma.conf.js
package.json		package.json

Name		Name	Last commit message	Last commit date
misc		misc
src		src
tests		tests
.babelrc		.babelrc
.eslintrc		.eslintrc
.gitignore		.gitignore
.travis.yml		.travis.yml
AUTHORS		AUTHORS
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
codecov.yml		codecov.yml
gulpfile.js		gulpfile.js
karma.conf.js		karma.conf.js
package.json		package.json

Name		Name	Last commit message	Last commit date
misc		misc
src		src
tests		tests
.babelrc		.babelrc
.eslintrc		.eslintrc
.gitignore		.gitignore
.travis.yml		.travis.yml
AUTHORS		AUTHORS
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
codecov.yml		codecov.yml
gulpfile.js		gulpfile.js
karma.conf.js		karma.conf.js
package.json		package.json

Name		Name	Last commit message	Last commit date
misc		misc
src		src
tests		tests
.babelrc		.babelrc
.eslintrc		.eslintrc
.gitignore		.gitignore
.travis.yml		.travis.yml
AUTHORS		AUTHORS
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
codecov.yml		codecov.yml
gulpfile.js		gulpfile.js
karma.conf.js		karma.conf.js
package.json		package.json

Name		Name	Last commit message	Last commit date
misc		misc
src		src
tests		tests
.babelrc		.babelrc
.eslintrc		.eslintrc
.gitignore		.gitignore
.travis.yml		.travis.yml
AUTHORS		AUTHORS
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
codecov.yml		codecov.yml
gulpfile.js		gulpfile.js
karma.conf.js		karma.conf.js
package.json		package.json

Latest commit

History

Folders and files

Repository files navigation

JavaScript powered QML Engine

How to use

Add the library to your web page

Auto-load

How to use with Gulp

How to extend

History

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

JavaScript powered QML Engine

How to use

Add the library to your web page

Auto-load

How to use with Gulp

How to extend

History

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

JavaScript powered QML Engine

How to use

Add the library to your web page

Auto-load

How to use with Gulp

How to extend

History

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

JavaScript powered QML Engine

How to use

Add the library to your web page

Auto-load

How to use with Gulp

How to extend

History

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages