See the official repostory: https://github.com/qmlweb/qmlweb
Clone or download
Pull request Compare This branch is 327 commits ahead of JoshuaKolden:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
misc
src
tests
.eslintrc
.gitignore
.travis.yml
AUTHORS
LICENSE
README.md
bower.json
gulpfile.js
karma.conf.js
package.json

README.md

JavaScript powered QML Engine

Join the chat at https://gitter.im/qmlweb/qmlweb Build Status Coverage Status

npm Bower GitHub tag

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.

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:

<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

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',
  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);
  }
});

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

History

  1. git://anongit.kde.org/qmlweb, see Webapps written in qml not far from reality anymore,
  2. @JoshuaKolden/qmlweb,
  3. @Plaristote/qmlweb,
  4. @labsin/qmlweb,
  5. @arnopaehler/qmlweb.